Cmotion : Need Help [appears & disappears] [Archive]

Shugenja

01-05-2008, 10:50 PM

1) Script Title: CMotion Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm

3) Describe problem: I had the script running well until I wrapped it under a div with position:relative . Now it appears and disappear randomly when you move the mouse.

I can use it well without it being wrapped under that div , but that div plays an important role in my site soo , if you could help me solve this it would be great. thanks in advanced

Example:

<div style="position:relative;margin: 0;padding: 0;text-align: center">

<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

<div style="white-space:nowrap;" id="trueContainer"><a href="images/01.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/01_tn.jpg" class="gradualfader" />
</a><a href="images/02.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/02_tn.jpg" class="gradualfader" />
</a><a href="images/03.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/03_tn.jpg" class="gradualfader" />
</a><a href="images/04.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/04_tn.jpg" class="gradualfader" />
</a><a href="images/05.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/05_tn.jpg" class="gradualfader" />
</a><a href="images/06.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/06_tn.jpg" class="gradualfader" />
</a><a href="images/07.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/07_tn.jpg" class="gradualfader" />
</a></div>

</div>
</div>

</div>

jscheuer1

01-06-2008, 04:02 AM

When you text-align:center; around an absolutely positioned division wrapped in a relatively positioned one, things can get weird in IE. Try this:

<div style="position:relative;margin: 0;padding: 0;text-align: center">

<div id="motioncontainer" style="text-align:left;position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer"><a href="images/01.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/01_tn.jpg" class="gradualfader" />
</a><a href="images/02.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/02_tn.jpg" class="gradualfader" />
</a><a href="images/03.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/03_tn.jpg" class="gradualfader" />
</a><a href="images/04.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/04_tn.jpg" class="gradualfader" />
</a><a href="images/05.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/05_tn.jpg" class="gradualfader" />
</a><a href="images/06.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/06_tn.jpg" class="gradualfader" />
</a><a href="images/07.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/07_tn.jpg" class="gradualfader" />
</a></nobr>
</div>
</div>

</div>

But you may even need to do this:

<div style="position:relative;margin: 0;padding: 0;text-align: center">

<div style="text-align:left;">
<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer"><a href="images/01.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/01_tn.jpg" class="gradualfader" />
</a><a href="images/02.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/02_tn.jpg" class="gradualfader" />
</a><a href="images/03.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/03_tn.jpg" class="gradualfader" />
</a><a href="images/04.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/04_tn.jpg" class="gradualfader" />
</a><a href="images/05.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/05_tn.jpg" class="gradualfader" />
</a><a href="images/06.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/06_tn.jpg" class="gradualfader" />
</a><a href="images/07.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/07_tn.jpg" class="gradualfader" />
</a></nobr>
</div>
</div>
</div>

</div>

If you are working with a DOCTYPE that triggers standards mode, this would work to center it, no text-align:center; wrapper required - or allowed:

<div id="motioncontainer" style="position:relative;overflow:hidden;margin:0 auto;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer"><a href="images/01.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/01_tn.jpg" class="gradualfader" />
</a><a href="images/02.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/02_tn.jpg" class="gradualfader" />
</a><a href="images/03.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/03_tn.jpg" class="gradualfader" />
</a><a href="images/04.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/04_tn.jpg" class="gradualfader" />
</a><a href="images/05.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/05_tn.jpg" class="gradualfader" />
</a><a href="images/06.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/06_tn.jpg" class="gradualfader" />
</a><a href="images/07.jpg" rel="lightbox[1]" title="my caption">
<img border="0" src="images/07_tn.jpg" class="gradualfader" />
</a></nobr>
</div>
</div>

Note: I brought back the non-standard nobr tag in my examples for its backward compatibility.