Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Senior Member solidgold's Avatar
    Join Date
    Jun 2006
    Posts
    766
    Member #
    13373
    hi,
    A while ago i made a start at a sort of Lightbox script and recently decided that it'd be a good project to practice on to improve my javascript abilities.
    I had a quick shufty at the source code for the original lightbox script and saw that they use d document.createElement to insert the xhtml into the page unobtrusively, i wondered how to go about using this command to similar effect, does anybody know how?
    thanks,
    SolidGold

  2.  

  3. #2
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    document.createElement is used to create a DOM unbound element. You can control it very similar to the object that is returned by document.getElementById. For example:

    Code:
    var div = document.createElement("div");
    div.appendChild(document.createTextNode("Hello World!"); // <div>Hello World!</div>
    div.id = "myDiv"; // <div id="myDiv">Hello World!</div>
    var img = document.createElement("img"); // <img />
    img.src = "http://blabla/bla.jpg"; // <img src="http://blabla/bla.jpg" />
    div.appendChild(img); // <div id="myDiv">Hello World!<img src="http://blabla/bla.jpg" /></div>
    Basically you can mess around as much as you want with that div, adding event handlers and whatnot (though it's not shown above). I've shown what the HTML representation is like in a comment on the same line for easier understanding.

    Finally when you're done messing, you can put it somewhere on the page. Naturally since it's a div the most common place it would go is inside document.body. So:
    Code:
    document.body.appendChild(div);
    or if you want to make it a child of something else:
    Code:
    document.getElementById("someotherelement").appendChild(div);
    If you don't want to add it as a child behind, here are some other options:
    Code:
    document.body.insertBefore(document.body.firstChild,div); // insert at the beginning of <body>
    document.body.insertBefore(someotherelementwhichmustbechild,div); //insert before element specified
    You can still mess around with that div though, and now if you call document.getElementById("myDiv") it'll return the exact same thing. In other words:
    Code:
    alert(document.getElementById("myDiv") === div); // true
    Something important to note is that you can/should only do document.body.appendChild once the </body> is found. Otherwise it probably would have undesirable/unpredictable effects.

    In a nutshell: document.createElement() takes one argument, which is the type of tag you have. If you want to create <a></a>, then you have document.createElement("a"); for example.

    Hope this helps.
    Hyperair

  4. #3
    Senior Member solidgold's Avatar
    Join Date
    Jun 2006
    Posts
    766
    Member #
    13373
    thanks a lot, although I cant get it working properly (i'm still a bit of a beginner to JavaScript), Firebug gives me this error - "document.body has no properties"

    how do i fix that?

  5. #4
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    ._. Could I see the page in action please? There hasn't been a page that I've seen that does not have document.body.
    Hyperair

  6. #5
    Senior Member solidgold's Avatar
    Join Date
    Jun 2006
    Posts
    766
    Member #
    13373
    christ, that doesn't sound good!

    the page is at http://aesthetic-design.co.uk/1.html

  7. #6
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    Ah yes. Remember what I told you about how document.body.appendChild can only be done AFTER </body> has been found? As the page is being loaded, the <script></script> is loaded before <body></body> and hence is executed. So, what happens is that document.body doesn't exist while the script is executing. So you get the error. What you need to do is put that bit of code into the onload handler of body. Perhaps in a function or something, and then <body onload="myFunction();"></body>. Or you could do some more complex thing involving the onDOMReady event.
    Hyperair

  8. #7
    Senior Member solidgold's Avatar
    Join Date
    Jun 2006
    Posts
    766
    Member #
    13373
    yay! thanks a lot! works perfectly now!

  9. #8
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    No problem. By the way, I suggest reading up about DOM in www.w3schools.com. It's very beneficial for what you intend to do. What I just told you is a crash course/overview of document.createElement. In order to milk the full potential of Javascript and DOM, you should go read a full-blown tutorial (or several).
    Hyperair

  10. #9
    Senior Member solidgold's Avatar
    Join Date
    Jun 2006
    Posts
    766
    Member #
    13373
    one more question (sorry!), is it possible to alter styles in this code - for example display:none?

  11. #10
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    Yes it is possible. Similar to how you can modify inline styles in elements using document.getElementById('someid').style.display = 'none' for example, you can do the same here.

    Also, since you cannot use "-" in a name in Javascript, all CSS attributes which have "-" in them will be converted to this format: background-color becomes backgroundColor.
    Hyperair


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:10 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com