Positioning messed up when cycle lite starts going

Question

Edit: Somehow I knew, after two days messing with this, that I'd figure it out just after I posted it here. For future reference, the auto doesn't seem to work for some reason for height and width. Manually define it in the cycle plugin, use a finder function to find the max if you are using different sized images. This seems to work, but if anyone has a solution to get 'auto' back working, I'd love it. Sorry for wasting space on this!

Working cycle code:

$('.fadeit').cycle({ 
    fx:     'fade',
   *width:   240,
   *height:  320,
    speed:   300, 
    timeout: 3000, 
    next:   '.fadeit', 
    pause:   1 ,
    slideExpr: 'img.andy'
});

This is a problem I've seen other people have, and I had once before and resolved. Unfortunately, it has popped back up, even after using the 'fix' that seemed to work before (position absolute and float left or right.) When my page starts loading, the text appears beside the image, as it's supposed to. As soon as cycle-lite starts up, the text moves under (as in it looks like its z-index is lower) the slideshow, so it is hidden. It doesn't seem to matter what css config I use, but I'm assuming it must be the issue. I heard the full cycle plugin works, but I can only edit part of the body and cycle-lite is what's pre-included in the head. I also can't really make the change to the 'This is some text' since I'm not always the one that writes it. This is going into a library, but I can't really put it there without getting it working small-scale first.

My code:

<div height="320" width="240" style="position:relative; float:left; padding:5px;" id="thisisit" class="fadeit">
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-1.jpg" style="position:relative; display:none; float:left; padding:5px;" class="andy" /> 
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-2.jpg" style="position:relative; display:none; float:left; padding:5px;" class="andy" />  
<img alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-3.jpg"  style="position:relative; visibility:visible; float:left; padding:5px;" class="andy"/> 
<script language="javascript" type="text/javascript"> 

window.onload=function() { 
var aclass = '.' + 'andy';
$(aclass).css('display','inline');

$('.fadeit').cycle({ 
    fx:     'fade', 
    speed:   300, 
    timeout: 3000, 
    next:   '.fadeit', 
    pause:   1 ,
    slideExpr: 'img.andy'
}); };

</script>
</div>
This is some text.

All my styling is done in tabs, due to a 'template' setup they're using at work. I have no FTP access ATM. What you see is what I've used. — Truk, May 16 '11 at 00:29

score 2 · Accepted Answer · answered May 20 '11 at 14:41

width: 'auto' doesn't work here because cycle-lite takes each child element of .fadeit and puts it in absolute positioning, thus removing them from flow and giving .fadeit an effective auto width of 0. (I don't know why your previous 'fix' would have seemed to work; floats and absolute positioning don't mix.)

I've noticed that <div class="fadeit"> has height and width attributes, which are not legal for <div>. However, if you replace them with those dimensions in the style attribute instead (style="width: 240px; height: 320px; ..."), your original JS (without hard-coded width and height) works. I don't know whether in your case hard-coding them in the HTML/CSS is any better than in the JS, but based on the sample code you provided, I'm guessing that might be the case?

I also noticed a lot of extraneous CSS in your sample code (e.g. position: relative on .fadeit when cycle-lite will do this for you, redundant floats on the children images, etc.). Here's my suggested code:

<div style="float: left; padding: 5px; height: 320px; width: 240px;" id="thisisit" class="fadeit">
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-1.jpg" style="display: none;" class="andy" /> 
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-2.jpg" style="display: none;" class="andy" />  
<img alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-3.jpg" class="andy"/> 
<script language="javascript" type="text/javascript"> 

window.onload=function() { 
var aclass = '.' + 'andy';
$(aclass).css('padding':'5px');

$('.fadeit').cycle({ 
    fx:     'fade', 
    speed:   300, 
    timeout: 3000, 
    next:   '.fadeit', 
    pause:   1 ,
    slideExpr: 'img.andy'
}); };

</script>
</div>
This is some text.

Sorry this is probably not the answer you were hoping for!

You are completely correct about the width and height not being proper. They were not left there, and were just part of the testing process I tried. The extraneous css was due to the same reason. I would have sworn I'd tried this exact combination, but now it seems to work. Other than you changing the images' padding instead of their display in window.onload, that IS the answer I was looking for. Thanks! — Truk, May 20 '11 at 21:30

Positioning messed up when cycle lite starts going

1 Answers1