SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast jonny_boy's Avatar
    Join Date
    Mar 2002
    Location
    FLO, SC, US
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Replace a div with different content

    Ok, here's the project. Our company is delving into html/flash email and I've been looking into how other companies who do this type of thing for a living solve the various issues.

    Something I came across recently was what appears to be a javacript call that on loading the email message in a javascript enabled/permitted email program, it would replace the contents of a <div> </div> with content from a web server. The application was to run a video clip in an email and in the initial html the space for the clip was just a graphic with a click here to start which displayed on non-javascript email clients. When clicked it would load the page on the server via the browser. In Outlook though, the content would automatically change to show the server version of the page with the clip running.

    I was wondering if anyone out there can point me in the right direction to finding something that would do this? I am somewhat literate in javascript though I tend to hack and edit scripts that are already written rather than write my own and don't have the know-how to write something like this from scratch.

    Any help appreciated.
    Jon

  2. #2
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, hopefully this script will help:

    Code:
    <html>
    <head>
    <script language="JavaScript">
    function changeCode() {
    document.getElementById("change").innerHTML = "<h2>Now look at this!</h2>";
    }
    </script>
    <BODY>
    <span id="change"><h1>Look at this!</h1></span>
    <input type="button" value="Change code!" onclick="changeCode()">
    </BODY>
    </html>
    What this script does is, recode the HTML in between the two span tags. What you're trying to do is a bit complicated, but hopefully this will show you what you need to do -- sort of. It's the innerHTML property in DHTML that allows you to recode HTML in a particular area (like in a layer, in a table, etc).

  3. #3
    SitePoint Enthusiast jonny_boy's Avatar
    Join Date
    Mar 2002
    Location
    FLO, SC, US
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great. I came across the innerHTML concept after posting but this example is a little more helpful than what I found. I will play with this and see how it works. Appreciate the help.

  4. #4
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    you can change anything in the same way, not just a span. you can directly change the HTML contents of any object in the same way, as long as you 'id' it.

    <img id=
    <p id=
    <div id=
    <h1 id=

    dont know if you can re-asign an img's HTML with texted HTML, but you can fill a div with a variety of HTML and change the whole division.

    you can also add directly to a division using +=

    <h1 id=header>Widgets</h1>
    <script>
    h=document.getElementById("header").innerHTML
    newh="<del>"+h+"<del>"
    document.getElementById("header").innerHTML+=newh
    </script>
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  5. #5
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    sorry, not with img, you can swap them using the 'document.getElementById("imagename").src=""'
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  6. #6
    SitePoint Enthusiast jonny_boy's Avatar
    Join Date
    Mar 2002
    Location
    FLO, SC, US
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great! This is good stuff to know. Appreciate the feedback.

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Just so you all know, innerHTML is not standard DOM. However, it is supported in IE, Gecko, and Opera (I think), so you shouldn't have too many problems in scripting-aware browsers.


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
  •