text/image crawler in a hidden div problem

[developerhusain]

1) Script Title: Text and Image Marquee Crawler v1.53
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/crawler/



3) Describe problem:

Actually i'm having the image crawler in a hidden div. and I'm opening it onclick. The image crawler starts but stops after cycling it one time. But whereas as per my requirement it should go on continously without any gap. I'm able to witness there is some problem in style="display:none";please help me solve this problem.

[Beverleyh]

Its hard to say what the problem is without seeing the actual page. Please post the link so we can see the effect you're describing.

[jscheuer1]

You're right. There is a problem with display none. Instead use:

position: absolute;
visibility: hidden;

Then, when you want to make it visible, change to:

position: static;
visibility: visible;

There are various ways to do this in javascript, one is:

<input type="button" onclick="document.getElementById('hiddencrawler').style.position = 'static'; document.getElementById('hiddencrawler').style.visibility = 'visible';" value="Show Crawler">
<div id="hiddencrawler" style="visibility: hidden; position: absolute;">
<div class="marquee" id="mycrawler">
crawler contents go here
</div>
</div>

If you want more help, then Beverley is probably right, please include a link to the page on your site that contains the problematic code so we can check it out.

[developerhusain]

Thanks for replying Mr. jscheuer1 and beverleyh.Here is the problematic code.

This is the script for hiding and displaying the div

<script language="javascript">
function toggleDiv(id,flagit) {
if (flagit=="1"){
if (document.layers) document.layers[''+id+''].display = "block"
else if (document.all) document.all[''+id+''].style.display = "block"
else if (document.getElementById) document.getElementById(''+id+'').style.display = "block"
}
else
if (flagit=="0"){
if (document.layers) document.layers[''+id+''].display = "none"
else if (document.all) document.all[''+id+''].style.display = "none"	
else if (document.getElementById) document.getElementById(''+id+'').style.display = "none"
}

}
</script>

<tr><td><div id="whole" style="display:none;">
<table width="930" cellpadding="0" cellspacing="0" class="style11" border="0">
<tr>
<td width="25" class="style30b"><a href="#" onClick="marqueeInit.ar[0].direction = 'right'; return false;" class="style30b">></a></td>
<td width="890"><div class="marquee" id="mycrawler1"><? 
$quer6=mysql_query("select * from whole_spice where not id1='0' order by level1 ");
while($resul6=mysql_fetch_array($quer6))
{ 
?>
<a href="javascript:void (0)" onClick="<? 
$quer7=mysql_query("select * from whole_spice where not id1='0' order by level1 ");
while($resul7=mysql_fetch_array($quer7))
{ 
?><? if ($resul6 ['level1']==$resul7 ['level1']) { ?>toggleDiv ('spice_whole_<?=$resul7 ['level1'] ?>',1);<? } else { ?>toggleDiv ('spice_whole_<?=$resul7 ['level1'] ?>',0);<? } ?><? } ?>"><img src="../images/muntaha/<?=$resul6 ['image1'] ?>" width="100" height="100" border="0"/>&nbsp;&nbsp;</a>
<? } ?></div></td></tr>
</table>
</div></td>
<td width="15" class="style30b" align="left"><a href="#" onClick="marqueeInit.ar[0].direction = 'left'; return false;" class="style30b"><</a></td>
</tr>
<tr><td><div id="ground" style="display:none;">s</div></td></tr>
<tr><td><div id="blend" style="display:none;">s</div></td></tr>
<tr><td><div id="oleoresins" style="display:none;">s</div></td></tr></table>

<script type="text/javascript">
marqueeInit({
	uniqueid: 'mycrawler1',
	style: {
		'width': '900px',
		'height': '180px'
	},
	inc: 5, //speed - pixel increment for each iteration of this marquee's movement
	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 2,
	neutral: 150,
	savedirection: true,
	random: true
	
	
});

</script>

Actually i can only use display:none in my application because visibility:hidden has lot of disadvantanges like opening up the space even if it is not visible.The crawler turned out to be very useful and great script for me. But this problem has hit the roadblock.

[jscheuer1]

i can only use display:none in my application because visibility:hidden has lot of disadvantanges like opening up the space even if it is not visible.

That can be true, but not when combined with position:absolute. You can keep that antiquated* function for other uses on the page if you like, use this one for the crawler:

<script type="text/javascript">
function toggleCrawler(id, flagit) {
	var elstyle = document.getElementById(id).style;
	if (flagit == '1'){
		elstyle.visibility = 'visible';
		elstyle.position = 'static';
	}
	else
		elstyle.visibility = 'hidden';
		elstyle.position = 'absolute';
	}
}
</script>

Then where you have:

<div id="whole" style="display:none;">

Make that:

<div id="whole" style="visibility:hidden;position:absolute;">

Because you're using PHP with it, your post doesn't clearly show how the toggleDiv function is being used. You could safely switch it to toggleCrawler for all as long as the other things, if any, that it works upon are set to visibility:hidden;position:absolute

In fact, because of the use of PHP, it's hard to see whether or not you even have a valid crawler there, let alone whether or not it's generating the desired calls to the toggleDiv function.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.



*I say antiquated because browsers that require document.layers and document.all no longer exist except in museums.