Ryan Coughlin | Web and Graphic Designer » ui

Another jQuery UI Slider Example

Ryan Coughlin — Sat, 12 Sep 2009 18:03:14 +0000

First post in a very long time. Finally the summer is over and I am back at school for my last year. Now finally I have a lot of free time to work on this new layout and getting it solid, and getting back to blog posts to catch up on what I missed.

The jQuery UI Slider is one part of the jQuery UI collection that is really neat and can have many uses. So last year I created this jQuery UI Slider never posted about it and I figured now would be the best time.

I wrote this tutorial on using the slider close to a year ago.

Now I created another version of it, with some different styles, with full code examples as well. This will display the current value of the slider as you move up and down bar. Check out the jQuery UI Slider and start playing around with it.

Using the jQuery UI Slider Utilize the jQuery UI Slider to change CSS properties or...
Create a jQuery Accordion – remain open after page load Quick fix to keep accordion section open after loading different...
Working with the jQuery live function Find out how to use jQuery .live() and how it...

Combining Selectables And Draggables Using jQuery UI

Ryan Coughlin — Sun, 23 Nov 2008 19:59:36 +0000

There are two powerful and fun elements that the jQuery UI provides. When both of them work together you will be able to come up with some creative web application uses for them. The two I am going to be covering are:

UI Selectable – Demo – Documentation
UI Draggable – Demo – Documentation

I am sure you all want to see what the final product will look like, check it out.

To start working with the jQuery UI you are going to need to add the following files to the head of your document:

jquery-1.2.6.min.js – the main core jquery framework
ui.core.js – the UI core javascript
ui.draggable.js - the draggable javascript
ui.selectable.js – the selectable javascript

Before we get started let me just say, thanks a ton to Richard Worth who has helped develop the jQuery UI and provided a ton of help to me last year trying to get this to work, and boom here is the working copy, you can find Richards blog here.

The jQuery UI adds classes for different mouse events, for instance:

jQuery UI Draggable
- .ui-draggable – the class it adds you when create the draggable(); object
- .ui-draggable-dragging - the class it adds when you are dragging the object around the page
jQuery UI Selectable
- .ui-selectee - the class it adds when you create the selectable(); object
- .ui-selectable – the class it adds when you select the object
- .ui-selecting – the class it adds when you click and start to create the bounding box around the elements you wish to select, once you let go, it becomes .ui-selectable

That is the basic structure how how the jQuery UI draggable and selectable generates classes to manipulate change for each action.

I am going to be using console.log(); to report what the code is doing after different steps throughout the page. Make sure you have Firebug installed if you are on Firefox. If you are unsure what console.log() does view the documentation. Be sure that if you use this technique in a real world example, remove the console.log() functions to decrease page loading time. This neat little function allows us to see what our code is doing, we can call:

console.log(variable);

When we open up the page and open Firebug, it will print out what the variable contains, it is a great tool for debugging, keep it handy.

Now that we have the understanding on how it works with different classes, lets start looking at the code that makes it work. I have commented it to make it easier for you to translate on your own time.

The first bits of the code

// creates the selected variable
// we are going to be storing the selected objects in here
var selected = $([]), offset = {top:0, left:0};
console.log("This is the value of selected when it is created " +selected + "");

As you can see from above, our first line creates the variable selected and is able to store numerous values because we are setting up an array for this variable. And the offset, resets the top and left values. If you use console.log it will output: Object length=0 prevObject=Object jquery=1.2.6 notice the length is 0 that is fine we haven’t selected any items yet.

// initiate the selectable id to be recognized by UI
$("#selectable1").selectable();

This part above, calls the selectable to generate the selectable region. NOTE: that #selectable is container and is the box not each element we are selecting.

The following part is important because, this is the where we start to hook up selectables with the draggables.

// declare draggable UI and what we are going to be doing on start
$("#selectable1 div").draggable({
     start: function(ev, ui) {
          $(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected");
	  console.log("The value of 'this' currently is: "+this);
          selected = $(".ui-selected").each(function() {
               var el = $(this);
	       el.data("offset", el.offset());
	       $(this).text("Selected and dragging object(s)");
	  });
console.log(selected);
offset = $(this).offset();
},

The part below, tells the draggable UI to create every element within to have dragging.

$("#selectable1 div").draggable({

$(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected");
console.log("The value of 'this' currently is: "+this);

This next section above resets the select and drag, by removing the ui-selected class, when we output using console.log, to see the value of this is The value of ‘this’ currently is: [object HTMLDivElement].

selected = $(".ui-selected").each(function() {
     var el = $(this);
     console.log("The value of el is: "+el);
     el.data("offset", el.offset());
     $(this).text("Selected and dragging object(s)");
});

Now we are finally working with the selected variable we created at the start of this, we are to run through each element with the class of ui-selected. We are going to be storing the value of $(this) in the variable el, to make it easier to call and to work with the offset(); property later on.

el.data("offset", el.offset());
$(this).text("Selected and dragging object(s)");

We are going back to out el variable and working with the data object and the offset object. The offset object returns two integer values: top and right. The definition of the offset(); from the jQuery documentation is: Get the current offset of the first matched element relative to the view port.

The other line, changes the text of the elements to let us know that we have selected and are now dragging the objects stored in the variable selected.

Now that we have called offset we want to store it in the variable offset, for each DOM elements selected. The code that follows this part is below:

console.log("The new value of selected is now "+selected);
offset = $(this).offset();
console.log("The value of top value is "+offset.top+" and the left value is "+offset.left);

We have another console.log() to print out the selected value and it is storing the DOM element. Next we create the variable offset and store the offset() of the elements, I have printed the top and left values using console.log() above, the output is similar to: The value of top value is 207 and the left value is 672.

The next section below is the section of code that handles what is going to go on while we are dragging our selected elements. This part is also very important because we are bringing back the values of offset with the current values of the draggable ui, it stores the ui properties in ui.position.top and ui.position.left. Further down the code we will use the offset values to update the CSS top and left properties of the selected elements.

drag: function(ev, ui) {
     var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
     console.log("The value of dt is "+dt);
     selected.not(this).each(function() {
          var el = $(this), off = el.data("offset");
          el.css({top: off.top + dt, left: off.left + dl});
     });
},

We are creating the variable dt on the second line there and this value is equal to ui.position.top – offset.top and we are also creating the variable dl that is dl = ui.position.left – offset.left. So we have:

var dl – working with the x axis or the left coordinates
var dt – working with the y axis or the top coordinates

Lets add a console.log to see what these values are before we do the math. Add the following code to see what our variables and math are doing:

console.log("The value of dt is "+dt+" and is equal to "+ui.position.top+" - "+offset.top);
console.log("The value of dl is "+dl+" and is equal to "+ui.position.left+" - "+offset.left);
console.log("The value of ui.position.top is "+ui.position.top);
console.log("The value of ui.position.left is "+ui.position.left);
console.log("The value of offset.left is "+offset.top);
console.log("The value of offset.left is "+offset.left);

When you run the code the console.log() outputs the following:

The value of dt is 37 and is equal to 237 - 200
The value of dl is 152 and is equal to 352 - 200
The value of ui.position.top is 237
The value of ui.position.left is 352
The value of offset.top is 200
The value of offset.left is 200

Notice what the code is printing out, it is taking the ui.position.top and subtracting the value of offset.top and giving us the difference to equal variable dt. We do this math so we can update the top and left CSS properties in the next section of code, if we didn’t do this math, we would select and drag our elements and they would move sporadically on the page.

Next we are going to cover the other each function that loops through each of the selected elements expect $(”this”):

// take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
selected.not(this).each(function() {
     // create the variable for we don't need to keep calling $("this")
     // el = current element we are on
     // off = what position was this element at when it was selected, before drag
     var el = $(this), off = el.data("offset");
     el.css({top: off.top + dt, left: off.left + dl});
});

So we have the last big piece of code to make this script work. Like I said, you have the each function that runs through each element expect $(”this”), then we create two variables:

el – which is the current element we are on
off – which is the position of the elements when they were selected, before any type of movement and drag

The last segment: we are going to be adding or subtracting (we will subtract if the dt or dl is negative). The dl stands for delta left and dt stands for delta top. For instance lets set something up:

The current element we are on start at the coordinates: 10, 30, now we drag that to: 8, 15. Now lets run the math, the new position of the element is: 2, 15. Say, you drag it again, it runs the loop once again, and the off will be 2, 15 and the new value will be wherever the new coordinates are subtract the total delta from when the drag started until now, not just the last mouse movement.

Now that we did the math and we have captured the new value, update it is the css property and plug in the top and left coordinates.

So what did you think of it? Pretty interesting effect when you combine both of those UI elements to create select and drag. Share your thoughts and make sure to bookmark using the button below. Any improvements? Contact me.

Enjoy!

jQuery Timeout Function A neat and simple way to creating a jQuery function...
Using the jQuery UI Slider Utilize the jQuery UI Slider to change CSS properties or...
jQuery Search And Highlight Work with the jQuery framework to create a fast Ajax...

Using the jQuery UI Slider

Ryan Coughlin — Tue, 04 Nov 2008 20:48:22 +0000

Since I started working with jQuery and the UI. I have always wanted to work with the UI Slider. I always tried playing with it but I never got it execute an operation on slide. I created a slider to change the opacity of my background on my older temp site here at ryancoughlin.com.

UPDATE: Edit changes to the code with available demo below.javascript:;

UPDATE (9/16/09): Created a new jQuery UI Slider example, check it out.

The man behind helping me with the UI Slider can be found here and his screen cast, which was a huge help.

Check out the jQuery UI Slider demo. A simple UI Slider example, that will change the opacity of an element on the page, you can implement it to just about anything you want.

Lets get started, if you want to have it handy, check out the documentation and also make sure to look at the properties and what they control, think of ways that you can work with it to come up with new UI Slider implementations.

One excellent example of the UI slider is at Komodo Media and below is the slider that he created:

If you view the site and play around with the slider, you will see the foliage increase and decrease depending on the position of the slider. This led me to wanting to create something similar along these lines. Since day one with jQuery, I saw the slider and always wanted to be able to know how to work with it. But in this article, I can’t show you how the slider over at Komodo works, sorry maybe Rogie will!

Lets start with all the code below, this controls the slider and the bubble that will let us know the current value of the slider.

    $('#slider-bubble').hide();
	$('#slider-bar').slider({
		handle: '#slider-handle',
		min: 0,
		max: 100,
		start: function(e,ui){
		$('#slider-bubble').fadeIn('fast');
		},
		stop: function(e,ui){
		$('#slider-bubble').fadeOut('fast');
		},
		slide: function(e,ui){
		$('#box').css('-moz-opacity', ui.value/100.00).text(ui.value);
		//mypos = $('#slider-handle').position().left + 2;  //grab position of slider dot + 2
		var mypos = $('#slider-bar').slider("value");
		$('#slider-bubble').css('left', mypos).text(ui.value);
		$("#slider-handle").css('left', mypos);

		}
	});

Notice we have the following inside the slider function:

handle – the class name of the click able handle to slide left/right
min – sets the minimum value
max – sets the maximum value
start – execute a function once you move the slider
stop – executes a function once you stop moving the slider
slide – what should be going on as you slide the handle left/right

When we start to drag the the slider we want a bubble to appear to let us know what the current value of the UI Slider is at. We only want it to appear as we start to slide and disappear when we stop. So this line initially hides the bubble on page load:

$('#slider-bubble').hide();

The next part is fairly easy, it fades the bubble in on start and fades it out on stop:

start: function(e,ui){
     $('#slider-bubble').fadeIn('fast');
},
stop: function(e,ui){
     $('#slider-bubble').fadeOut('fast');
},

The guts of the UI Slider is what is up next to bat, the slide option that controls what is going to be changing as see slide left/right:

		slide: function(e,ui){
		$('#box').css('-moz-opacity', ui.value/100.00).text(ui.value);
		//mypos = $('#slider-handle').position().left + 2;  //grab position of slider dot + 2
		var mypos = $('#slider-bar').slider("value");
		$('#slider-bubble').css('left', mypos).text(ui.value);
		$("#slider-handle").css('left', mypos);
		}

Once we start to slide, it will update and change the value of the CSS property “-moz-opacity” and it will change the opacity of the “#panels-contents” element. For the slider, the value is stored in the function parameter “ui” so together with “ui.value” we can use this to update our opacity.

With this following bit of code the “.text(ui.value);” updates the value of that property with the current value of the slider.

The variable “mypos” works with the last line of the slide option to the bubble to print out the current value of the slider. Make sure that the bubble element is set to “position:absolute;” The CSS for my slider is below:

#panel-contents{position:relative;height:40px;}
#small-label{ background:url(images/small_label.gif) no-repeat; height:4px; width:17px; overflow:hidden;float:left; }
#large-label{ background:url(images/large_label.gif) no-repeat; height:18px; width:17px; overflow:hidden;float:left; }
#slider-bar{ background:url(images/slider.gif) no-repeat; height:4px; width:100px; position:relative; float:left;}
#slider-handle{ background:url(images/slider_handle.gif) no-repeat; height:12px; width:13px; overflow:hidden;position:absolute;z-index:1;}
#slider-bubble{ background:url(images/callout.gif) no-repeat; height:46px; width:38px; overflow:hidden; position:absolute; top:-50px;padding:8px 0 0 0;text-align:center;font-weight:bold;color:#202020; }
#box{position:absolute; left:40px;background-color:#202020;width:200px;height:200px;}

Hopefully this will clear up any of your problems or questions when using the jQuery UI Slider.

Easier than you thought?

Another jQuery UI Slider Example First post in a very long time. Finally the summer...
Using images With Hidden Text For SEO Many of us, love to come up with images for...
Combining Selectables And Draggables Using jQuery UI Learn how to work with both selectable and draggable with...