SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ugly situation, can Javascript save me?

    Ok so, I've coded a template which uses alot of background images. I coded it as fluid and thats one reason things have gotten ugly. The code is XHTML 1.0 and CSS 2.0 valid. Its pretty much clean except for the beginning. It starts like this:

    Code:
    <div id="page"><div class="right"><div class="left"><div class="b"><div class="br"><div class="bl"><div class="middle">
    
    ...............
    
    </div></div></div></div></div></div></div>
    Looks really bad, doesnt it?

    I was wondering if I could do something about this using Javascript? Say, I just place <div id="page"> ... </div> and using JS, I add the rest of the elements so that only browsers read that code and search engines dont know anything about their existence?

  2. #2
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could, by I think you're better off having the markup like that. Using Javascript to generate the DOM is essentially just hiding the nastyness -- Not removing it.

  3. #3
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using Javascript to generate the DOM is essentially just hiding the nastyness -- Not removing it.
    I understand that but cant Javascript be used to seperate such presentational things? The reason I want to get rid of it is because it has no signifiance to the structure of the document. And I am not sure how bad this would be for search engines?

  4. #4
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Naif View Post
    I understand that but cant Javascript be used to seperate such presentational things?
    Not really. Javascript is not an extra layer on top of the document. It is a means to alter the document, after it has been loaded.

    Quote Originally Posted by Naif View Post
    And I am not sure how bad this would be for search engines?
    Not to worry; It's purely an aesthetic thing. Search engines have been fed garbage for so long, that they can easily deal with that. Heck, they can get meaning out of disastrous code. The important thing is, that you use semantic markup correctly. As long as you use the neutral <div> and <span> tags, they shouldn't have any influence.

    I can understand your motivations, but I really think you're making it a lot worse this way. By adding (unneeded) javascript, you introduce a chance of it going wrong. Plus, altering the DOM from javascript is rather slow, making your page heavier to render.

  5. #5
    SitePoint Member
    Join Date
    Jul 2007
    Location
    New York, NY
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i would agree with kyberfabrikken regarding using JS to add DOM elements:
    - you are begging for something to break somewhere for some users
    - you are making the user's computer do extra work it shouldn't need to do

    that said, if you still want to do this, i would create an array of all those DIV classes, then create a function that loops through each array item, creates a new DIV, gives it the appropriate class from the array, then appends that new DIV to the parent DIV (id="page").

    this function should be called after the page loads, unobtrusively, i mean.

    something like this should work:

    Code:
    var divArray = new Array("right","left","b","br","bl","middle")	// add others if necessary
    var parentDIV = document.getElementById("page");	// get the parent DIV (id="page")
    for (var i=0; i<divArray.length; i++) {				// loop through the array of classes
    	var newDiv = document.createElement("div");	// create DIV
    		newDiv.setAttribute("class",divArray[i]);	// give DIV the appropriate class
    	parentDIV.appendChild(newDiv);				// append the new DIV to id="page"
    }
    hope this helps,
    Atg
    Last edited by aarontgrogg; Nov 9, 2007 at 14:49.
    Aaron T. Grogg
    aarontgrogg.com/

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    HTML for content
    CSS for appearance
    JavaScript for behaviour

    If it isn't behaviour of the page then it shouldn't be done using JavaScript.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


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
  •