SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic insertion and deletion of animated hourglass?

    Hi
    I have been learning about inserting nodes with JavaScript. I embarked on this pursuit in order to learn how to insert and delete an animated hourglass from my page in order to let the user know the script was working. I thought I had approach that would work according to what I have read thus far. But it doesn't work. I am inserting text as a text node which I want to be interpreted as an HTML tag one should reaches his the browser. This is not happening. I do not know if this approach can succeed. The reason I thought of doing it this way is I have a need to insert styling to in order that I may position this animated hourglass. So I thought in-line styling was a way to go to accomplish my positioning. Well if someone here could tell me how to do this insertion and deletion of my animated gift after looking at my code I would certainly appreciate it. Feel free to tell me about other approaches or linked me to the way of doing this rather than just show me here.

    Code below.
    HTML
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
     Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>insertBefore Img My Try</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Script-Type" content="txt/javascript">
    <script src="insertBeforeImgMyTry.js" type="text/javascript"></script>
    </head>
    <body>
    <ul >
    <li ID="prev">
       <a href="#">Green script running</a>
    </li>
    </ul>
    <div id="parentElementHtml">
        <div id="referenceElementHtml">AAAAAAAAAAAAAAA<div>
    </div>
    </body>
    </html>
    JavaScript
    Code:
    function green () {
    this.style.backgroundColor="green";
    newSPAN = document.createElement("SPAN");
    newText = document.createTextNode("<img id='hourglass' style='position:absolute; top:-34px;' src='ani-busy.gif' alt='hourglass'/>");
    var newElement=newSPAN.appendChild(newText);
    var referenceElement=document.getElementById("referenceElementHtml");
    var parentElement=document.getElementById("parentElementHtml");
    var insertedElement = parentElement.insertBefore(newElement, referenceElement);
    };
    window.onload = function () {
    document.getElementById("prev").getElementsByTagName('A')[0].onclick=green;
    }
    Very sincerely
    Marc

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An <img> is not a text node. It's an inline element. You need to create it the same way you created the <span>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    An <img> is not a text node. It's an inline element. You need to create it the same way you created the <span>
    Well I can do that, but how do I create all its attributes in-line style etc? I probably could do without an ID attribute in the image tag but I need the rest.


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
  •