A recent design I had to build required that each list item in a menu (WordPress) be a different colour. After some head scratching I came up with a method using jQuery.

We start off be making sure our counter is 0. Then loop through each list item. We can get the current item number from jQuery and which element we are currently acting on. Setting the colour variable to be 1 + i means we count from 1 up to the total number of list items. I’m using modulo operator to loop the numbers after 8. Using jQuery we can then add class to the current element. The class could contain any CSS operation. I used this for a spectrum of colours.

    colour=0;
	
	$('.nav ul li').each( function(i, elem) 
	{
	
		colour=1+(i%8);
	
		$(elem).addClass('listitem'+colour);
			
	});

Filed under: Programming — Tags: css, javascript, jquery, wordpress — admin @ 8:29 pm

Using jQuery and CSS we can change the colour of alternate rows in a table. The code below will lock on to each table row and change the background colour on alternate rows. I’m making the change with CSS but you could always add a CSS class instead.

    jQuery('table tr').each(function(i, domEle)
	{
	
         /* skip the first row (probably your headings) */
	  if ( i!=0 )
	  {
	  
                /* if i / 2 has no remainer set the background to this */ 
		if ( i%2==0 )
		{
	  
	      jQuery( domEle ).css('background-color','#dcddde');
		
		}
		else  /* if i / 2 does have a remainder change the colour to this */
		{
		
		  jQuery( domEle ).css('background-color','#f3f3f4');
		
		}
	  
	  }
	
	});

If you want add a class instead replace

jQuery( domEle ).css('background-color','#f3f3f4');

/* with */

jQuery( domEle ).addClass('odd');

Filed under: Programming — Tags: background, color, colour, javascript, jquery, table, wordpress — admin @ 8:19 pm

If you’re trying to include YouTube videos or Google maps, in fact anything that uses an IFRAME in your WordPress you’ve probably run into problems. The visual view in WordPress removes the IFRAME code. Well I have a solution for you, use javascript to insert the code. Below is the code I’m using. All you would need to do is change the address in the URI variable and alter the width and height attributes.

Here is the video.

Filed under: Programming — Tags: google maps, javascript, wordpress, youtube — admin @ 7:51 pm