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: , , ,

 
0

Intelligent Whiteboard

Posted by admin on Jun 30, 2008 in new releases, technology, videos

Bill Gates demonstrates Touch Wall (CEO Summit 2008, Redmond, Wash. May 14, 2008). The reason why it’s impressive is not because of that fancy hardware - touch-screen with some sensors like earlier Microsoft’s Surface technology (which is primarily a hardware gimmick). This demo is much more than hardware!

Look closely at the application he is interacting with! It’s a unified model of the data presentation softwares from Microsoft Office (powerpoint, word, visio, interactive multimedia - all office tools put together working seamlessly in a non-linear way). My guess is, this is running on a giant presentation platform (must be more powerful than silverlight or maybe silverlight’s next gen) - should have been built from scratch, made to be capable of aggregating all kinds of documents working with eachother (visio, ppt, doc, multimedia).

 
0

Forcing synchronization

Posted by admin on May 3, 2008 in technology, videos

This simple demo by a student from Lancaster University, stopped me to think.
It’s about forcing synchronization into periodic systems through coupling crossover.

Below is also the excerpt from Christiaan Huygen’s work who first observed this synchronization between loosely coupled pendula (on 1665).

loosely coupled pendula Christiaan Huygen

Tags: ,

 
0

To play music you’ll love - and nothing else.

Posted by admin on Feb 28, 2008 in my life, technology

I recently switched from lastfm to Pandora founded by Tim Westergren (based on Music Genome Project, in it’s own words, ‘the most sophisticated taxonomy of musical information ever collected’) after lot of frustrations with lastfm’s interface and unnecessary complexities with the page navigations. I think this smart radio concept has been successfully executed by Pandora compared to other already-established players including Rhapsody, Napster, slacker.

Pandora edges out other internet radios through its simplicity in its UI, smartness in picking the next right music based on deep musical understanding from its big collection of catalogue titles. I also live feed my blog with my most recently listened songs from Pandora under ‘Listening’ section.

 
0

notetaking from whiteboard - a click away

Posted by admin on Feb 21, 2008 in technology

the concept is same as any other internet note-taking tool , but the handwriting recognization and image-text conversion technology is impressive.
http://www.evernote.com/video/

 
0

Inbox | xobnI

Posted by admin on Feb 15, 2008 in technology

Xobni - a nice inbox organizer for outlook. its better than any search add-ons (including lookout, gDesktop) that i’ve had so far. http://www.xobni.com

i have few invites left, ask me if you need.

 
0

Yahoo! Live

Posted by admin on Feb 13, 2008 in technology

check out http://live.yahoo.com - you just need a webcam and a browser and ready to go live!

Tags: , ,

 
0

Laszlo is about XML, not about Flash

Posted by admin on Apr 5, 2005 in flash/flex, technology

I know I have talked already about Laszlo, but I should say this article caught me. “Laszlo is XML technology, not Flash technology” by David Temkin that explains how the Laszlo XUL server toolkit differs from Macromedia’s XUL server offering (aka Flex/MXML).

David asks which one is your choice?
Macromedia’s MXML which is tightly bound only to the Flash player and authoring tool?.
Microsoft’s upcoming XAML, which is tightly bound to Microsoft’s Avalon/WinFX client framework?
Or Laszlo’s XML language and framework which is self-contained (no need to use ActionScript APIs, Flash MX, C#, “code behind,” or any other external language) and designed expressly for development of rich interactivity to deliver this application into Macromedia (Flash), Microsoft (Longhorn/Avalon), and Java/J2ME runtimes or anyother powerful client that may arise in future.

David is the CTO of Laszlo Systems so don’t expect a fair and balanced story. Full story here.

What’s your take on it? Do server-side XUL toolkits have a future?

 
0

Flex and .Net

Posted by admin on Apr 7, 2004 in flash/flex, technology

For those who are watching the flexcoders mailing list, this information maybe a repitition. For all others, Something to note is that some .NET web services are written with multiple outputs. The one I recently saw had a WSDL signature like this:

<message name=”Login”>
<part name=”UserId” type=”xsd:string” />
<part name=”Password” type=”xsd:string” />
<part name=”TokenResponse” type=”xsd:anyType” />
</
message>
<
message name=”LoginResponse”>
<part name=”Result” type=”xsd:int” />
<part name=”TokenResponse” type=”xsd:anyType” />
</
message>

In this case there are two “outputs”, Result and TokenResponse. Unfortunately the Flex WebService library does not deserialize multiple outputs correctly, so only the contents of Result end up getting deserialized. If you want to use a service like this you’ll need to set resultFormat=”xml” on your operation tag and handle the parsing of the XML yourself.

Macromedia Team will be looking into fixes for this in a future version.

 
0

Flex released today

Posted by admin on Mar 29, 2004 in flash/flex, new releases, technology

Macromedia released Flex today, the biggest bet of the family. Flex is the enterprise level presentation server that generates SWF to the Flash player through MXML, same as HTML gets rendered by browser. Flex has the biggest product team and has had the longest development cyle of any Macromedia product that I am aware of.
With the release of Flex, Macromedia takes its first step to tussle with Microsoft’s Longhorn.
Hear about Flex technology from these places for an introduction if you are new to Flex.
1. Browse through the OnDemand Seminars for Flex introduction, you will find a good intro on Flex technology.
2. Breeze presentation gives you the overview and demo of the Flex product.

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