Webdevelopment at huuah.com » jQuery

Basic jQuery div rotator

js - huuah — Fri, 26 Mar 2010 21:54:24 +0000

So – how do one make a simple rotations function in jquery? There are many ways to do this, so I will just demonstrate one of them here:

Example code for the jQuery DIV rotator:


Item 1
Item 2
Item 3
Item 4

And this will output 4 divs as shown here:

Item 1

Item 2

Item 3

Item 4

Nothing exciting about this, really. So – lets add the forward and backward button for the shifting of visible divs.

Make the items rotate

Go Left


Item 1
Item 2
Item 3
Item 4


Go Right

There is now added 2 buttons/divs/textsfield – a left one and a right one. All we have to do, is make the buttons change which div is visible. The easy way to do this, is by changing the class name of the div and with CSS control the visibility and format.

To register a click event on the left and right buttons, we have to use the click()-function in jQuery.

That can look like this:

Javascript:

     // trigger the mouse click even
     $(".goleft").click( function(e) {
        // get the current active element
        var $active = $(".active");
        // get the previous element or, if no previous then get the last item in the focusitem-class.
        var $next = $active.prev().length ? $active.prev() : $(".focusitem:last");

        // set the visibility of the active and notactive classes.
        $active.removeClass('active');
        $active.addClass('notactive');
        $next.addClass('active');
        $next.removeClass('notactive');
    });

CSS:

Item 1
Item 2
Item 3
Item 4

Result:

Go Left

Item 1

Item 2

Item 3

Item 4

Go Right

How it works

The jQuery rotation code gets activated as soon as a user clicks the buttons. It find the active element, and the next or previous element corresponding to which buttons is activated and the toggles the active and notactive classes on the focusitems.

Complete jQuery code:

(document).ready(function() {

    $(".goleft").click( function(e) {
        var $active = $(".active");
        var $next = $active.prev().length ? $active.prev() : $(".focusitem:last");

        $active.removeClass('active');
        $active.addClass('notactive');
        $next.addClass('active');
        $next.removeClass('notactive');
    });

    $(".goright").click( function(e) {
        var $active = $(".active");
        var $next = $active.next().length ? $active.next() : $(".focusitem:first");

        $active.removeClass('active');
        $active.addClass('notactive');
        $next.addClass('active');
        $next.removeClass('notactive');
    });

});

Complete CSS for the above example:

.active {
    display: block;
    width: 100px;
    float: left;
}
.notactive {
    display: none;
}

.goleft, .goright {
    cursor: pointer;
    width: 100px;
    float: left;
    border: 1px solid;
}

Now what?

For more fancy display that my example shows, try putting some images ind the focusitem and make some nice arrows for the go left and right buttons. The usability of the rotator will improve a lot, by making some easy layout adjustments.

Obvious expansions for this kind of rotator would be a more fancy shift/glide between active divs or perhaps loading each element with Ajax, but this is intensionally not covered in this post.

Getting position from jQuery UI sortable

js - huuah — Sun, 22 Nov 2009 11:07:43 +0000

The jQuery UI sortable widget offers a great interface for listing and moving element around.

I have been working on a small project of mine and figured that the sortable widget could be a great feature. I then started to output the list and the element that should be draggable like this:

My HTML list


  
    box no 1
  
  
    box no 2
  
  
    box no 3

My jQuery code to enable the sortable widget and for getting a serialized result when an element has been dragged around:

$(document).ready(function() {
    $("#sort1").sortable({
        opacity: 0.6,
        update: function(event, ui) {
            var info = $(this).sortable("serialize");
            $("#sort1output").html(info);
        }

    });
});

Example (try dragging a box up or down):

box no 1
box no 2
box no 3

Serialized output (updated when a box is dragged):Output will be shown here

So. Nothing. No output what so ever.

I have spend several hour researching this problem, because the documentation on jqueryui.com lists that the serialize and toArray events should return output.

And then. Finaly. I stumpled upon a note regarding the id name of the element that gets dragged. I have seen no documentation about this and was quite puzzled. I digged some more into this id-hint and realized that the element that gets moved around, has to have a unique id tag ending with a number like this: “element_2″.

The working code will then be:


  
    box no 1
  
  
    box no 2
  
  
    box no 3

box no 1
box no 2
box no 3

Serialized output (updated when a box is dragged):Output will be shown here

I hope this tip is helpfull.

jQuery and dropdown / select boxes

js - huuah — Sat, 24 Oct 2009 10:54:39 +0000

With jQuery it is quick and easy to access and modify elements in a select dropdown box. There are of course several ways of doing thing and I will try to cover most of them here.

Quicklinks:
The test setup
Get the selected value from the select / dropdown box
Set the selected value
Insert new options and values in the dropdown box
Removing an entry from the select box
Disable and enable options
The code

The test setup.

For the following examples I will use a dropdown / select box like this:

The HTML-code for the dropdown is where basic:

Get the selected value from the select / dropdown box.

When a value is selected, it could be nice to use the value for something and the first step to doing this, is to receive the value. This is actually very simple to do:
dropdown1:

button1:

Code:

    $("#button1").click( function() {
        alert("The selected value is: " + $("#dropdown1").val() );
    });

Here I have used the val()-function on the dropdown box the receive the value for the selected element and it will output the content of the “value”-parameter on the select-box.

If you would rather have the visible text (ie. 10 Apples or 5 Oranges) outputted, you will have to use the html()-function instead. It’s a bit more tricky, as you should only get the content of the selected value and not the entire select-box.
To do this, we have to do a combination like this:
button2:

Code:

    $("#button2").click( function() {
        var selectedvalue = $("#dropdown1").val();
        alert("The selected value is: " + $("#dropdown1 option[value="+selectedvalue+"]").html() );
    });

Another and more simple way of getting the text from the selected element could be:

    $('#dropdown1 :selected').text();

Set the selected value.

Setting the selected value is very easy. All you have to do, is use the val()-function:
dropdown2:

button3:
button4:

code:

    $("#button3").click( function() {
        $("#dropdown2").val("oranges");
    });
    $("#button4").click( function() {
        $("#dropdown2").val("bananas");
    });

Insert new options and values in the dropdown box.

If the content of the dropdown are depending on other fields, it is often necessary to change or insert new values to a dropdown box.
This can be done by appending new

button5:
button6:

Code:

    $("#button5").click( function() {
        // insert new option at the bottom of the dropdown box
        $("#dropdown3").append('');
    });
    $("#button6").click( function() {
        // insert new option at the top of the dropdown box
        $("#dropdown3").prepend('');
    });

Removing an entry from the select box.

Remove options is very easy. All you need is knowing which values to remove:
dropdown4:

button7:

Code:

    $("#button7").click( function() {
        $("#dropdown4 option[value='apples']").remove();
    });

Disable and enable options.

If some of the options in the dropdown is depending on other values, it is sometimes nice to enable and disable entries on the fly.
dropdown5:

button8:
button9:

Code:

    $("#button8").click( function() {
        $("#dropdown5 option[value='oranges']").attr("disabled", "disabled");
    });

    $("#button9").click( function() {
        $("#dropdown5 option[value='oranges']").removeAttr("disabled");
    });

The code.

The complete jQuery code with the above examples, can be downloaded here

jQuery, accessing and modifying form elements

js - huuah — Wed, 29 Jul 2009 20:43:58 +0000

When working with HTML Forms, it can in some situations improve the usability of the site, if the content of elements can change and reflect the options, that the visitor made in the previous fields.

The most common form element are input, checkbox, radio buttons, textarea and dropdown boxes and I will try to cover them all, even though the code might be the same or very much alike.

Input boxes

Fetching content is done with:

// fetching the value
$("#inputbox").val();

Try it:

Setting new content is done with:

// setting a new value
$("#inputbox").val("We have now changed the text");

Try it:

Check boxes / Radio boxes

Both check boxes and radio boxes works the same way.

Field 1
Field 2
Field 3

Checking all fields:

// loop through each checkfield
$("#elementID input:checkbox").each( function() {
  // set checked=checked
  $(this).attr("checked", "checked");
});

Try it:

// loop through each checkfield
$("#elementID input:checkbox").each( function() {
  // if field is checked, then uncheck or the other way around
  this.checked ? $(this).attr("checked", "") : $(this).attr("checked", "checked");
});

Outputting the checked status for each field:

// temporary variable for output purposes
var status = "";
// loop through each fieldfield
$("#elementID input:checkbox").each( function() {
  // save field value and checkstate in variable
  status += $(this).val() + " is " + this.checked + ",  ";
});
// make a popup box with the result
alert(status);

Try it:

Textarea

Textarea sample text
Fetching content is done with:

// fetching the value
$("#textarea").html();

Try it:

Setting new content is done with:

// setting a new value
$("#textarea").html("We have now changed the text");

Try it:

Dropdown boxes

Fetch the value if the dropdown box:

$("#selectbox").val()

Try it:

Selecting option 2 in the downdown box:

// loop through options
$("#selectbox option").each( function() {
  // if the value is equal to 'select2', then select it
  if ($(this).val() == "select2") {
    $(this).attr("selected", "selected");
  }
});

Try it:

Selecting option 3 in the downdown box:

// loop through options
$("#selectbox option").each( function() {
  // if the value is equal to 'select3', then select it
  if ($(this).val() == "select3") {
    $(this).attr("selected", "selected");
  }
});

Try it:

There you go. A small demonstration of how to access form elements. There above examples is just one way of doing it. There are other ways as well.

Howto make a jQuery menu plugin

js - huuah — Tue, 28 Jul 2009 10:10:58 +0000

If you want to reuse your jQuery code, it can be a good idea to make the code into a jQuery Plugin. This makes it easier to use on different elements or even to distribute it.

Demonstration:
I have made a small simple 1 level menu for this demonstration. If you hover you mouse on Menu 1 or Menu 3 you will see a submenu sliding down. Menu 2 has no submenu and will therefor display nothing.

How: The HTML
The HTML is pretty much a standard list like this:


    Menu 1
        
            Menu 1.1
            Menu 1.2
            Menu 1.3
        
    
    Menu 2
    
    Menu 3
        
            Menu 3.1
            Menu 3.2
            Menu 3.3

How: The basic of a plugin
The very basic setup for a jQuery Plugin is the following couple of lines, where I am creating a function called menu(), which can be called on an element.:

(function($) {
    $.fn.menu = function() {
        ... javascript code goes here...
    }
})(jQuery);

To activate the plugin, you will have to call the menu() function on an element, which can be done like this:

$(document).ready(function() {
   $().ready(function() {
        $('#nav').menu();
   });
});

The plugin has now been activated and the code within the function will be run on the #nav element.

How: Making the plugin do something
This plugin is going to make a submenu slide down when the parent element is being hovered by the mouse. I will not go into details of the code other than the comments I have made below:

(function($) {
    $.fn.menu = function() {
        // make sure there is a -submenu. If not - it will fail
        $(this).children("li").append('');
        // add classes to the  and 
        $(this).children("li").addClass("mmmenu");
        $(this).contents().find("ul").addClass("mmsub");

        // ready-state to prevent looping
        var ready = true;
        // when hover do this
        $("li.mmmenu").mouseenter(function() {
            // if plugin is ready, then continue
            if ( $(this).children("ul.mmsub").is(':visible') == false && ready == true ) {
                ready = false;
                // hide all submenus
                $("ul.mmsub").hide();
                // display the selected submenu
                $(this).children("ul.mmsub").slideDown(500, function() {
                    ready = true;
                });
            }
        });
    }
})(jQuery);

How: Passing options to the plugin
The above code will slide down the submenu at a speed of 500ms. But what if I would like to override this value? Lets add some options to the code as well:

(function($) {
    $.fn.menu = function(options) {
        var defaults = {
            speed: 500,
        }; 

        var options = $.extend(defaults, options);
        ...
                $(this).children("ul.mmsub").slideDown(options.speed, function() {
                    ready = true;
                });
        ...
    }
})(jQuery);

The code now support options. There is a default option, where speed is set to 500ms. and the slideDown-function is now using the options-variable.

To set the slide down speed to ie. 2000ms, then pass the option like this:

$(document).ready(function() {
   $().ready(function() {
        $('#nav').menu({speed: 2000,});
   });
});

There you go. If you would like to download the mmmenu-plugin, just click here.

jQuery and iframe manipulation

js - huuah — Thu, 16 Jul 2009 10:52:48 +0000

I’ve been experimenting with some iframe-manipulation with jQuery, but this was not as easy as I have hoped for. There is not much help on jquery.com and a Google search just found others with the same kind of problem.

My setup is very basic. An iframe loading a page like this

In the page where this iframe is being loaded, I have included the jquery.min.js and an extra .js-file for my code.

First attempt was to try the examples found on Google. For testing purposes I wanted to set a red background color on every

inside the iframe.

var frame = $("#myframe")[0].contentDocument;
$("div", frame).css("background-color", "red");

Nothing happens.

When testing new things I often use alert-boxes for test-output, so I tried inserting an alert-box:

alert("trying a red color");
var frame = $("#myframe")[0].contentDocument;
$("div", frame).css("background-color", "red");

And hey! When pushing the alert-box, the divs inside the iframe gets a red background-color. Or at least they do in Firefox 3.0.11 (still a no-go in IE8). Strange.

Test 2:

$("#myframe").contents().find("div").css("background-color", "red");

Nothing! Blank!

Oh well. Why not try the alert-box again:

alert("trying a red color");
$("#myframe").contents().find("div").css("background-color", "red");

Hmm.. this seems to work in both Firefox 3.0.11 and Internet Explorer 8 IF you don’t push the alert-box until the iframe is finished loading.

So perhaps it’s all about not accessing the iframe before the contents has been loaded. So I tried wrapping the whole thing in a ready-function like this:

$("#myframe").ready(function () {
...
}

That did not help at all.

Well. Google google google. And bingo. There’s a plugin for jQuery called frameReady and this does the trick.

Third and final test:
Include the jQuery.frameReady.js in the main page and enter this code:

$.frameReady( function() {
    $("div").css("background", "red");
  },
  "framename"
);

This loads the iframe and sets a red background color on every div inside the iframe. Tested in IE8 and Firefox 3.0.11.

Conclusion:
Use the frameReady plugin for jQuery when manipulating with iframes.

Update: If you’re having trouble getting this to work, please check the source code for frameReady and verify that the hardcoded path for /js/jQuery.js matches your site configuration!

jQuery and Flot demo

js - huuah — Wed, 08 Jul 2009 19:24:28 +0000

I previously posted some info about plotting data with jQuery and Flot and I have now set up a small demonstration:

The data value below are 100% random generated numbers, but they will simulate data from a database (or anything else for that matter). It consists of an array, where the first parameter the a Unix timestamp (multiplied by 1000) and the second parameter is the value to be drawed.

Push the generate button to get a new dataset.

You can also try to change some of the values, to see that happens. Just push the update button below, to have your changes updated.

The graph:

The code to output the graph is:

        var options = {
            xaxis: {
                mode: "time",
                timeformat: "%y/%m/%d %h:%M"
            },
            lines: {
                show: true,
            },
        };

        var data = [];
        data = eval($("#randomnumber").val());
        $.plot($("#livejquery"), data, options);

I have set a few options (goto the Flot API for futher options) – the xasis should convert the unix timestamp to a human readable format and the graph should output a line. I am only using the eval()-function because I have to convert the string input from the textarea (class #randomnumber) to an array.

Plotting user statistics using jQuery and flot

js - huuah — Sun, 28 Jun 2009 20:55:01 +0000

Hit statistics from visiting website users stored in a database. Then what? How do I list these log entries in a very simple way. The only important thing for now, is when the visitor came by the site.

The database stores a timestamp and which page the user visited. This can mean a massive amount of data and I don’t know how this first attempt will perform. At the moment, there is a relative small amount of data, but in time this should build up and if the performance starts lacking, I will take a look at it again.

To output the data to the user I will be using jQuery and the flot graphic tool. Before starting drawing I how to figure out, how to group my visitors. There no point in plotting a bunch of ’1 hits’ – is will make no sence, since the graph never will go above 1 hit pr entry. The data should therefor be grouped and I’m going to use the GROUP BY function i MySQL.

Which interval should the data be grouped in? I don’t know – it probably depends on the data. In my case I will group it into 5 minuttes (300 seconds) interval and this in done here:

SELECT tstamp, count(tstamp) as hits FROM visitorlog GROUP BY FLOOR(tstamp/300)

This gives me an output like this:

1244825201 7
1244826384 8
1244826803 16
1244826904 3
1244827259 1
1244827506 10

And now all I have to do, is plot the numbers using flot. The output will be generated from PHP and will end up looking like this:

$(document).ready (function() {

var data = [
  [[1244825201*1000,0], [1244825201*1000,7]],
  [[1244826384*1000,0], [1244826384*1000,8]],
  [[1244826803*1000,0], [1244826803*1000,16]],
  [[1244826904*1000,0], [1244826904*1000,3]],
  [[1244827259*1000,0], [1244827259*1000,1]],
  [[1244827506*1000,0], [1244827506*1000,10]],
];
$.plot($("#chartdiv"), data);

});

Because I want a the graph to draw pins I will generate a line from point 0 to the number of hits in the given time period. The unix-timestamp is multiplied by 1000 to comply with the flot documentation.

This will generate a graph, which will be insert in the HTML ID chartdiv.

Result:

Remember – this is just a simple demo. With more data added (and better timestamps) it will be a lot better

Resources:
jQuery
flot
flot examples
flot API