Alternating row colour - Jquery/XML

JavaScript
1

Hi Everyone

I have an oscommerce web site with a cart in the header which shows/hides the content when you hover over it. What I’m trying to do is alternate the row color of the part that drops down when items have been added to the cart but I’m just not getting it right no matter what I try and despite the many articles and tutorials that I’ve read up on it as well as the very many posts here in the forum. My knowledge of Jquery and XML is not quite what it should be yet, though I am learning slowly.

I’d really appreciate it if someone could please have a look at my file and guide me in the right direction.

My file

 
$(function(){ // wait for the document to load
		   
	  var globals = {
		 session_id:				session_id,
   cart_fetch_file:		"cart_fetch.php?" + session_id ,
			cart_fetch: 			false,
   loading_image: 		'<center><img src="images/assets/loading.gif" align="middle" vspace="8" alt=""></center>',
			cart_image_width: 	image_width,
			cart_image_height: 	image_height,
			cart_opacity: 		1,
			box_status: 			false,
			timer: 				"",
			speed: 				"fast",
			text_cart_quantity: 	text_cart_quantity,
			text_cart_subtotal:	 	text_cart_subtotal,
			text_cart_empty:		text_cart_empty,
			cart_text:				cart_text,
			cart_link:				cart_link
			
        };
	  $("#animBoxCart").html(globals.loading_image);
	  $("#btn_animBoxCart").hover(					
					function(){						

							retrievecart();							

						clearTimeout(globals.timer);
						animatedbox("show");	   					
	 				},
					function(){							
	   					globals.timer = setTimeout('animatedbox("hide")',400);
	 				}
		);	  
	  $("#animBoxCart").hover(					
					function(){clearTimeout(globals.timer);animatedbox("show");},
					function(){globals.timer = setTimeout('animatedbox("hide")',400);
	 				}
		);	  
	  animatedbox = function(action){	
	  		if(action=="show") $("#animBoxCart").animate({height: "show", opacity: "show"}).animate({opacity:globals.cart_opacity});	
			else $("#animBoxCart").animate({height: "hide", opacity: "hide"});
	  }
	  retrievecart = function(){
		  $.ajax({
				url: globals.cart_fetch_file,
				dataType: "xml",				
				success: function(returned_data){
						parsedata(returned_data);						
						globals.cart_fetch = true;
					}
				});
	  }
	  
	  parsedata = function(xml){		  
			var str = "";
			var cart = xml.documentElement.firstChild;
		  	if(cart.childNodes.length > 0 ){				
				str = str + '<table border="0" width="100%" cellspacing="0" cellpadding="5">';
				str = str + '  <tr><td class="animBoxCartLink" colspan="2"><a href="' + globals.cart_link + '">' + globals.cart_text + '</a></td></tr>';
				for (var i = 0; i < cart.childNodes.length; i++){	
				
					try{name =  cart.getElementsByTagName("NAME")[i].childNodes[0].nodeValue;}catch(e){name = "Item";}
					try{attributes =  cart.getElementsByTagName("ATTRIBUTES")[i].childNodes[0].nodeValue;}catch(e){attributes = "";}
					try{llink =  cart.getElementsByTagName("LINK")[i].childNodes[0].nodeValue;}catch(e){llink = "";}
					try{image =  cart.getElementsByTagName("IMAGE")[i].childNodes[0].nodeValue;}catch(e){image = "No Image";}
					try{qty =  cart.getElementsByTagName("QTY")[i].childNodes[0].nodeValue;}catch(e){qty = "message";}
					try{price =  cart.getElementsByTagName("PRICE")[i].childNodes[0].nodeValue;}catch(e){price = "$0.00";}
					
					dimension = (globals.cart_image_width ? 'width="' + globals.cart_image_width : '') + (globals.cart_image_height ? '" height="' + globals.cart_image_height + '"' : '');
					
					str = str + '  <tr>';
					str = str + '    <td class="animBoxCartImage" width="' + globals.cart_image_width + '" align="center"><a href="' + llink +'"><img src="' + image + '" ' + dimension + ' border="0" alt="' + name + '"></a></td>';
					str = str + '    <td class="animBoxCartContent" width="100%">';
					str = str + '      <div class="animBoxCartName"><a href="' + llink + '">' + name + '</a><br />' + attributes + '</div>';
					str = str + '      ' + globals.text_cart_quantity + ' ' + qty;
					str = str + '      <div class="animBoxCartPrice">' + price + '</a></div>';
					str = str + '      <a href="' + llink + '"> More Info </a>';
					str = str + '    </td>';
					str = str + '  </tr>';
			  	}  
				total = cart.nextSibling;
				str = str + '  <tr><td class="animBoxCartTotal" colspan="2"> Total &nbsp;' +total.childNodes[0].nodeValue + '</td></tr>';
				str = str + '</table>';
		  	}else{
				str = str + '<div class="animBoxCartNotice">' + globals.text_cart_empty + '</div>';
			}
		  $("#animBoxCart").html(str);	
	  }
		  
 });

Many Thanks in advance
Melanie

2

What I’ve done is the following:

1.) Added 2 classes to the style sheet


.rowcolor0 {
    background-color: #ffffff;
}

.rowcolor1 {
    background-color: #dddddd;
}

and then made the following change to the .js file

I changed

					
str = str + '  <tr>';

to


str = str + '  <tr class="rowcolor' + (i%2) + '">';

its working for me now and I’m able to style as i want but I did notice my pc is taking a bit of strain when I add an item to the cart - I wish someone could just confirm that what I’ve done is indeed correct or show me a better way to do things.

Melanie

3

Looks okay to me. The JS is indeed pretty heavy and could be optimized, but the idea you implemented is correct :tup:

Although one could say you could give all <tr>s a background color and then only give the ones that a need a different color a class. But that’s quite nit picky :slight_smile: