0

I built this site several months back, and now my slider stopped working. I can’t remember any updates I did that would make it stop.

The main problem is that some of the pictures are not aligning correctly in the slider. (some of them are dropped below): Sign-A-Rama Portfolio Site

enter image description here Roundabout Slider Broken

I would really appreciate your help on solving this problem. – Caleb Mellas

frenchie
  • 51,731
  • 109
  • 304
  • 510
Caleb
  • 95
  • 3
  • 10
  • Yes, the strange part is that it only appears broken every couple times I visit the site... and whenever you click on another page, and then go back to the homepage – everything looks perfect. – Caleb Jun 21 '13 at 16:19
  • this is a really strange problem... – Caleb Jun 21 '13 at 16:19
  • 1
    try with `$(window).load(function()` instead of `jQuery(document).ready(function($)` – Abraham Uribe Jun 21 '13 at 16:26
  • 1
    Aha! I did experience the problem with Chrome 27, but only sometimes like Caleb. It feels too me as though its an issue with timing. Like by laying the images before they've loaded completely it causes the offset.top to be reported incorrectly or something like. – Daniel Gimenez Jun 21 '13 at 16:27
  • A few things I noticed. When the problem in chrome happens it happens in the order the slides occur in, so only the last three slides are offset. Secondly the script is setting the li's height at a very low value, like 10-20px, where as the others are around 250~300px. I have a thought that the width of border-top and border-bottom add up to that 10-20px and the images' heights are not being taken into account. – Daniel Gimenez Jun 21 '13 at 16:30
  • 1
    Abraham might be right! http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready. Good luck. Caleb, don't forget to update the question if this is the case. – Daniel Gimenez Jun 21 '13 at 16:31
  • thanks for all your ideas guys! I will try the $window.load function... now since I am working with Wordpress would I use it as $(window).load(function() or $(window).load(function($)? The reason I was asking is because Wordpress and jQuery don’t play well together unless you queue jQuery that way, instead of the normal method. – Caleb Jun 21 '13 at 18:14
  • Awesome @AbrahamUribe! Thanks so much for all your help as well @Daniel Gimenez. I changed it to use .load instead of .ready so that all the images were loaded before my jQuery sizing and animation were applied to make the carousel. – Caleb Jun 21 '13 at 21:27
  • I also applied some CSS styling so that my carousel won’t show until the javascript is fully loaded and ready. Works much, much better! – Caleb Jun 21 '13 at 21:27

1 Answers1

2

Thanks so much for all your help guys!

I changed it to use 

$(window).load(function() { ... code goes here });

instead of 

jQuery(document).readyfunction() { ... code ... )};

This ensures that all the images were loaded before my jQuery sizing and animation were applied to make the carousel.

I also applied some default CSS styling

display:none;

and then added 

$('#slider').css("display", "block");

so that my carousel won’t show until the javascript is fully loaded and ready. Works much, much better!

Part of the reason this was so difficult is that this is a responsive design. Instead of loading the whole slider in via javascript, I decided to just load the DOM and then use javascript to remove the slider on small screens. Using window.load should ensure that barely any images are downloaded before they are removed.

If the screen size is over 768px, I then load the slider script and change the slider’s css to “display: block”.

Only thing I need to figure out now is how to make it work when the screen size is changed but the page is not reloaded. I tried using 

$(window).resize(function() { ... }

but it gave me an error when I tried to use this function twice in one file. Any ideas there are appreciated!

Hope this helps someone else!

Caleb
  • 95
  • 3
  • 10