Tag Archives: jQuery

jQuery UI Slider Pips: Enhancing jQuery Sliders with Labels and Pips Software & Sites 25 MAR 2015

The jQuery UI user interface library, built on top of the excellent jQuery JavaScript library, includes a pretty neat slider control that allows users to select a numeric value by dragging a handle with either the mouse or keys.

However, it is missing a few important things if you want to start using sliders in a little more user friendly, complex way – what it needs is pips (point dashes to indicate length/distance/value range) as well as labels.

Which is exactly why Simon Goellner (aka slimeydotme, or more accurately, slimey.me) went ahead and created the fantastic jQuery UI Slider Pips plugin to, as he puts it:

A plugin to extend the jQuery UI Slider control. This plugin adds “pips” to the slider for visual aid, as well as “labels” which the developer can customize.

It is full featured, well written, and particularly easy to add to any existing slider declaration. More importantly, it is very configurable, making it a must if you want to implement sliders in a more meaningful way.

Installation is as easy as downloading both the .js and .css files, and then running the code is little more than:

<div class="slider"></div>
$(".slider").slider().slider("pips");

(The default way to use the plugin – as shown above – is to call the pips method on an initialised slider. This will add the markers along the slider, and place the min/max values to the beginning/end of the slider).

Well worth a look in other words.

jquery ui slider pips example

Related Link: http://simeydotme.github.io/jQuery-ui-Slider-Pips/

jQuery UI Autocomplete: How to clear the Search Text after Selection Programming 24 MAR 2015

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. One of the useful widgets in the collection is the Autocomplete widget, which enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.

Easy to implement, works like a charm, the question then is how does one clear the search text after the user makes a selection from the autocomplete list?

Simply setting the value to ” in the select event function declaration won’t work out of the box, because the select event occurs before the field is actually updated – in other words, your change will be lost when the textbox is updated. To prevent this from happening, you essentially need to cancel the event to stop it from running to completion – in other words, return false.

So in practice, your declaration should look like this:

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
$(document).ready(function(){
var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags,
      select: function(event, ui) {
          alert(ui.item.value);
          this.value = "";
          return false;
      }
    });
});

And that is all there is to clearing the search term from the Autocomplete box after a user selects something!

pink convertible bug - volkswagen beetle

Related Link: http://jqueryui.com/autocomplete/

jQuery UI: How to Select All Text when the User clicks on the Autocomplete control Programming 20 MAR 2015

The jQuery UI toolbox gives you a lot of new controls to play around with if you are already using the awesome jQuery library, one of which it the very useful autocomplete control.

Essentially “Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. Any field that can receive input can be converted into an Autocomplete, namely, <input> elements, <textarea> elements, and elements with the contenteditable attribute.

By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.”

The problem arises when something is pre-populated in the autocomplete element, i.e. something had previously been selected. When you click on the control to start searching, your newly entered text simply appends on to the end of the existing text, resulting in a gobbledygook search!

To combat this we essentially need to select all text when the autocomplete box is called upon, and it turns out to do this we need to work with the mouse up event.

In practice, the code to achieve this select all text on entering the autocomplete search box looks like this:

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
$(document).ready(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    }).on('mouseup', function() {
              $(this).select();
          });
});

As you can see, we add the mouseup event monitor at input initialization, and with this now in place, every time the user clicks on the control any existing text is automatically selected – meaning that as soon as the user starts entering text, whatever was there previously will now be lost. Victory!

laptop click with mouse

Related Link: http://jqueryui.com/autocomplete/

jQuery: How to Break Out of an Each Loop Programming 16 MAR 2015

The ever so useful jQuery javascript library has a homegrown loop function entitled .each(), which allows you to iterate over a jQuery object, and at the same time execute a function for each matched element.

Very useful indeed.

However, sometimes you might need to break out of a loop early (for example, maybe your loop has the potential of carrying on forever – which obviously is not so great for your patiently waiting audience) – and this is how you do it:

To break a $.each() loop, you have to return false in the loop callback function. (Returning true is equivalent to continue in a normal loop, in other words it skips to the next iteration – exactly the opposite of what you are trying to achieve!)

An example:

$(document).ready(function(){
$('.lotsOfTheseClassesExist').each(function(i, item){
alert($(item).prop('id'));
return false; //exits the loop
});
});

So your break statement for a jQuery each() loop is literally return false.

girl in pink high heels and a black leotard with lots and lots of shiny hula hoops

jquery logo

Related Link: http://api.jquery.com/each/

jQuery: How to Check if an Element has Class ‘X’ or ‘Y’ Programming 15 MAR 2015

If you find yourself needing to check whether or not a particular HTML element has a specific class currently assigned to it, you’ll be pleased to know that the awesome jQuery javascript library has you covered with their ever so useful .hasClass function.

This function determines whether any of the matched elements are assigned the given class, returning true if the searched for class is in fact assigned to an element – regardless of whether or not that element has more than one class assigned to it. (Remember, HTML allows elements may have more than one class assigned to them – separated by a space in HTML notation.)

An example:

<div id="mydiv" class="foo bar"></div>
$( "#mydiv" ).hasClass( "foo" ); //returns true
$( "#mydiv" ).hasClass( "quu" ); //returns false

In other words, no need for splitting an element’s class attribute and then looping through the strings just to see if a particular class exists any more!

a lady with class - audrey hepburn

jquery logo

Related Link: https://api.jquery.com/hasclass/

DataTables: Disable Sorting on a Column Tips, Tricks and Tutorials 31 JAN 2014

datatables plugin logoDataTables is a fantastic jQuery-powered plugin that supercharges your ordinary HTML tables and as such is pretty much my de facto method for presenting tabular data.

I often include special ‘action’ columns in my table where I lump in all my row data manipulating buttons and thus don’t particularly want to allow DataTable’s column sorting option added to those columns. Thankfully disabling the sorting option on specific columns has now become particularly easy, thanks to the aTargets configuration option.

To achieve the column sorting function we make use of the aoColumnDefs configuration option to turn off the bSortable flag, using the aTargets label to control which columns the specified property definition applies to.

In practice:

$('#usersmobile').dataTable({
"aoColumnDefs": [{ 'bSortable': false, 'aTargets': [ 0,7,9 ] }]
});

Assuming my table has ten columns, this essentially turns off sorting for the first column, last column and the eighth column (remember, the column array is zero-indexed).

Related Link: http://datatables.net/

How to Trigger a jQuery UI Accordion Click Action Tips, Tricks and Tutorials 30 AUG 2013

jqueryui logoThe Accordion jQuery UI widget is a great way to present lots of data in a limited space through the use of collapsible panels.

If your panels are fairly large, or perhaps you have a quite a few of them in the accordion, then sometimes it would be nice to use a row of central links or buttons to trigger the collapsible pattern, basically saving the user the effort of scrolling all the way down the page to get to the last panel.

In other words you want to programmatically click a panel heading in order for it to show.

Thankfully, jQuery UI’s accordion API makes it a pretty simple task – essentially you just need to set the ‘active’ option to the desired index of the zero-indexed list of panels. In other words, if you have three panels and you want to open up the second panel, then you’ll need to set the active option to 1.

In practice – First, the HTML:

<div style="text-align:center;padding:5px;"><span class="activelink link">Active</span> | <span class="internallink link">Internal</span> | <span class="closedlink link">Closed</span></div>
<div id="accordion">
<h3>Active</h3>
<div>Bla bla bla 1</div>
<h3>Internal</h3>
<div>Bla bla bla 2 </div>
<h3>Closed</h3>
<div>Bla bla bla 3</div>
</div>

Now the JavaScript:

$(document).ready(function() {
                var myaccordion = $('#accordion').accordion();

                $('.activelink').click(function() {
                    $('#accordion').accordion("option", "active", 0);
                });
                $('.internallink').click(function() {
                    $('#accordion').accordion("option", "active", 1);
                });
                $('.closedlink').click(function() {
                    $('#accordion').accordion("option", "active", 2);
                });
            });

Solved.

Related Link: http://jqueryui.com/accordion/

How to Set a Cookie using jQuery Programming 27 AUG 2013

jquery-logoIf jQuery is your javascript manipulation library of choice, then you would be pretty pleased that developer Klaus Hartl took the time and whipped up his excellent jquery-cookie plugin, thereby making the act of setting or retrieving browser cookies in your jQuery JavaScript a snap!

To set the value of a cookie is pretty simple, just pass along a key and a value, and as expected, you can make it a little more verbose by including a selection of all the standard cookie stuff like expiry date, path, or domain.

In action:

$.cookie("mycookie", "on!");

//Additionally, to set a timeout of a certain number of days (10 here) on the cookie:
$.cookie("mycookie", "on!", { expires : 10 });

Note, if the expires option is omitted, then the cookie becomes a session cookie, and is deleted when the browser exits.

This snippet covers most of the options in setting up a cookie that are available to you:

$.cookie("mycookie", "on!", {
   expires : 10,           //expires in 10 days

   path    : '/',          //The value of the path attribute of the cookie 
                           //(default: path of page that created the cookie).

   domain  : 'jquery.com',  //The value of the domain attribute of the cookie
                           //(default: domain of page that created the cookie).

   secure  : true          //If set to true the secure attribute of the cookie
                           //will be set and the cookie transmission will
                           //require a secure protocol (defaults to false).
});

To read back the value of the cookie:

var cookieValue = $.cookie("mycookie");

//You may wish to specify the path parameter if the cookie was created on a different path to the current one:
var cookieValue = $.cookie("mycookie", { path: '/view' });

To delete a cookie:

$.removeCookie("mycookie");

Right, that should now be enough to get you up and running!

Related Link: https://github.com/carhartl/jquery-cookie

jQuery: How to Test if a div is Visible Programming 17 JUL 2013

jquery-logoThe wonderful jQuery library actually makes it pretty easy for us to test whether or not a div (or pretty much any other element for that matter) is currently visible, by providing us with a ‘:visible’ selector.

Basically elements are considered visible by jQuery if they consume space in the document, meaning that visible elements have a width or height that is greater than zero. Combining this with the .is filter forms the basis for our test.

In practice:

//assuming a div with id "div1"
$('#div1').show();
alert ($('#div1').is(':visible')); //true
$('#div1').hide();
alert ($('#div1').is(':visible')); //false

Nifty. As always, play with around with it yourself in the awesome JSFiddle online JavaScript playground.