Wednesday 15 May 2013

jQuery returning wrong height value for image in some environments -


I have an image slider in which an image shows an image to the left half and the right half of the gray background Showing a caption with Since I am using Bootstrap for UI, the image changes the dimension as a widow change, so I'm using jQuery to shape captions correctly. It works fine on the local host, but not on my staging environment.

jquery:

  jquery (document) .ready (function ($) {// the correct size of the cartel changes window change function size_carousel () {var height = $ ('Carousel-Caption'). ($ .'- Carousel-Caption '). ($ .'- Carousel-Caption'). (Function () {$ (this). Height (height);}}}} $ (window). Reset (function () {size_carousel ();}); $ ('# MyCarousel') Ready (function () { Size_carousel ();});});   

HTML excerpt:

  & lt; Div id = "myCarousel" class = "carousel slide" & gt; & Lt; Ol class = "carousel-indicator" & gt; & Lt; Li data-target = "# myCarousel" data-slide-to = "0" square = "active" & gt; & Lt; / Li & gt; & Lt; Li data-target = "# myCarousel" data-slide-to = "1" & gt; & Lt; / Li & gt; & Lt; Li data-target = "# myCarousel" data-slide-to = "2" & gt; & Lt; / Li & gt; & Lt; / Ol & gt; & Lt; Div class = "carousel-interior" & gt; & Lt; Div class = "item active" & gt; & Lt; Img src = "& lt ;? php bloginfo ('template_directory') ;? & gt; /images/test/demo1.jpeg" class = "span6" /> & Lt; Div class = "carousel-caption span 6" & gt; & Lt; H3 square = "cat" & gt; Tech News & lt; / H3 & gt; & Lt; H2 class = "title" & gt; Article Title & lt; / H2 & gt; & Lt; P square = "deck well small" & gt; Cross Folio Audio, DAPIBIS AC Executives Inn, Egastas Ezet Whats There is no part of the management on e-Met Mets. Nullam ID can be used as ID data. There is no part of the management on e-Met Mets. Nulla ID ID ID AITIT ITOTTP / LTTPADATPADTO / PACDODAADOITLITIITIT IT & Lt; / P & gt; & Lt; / Div & gt; & Lt ;! - / caption - & gt; & Lt; / Div & gt; & Lt ;! - / item - & gt; & Lt; / Div & gt;   

On refresh, the console displays the correct value in localhost (depending on the window size, this varies 2-300 b / y) while the staging environment is always Gives 30 regardless of window size. When you change the size of the window, it returns the correct value and adjusts captions correctly, so only one problem is in the initial page load.

Local Host is a MAMP and a MediaTemple GS staged platform, both with the same WordPress install and jQuery versions, so I have a hard time trying to isolate them in different ways. Used to be.

You can see it.

Change this:

  $ (window). Resize (function () {size_carousel ();}); $ ('# MyCarousel') Ready (function () {// Ready event is only for document! Size_carousel ();});   

For this:

  $ (window) .on ('resize size', function () {size_carousel ();});    

No comments:

Post a Comment