SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member Melanie Shepherd's Avatar
    Join Date
    Apr 2011
    Location
    South Africa
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alternating row colour - Jquery/XML

    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

    Code JavaScript:
    $(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. #2
    SitePoint Member Melanie Shepherd's Avatar
    Join Date
    Apr 2011
    Location
    South Africa
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I've done is the following:

    1.) Added 2 classes to the style sheet

    Code CSS:
    .rowcolor0 {
        background-color: #ffffff;
    }
     
    .rowcolor1 {
        background-color: #dddddd;
    }

    and then made the following change to the .js file

    I changed

    Code JavaScript:
    str = str + '  <tr>';

    to

    Code JavaScript:
    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. #3
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,039
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Looks okay to me. The JS is indeed pretty heavy and could be optimized, but the idea you implemented is correct

    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
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •