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

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 .'';
}
 

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>
 

Pop-up Window Method 1

 
function openPopup(loadPage,winName,width,height,center,location,menubar,resizable,
scrollbars,status,titlebar,toolbar,hotkeys) {
    winXposition=0; winYposition=0;
    if ((parseInt(navigator.appVersion) >= 4 ) && (center)) {
        winXposition = (screen.width - width) / 2;
        winYposition = (screen.height - height) / 2;
    }
    winLocation   = location   || 0;
    winMenubar    = menubar    || 0;
    winResizable  = resizable  || 1;
    winScrollbars = scrollbars || 0;
    winStatus     = status     || 0;
    winTitlebar   = titlebar   || 0;
    winToolbar    = toolbar    || 0;
    winHotkeys    = hotkeys    || 0;
 
    args = "width="      + width        + "," //arg 3
           + "height="     + height       + "," //arg 4
           + "location="   + winLocation   + "," //arg 6
           + "menubar="    + winMenubar    + "," //arg 7
           + "resizable="  + winResizable  + "," //arg 8
           + "scrollbars=" + winScrollbars + "," //arg 9
           + "status="     + winStatus     + "," //arg 10
           + "titlebar="   + winTitlebar   + "," //arg 11
           + "toolbar="    + winToolbar    + "," //arg 12
           + "hotkeys="    + winHotkeys    + "," //arg 13
           + "screenx="    + winXposition  + "," //NN Only
           + "screeny="    + winYposition  + "," //NN Only
           + "left="       + winXposition  + "," //IE Only
           + "top="        + winYposition;       //IE Only
    var win = window.open(loadPage, winName, args );
    win.focus();
}
 

Basic Cookie Methods

//define cookie
 //Set Cookie
function set_Cookie(name,value,expires,path,domain,secure){
    // set time, it's in milliseconds
    var today = new Date();
    today.setTime(today.getTime());
 
    //currently in days (delete '* 24' for hours or * 60 * 24 for mins)
    if (expires){
        expires = expires * 1000 * 60 * 60 * 24;
    }
    var expires_date = new Date( today.getTime() + (expires) );
 
    document.cookie = name + "=" +escape(value) +
        ((expires) ? ";expires=" + expires_date.toGMTString() : "") +
        ((path) ? ";path=" + path : "") +
        ((domain) ? ";domain=" + domain : "") +
        ((secure) ? ";secure" : "");
}
 
//Get Cookie
function get_Cookie(cookieName) {
    var allCookies = document.cookie.split( ';' );
	var tempCookies = '';
	var cookieName = '';
	var cookieValue = '';
	var cookieExists = false; //boolean
 
	for ( i = 0; i < allCookies.length; i++ ){
		tempCookies = allCookies[i].split( '=' );
		cookieName = tempCookies[0].replace(/^\s+|\s+$/g, ''); //trim whitespace
		if (cookieName == cookieName){
		    cookieExists = true;
			if (tempCookies.length > 1){
				cookieValue = unescape(tempCookies[1].replace(/^\s+|\s+$/g, ''));
			}
			return cookieValue; //or returns null
			break;
		}
		tempCookies = null;
		cookieName = '';
	}
	if ( !cookieExists ){
		return null;
	}
}
 
//Delete Cookie (returns false if does not exists)
function delete_Cookie(name,path,domain) {
    if (Get_Cookie(name) ) document.cookie = name + "=" +
       (( path ) ? ";path=" + path : "") +
       (( domain ) ? ";domain=" + domain : "") + ";expires=Thu, 01-Jan-1968 00:00:01 GMT";
}
 

Usage:

 
<script type="text/javascript">
//Set Cookie
set_Cookie('testing','success','','/','',''); //include quotes for all arguments
//Get Cookie
if(get_Cookie('testing')) alert(get_Cookie('testing'));
//Delete Cookie
delete_Cookie('testing','/','');
//Test again
(get_Cookie('testing'))? alert(get_Cookie('testing')) : 
alert('cookie has been deleted');
</script>
 

Image Swap Functions Via MM

Marcomedia's Image Swap Functions:

 
function MM_findObj(n, d) { //v3.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
 
function MM_swapImage(id,newimg) {
  var x;
 	if ((x=MM_findObj(id))!=null) {
		x.src=newimg;
	}
}
 
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
 
function MM_preloadImages() { //v3.0
    var d=document;
    if(d.images) {
        if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
        for(i=0; i<a.length; i++)
            if (a[i].indexOf("#")!=0) {
                d.MM_p[j]=new Image;
                d.MM_p[j++].src=a[i];
            }
    }
}
 

Spam-Safe Email Link Method 1

Insert the following into body where link is to appear:

 
<script language="JavaScript">
<!--
var name = "emailname"; //part of email before @ symbol
var domain = "domain.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
document.write(name + '@' + domain + '</a>');
// -->
</script>
 

Form Functions Check If Radio Selected

 
function isRadioChecked(el) {
    for ( var x=0; x < el.length; x++) {
        if (el[x].checked) {return true;}
    }
    return false;
}
 

Form Functions Check If Field Filled In

 
function isFilled(el) {
	if (el.value == "" || el.value == null) {
		return false;
	} else {
		return true;
	}
}
 

Form Functions Check If Field Numeric

 
function isNumeric(el) {
    var regexp = /^[0-9]+$/;
    return regexp.test(el.value);
}