Tag Archives: jquery ui

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

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/

PHP: How to Implement jQuery Autocomplete using a JSON datasource CodeUnit 12 AUG 2011

The jQuery UI library is really useful in that it packages a number of jQuery-driven interactions, widgets, effects and utilities into a single package, ready for smooth integration and even easier deployment. One of the many available widgets in the jQuery UI library is Autocomplete, which makes adding autocomplete functionality to an ordinary text searchbox a doddle!

Let’s have a look how to implement this when using PHP to provide us with a separate JSON datasource then, shall we?

First, if your web page contains a normal textbox within a form that is used to conduct searches, you need to attach the jQuery UI autocomplete functionality with the following code snippet:

$('#datafilter-search-textbox').autocomplete({
            source: "ajax-search-autocomplete.php",
            minLength: 2});

Note the minLength setting of 2. It is often useful to set the number of characters needed to initiate the search so as to minimize the possible amount of search return values for efficiency’s sake.

As you can see, we have prompted the autocomplete widget to make use of a file called ajax-search-autocomplete.php as a datasource. This file should look something like this:

//… all your database setup stuff
$searchresults = array();
$searchterm = (key_exists('term', $_GET)) ? $_GET['term'] : '';

if (strlen($searchterm) > 0) {
    $results = mysql_query("SELECT `name`  FROM `myTable` WHERE `name` LIKE '%$searchterm%' ORDER BY `name` ASC");
    while ($result = mysql_fetch_assoc($results)) {
        $searchresults[] = $result['filter-name'];
    }
}
$searchresults = array_map("html_entity_decode_custom", $searchresults);
$searchresults = array_map("get_correct_utf8_mysql_string", $searchresults);
echo json_encode($searchresults);

And that is it. Load it up and try it out, and hey presto, you now have a nifty autocomplete that took you almost no time to implement! :)

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

jQuery Draggable, Droppable and Sortable User Interface not working in Internet Explorer 9 (IE 9) CodeUnit 18 APR 2011

I received a bit of a nasty shock when by sheer chance, one of the project managers updated their machines and got Internet Explorer 9 installed in the process, only to instantly come back to me and announce that the drag and drop features on our web project no longer worked – at all.

A quick look around, and indeed all the draggable, droppable and sortable interfaces that come with our use of the awesome jQuery and jQuery UI libraries were all of a sudden not working under IE 9. The other browsers, IE 8 included, still worked fine, but not this new beast of a browser.

Thankfully though, a quick look about on the jQuery UI support forums yielded the fact that a) this was indeed a bug that has long been identified, and b) that the bug fix ticket around it has since been resolved and closed.

See http://forum.jquery.com/topic/jquery-ui-does-not-work-on-ie9 .

So how do you sort out the problem then? Well if you can, you need to upgrade to the latest version of the jQuery UI library. The fix has now been in since version 1.8.6, so anything higher will resolve the issue.

And now for a big sigh of relief :)

Related Link: http://forum.jquery.com/topic/jquery-ui-does-not-work-on-ie9

jQuery UI: Remember Your Open Tab CodeUnit 25 NOV 2010

The jQuery UI library is a brilliant collection of official jQuery UI widgets and effects, one of them being the extremely useful Tabs widget.

Tabs allows you to shorten a page by placing bits of a page’s content into their own little “tabs”, which can be access by clicking on the tab header. A brilliant space saving mechanism and one that has become quite commonplace in applications these days.

Sometimes it is nice to remember what tab you currently have open so that when you travel to some other part of a site and then return to your original page, you want it to remember which tab you had currently selected.

Thankfully achieving this with jQuery UI’s tabs implementation is particularly easy.

Say hello to good old browser cookies.

To implement this built in functionality, you will need to include over and above the required jquery-ui.js and jquery.js libraries, the jquery.cookie.js plugin at the head of your page. This simplifies interaction with browser cookies and also provides a path for the tabs widget to use in order to save its state.

With this down, enabling tab state caching is a simple as declaring the tabs with a valid “cookie” option declaration:

$("#tabs").tabs({
cookie: {
name: 'tabs',
expires: 1
}
});

And this it. Simple as pie really. Note the ‘name’ option passed to the cookie object. This is important as it allows you to have different cookies for your different tabs instantiations on the site.

Useful, eh? ;)

jQuery: How to Expand an Accordion for Printing CodeUnit 05 MAY 2010

The jQuery UI library brings with it a host of cool effects and elements to apply to your project, one of which is the pretty cool accordion effect that basically turns a whole lot of sequential divs into an “accordion” – allowing you to click on a header to expand the selected div while the reset of them contract to hide away.

I did however come across a little problem that needed solving the other day, namely that when printing an accordion page, only the currently open, in other words visible, accordion segment prints, leaving the rest of the closed segments hidden on the final printed page.

Obviously this isn’t particularly useful when you are printing something out and needs to be addressed – which it turns out to be a pretty simple thing to achieve after all.

So let’s look at the code to expand and print our accordion page then shall we?

$('.printdocument').click(function(){
	var answer = confirm ("Do you wish to print this page's contents?");
	if (answer) {
		$('.ui-accordion-content').show();
		$('.ui-state-active').addClass('ui-state-default').removeClass('ui-state-active');
		print(document);
		$('.ui-accordion-content').hide();
	}
});  

The function above is called when the user clicks on the print button or whatever other element you have associated with the print functionality. The first step is a simple modal dialog to ask whether or not the user really wishes to print the current page. If we get a positive answer, when then move to dealing with the accordion, in other words expanding it so that all the information elements are showing.

To do this is a simple matter of grabbing all content divs and forcing them to show. Yup, as simple as that. The second line attempts to make the page look a little neater by changing the currently open header to look the same as all the closed headers – just for consistency of look of course.

We then run the javascript print function which initiates the browser’s print functionality and after that action has been done and control is handed back to the browser tab, we go and close all the accordion segments to make the page all neat and tidy again.

Done.

So as you can see, it is a pretty simple matter of expanding all those neat little jQuery UI accordions of yours after all! :)