Dynamic insertion and deletion of animated hour glass?

**MarcMiller** · 12-08-2006, 07:51 AM

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

**jscheuer1** · 12-09-2006, 04:37 AM

Inserting an animated or other image temporarily (while a page loads) into a document is easy. The DOM is not required:

Code:

<img name="thegif" src="animated.gif" style="display:none;position:absolute;left:150px;top:200px;">
<script type="text/javascript">
document.images.thegif.style.display='inline';
onload=function(){document.images.thegif.style.display='none';}
</script>

**MarcMiller** · 12-11-2006, 03:01 AM

Originally Posted by jscheuer1

Inserting an animated or other image temporarily (while a page loads) into a document is easy. The DOM is not required:

Code:

<img name="thegif" src="animated.gif" style="display:none;position:absolute;left:150px;top:200px;">
<script type="text/javascript">
document.images.thegif.style.display='inline';
onload=function(){document.images.thegif.style.display='none';}
</script>

That's great but I believe my needs are far more complicated than that. I have the time JavaScript slideshow which has a built-in five second delay to let the first slide preload in order that 56K modem users should have a good experience having slides load while other slides are showing. It gets even more complicated than that I have control buttons that let the user decrease in increase the speeds in which the slights change in three second intervals. This is communicated to the user by a status window which is up dated instantaneously but has five second delay built into it to give the 56K user a good experience once again. So this hourglass animated gift which is supposed to show during these five second delays have nothing to do with low time. I am in the midst of developing solutions that I know will work.

Your interest in helping me is most appreciatived
Marc

**jscheuer1** · 12-11-2006, 03:56 AM

Originally Posted by MarcMiller

low time

??

Anyways, the principal is the same. You make the image's display property 'inline' while you want it to be visible and 'none' when not. While an element's display property is 'none', it cannot be seen and it takes up no layout space but, is still a part of the document so, is available later when and if it is needed. Much simpler than creating and destroying it with the DOM, generally more sensible too.

Thread: Dynamic insertion and deletion of animated hour glass?

Thread Tools

Search Thread

Dynamic insertion and deletion of animated hour glass?

Bookmarks

Bookmarks

Posting Permissions