Results 1 to 2 of 2

Thread: help to change DIV content - want to put a javascript into the DIV

  1. #1
    Join Date
    Jun 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default help to change DIV content - want to put a javascript into the DIV

    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/...xtbgfader.html

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

    The relevant code:

    (in Head...)

    Code:
    <style>
    .box2 {width: 408px; height: 88px;}
    </style>
    
    <script>
    function jumptodiv() {
      document.getElementById("area2").innerHTML = ????
    }
    
    </script>
    (Body...)

    Code:
    <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. Even an example of getting ANY javascript to work when poked into the DIV would be nice.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    style="box2" is meaningless, I think you mean class="box2"
    OK, that out of the way, this worked:
    Code:
    <html>
    <head>
    <title>Bring On the Ticker - Demo</title>
    <style>
    .box2 {width: 408px; height: 88px;}
    </style>
    <script type="text/javascript">
    function jumptodiv() {
      document.getElementById("pic").style.display='none';
      document.getElementById("tick").style.display='inline';
      }
    </script>
    </head>
    <body>
    <div class="box2">
    <img id="pic" src="someintroductionphoto.jpg">
    <span id="tick" style="display:none">
    <script src="ticker.js" type="text/javascript"></script>
    </span>
    </div>
    <form>
      <input type="button" value="About" onClick="jumptodiv();">
    </form>
    </body>
    </html>
    Last edited by jscheuer1; 06-18-2005 at 07:23 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •