CODEWITHSUNDEEP
jqueryhtmlcsscycle
Adrian Trimble
Adrian Trimble

Reputation: 259

jQuery Cycle Slides overlap on page load

I have used jQuery Cycle in numerous projects. This time round I am getting a really bizarre visual glitch. On page load, all the slides are shown on top of each other, then as the script cycles through each slide, it eventually fixes itself (until the page is reloaded). For the example and code click here. The image below shows the glitch which seems to be happening in all browsers (tested in Firefox 4, Safari 5, Chrome 10, IE8)

enter image description here Adding a background colour to each slide div does "fix" the problem in that it hides the other slides, but it isn't really a proper solution in my opinion.

Been battling with this all afternoon and I'm at a bit of a loss. Any help would be greatly appreciated.

Thanks

Upvotes: 0

Views: 2266

Answers (5)

Chris
Chris

Reputation: 1587

I had the same problem, but fixed it by following Truk's answer in setting each slide to display: none (except the first one), but instead of changing it to display inline on page load, you do it in the cycle call as follows:

 $(document).ready(function(){
    $('#header-content').cycle({
        fx: 'custom', 
          cssBefore: { left: 384, display: 'block' }, 
          animIn:  { left: 0}, 
          animOut: { left: -384 }
    });
})

Hope this helps someone else out!

Upvotes: 1

Tom
Tom

Reputation: 11

I did it using a custom transition, set the display to none on all except maybe the first then add something like .....

jQuery(document).ready(function($) { 

$('.fade').cycle({ 
fx: 'custom', 
cssBefore: { top: 420, display: 'inline' }, 
animIn:  { top: 0 }, 
animOut: { top: -420 } 
}); });

This will show the item just before it's used!

Upvotes: 1

addedlovely
addedlovely

Reputation: 3194

Should you not put your call to jQuery Cycle in the callback of head.js

head.js("http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js", "js/jquery.cycle.lite.min.js", function() {
      $('#featured').cycle();
});

Or just do away with head.js seeing as your not using any html5 /css3?

Upvotes: 0

Truk
Truk

Reputation: 133

in the div tag use style="display:none;" on all but one, and I gave them all a common class name. You could just get the children of the calling div too. On load change it to "display:inline". The only one to show is the one with no display:none.

Example using img tags, same principle:

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

<script language="javascript" type="text/javascript"> 

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

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

</script></div>

Upvotes: 0

Todd
Todd

Reputation: 676

Add a display:none; to the slides so that they don't display on page load.

Upvotes: 0

Related Questions