Code Answer: Critique on jQuery Use

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>

From stackoverflow

$('span.ballooned').mouseover(function(e){
  if ($(this).attr("balloonid")) 
    $("#" + $(this).attr("balloonid")).css('display','inline');
});

```
$('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.

Dan F : 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

redsquare : why not just if (blnArr.length)

J-P : Because [0] saves three characters.

redsquare : but you happily create two jq objects...
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.

ProfK : I'm not all against using plain js, but I'd rather learn to use jQuery to the full, and invent some new wheels.

$(function() {
    $("span.balloon").hide();

    $("span.ballooned[balloonid]").mouseover(
        function() {
            var balloonid = "#" + $(this).attr("balloonid"); 
            $(balloonid).css("display", "inline");
        });
});

Dan F : +1 for the [balloonid] mention, that's a part of the selector syntax that is massively underused

ProfK : +2 for the selector tip, and for showing me $(this).

gridzbi : +1 for [balloonid] also

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.

piquadrat : Another jQuery plugin with similar functionality is clueTip http://plugins.learningjquery.com/cluetip/

Code Answer

Thursday, April 28, 2011

Critique on jQuery Use

0 comments:

Post a Comment

Blog Archive