Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Help! Using "For" Loop to Assign link URL's to Dynamically Created Divs NOT WORKING!

    I'm building a t-shirt shop whose interface includes a gallery of designs in an IFrame. When the user clicks on a design, a dedicated page is loaded into the IFrame which shows all the available products associated with the design the user clicked.

    I've put each design's image and associated page as the first and second elements of a nested array, and am using a for loop to then load all the images into the page that's shown in the IFrame when the web-site loads. It's looking beautiful, but here's the rub I've been stuck on for two days now with no solution in sight...

    The array, "designImages", has 37 elements (ie. designImages[0]... designImages[36]). When I click on a design image on the page, any design image, the browser (all browsers, so I can't blame Microsoft for this one ), loads the page for design #36. I've tried all sorts of things, but still cannot tell if the issue is because the dynamically generated divs are being reassigned the value [36] after the for loop's executed, or if the div id's are okay but somehow the code is rooting for [36], the last element of the array anyway.

    I need someone's help in enabling a click on #4 to load the page for #4, etc, etc. Here's the code below.

    Thanks.

    Code:
    /* designImages[x][0] = the image source on the page;
     * designImages[x][1] = the destination url on clicking the image;
    */
    
    		var designImages = new Array();
    		designImages[0] = new Array ( "Assets/DesignImages/Img00 - CosmicCircle.png" , "ProductGalleries/Img00.html" , "Cosmic Circles" , "Mark Lavin");
    		designImages[1] = new Array ( "Assets/DesignImages/Img01 - Flora.png" , "ProductGalleries/Img01.html" );
    		designImages[2] = new Array ( "Assets/DesignImages/Img02 - JBuddha.png" , "ProductGalleries/Img02.html" );
    		designImages[3] = new Array ( "Assets/DesignImages/Img03 - Ohm+Sun.png" , "ProductGalleries/Img03.html" );
    		designImages[4] = new Array ( "Assets/DesignImages/Img04 - Ohm+Burst.png" , "ProductGalleries/Img04.html" );
    		designImages[5] = new Array ( "Assets/DesignImages/Img05 - Space+Invader.png" , "ProductGalleries/Img05.html" );
    
    		designImages[6] = new Array ( "Assets/DesignImages/Img06 - Fire.png" , "ProductGalleries/Img06.html" );
    		designImages[7] = new Array ( "Assets/DesignImages/Img07 - Live.png" , "ProductGalleries/Img07.html" );
    		designImages[8] = new Array ( "Assets/DesignImages/Img08 - Being.png" , "ProductGalleries/Img08.html" );
    		designImages[9] = new Array ( "Assets/DesignImages/Img09 - Water.png" , "ProductGalleries/Img09.html" );
    		designImages[10] = new Array ( "Assets/DesignImages/Img10 - Abundance.png" , "ProductGalleries/Img10.html" );
    		designImages[11] = new Array ( "Assets/DesignImages/Img11 - Adventure.png" , "ProductGalleries/Img11.html" );
    
    		designImages[12] = new Array ( "Assets/DesignImages/Img12 - Air.png" , "ProductGalleries/Img12.html" );
    		designImages[13] = new Array ( "Assets/DesignImages/Img13 - Chance.png" , "ProductGalleries/Img13.html" );
    		designImages[14] = new Array ( "Assets/DesignImages/Img14 - Dangerous.png" , "ProductGalleries/Img14.html" );
    		designImages[15] = new Array ( "Assets/DesignImages/Img15 - Destiny.png" , "ProductGalleries/Img15.html" );
    		designImages[16] = new Array ( "Assets/DesignImages/Img16 - Dream.png" , "ProductGalleries/Img16.html" );
    		designImages[17] = new Array ( "Assets/DesignImages/Img17 - Earth.png" , "ProductGalleries/Img17.html" );
    
    		designImages[18] = new Array ( "Assets/DesignImages/Img18 - Ecstasy.png" , "ProductGalleries/Img18.html" );
    		designImages[19] = new Array ( "Assets/DesignImages/Img19 - Freedom.png" , "ProductGalleries/Img19.html" );
    		designImages[20] = new Array ( "Assets/DesignImages/Img20 - Friendship.png" , "ProductGalleries/Img20.html" );
    		designImages[21] = new Array ( "Assets/DesignImages/Img21 - Fulfillment.png" , "ProductGalleries/Img21.html" );
    		designImages[22] = new Array ( "Assets/DesignImages/Img22 - Generosity.png" , "ProductGalleries/Img22.html" );
    		designImages[23] = new Array ( "Assets/DesignImages/Img23 - Gift.png" , "ProductGalleries/Img23.html" );
    
    		designImages[24] = new Array ( "Assets/DesignImages/Img24 - Imagine.png" , "ProductGalleries/Img24.html" );
    		designImages[25] = new Array ( "Assets/DesignImages/Img25 - Joy.png" , "ProductGalleries/Img25.html" );
    		designImages[26] = new Array ( "Assets/DesignImages/Img26 - Kinky.png" , "ProductGalleries/Img26.html" );
    		designImages[27] = new Array ( "Assets/DesignImages/Img27 - Mystery.png" , "ProductGalleries/Img27.html" );
    		designImages[28] = new Array ( "Assets/DesignImages/Img28 - Mastery.png" , "ProductGalleries/Img28.html" );
    		designImages[29] = new Array ( "Assets/DesignImages/Img29 - Peace.png" , "ProductGalleries/Img29.html" );
    
    		designImages[30] = new Array ( "Assets/DesignImages/Img30 - Sexy.png" , "ProductGalleries/Img30.html" );
    		designImages[31] = new Array ( "Assets/DesignImages/Img31 - iBurn.png" , "ProductGalleries/Img31.html" );
    		designImages[32] = new Array ( "Assets/DesignImages/Img32 - PlayaTrash.png" , "ProductGalleries/Img32.html" );
    		designImages[33] = new Array ( "Assets/DesignImages/Img33 - Ohm+Burst.png" , "ProductGalleries/Img33.html" );
    		designImages[34] = new Array ( "Assets/DesignImages/Img34 - BlackRockCity.png" , "ProductGalleries/Img34.html" );
    		designImages[35] = new Array ( "Assets/DesignImages/Img35 - BarCode.png" , "ProductGalleries/Img35.html" );
    
    		designImages[36] = new Array ( "Assets/DesignImages/Img36 - NumberedBarCode.png" , "ProductGalleries/Img36.html" );
    		
    window.onload = function() 
    	{
    		creationCompleteHandler();
    	}
    
    function creationCompleteHandler()
    	{
    		calcNumDesigns();
    		setLinks();
    	}
    
    function calcNumDesigns()
    	{
    		var numDesignBoxes = designImages.length;
    		var numGalleryRows = Math.ceil( numDesignBoxes / 3 );
    		
    		for ( n = 0 ; n <= numGalleryRows - 1 ; n++ )
    			{
    				var newGalleryBox = document.createElement('div');
    				var newGalleryBoxID = ("galleryRow" + n);
    				newGalleryBox.setAttribute('id',newGalleryBoxID);
    				newGalleryBox.setAttribute('class',"galleryBox");
    				document.getElementById('content').appendChild(newGalleryBox);
    				
    				squareOff(newGalleryBox);
    				
    				var rowBoxes;
    				if  ( ( numDesignBoxes - ( n * 3 ) ) < 3 ) { rowBoxes = ( numDesignBoxes - ( n * 3 ) - 1 ) }
    				else rowBoxes = 2;
    				
    				for ( m = 0 ; m <= rowBoxes ; m++ )
    					{
    						var boxNum = ( n * 3 ) + m;
    						var newDesignBox = document.createElement('div');
    
    						var newDesignBoxID = "design" + boxNum;
    						newGalleryBox.appendChild(newDesignBox);
    						newDesignBox.setAttribute('id',newDesignBoxID);
    						newDesignBox.setAttribute('class',"designBox");
    
    						var newDesignImg = document.createElement('img');
    						var newDesignImgID = "designImg" + boxNum;
    						newDesignImg.setAttribute('id',newDesignImgID);
    						newDesignImg.setAttribute('class',"designImage");
    						newDesignImg.src = designImages[boxNum][0]; 
    						
    						newDesignBox.appendChild(newDesignImg);
    					}
    			}
    	}
    	
    function squareOff(frame)
    	{
    		document.getElementById(frame.id).style.height = ((document.getElementById(frame.id).offsetWidth) * .33) + 'px';
    	}
    	
    function setLinks()
    	{
    		for (x in designImages)
    			{ document.getElementById("design"+x).onclick = function(){ sendToURL(x) }
    			};
    	}
    
    function sendToURL(x)
    	{
    		var url = designImages[x][1]
    		MM_goToURL('self',url);
    		return document.MM_returnValue;
    	}
    	
    function MM_goToURL() 
    	{ //v3.0
     		 var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
     		 for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
    	}

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Try this:

    Code:
    for (var x in designImages)
    { 
        document.getElementById("design"+x).onclick = new Function( "sendToURL(" + x + ")" );
    }
    or:
    Code:
    for (var x in designImages)
    { 
        document.getElementById("design"+x).onclick = function(){
           sendToURL(Number(this.id.replace("design", ""))); //extract the x from the div id; "this" refers to the current object which is the div
        };
    }

  • Users who have thanked glenngv for this post:

    marklavin (10-13-2009)

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks Glenn! Tried the first solution...

    Working like a charm!


  •  

    Tags for this Thread

    Posting Permissions

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