views:

360

answers:

5

I'm busy introducing myself to jQuery by implementing a little system where onmouseover on an element causes a text balloon to pop up close to the element. I feel like I'm using too much vanilla JS here, so please suggest where I can improve and what is wrong with this code:

<head runat="server">
    <script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $('document').ready(function() {
            $('span.balloon').each(function() {
                this.style.display = "none";        
            });      

            $('span.ballooned').mouseover(function(event){
                if (event.currentTarget.attributes["balloonid"]) {
                    var blnArr = $("#" + event.currentTarget.attributes["balloonid"].value);
                    if (blnArr.length > 0) {
                        blnArr[blnArr.length - 1].style.display = "inline";                    
                    };
                };
            });
        });
    </script>
</head>
<body>
    <div>
        This is some text where I describe a <span class="ballooned" balloonId="bln-1">text field</span> and want to attach extra info to that phrase.
    </div>
    <span class="balloon" id="bln-1">nvarchar(8)</span>
</body>
+1  A: 
$('span.ballooned').mouseover(function(e){
  if ($(this).attr("balloonid")) 
    $("#" + $(this).attr("balloonid")).css('display','inline');
});
Thinker
+2  A: 
$('document').ready(function() {

    $('span.balloon').hide();

    $('span.ballooned').mouseover(function(event){
        if ( this.balloonid ) {
            var blnArr = $("#" + this.balloonid);
            if (blnArr[0]) {
                $( blnArr[blnArr.length - 1] ).css('display', 'inline');              
            };
        }
    });

});

... Not sure if that will work... I'm wondering: why are you using expando properties ("baloonid") - it's a bit obtrusive and messy.

J-P
be careful with this.baloonid, expando's like that aren't cross browser (I forget which browser bit me on this one, but it wasn't pretty!). .attr('baloonid') is safer
Dan F
why not just if (blnArr.length)
redsquare
Because [0] saves three characters.
J-P
but you happily create two jq objects...
redsquare
+5  A: 

First, let me say there is nothing wrong with using vanilla js, if you're sure it isn't browser dependent. The jQuery framework isn't intended to replace any and all javascript syntax. I think most people would say that jQuery is intended to 1) remedy a long standing issue of forcing developers to deal with a browser war we have no control over and 2) to simplify complex tasks that are regularly needed to meet the demands of the day.

That said, I would recommend you use jQuery's CSS functions to set the properties.

Spencer Ruport
I'm not all against using plain js, but I'd rather learn to use jQuery to the full, and invent some new wheels.
ProfK
+11  A: 
$(function() {
    $("span.balloon").hide();

    $("span.ballooned[balloonid]").mouseover(
        function() {
            var balloonid = "#" + $(this).attr("balloonid"); 
            $(balloonid).css("display", "inline");
        });
});
Joe Chung
+1 for the [balloonid] mention, that's a part of the selector syntax that is massively underused
Dan F
+2 for the selector tip, and for showing me $(this).
ProfK
+1 for [balloonid] also
gridzbi
+2  A: 

Part of the beauty of jQuery is that there's a plugin for anything you want to do. In the spirit of that, you should check out one of my favorite plugins: jQuery BeautyTips. It does balloons quite nicely.

Paolo Bergantino
Another jQuery plugin with similar functionality is clueTiphttp://plugins.learningjquery.com/cluetip/
piquadrat