help changing DIV content - want to put a javascript into the DIV

Discussion in 'Javascript' started by rpesq, Jun 15, 2005.

  1. rpesq

    rpesq Guest

    Hi,

    I Need help changing the content of a DIV. I sincerely researched the
    issue and have not found a solution except to scrap the idea and stick
    with the iframe code that I had been using. My purpose here is to
    avoid iframes.

    I know how to change the DIV content to other basic html statements,
    such as basic IMG's or Lists, but I want to put a Javascript into the
    DIV, and have not found a way to do it.

    The Javascript that I want to place into the DIV is a typical
    tickerbox, and it is found at:
    http://www.24fun.com/downloadcenter/textbgfader/textbgfader.html

    I saved the code for the tickerbox to a "tickerbox.js" file.

    The relevant code:

    (in Head...)

    ..box2 {width: 408px; height:88px;}

    <script>
    function jumptodiv() {
    document.getElementById("area2").innerHTML = ????
    }
    </script>


    (Body...)

    <DIV id="area2" style="box2">
    <img src="someintroductionphoto.jpg">
    <!-- the goal is to replace this photo with the Tickerbox
    Javascript when user clicks the button below -->

    </div>

    <form>
    <input type="button" value="About" onClick="jumptodiv()">
    </form>

    A working solution will be sincerely appreciated. (As a sidenote, I
    cannot seem to get ANY javascript to work properly when "poked" into
    the DIV. Even a plain alert statement will render, but will then give
    an error.)
     
    rpesq, Jun 15, 2005
    #1
    1. Advertisements

  2. rpesq

    RobG Guest

    You insert script elements just like any other element: create it, set
    the attribute you want and then append it to some existing element.

    e.g. create a file 'hi.js' with content:

    alert('Hi');

    Put the following HTML into a .html file in the same directory:

    <input type="button" value="Insert script" onclick="
    var d = document.getElementById('divA');

    var s = document.createElement('SCRIPT');
    s.type = 'text/javascript';
    s.src = 'hi.js';
    d.appendChild(s);
    ">
    <div id="divA"></div>

    When you click the button, the script element is appended to the div
    element and the script runs.
    Sorry, can't access the site from where I am. Over to you.
    Using the above example, something like:

    var d = document.getElementById('area2');

    // Delete content:
    var c;
    while ( ( c = d.firstChild ) ) {
    d.removeChild(c);
    }

    // Add the script element
    var s = document.createElement('SCRIPT');
    s.type = 'text/javascript';
    s.src = 'tickerbox.js';
    d.appendChild(s);

    should do the trick. The "Delete content" loop could be replaced by:

    d.innerHTML = '';

    but that is likely abhorrent to DOM evangelists. Since you need to use
    DOM anyway you may as well stick to that and not introduce non-standard
    methods when standards can be followed without inconvenience.
    If you are attempting to insert the script using innerHTML, then that
    is likely your problem. innerHTML is not part of any W3C standard, it
    was invented by Microsoft and has been widely copied by browser
    developers. Its behaviour is (as far as I know) 'reverse engineered'
    and therefore essentially undocumented and unspecified, though
    Microsoft provide some documentation on its use:

    <URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp>

    It is very useful in some situations, but use it with caution.
     
    RobG, Jun 16, 2005
    #2
    1. Advertisements

  3. rpesq

    rpesq Guest

    Hi Rob,

    Thanks. Awesome information, much appreciated. Exactly what I needed.
     
    rpesq, Jun 17, 2005
    #3
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.