0

With and without jquery

Posted by admin on Feb 23, 2009 in downloads, javascript, jquery, technology

In this specific example, creating a simple tooltip, list of goodies gained out of jquery 1.3:

  • using inbuilt position() property of jquery to determine the element’s current location.
  • comfortably sitting on top of the API (jquery) which cares of cross-browser support (addEventListener, attachEvent, offsetParent, offsetTop)
  • chaining concept (eg: $(’#link1′).mouseover(showTooltip).mouseout(hideTooltip);)

I sat down to quickly put together a demo to show how easy and efficient it is to use the ajax libraries instead of making dom manipulation on our own.

Tooltip without JQuery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- @author: prabhakar doraisamy. 2/3/09 version 1.0 -->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script type="text/javascript">
            function addEventSimple(obj, evt, fn){
                if (obj.addEventListener)
                    obj.addEventListener(evt, fn, false);
                else
                    if (obj.attachEvent)
                        obj.attachEvent('on' + evt, fn);
            }
           
            function removeEventSimple(obj, evt, fn){
                if (obj.removeEventListener)
                    obj.removeEventListener(evt, fn, false);
                else
                    if (obj.detachEvent)
                        obj.detachEvent('on' + evt, fn);
            }
           
            function init(){
                var tooltip = document.getElementById('tooltip');
                var link1 = document.getElementById('link1');
                var text = "text here";
                tooltip.style.display = 'none';
               
                function showTooltip(e){
                    tooltip.style.position = "absolute";
                    tooltip.style.display = "inline";
                    tooltip.style.left = findPosX(e) + 5 + "px";
                    tooltip.style.top = findPosY(e) + 20 + "px";
                }
                function hideTooltip(){
                    tooltip.style.display = "none";
                }
               
                addEventSimple(link1, 'mouseover', function(){
                    showTooltip(this)
                });
                addEventSimple(link1, 'mouseout', function(){
                    hideTooltip(this)
                });
            }
           
           
            function findPosX(obj){
                var curleft = 0;
                if (obj.offsetParent)
                    while (1) {
                        curleft += obj.offsetLeft;
                        if (!obj.offsetParent)
                            break;
                        obj = obj.offsetParent;
                    }
                else
                    if (obj.x)
                        curleft += obj.x;
                return curleft;
            }
           
            function findPosY(obj){
                var curtop = 0;
                if (obj.offsetParent)
                    while (1) {
                        curtop += obj.offsetTop;
                        if (!obj.offsetParent)
                            break;
                        obj = obj.offsetParent;
                    }
                else
                    if (obj.y)
                        curtop += obj.y;
                return curtop;
            }
           
            addEventSimple(window, 'load', init);
        </script>
        <link rel="stylesheet" href="tooltip.css" type="text/css"/>
    </head>
    <body>
        <a href="#" id="link1" class="link1">tooltip supported</a>
        <div id="tooltip" class="tooltip">
        </div>
    </body>
</html>

Here is the demo.

With JQuery 1.3:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script type="text/javascript" src="lib/jquery/jquery-1.3.1.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#tooltip').hide();
                $('#link1').mouseover(showTooltip).mouseout(hideTooltip);
               
                function showTooltip(){
                    $('#tooltip').load("tooltip_content.html");
                    pos = $('#link1').position();
                    $('#tooltip').show('slow').css({left: pos.left + 10, top: pos.top + 20, position: 'absolute'});
                }
                function hideTooltip(){
                    $('#tooltip').fadeOut('slow');
                }
            });
        </script>
    <link rel="stylesheet" href="tooltip.css" type="text/css"/>
    </head>
    <body>
        <a href="#" id="link1" class="link1">tooltip supported</a>
        <div id="tooltip" class="tooltip">
        </div>
    </body>
</html>

Here is the jquery demo.
Download the source files of both the above examples in .zip.

Tags: , , ,

Copyright © 2010 my presence… All rights reserved. Prabhakar Doraisamy.