SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast thenk83's Avatar
    Join Date
    Sep 2005
    Location
    Hacienda Heights, CA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink Adding a break line after images. Help!!

    What am I doing wrong? I'm trying to add a break after the 5th image.

    Code:
    <html>
    <head>
    </head>
    <body>
    <img src="24.jpg" height="50" width="50">
    <img src="24.jpg" height="50" width="50">
    <img src="24.jpg" height="50" width="50">
    <img src="24.jpg" height="50" width="50">
    <img src="24.jpg" height="50" width="50">
    <img src="24.jpg" height="50" width="50">
    <img src="24.jpg" height="50" width="50">
    <img src="24.jpg" height="50" width="50">
    </body>
    </html>
    <script language="javascript">
    var imgELEMENTS = document.getElementsByTagName("img");
    for (var i = 0; i < imgELEMENTS.length; i++)
    	{
    		if (i == "5")
    		{
    		var breakELEMENT = document.createElement("br");
    		var imgELEMENT = document.getElementByTagName("img" + i)
    		imgELEMENT.appendChild(breakELEMENT);
    		}
    	}
    </script>
    Mmmmm .NET...PHP...CF...
    AIM: THENK83
    MSN: thenk83@hotmail.com

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An image cannot contain another element.
    Insert the break before the sixth image.

    The sixth image can be found with
    document.getElementsByTagName("img")[5]
    Arrays and node collections are 0 based.


    Code:
    var imgEl=document.getElementsByTagName("img")[5];
    var pa=imgEl.parentNode;
    var breakEl = document.createElement("br");
    pa.insertBefore(breakEl,imgEl)
    And you better put your script between the html tags, not outside the document.

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    5 Thread(s)
    well this:

    var imgELEMENT = document.getElementByTagName("img" + i);

    means this for each loop:

    var imgELEMENT = document.getElementByTagName('img0');
    var imgELEMENT = document.getElementByTagName('img1');
    var imgELEMENT = document.getElementByTagName('img2');


    What you want is:

    var imgELEMENT = document.getElementByTagName("img")[i];

  4. #4
    SitePoint Enthusiast thenk83's Avatar
    Join Date
    Sep 2005
    Location
    Hacienda Heights, CA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, so I got the concept above. I have no errors per Firebug? I figured I could use the same concept as I do in PHP for dynamic tabling. Also looks like everything has a parentnode. I'm trying to do the same thing I was doing with the breaks. But I wanna do it with a table. Help is appreciated! Thanks

    Code:
    <html>
    <head>
    </head>
    <body>
    <img src="24.jpg" height="50" width="50">
    <img src="24.jpg" height="50" width="50">
    <img src="24.jpg" height="50" width="50">
    <img src="24.jpg" height="50" width="50">
    <img src="24.jpg" height="50" width="50">
    <img src="24.jpg" height="50" width="50">
    <img src="24.jpg" height="50" width="50">
    <img src="24.jpg" height="50" width="50">
    </body>
    </html>
    <script language="javascript">
    var column = 6;
    var cell = 1;
    var theELEMENT = document.getElementsByTagName("img");
    theBODY = document.getElementsByTagName("body")[0];
    theTABLE = document.createElement("table");
    theROW = document.createElement("tr");
    for (var i = 0; i < theELEMENT.length; i++){
    	if (cell == "1"){
    		theCOLUMN = document.createElement("td");
    		theABSTRACT = document.createTextNode("Kimmy Love");
    		theCOLUMN.appendChild(theABSTRACT);
    		theROW.appendChild(theCOLUMN);
    		var cell = cell + 1;
    	}
    	else if (cell == column){
    		theCOLUMN = document.createElement("td");
    		theABSTRACT = document.createTextNode("Kimmy Love");	
    		theCOLUMN.appendChild(theABSTRACT);	
    		theROW.appendChild(theCOLUMN);
    		theTABLE.appendChild(theROW);
    		var cell = 1;
    	}
    	else {
    		theCOLUMN = document.createElement("td");
    		theABSTRACT = document.createTextNode("Kimmy Love");
    		theCOLUMN.appendChild(theABSTRACT);
    		theROW.appendChild(theCOLUMN);
    		var cell = cell + 1;
    	}
    	cell++;
    }
    theBODY.appendChild(theTABLE);
    theTABLE.setAttribute("border", "2");
    </script>
    Last edited by thenk83; Sep 9, 2007 at 13:47.
    Mmmmm .NET...PHP...CF...
    AIM: THENK83
    MSN: thenk83@hotmail.com


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
  •