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 19
  1. #1
    Member metromax's Avatar
    Join Date
    Jun 2007
    Posts
    76
    Member #
    15335
    Hi everyone. I just was wondering why this little script below wasn't working. When clicked, I want the link to write an image into a div below. Please help! Here's the code:

    Code:
    <a href="javascript: getElementById('room').write('<img src=hi.jpg />'); return false">click me</a>
    <div id="room"></div>
    Please help.

  2.  

  3. #2
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    It doesn't work like that. document.getElementById('room') will return the div called "room", which I'm sure you're aware of. The div object has no method called write(). The way you can change the contents of the div is as follows:
    Code:
    <a href="javascript:void(document.getElementById('room').innerHTML = '<img src=\'hi.jpg\' />'));">Click me</a>
    Just for the record, it's document.write(). And it's not advised at all. Also, notice that I used void(). This makes sure that there is no return value of whatever is executed in javascript:. Otherwise, your page will be overwritten completely with whatever is returned. For example, if you return false, it'll overwrite your page with "false".

    EDIT: I just found out that return cannot be used anywhere else other than in a function as well (onclick events and whatnot are all functions internally), which means that return false; will give you a Javascript error for every time the link is clicked.
    Hyperair

  4. #3
    Member metromax's Avatar
    Join Date
    Jun 2007
    Posts
    76
    Member #
    15335
    wow, great thanks. Now, how would I make it just "add" the content to it, not replace it altogether?

  5. #4
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    Oh that. Change the "=" to "+=". This appends the new code to the end of the old code.
    Hyperair

  6. #5
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Or, go with the easy way. Pick up the jQuery library, which blobs a new way for you to do just that:


    Code:
    $("#room").append('<img src=\'hi.jpg\' />');
    Pick, with a CSS-like selector (many more selectors, some even beyond CSS, are available), the room ID, then append that text on the end. Easy as pie. If you wanted to replace the contents, you could use the .html(string) function instead of append.

    And if you're inserting stuff into a blank div like that, a little animation could also be done, with chaining:

    Code:
    $("#room").append('<img src=\'hi.jpg\' />').slideDown(500);
    This appends the code to the room ID, then uses that element again to do a slide down effect, which lasts for 500 ms.

    You could even go further to dynamically creating the DIV through js, so you don't need the blank DIV in the HTML. That's another story.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  7. #6
    Member metromax's Avatar
    Join Date
    Jun 2007
    Posts
    76
    Member #
    15335
    Great! That's really helpful. So the source code now looks like this, right?

    Code:
    <a href="javascript: $('#room').append('<img src=\'hi.jpg\' />');">click me</a>

  8. #7
    Member metromax's Avatar
    Join Date
    Jun 2007
    Posts
    76
    Member #
    15335
    So far I've come up with this to add:

    Code:
     <a href="javascript:void(document.getElementById('room').innerHTML = getElementById('room').innerHTML + '<img src=\'hi.jpg\' />'));">Click me</a>
    And it's working great.

  9. #8
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    A more organized way would be to do this:

    HTML Code:
    <a href="#clicked" id="clicklink">click me</a>
    and in your JS..

    Code:
    $(document).ready(function(){
       $('#clicklink').click(function(){
          $('#room').append('<img src=\'hi.jpg\' />');
       });
    });
    It's a bit more complicated, but bear with me. First, the $(document) call returns a jQuery object containing the document handler. You can then chain the .ready(function) method, and the function parameter will be run the moment the document is ready. You know how most scripts use window.onLoad? document.ready is better because it doesn't waste time waiting for the whole page to load, which you can see on many websites. So thats the explanation for the first and last lines.

    Second, the function contains another jQuery call, this time to the element with the ID of clicklink. It then chains a .click(function) event, which sets a function to run the moment the element is clicked. That function then contains the code we want to run on click.

    It might seem more complicated, but its nice to get used to this way of coding. For example, if you wanted to style all external links differently from in-site links, you could do this:

    Code:
    $(document).ready(function(){
    
     $("a").not("[href^=/]").not("[href^=#]").addClass("external");
    
    });
    This selects all <a> tags, removes those whose href attribute starts with "/" and "#" (as those two denote the link to being relative), and give the class "external" to all remaining links (which are outbound links). The syntax of [href^=/] is actually pretty simple. It's an XPath selector. It matches all elements with the href attribute that starts with "/". (It's the ^ that tells the selector "starts with"). [href=#mylink] will match any elements with "#mylink" as the href. There are more - see here.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  10. #9
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    To be clear, [href^=/] may be valid XPath, but it's also a perfectly valid CSS selector. Also, relative paths don't always start with a /; only paths relative to the base of the site do. Paths relative to the current directory may start with a letter. I suspect a better way of achieving externals is a `[href^=http://]'.

    hyperair -- I've used return false in handlers for some time, even though admittedly I haven't inlined Javascript like that in a while. I'm pretty sure it works fine... Just make sure to separate it with a semicolon from the rest of the code.

  11. #10
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    Well that's what I did with my test page, and I got a ton of errors in my error console. It might be helpful to note that I'm using Firefox 3.0b1 though I don't see how that would change matters anyway.
    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 12:29 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com