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.

Related posts:

1. Using the jQuery UI Slider Utilize the jQuery UI Slider to change CSS properties or...
2. Working with the jQuery live function Find out how to use jQuery .live() and how it...
3. Two Panel Slick Drop Down Using jQuery Publish a great looking two panel drop down with animations...

We are going to use $.getJSON() function, you have something like:

$.getJSON("readJSON.php",function(data){
    $.each(data.posts, function(i,post){
          content = '
\n';
	  content += '
' + post.author + '

\n';
	  content += '+ post.date_added + '\n';
          content += '' + post.post_content + ';
	  content += ''
';
	  $("#contents").append(content).fadeIn("slow");
   });
});

And example of JSON from the PHP page could look like:

{ posts: [{"id":"151","date_added":"2009-05-05 13:40:34","post_content":"This is a test post. jQuery!","author":"Ryan"},
{"id":"152","date_added":"2009-05-05 13:40:55","post_content":"Hey, you got to love Ajax","author":"John"}] }

That JSON above loads two records that will be displayed on to the page.

The results are being pulled from a MySQL database with tables: id, author, post_content, date_added, and author.

I am going to wrap up and article on the jQuery/PHP/JSON comment form with the results loaded on to the page after form submission, stay tuned for a much more in depth explanation of using JSON with PHP and jQuery.

Related posts:

1. Use jQuery To Submit Form To PHP/MySQL Learn to submit a form using jQuery without a page...
2. How to use jQuery to Serialize Ajax Forms When I first started working with jQuery and submitting forms...
3. Time for another iGoogle theme? Thinking about making another iGoogle theme and almost done with...

I am trying to free my schedule from client work to start working on the new layout, stil need to work on the move right text, bottom posts boxes, colors, and what the single page is going to look like, all in all its a work in progress. Almost done with a jQuery tutorial on submitting a  comment form and having the results loaded using jQuery/Ajax. The comments on the page are loading using PHP, JSON, and jQuery, very slick. Expect that very soon.

Related posts:

1. Busy…Busy Finally...the end of the semester is here, no more finals...
2. New Layout and Trip Its been a very long time! I have been extremely...
3. Coroflot and New Design Just added some more work to my Coroflot.com portfolio and...

Instead of declaring all of your data to be sent using something like:

var fname     = $('#fname').attr('value');
var lname     = $('#lname').attr('value');
$.ajax({
     data: “fname=”+ fname + “& lname=” + lname,
});

For a couple of fields above, that is fine, but what if you were creating a form with a large amount of fields. The last thing you would want to do is want to copy/paste that line 20 times for your field. Instead of grabbing each value of each form field we can use jQuery’s .serialize() to do the dirty work for us, which is a huge time saver. We can use something like:

$(function() {
     $('form').bind('submit',function() { showValues(); return false; });
});
function showValues() {
     var str = $("form").serialize();
     $(".results-box").fadeIn();
     $(".results").text(str);
}

The first section binds the submit to a function. When a user submits the form call the function showValues(), the next bit. We grab the form and attach .serialize() to it. We want to serialize all fields within this form and display what data is going to be sent to the sever. A working demo has been uploaded.

Now with our data serialized it is ready to be sent over to the server side. Using jQuery .serialize() is much more effiecient compared to retrieving the value using .val().

Related posts:

1. Use jQuery To Submit Form To PHP/MySQL Learn to submit a form using jQuery without a page...
2. How to load data using JSON/PHP using jQuery I have seen a good amount of people wanting to...
3. jQuery Search And Highlight Work with the jQuery framework to create a fast Ajax...

Binds a handler to an event (like click) for all current – and future – matched element. Can also bind custom events. – (source: jquery.com)

This function is extremely similar to the .click() but .click() will only match elements that are created via the XHTML with DOM is loaded. With that said, using .live() is extremely useful for dynamic websites, where you are creating/removing elements on you’re website.

Lets see the base example of using .live()

$('a.edit').live('click', function() {
     alert("The power of .live() - dynamically created objects will have bound events!")
     return false;
});

This code will work for all links that have the class edit, even when new a.link tags are created dynamically after DOM has been loaded. If your code looked like:

$('a.edit-nolive').click(function() {
     alert("Items created via AJAX will be called on using .live()")
     return false;
});

It would not work on dynamically created items. Lets take another look at the full demo. Hopefully this will clear up any problems with understanding how the jQuery .live() function works in comparison to the .click() event. Like to see something else like this? Drop me a line.

Related posts:

1. jQuery Timeout Function A neat and simple way to creating a jQuery function...
2. Create a jQuery Accordion – remain open after page load Quick fix to keep accordion section open after loading different...
3. Combining Selectables And Draggables Using jQuery UI Learn how to work with both selectable and draggable with...

$(".menu-header").click(function() {
        $(this).next().toggle('slow');
        return false;
}).next().hide();

The HTML would look something similar to:

art gallery

traditional
digital
posters
icons
fonts

verse

Poems
Stories

That code will use jQuery’s toggle() function. When the user clicks the h2 tag it will close all elements until the next
tag. This snippet is very handy for creating a quick accordion effect, this can also be found on the jQuery’s documentation

Now we have the guts sorted out, but the problem is if you travel to another page within that category, it will close. I’m sure you want to check out the code that is going to do this.

Keep that open!

var matches;
     if( matches = (new String(document.location)).match(/?c=w+/) ) {
        $("a[href=" + matches[0] + "]").parents("ul").toggle();
     }

The code above is fairly straight forward. The first line checks to see if we already have a sub-menu open. It evaluates by looking at the current pages URL “?c=page_here”.

The latter part of the code. Now that we grabbed the current URL of the sub-menu, we can use this to find the parent menu which is the
ul and display it:

$("a[href=" + matches[0] + "]").parents("ul").toggle();

The quick fix to keep your accordion block open while traveling to different URLS. To achieve the URLS of “?c=page”. I am using this PHP code below save it as index.php, also create a header.php and a footer.php.

Give it a shot, hope that this can work for you, it did wonders for my project. Also thanks to Kent, for helping me. If it did work post some examples!

Related posts:

1. Working with the jQuery live function Find out how to use jQuery .live() and how it...
2. How to load data using JSON/PHP using jQuery I have seen a good amount of people wanting to...
3. Combining Selectables And Draggables Using jQuery UI Learn how to work with both selectable and draggable with...

I have been trying to search for a nice and reusable way to use jQuery to timeout effects or functions. We are familiar with using

setTimeout (function,timeout);

After putting in some data we can come up with something like this:

setTimeout (showBox(),2500);

Remember that the value 2500 is in MS (milliseconds), we equates to 2.5 seconds. When this function is called, it will execute 2500ms later. I was using this for one of my projects where I wanted two effects/functions not after, but during. I could have used very handy jQuery callback and load in a function, but it would have been executed after the first function is completed.

The solution for this? Quite simple, check out the jQuery $ function, which allows us to call jQuery as “$” the example is below.

(function($) {
    // Within this function $ is a reference to jQuery
    // I love this framework
})(jQuery);

Lets jump right into the belly of the beast and view the code to call our handy jQuery timeout function.

(function($){
	jQuery.fn.idle = function(time){
		var i = $(this);
		i.queue(function(){
			setTimeout(function(){
				i.dequeue();
			}, time);
		});
	};
})(jQuery);

This might look like a bit overload, but it is really simple, we just learned how to create the skeleton of the function, so without it we:

jQuery.fn.idle = function(time){
	var i = $(this);
	i.queue(function(){
		setTimeout(function(){
			i.dequeue();
		}, time);
	});
};

You see on the first line above we create the idle function: jQuery.fn.idle. We created the variable I to store $(this), which is going to be element that is running the $.idle(); function.

We then use the jQuery queue(); function whose documentation can be found on the jQuery website. Then we attach the $(this); variable we created called: i to it, and create the setTimeout(), which then uses dequeue(); with our variable connected to it.

The last part, where we create the time parameter for the function, so we call the following code and:

$.idle(2500);

time gets replaced with the user input of 2500ms to the function. Say if you want to call a function you can use it in this context instead of the messy old fashion setTimeout(); function.

$('.myelement').fadeIn().idle(2000).fadeOut('slow');

The above simple reads: fade in my element, then wait 200ms or 2 seconds then slowly fade out the same element. BOOM! There it is, the quick n’ dirty method to timing functions out using jQuery.

Related posts:

1. Working with the jQuery live function Find out how to use jQuery .live() and how it...
2. Combining Selectables And Draggables Using jQuery UI Learn how to work with both selectable and draggable with...
3. Use jQuery To Submit Form To PHP/MySQL Learn to submit a form using jQuery without a page...

• The form (1 input and submit)
• The :contains selector
• The fadeIn() effect
• The addClass()

The approach for the code is going to be like

• User will enter term in form
• Save data to a variable
• Place variable in to :contains selector
• Fade in the highlight class (using fadeIn() and addClass())

See, there it is simple? Just about! Next lets take a look at the jquery

$(document).ready(function(){
	$("#submit").click(function(){

		// start variables as empty
		var term = "";
		var n = "0";

		// hide the results at first
		$("p.results").hide().empty();
        // grab the input value and store in variable
        term = $('#term').attr('value');
		console.log("The value of term is: "+term);

		$('span.highlight').each(function(){
			$(this).after($(this).html()).remove();
		});

		if($('#term').val() == ""){
			$("p.results").fadeIn().append("Enter term in field above");
			$('#term').fadeIn().addClass("error");
			return false;
		}else{
			$('div.container :contains("'+term+'")').each(function(){
				$(this).html($(this).html().replace(new RegExp(term,'g'), ''+term+''));
				$(this).find('span.highlight').fadeIn("slow");
			});

			// how many did it find?
			n = $("span.highlight").length;
			console.log("The there is a total of: "+n);

			if(n == 0){
				$("p.results").fadeIn().append("No results were returned");
			}else{
				$("p.results").fadeIn().append("Returned: "+n+" result(s) for the search term of: "+term+".");
			}
			return false;
		}
	});
});

And now the HTML structure:

Welcome to my site!


                                Search Term:


                        



Kind of a late start here today. I have been reading this book online lately called Learning Rails that covers version 2.0 unlike most of the books that are out there. I was able to follow and understand this book to guide me through Rails and its done wonders. I haven’t seen to many typos and the code is easy to understand. There is one chapter that floats away from the rest and its a bummer because its the rails and Ajax section, but besides that, its a great learning tool.

						I released an Illustrator tutorial yesterday on creating nautical floatie buoys, a simple and straight forward tutorial. Let me know what you think!

						I was talking to Richard Worth and I am going to be writing a post on working with the jQuery UI and implementing the draggables and selectables together, which is very interesting. I have tried this approach about a year ago with Worth, but it was kind of buggy, Richard released a working version that I will be covering and hopefully try to work it in to the UI API. So stay tuned for that post.

						I am also going to be working on some other posts overtime working with jQuery and various ajax methods and functions. Loading data, displaying data, and all sorts of other goodies

						I have been making small modifications to the site, as you can see I added in the top menu bar, and I know it is broken in IE, im on it! I will be working in a home made small jQuery menu to bring down subcategories of what you see up top.

						Have an idea for a post that you want to see on here? Let me know

Now that we have the outline of the code that we will be using, lets breakdown the bulk of it. If you notice we have the click event handler, which means that the code will not execute until someone has pressed the submit button. The first couple of lines take care of initializing of the script.

var term,n;
// hide the results at first
$("p.results").hide().empty();
// grab the input value and store in variable
term = $('#term').attr('value');
console.log("The value of term is: "+term);

I have commented the code for it is easier to retain the information when you come back for future reference. So the first two lines just sets two variables term and n. The next line hides the p.results element and empties it, our results after form submission will be loaded in here. Lets come back to the variable that we created we set term to whatever the value that was entered in the input box. We are going to use the console.log to make sure our variable is receiving the data.

Lets make it highlight.

The next section of the code is going to to reset the and remove all span.highlight classes for when you enter another term you will only have the new results entered via the form and not both old and new terms.

$('span.highlight').each(function(){
     $(this).after($(this).html()).remove();
});

The code is going to run through each of the span.highlight and manually remove the tag. This will be executed every time the form is submitted. Its main purpose is to clear the results. The next part is a quick validation making sure that the form cannot be submitted without some type of data, this is the first section of the conditional:

if($('#term').val() == ""){
    $("p.results").fadeIn().append("Enter term in field above");
    $('#term').fadeIn().addClass("error");
    return false;

That part reads if the element #term returns empty, then fadeIn() and append() text. The line after adds the class error to the input field to give us as red border indicating there has been some type of error. The return false is in place for the form is not submitted. The latter of the conditional will look like:

}else{
    $('div.container :contains("'+term+'")').each(function(){
        $(this).html($(this).html().replace(new RegExp(term,'g'), ''+term+''));
        $(this).find('span.highlight').fadeIn("slow");
    });

This occurs when there is data in the input, and it takes the term and we find it using :contains, it runs through each element and replaces the text by wrapping a span tag with the class highlight around the term. After, it finds each of those elements and fades them in.

Displaying our results

The last part is going to display our results, it is going to tell us:

• The term we searched for
• How many results were found

Lets take a look at the code:

// how many did it find?
n = $("span.highlight").length;
console.log("The there is a total of: "+n);
     if(n == 0){
         $("p.results").fadeIn().append("No results were returned");
     }else{
         $("p.results").fadeIn().append("Returned: "+n+" result(s) for the search term of: "+term+".");
     }
     return false;
     }
     });
});

We are going to retrieve the number of results returned by storing it in the variable n and searching for every span.highlight element and using .length() to retrieve the amount. I have added the console.log() to see what is going on in the back end.

The next part is a simple conditional if n returns no results, then fadeIn() and append() text – “No results were found.” If results were found, then do the same but tell us how many were found and what term the user searched for.

There you have it, a very quick and clean same page search and highlight using jQuery. If you have any recommendations or other features you would like to see, drop a comment or email me. What did you think of it ?

Related posts:

1. Combining Selectables And Draggables Using jQuery UI Learn how to work with both selectable and draggable with...
2. Use jQuery To Submit Form To PHP/MySQL Learn to submit a form using jQuery without a page...
3. How to use jQuery to Serialize Ajax Forms When I first started working with jQuery and submitting forms...

If you have any ideas or requests that you would like to see, please let me know, drop an e-mail or comment.

Finally updated my WP and I love the new interface so far, they did a great job on it.  Install went smooth as always.

I am currently working on a same page ajax search and highlight script using jQuery, it is almost done, so stay tuned. I am also going to make some tweaks to the layout, I need more color on this temporary one, you will probably be seeing some changes over the next couple of weeks.

Take care! Cheers.

Ryan

Related posts:

1. Around in Europe Wanted to write a quick post while overseas. Just wanted...
2. New Layout and Trip Its been a very long time! I have been extremely...
3. 9 Personal Web Design Inspiration There has been many websites that i have come across...

• 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);

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)");
});

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

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);

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});
     });
},

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);

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

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!

Related posts:

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