jQuery UI Slider Plugin with label highlighting
Posted on August 22nd, 2010, by LeslieThis is a two way slider plugin, build using jQuery UI library. It can accept a range of integer values and display as labels above the slider.
The cool thing about this is that the range, which is currently selected by the user, is highlighted and the values which are out of range are displayed as inactive faded out.
Thus it lets the user easily identify what range of values are selected easily. A highly intuitive approach for interfaces involving filtering.
Plugin Code
/***
jQuery UI Slider with labels plugin v1.0
Created by Leslie Varghese
Created on: 22 Aug 2010
Dependency:
jQuery library 1.4.2
jQuery UI library 1.8.4 with slider.
Description:
jQuery slider plugin with labels.
This plugin adds numerical labels above the slider and highlights the selected value range.
Along with all the parameters and events supported by jQuery UI Slider, this plugin also has facilities of adding prefix and postfix values to the labels with parameters like {prefix:'PREFIX VALUE'} and {postfix:'POSTFIX VALUE'}
Eg. If you want to append a $ sign with the labels you can do it by
$('#slider').sliderwithLabel({postfix:'$'});
*/
(function($){
$.fn.extend({
sliderWithLabel: function(options){
var defaults = {
range: true,
min: 1,
max: 10,
values:[1,10],
step:1,
prefix: '',
postfix:''
},
fnLblSlide = function(event, ui){
var $lbls = $(this).parents('.slider-container').find('.slider-labels table tr th');
$lbls.each(function(index){
var $this = $(this);
v = $this.attr('value');
if ( v >= ui.values[0] && v <= ui.values[1] ){
$this.addClass('highlight');
}else{
$this.removeClass('highlight');
}
});
};
$(this).bind("slide",fnLblSlide);
options = $.extend(defaults, options);
return this.each(function(){
var $this = $(this),
o = options;
$this.slider(o);
$this.wrap('<div class="slider-container">');
var $lDiv = $('<div class="slider-labels">');
$lDiv.html('').width($this.width());
$this.before($lDiv);
var str = '<table><tr>';
for(var i = o.min; i <= o.max; i+= o.step){
var d = o.prefix + i + o.postfix;
if (i >= o.values[0] && i <= o.values[1])
str += '<th value="' + i + '" class="highlight">' + d + '</th>';
else
str += '<th value="' + i + '">' + d + '</th>';
}
str += '</tr></table>';
$lDiv.append(str);
});
}
});
})(jQuery);
Usage
// Javascript
$(document).ready(function(){
$('#slider').sliderWithLabel();
});
// css
.slider-container{
position:relative;
}
.slider-container #slider{
width:600px;
}
.slider-container .slider-labels{
background:#FFF;
}
.slider-container .slider-labels table{
border-collapse:collapse;
border-spacing:0px;
width:100%;
}
.slider-container .slider-labels table tr th{
color:#CCC;
border:1px solid #CCC;
}
.slider-labels table tr th.highlight{
background:#FFC;
border-bottom:1px solid #000;
color:#000;
}
// html
<div id="slider"></div>
Try Out Demo
How to redirect when javascript is disabled
Posted on August 21st, 2010, by LeslieThere are applications where it is mandatory that javascript is enabled on the end user’s machine. Here is a way to redirect to a customized “javascript disabled” page in case the browser has javascript disabled.
This is done using meta tags and the noscript html tag. In your application place the following code in your head section.
<noscript>
<meta http-equiv="refresh" content="0;URL=noScript.html" />
</noscript>
This tells the browser to redirect to noScript.html page in 0 seconds if javascript is disabled. Here is noScript.html.
<html> <body> <h1>Error: Javascript Disabled</h1> It seems your browser javascript is disabled. Kindly Enable it to enter the application. <br /> The following links might help you to achieve the same For firefox: <a href="http://support.mozilla.com/en-US/kb/JavaScript" target="_blank" title="Click here to enable/disable javascript in mozilla firefox"> Click here </a> <br /> For IE and other browsers: <a href="http://support.microsoft.com/gp/howtoscript" target="_blank" title="Click here to enable/disable javascript in IE and some other browsers"> Click here </a> </body> </html>
Why do Web User Interface Developers need to know Javascript and PHP ?
Posted on July 4th, 2010, by LeslieWeb development basically consists of two major portions, one is the server side implementation(Java, PHP, .net etc…) and the other at the client side (HTML, CSS, Javascript etc…).
These two major divisions also brings in specialists performing various roles to build a web application. There are the User Interface developers, taking care of the client side implentation and the backend developers doing all the server side implentations with business logic.
Now here, what I have observed is that most UI developer’s knowledge is limited to Prototyping and htmlizing content. The rest of the work of implementing the javascript + breaking up the html to produce php pages or other template based pages + implementing the server side business logic is left to the backend developer.
Now let me explain what I have observed in these scenarios of web development.
Read the rest of this entry »
New workplace + New platform = More challenges
Posted on April 4th, 2010, by LeslieAfter working with one of the top digital marketing and advertisement firm in the online space for two years, moving on to work with another leader in its own space of Spend Management and Analysis based software products, has brought in with it a new environment, a new work platform and new challenges.
Even though my main domain which is User Experience development, remains unchanged, the base platform i.e. the base programming framework has changed drastically.
From building User interfaces using PHP – jQuery – CSS, moving on to pure Java based platform i.e. GWT, ZK is really challenging and a kind of technology I never thought I would be ever working with. I mean writing a complete ajax based web application without writing code in javascript is really something kool.
Even though writing javascript is fun (for me atleast), these kind of technologies really give a platform for Java developers to build rich and intuitive user interfaces, which would otherwise require Javascript and CSS experts to do the job. Even then the level of optimization and efficiency provided by the interfaces built by these technologies would almost be impossible to achieve by hand written javascript code within the expected time limit. Not to mention making it work across browsers.
You need not be an expert in Java for working with GWT or ZK, but what is recommended is having basic understanding of object oriented programming concepts, but most importantly what is required is passion, determination and hunger to learn somthing new and build something really kool out of it.
I have never written a single line of code in java before, but getting the basic interfaces built with these technologies is not that difficult.
The tutorials are really helpful to get you started and then just gradually move on with building your apps, there are good amount of tutorials, forums, documentations and off the shelf widgets available to help you out.
Well I m currently exploring these tools and will keep updating my blog about my experiences.
5 design patterns for implementing multi select form interfaces
Posted on January 21st, 2010, by LeslieThere are many instances wherein a web based user interface includes situations where the user needs to select multiple items within a set of items, like select multiple keywords or select multiple geographies etc.
Here are 5 design patterns to implement this sort of interfaces…
Read the rest of this entry »
Dynamic favicon using jquery
Posted on January 13th, 2010, by LeslieHere is a way to change your page favicon dynamically using jquery.
The script…
function changeFavicon(imagepath){
$('link[type=image/x-icon]').remove();
$('<link type="image/x-icon" rel="shortcut icon" href="' + imagepath + '" />').insertAfter('head');
}
The HTML…
<input type="button" value="Change Favicon" onclick="changeFavicon('images/email_icon.gif');" />
regards,
leslie
Optional ‘Add another’ text box using javascript
Posted on December 18th, 2009, by LeslieHere is a technique of implementing a dynamic ‘add another’ text box using javascript.
This User interface pattern is used along with select boxes, where in the user is given an option to enter a customized value, in case the option is not present in the given drop down.
Eg. Add another country. here s a screenshot…
Read the rest of this entry »
Can you differentiate between the new 5 rupee coin and a 50 paisa coin by touch ?
Posted on December 4th, 2009, by LeslieApart from the usual accessibility issues people, with some disability, face at public places like railway stations, bus stands or even some hospitals, here is a very interesting issue with regards to accessibility that i observed and would like to share it out here.
How well can you differentiate between the new 5 rupee coin and a 50 paisa coin just by touching it ?
The weight of the new 5 rupee coin has been reduced from 9.00 gm to 6.00 gm. And a 50 paisa coin weighs 3.00 gm. Even if there s still twice weight difference between the two coins, its not easy to differentiate between the two if you hold it in your hand. Might not pose a big issue for common people, but it might cause confusion for people with disabilities, like the blind or aged people who have low visual power.
The same goes with the new 2 rupee coin, it was easily identified by touching the 11 sided border, but the new rounded border makes it difficult to distinguish it from a 1 rupee coin.
what do you think ? did you ever end up loosing 4 rupees 50 paisa 
Leslie is a Web User Interface Developer from Mumbai, IndiaRead more
- Categories
- Archives