...

View Full Version : Once content loaded continue



marcus1060
10-29-2006, 10:12 PM
I have a script that loads content using AJAX, and I also have another script that makes effects with AJAX.

But I want to make it so when the user clicks the link to hides the old content, show a loading image till the content is loaded, and then fades it in.

Here is my javascript


<script src="ajax.js" type="text/javascript"></script>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA{

function loadmerch(im)
{
Element.hide('full-merch');
new Effect.Appear('full-merch');
ajaxpage('merchpic.php?im='+im, 'full-merch');
}
//]]>
</script>


And here is what the link would look like:
<a onclick="loadmerch('ep.jpg');" href="#">

Thanks!

brandonH
10-30-2006, 05:14 PM
let me guess, you tried doing all that in one function right?
I came across the same problem myself.

the work around i came across is using different event handlers, that way each thing i want done gets doen.

<a href='#' onmousedown="DoHide('myelementsid');" onmouseup="ajaxpage('merchpic.php?im='+im, 'full-merch');">

<element id="myelementsid"></element>

<div style="position:absolute; left:??px; top:??px; display:none;">
<table><tr><td align=center valign=middle>
please wait while content loads...
</td></tr></table>
</div>


function DoHide(Id){
document.getElementById(Id).style.display="none";
document.getElementById('wait').style.display="block";
}

function ajaxpage(location){
your script;
//at end of script be sure to make wait div hide again
document.getElementById('wait').style.display="none";
}



the only thing i dont like though is that if the user clicks the mouse down and holds it then does a mouseout, the ajax function doesnt get called and the wait div is displayed. this of course means that it doesnt get re hidden either cuz it gets hid at the end of the ajax function.

marcus1060
10-31-2006, 08:57 AM
let me guess, you tried doing all that in one function right?
I came across the same problem myself.

the work around i came across is using different event handlers, that way each thing i want done gets doen.

<a href='#' onmousedown="DoHide('myelementsid');" onmouseup="ajaxpage('merchpic.php?im='+im, 'full-merch');">

<element id="myelementsid"></element>

<div style="position:absolute; left:??px; top:??px; display:none;">
<table><tr><td align=center valign=middle>
please wait while content loads...
</td></tr></table>
</div>


function DoHide(Id){
document.getElementById(Id).style.display="none";
document.getElementById('wait').style.display="block";
}

function ajaxpage(location){
your script;
//at end of script be sure to make wait div hide again
document.getElementById('wait').style.display="none";
}



the only thing i dont like though is that if the user clicks the mouse down and holds it then does a mouseout, the ajax function doesnt get called and the wait div is displayed. this of course means that it doesnt get re hidden either cuz it gets hid at the end of the ajax function.

That function works for me. It just doesn't look proper because unless the images is already cached, it fades in the alt text as the image downloads.
And I am very confused by what you posted for me...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum