Databases
StackOverflow2013
Postsdbo
POChrome and JQuery issue - $(document).ready(function() { }); being called before page is loaded
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChrome and JQuery issue - $(document).ready(function() { }); being called before page is loaded
    text
    copied!<p>I am learning JQuery, and I have ran into an odd issue. I made a slideshow, and it works in IE, Firefox 3.0 and Firefox 3.5, but the initial image doesn't work in Chrome. </p> <p>The script just cycles through a list of images and resizes the divs (image, caption) based on the size of the viewing window. If I move the $(document).ready(function() { }); script to the end of the body, the script works OK. </p> <p>I was under the impression that the $(document).ready function wouldn't be called until the document had totally loaded. Is that correct, and the Chrome render engine is doing something odd, or I am doing something wrong?</p> <p>here is the code:</p> <p>slideShow.html</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="Stylesheet" type="text/css" href="css/main.css" /&gt; &lt;script src="scripts/jquery-1.3.2.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="scripts/jquery.slideShow.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { slideShow(); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="gallery"&gt; &lt;a href="#" class="show"&gt; &lt;img src="images/bees1_edited.jpg" alt="Bees" title="" rel="&lt;h3&gt;Bees!&lt;/h3&gt; Some bees in my lavender." /&gt;&lt;/a&gt; &lt;a href="#"&gt; &lt;img src="images/bee1_edited.jpg" alt="Bee One" title="" rel="&lt;h3&gt;Bee&lt;/h3&gt; Close-up of a bee on a lavender flower." /&gt; &lt;/a&gt; . . . &lt;div class="caption"&gt; &lt;div class="content"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="clear"&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>jquery.slideShow.js</p> <pre><code>function slideShow() { //Set the opacity of all images to 0 $('#gallery a').css({ opacity: 0.0 }); //Get the first image and display it (set it to full opacity) $('#gallery a:first').css({ opacity: 1.0 }); //Set the caption background to semi-transparent $('#gallery .caption').css({ opacity: 0.7 }); //Resize the width of the caption according to the image width $('#gallery a:first').find('img').css({ height: $('#gallery a:first').find('img').height() }); $('#gallery a:first').find('img').css({ width: $('#gallery a:first').find('img').width() }); var captionPosition = parseInt($('#gallery a:first').find('img').css('height')) * -1; if ($(window).height() &lt; $('#gallery a:first').find('img').height()) { var imageWidth = parseInt($('#gallery a:first').find('img').width()); var imageHeight = parseInt($('#gallery a:first').find('img').height()); $('#gallery a:first').find('img').css({ height: $(window).height() - 10 }); var cssHeight = parseInt($('#gallery a:first').find('img').css('height')); $('#gallery a:first').find('img').css({ width: parseInt((cssHeight * imageWidth) / cssHeight) }); captionPosition = parseInt($('#gallery a:first').find('img').css('height') * -1); } if ($(window).width() &lt; $('#gallery a:first').find('img').width()) { var imageWidth = parseInt($('#gallery a:first').find('img').width()); var imageHeight = parseInt($('#gallery a:first').find('img').height()); $('#gallery a:first').find('img').css({ width: ($(window).width() - 50) }); var cssWidth = parseInt($('#gallery a:first').find('img').css('width')); $('#gallery a:first').find('img').css({ height: parseInt((cssWidth * imageHeight) / imageWidth) }); captionPosition = parseInt($('#gallery a:first').find('img').css('height')) * -1; } $('#gallery .caption').css({ width: $('#gallery a:first').find('img').css('width') }); $('#gallery .caption').css({ bottom: captionPosition }); //Get the caption of the first image from REL attribute and display it $('#gallery .content').html($('#gallery a:first').find('img').attr('rel')).animate({ opacity: 0.7 }, 400); //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds setInterval('gallery()', 6000); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('#gallery a:first') : current.next()) : $('#gallery a:first')); //Get next image caption var caption = next.find('img').attr('rel'); //Set the fade in effect for the next image, show class has higher z-index next.css({ opacity: 0.0 }).addClass('show').animate({ opacity: 1.0 }, 1000); //Hide the current image current.animate({ opacity: 0.0 }, 1000).removeClass('show'); next.find('img').css({ height: next.find('img').height() }); next.find('img').css({ width: next.find('img').width() }); var captionPosition = parseInt(next.find('img').css('height')) * -1; if (next.find('img').height() &gt; $(window).height()) { var imageHeight = parseInt(next.find('img').height()); var imageWidth = parseInt(next.find('img').width()); next.find('img').css({ height: (parseInt($(window).height()) - 50) }); var cssHeight = parseInt(next.find('img').css('height')); var testVal = parseInt((cssHeight * imageWidth) / imageHeight); next.find('img').css({ width: testVal }); //alert('css width=' + next.find('img').css('width') + ', css height=' + cssHeight + ', img width = ' + imageWidth + ', img height = ' + imageHeight + ', window width = ' + $(window).width() + ', window height = ' + $(window).height()); captionPosition = parseInt(cssHeight * -1); } if (parseInt(next.find('img').css('width')) &gt; parseInt($(window).width())) { var imageHeight = parseInt(next.find('img').height()); var imageWidth = parseInt(next.find('img').width()); next.find('img').css({ width: (parseInt($(window).width()) - 50) }); var cssWidth = parseInt(next.find('img').css('width')); var testVal = parseInt((cssWidth * imageHeight) / imageWidth); next.find('img').css({ height: testVal }); //alert('imageWidth = ' + imageWidth + 'imageHeight = ' + imageHeight + 'css height = ' + next.find('img').css('height') + ', css width = ' + next.find('img').css('width')); captionPosition = parseInt(next.find('img').css('height')) * -1; } $('#gallery .caption').css({ width: next.find('img').css('width') }); $('#gallery .caption').css({ bottom: captionPosition }); //Set the opacity to 0 and height to 1px $('#gallery .caption').animate({ opacity: 0.0 }, { queue: false, duration: 0 }).animate({ height: '1px' }, { queue: true, duration: 300 }); //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect $('#gallery .caption').animate({ opacity: 0.7 }, 100).animate({ height: '100px' }, 500); //Display the content $('#gallery .content').html(caption); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload