Douglas on Web Applications

Better Rollover with CSS & jQuery

My third pass at a rollover and my favorite solution by far. This one uses minimal code, avoids flickering while also decreasing load times.

Basically create each image or button with active and over states next to one another. For for our example, side by side. We apply the image as a background, defining the width of the space as half our image (so only the active state shows). Then when the use hovers, we reposition the background to show the active state only.

 
  $(function() {
	$("#teasers div").hover(function() {
	  $(this).css('background-position', 'top right');
	}, function() {
	  $(this).css('background-position', 'top left');
	});
  });
 

Incredibly Simple Tabs with jQuery

Whenever I need inline tabs, I find myself traveling down the same well trod paths. There are dozens of plugins but where they usually fail is in simplifying skinning. Solution:

1. Create each tab row as a graphic (so all tabs but the selected one in a row would look the same
2. Add images to page surrounding each as a DIV
3. Add a bit of jQuery to hide show appropriate tab & content on click

Here's the CSS:

 
<div id="tabs">
<div id="speakers"><img src="img/tabs-speakers.gif" width="724" height="41" alt="Speakers" /></div>
<div id="events"><img src="img/tabs-events.gif" width="724" height="41" alt="Speakers" /></div>
<div id="tabs-content">
<div id="speakers-content" class="tab-content">
 
Content for speakers
</div>
<div id="events-content" class="tab-content">
 
Content for events
</div>
</div>
</div>
 

Next, add the javascript:

var tabArray=new Array("speakers","events");
$(document).ready(function() {
   $('#events').hide();
   $('#events-content').hide();
   $('#tabs').click(function() {
	   $.each(tabArray, function(index, value) {
		   $('#'+value).toggle();
		   $('#'+value+'-content').toggle();
	   });
   });
});

Passing Arrays to PHP via AJAX

I've written on processing AJAX queries before but neglected discussing how to pass an array to PHP for processing. This is an example of getting all checked rows in an EXTJS grid and posting them to an awaiting PHP script.

First we have the users confirm they really want to process all checked records:

 
Ext.MessageBox.confirm('Confirm', 'Are you sure your want to email login info to all selected users?', confirmEmailUsers);
 

Now the jQuery method:

 
function confirmEmailUsers(btn){
   if(btn=='yes'){
	   var recArray=new Array();
	   var ids=new Array();
	   var recArray = mailqueueGrid.getSelectionModel().getSelections();
	   for (var i = 0 ; i < recArray.length ;i++) {
		  ids[i] = recArray[i].get('id');
	   }
	  $.ajax({
		type: "POST",
		dataType: 'json',
		url: '/cpsia/?c=form&m=processqueue',
		data: 'ids='+ids,
		success: function(msg){
			alert(msg)
		}
	  });
   }
}
 

Finally, the PHP script to processes it:

 
$ids = explode(",",$_POST['ids']);
foreach ($ids as $id) {
   echo $id .'';
}
 

Dropdown (Pulldown) Selectors & Manipulation

Clear a current dropdown selection

    $("#some-id-on-option option").attr({ selected: "selected" }).removeAttr("selected");

Now, select an option

    $("#some-id-on-option option:first").attr("selected");

That selects the first option. Or you can specify an option by index:

    $("#some-id-on-option eq:(2)").attr("selected");

However, that only selects the item but doesn't execute if there is an action (via listener) associated with that particular dropdown. To do so, use the following:

    $("#some-id-on-option").change();

Here's a real-world example. Let's say you have 3 dropdown menus. The first selects between two states and depending on the selection, one of two location dropdown menus will be displayed. The location dropdowns allow a user to select specific store in that state. By default, on page load one location dropdown will be hidden. Here is the code for the State dropdown menu:

$("#select-state").change( function () {
  //alert($(this).val())
  $("#locations-az").toggle();
  $("#locations-ca").toggle();
  $(".sLocations option").removeAttr("selected")
  if($(this).val()==1){ //cal
    $("#locations-ca option:eq(0)").attr("selected","selected");
	$("#select-locations-ca").change();
  }else{
    $("#locations-az option:eq(0)").attr("selected","selected");
	$("#select-locations-az").change();
  }
});

This ensures that the location dropdowns always revert back to the first option when the state dropdown is toggled. Notice the last line "$(this).change()". This executes the following listener on the active locations pulldown:

  $(".sLocations").change( function () { //we're using class in this case
      var newSrc =$(this).val();
      $('iframe#replace-iframe').replaceWith(newSrc);
  });

This takes the value on the location dropdown and replaces the current iFrame on the page with it. Because we are inserting Google Maps, we'll replace the whole iFrame rather than just trying to update it in order to avoid caching issues. Here's the HTML:

 
<select id="select-state" name="state">
    <option value="1">California</option>
    <option value="2">Arizona</option>
 </select>
<select id="select-locations-az" class="sLocations" name="selectlocations-az">
<option value="&lt;iframe  class=&quot;def-selection&quot; id=&quot;replace-iframe&quot; width=&quot;878&quot; height=&quot;600&quot;
 frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;  src=&quot;http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=4623+E+Elliot+Rd,+Ahwatukee,
+AZ&amp;mrt=all&amp;sll=35.224939,-114.036363&amp;sspn=0.013707,0.017231&amp;ie=UTF8&amp;hq=&amp;hnear=4623+E+
Elliot+Rd,+Phoenix,+Maricopa,+Arizona+85044&amp;ll=33.358707,-111.979523&amp;spn=0.014017,0.017231&amp;t=h&amp;z=14&amp;output=embed&quot; mce_src=&quot;http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=4623+E+Elliot+Rd,+Ahwatukee,
+AZ&amp;mrt=all&amp;sll=35.224939,-114.036363&amp;sspn=0.013707,0.017231&amp;ie=UTF8&amp;hq=&amp;hnear=4623+E+
Elliot+Rd,+Phoenix,+Maricopa,+Arizona+85044&amp;ll=33.358707,-111.979523&amp;spn=0.014017,0.017231&amp;t=h&amp;z=14&amp;output=embed&quot;&gt;&lt;/iframe&gt;">Ahwatukee - 4623 E. Elliot Rd.</option>...(cont)
</select>
 

Unobtrusive Rollovers with jQuery

 
$(function() {
  $("#nav img").hover(function() {
    $(this).attr("src", $(this).attr("src").split(".").join("_over."));
  }, function() {
    $(this).attr("src", $(this).attr("src").split("_over.").join("."));
  });
});
 

 
<ul id="nav">
<li><a href="#"><img src="button1.gif" /></a></li>
<li><a href="#"><img src="button2.gif" /></a></li>
<li><a href="#"><img src="button3.gif" /></a></li>
</ul>
 

jQuery Basics

jQuery is a popular javascript framework simplifying cross-browser development. To get started, include the jQuery:

<script src="jquery.js" type="text/javascript"></script>

Since you will likely be manipulating the DOM, we need to wait until the page is fully loaded before executing our code. So we start by creating a statement to this affect:

$(document).ready(function(){
  //code goes here
});

jQuery is useful for applying CSS to elements on the page. This is useful when you would like to change an existing style. Here's a basic example.
First, create CSS:

 
<style type="text/css">
    .warning{ border:red 1px solid;padding: 8px; }
</style>
 

Now, we can apply it when a specific event occurs:

$(document).ready(function(){ $("a").click(function(){ $("#results").addClass("warning"); }); });

In the real world, clicking a link will cause the browser to navigate away from the page before the warning could be displayed. jQuery offers an easy solution to prevent this from occurring:

$(document).ready(function(){
  $("a").click(function(event){
    event.preventDefault();
    $("#results").addClass("warning");
  )};
});

Notice how we passed the event as an argument. Now this is all fine and dandy but what good is a warning without any explanation? So let's add some text within the results div:

$(document).ready(function(){
  $("a").click(function(event){
    event.preventDefault();
    $("#results").addClass("warning").html("Warning! You clicked a link!");
  }
});

jQuery adds a simple way to chain events by passing around the actual query object. This makes coding simpler and more compact.

Ajax Via jQuery

Ajax calls are made simple by using jQuery. Here's a few basics:

$.ajax({
  type: "GET",
  url: "somefile.php"
});

Let's add some variables:

$.ajax({
  type: "POST",
  url: "somefile.php",
  data: "id=123&action=add",
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

If you would like to return HTML from the server or database:

 
$.ajax({
  url: "somefile.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

Ajax calls through jQuery are automatically asynchronous (meaning multiple calls can be made before the other is completed). If you would prefer to make one at a time:

$.ajax({ url: "somefile.php", async: false });

You can apply local events to Ajax calls:

 
$.ajax({
  url: "somefile.html",
  cache: false,
   beforeSend: function(){
     // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
});

You can apply local events to Ajax calls:

 
$.ajax({
  url: "somefile.html",
  cache: false,
   beforeSend: function(){
     // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
});

Or apply global events to Ajax calls. The following listens for Ajax global events:

 
 $("#loading").bind("ajaxSend", function(){
   $(this).show();
 }).bind("ajaxComplete", function(){
   $(this).hide();
});

Forms - Radio Groups with jQuery

An easy way to select a radio button using jQuery:

 
$('input[name=packages]:radio')[0].checked = true; //first
 

Getting the value of the selected radio button in a group:

 
var checkedValue = $('input[name=packages]:radio:checked').val();
 

Loading JSON via jQuery

 
$(document).ready(function(){
  $('#id-to-be-clicked' .class-name').click(function(){
    $.getJSON('file-name.json', function(data){
      $('#id-to-insert-html').empty();
      $.each(data, function(entryIndex,entry){
        var html = '
<div class="entry">';
        html += '
<h2 class="main-title">' + entry['title'] + '</h3>
 
';
        html += ...(cont.);
        $('#id-to-insert-html').append(html);
      });
    });
  });
});

Text Resizing with jQuery

 
$(document).ready(function(){
    // reset size
    var defaultSize = $('html').css('font-size');
    $(".resetSize").click(function(){ //button or link class
        $('html').css('font-size', defaultSize);
    });
 
    // increase size
    $(".increaseSize").click(function(){ //button or link class
        var current = $('html').css('font-size');
        var currentSize = parseFloat(current, 10);
        var newSize = currentSize*1.2;
        $('html').css('font-size', newSize);
        return false;
    });
});