PDA

View Full Version : Now, I need Help with DIV tags!!!



sbmhome
10-13-2006, 04:28 PM
I am able to make DIV tags appear and disappear my question is as follows.

I have a lot of DIV tags that I want to sort. It takes a bit of time for the sorting to occur.

I want to throw up an "updating page...please wait message", while this is occuring...the problem is that the page doesn't allow the message to render!

I think this is occuring because even though the DIV's are being moved around, the screen only refreshes once the sort is done (which is when I remove the "updating page" message...so it never shows up).

How can i force one DIV element to show on the page, while the sort is still going on?

Any help will be great appreciated.

djr33
10-13-2006, 05:58 PM
Not really sure, but you'd need to post the source for someone to be able to help....

sbmhome
10-13-2006, 07:26 PM
<script>
function showObject(obj){
var el = document.getElementById(obj);
el.style.display = '';
}
function hideObject(obj){
var el = document.getElementById(obj);
el.style.display = 'none';
}




function changeBackgroundColors(){
//Show update image
showObject('updateMessageDIV');



//do some kind of work
for (i = 0; i < 3; i++){

// alert("See...Now the pic showed up!"); //Uncomment this alert to see the PIC!
if (float1.style.background =="red"){
backGroundColor ="green";

} else{
backGroundColor ="red";
}

float1.style.background = backGroundColor;

}

//hide Update image
hideObject('updateMessageDIV');

}

</script>


<style type="text/css">

#float1 {width:200px;margin: 0 auto;background: #FFFFFF;padding-top:2px; padding-bottom:2px;padding-left:3px; padding-right:3px;

top:100px;
position:absolute;left:200px;z-index:200000;}
</style>

<html>
<body>
This shows that my show and hide functions work:<br>
<a href="#" onclick="showObject('updateMessageDIV');"> showOjbect</a>
<a href="#" onclick="hideObject('updateMessageDIV');"> hideOjbect</a><br><br>

This starts the Test of the below text
<a href="#" onclick="changeBackgroundColors();"> change background colors</a>



<div id="float1">
The background for this text will change
</div>

<br><br><br><br><br><br><br><br>

To check this out correcty


Yahoo Image below:<br>
<div id="updateMessageDIV" style="display:none;">
<img src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
</div>


<br>
1. The Yahoo image SHOULD appear before the color changes<br>
2. To see that this is the case, uncomment the "alert" in the changeBackgroundColors() function.
</body>
</html>

sbmhome
10-13-2006, 07:27 PM
SAVE THE BELOW FILE AND OPEN IT IN A BROWSER....THANKS GUYS!



<script>
function showObject(obj){
var el = document.getElementById(obj);
el.style.display = '';
}
function hideObject(obj){
var el = document.getElementById(obj);
el.style.display = 'none';
}




function changeBackgroundColors(){
//Show update image
showObject('updateMessageDIV');



//do some kind of work
for (i = 0; i < 3; i++){

// alert("See...Now the pic showed up!"); //Uncomment this alert to see the PIC!
if (float1.style.background =="red"){
backGroundColor ="green";

} else{
backGroundColor ="red";
}

float1.style.background = backGroundColor;

}

//hide Update image
hideObject('updateMessageDIV');

}

</script>


<style type="text/css">

#float1 {width:200px;margin: 0 auto;background: #FFFFFF;padding-top:2px; padding-bottom:2px;padding-left:3px; padding-right:3px;

top:100px;
position:absolute;left:200px;z-index:200000;}
</style>

<html>
<body>
This shows that my show and hide functions work:<br>
<a href="#" onclick="showObject('updateMessageDIV');"> showOjbect</a>
<a href="#" onclick="hideObject('updateMessageDIV');"> hideOjbect</a><br><br>

This starts the Test of the below text
<a href="#" onclick="changeBackgroundColors();"> change background colors</a>



<div id="float1">
The background for this text will change
</div>

<br><br><br><br><br><br><br><br>

To check this out correcty


Yahoo Image below:<br>
<div id="updateMessageDIV" style="display:none;">
<img src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
</div>


<br>
1. The Yahoo image SHOULD appear before the color changes<br>
2. To see that this is the case, uncomment the "alert" in the changeBackgroundColors() function.
</body>
</html>

sbmhome
10-13-2006, 10:52 PM
Looks like I found the solution....

Assuming "showobject" and "hideObject" are not called inside of the changeBackgroundColors() function

This is what I was trying before and it won't work....
showObject('updateMessageDIV');
changeBackgroundColors();
hideObject('updateMessageDIV');

the trick is to call the functions like this ().

showObject('updateMessageDIV');
timerID=setTimeout('changeBackgroundColors()',1);
hideObject('updateMessageDIV');

Hope someone else finds this useful.