width returning 0 in jquery - javascript

i have some jquery script which runs after the window has loaded
$(window).load( function() {
$('.picture a img').each(function(index) {
$(this).height(280);
if ($(this).width() > $(this).height()) {
alert("yes");
} else {
alert("no");
}
});
});
i always get a "no" from this when i know some of the images should be a "yes". When i trace the script in chrome i noticed that the $(this).width() always returns a 0. ive googled around and some suggestions were that the images havent loaded but here ive used the window.load method which i thought should run once everything has loaded. any ideas??
thanks for any help in advance

Chrome is weird about image widths. I noticed then when building a jQuery photo gallery. If your image width is not specifically set in the tag, chrome will return 0. FF, and IE will figure out the width, but chrome will not. Try actually setting the width and see if you get the desired result then.
<img width="200" src="..." />

You need to run your code when the image is loaded, the following code should work:
$(window).load( function() {
$('.picture a img').load( function() {
$(this).height(280);
if ($(this).width() > $(this).height()) {
alert("yes");
} else {
alert("no");
}
});
});
note that every DOM element that have some kind of web resource associated to (window, img, iframe) respond to .load() event.

try
if ($(this).attr("width") > $(this).attr("height")) {

try adding a load event on the image, so it will only execute when the image is fully loaded.
$(window).load( function() {
$('.picture a img').each(function(index) {
$(this).bind('load', function () {
$(this).height(280);
if ($(this).width() > $(this).height()) {
alert("yes");
} else {
alert("no");
}
})
});
});
you can also try checking this.complete on the image object

I just wanted to add that you should also ensure that your image is actually a visible element. I've had plenty of issues in the past trying to measure visible:hidden or display:none elements. If you are indeed attempting to measure a hidden element, you can get past it by doing something like
var width = $('img').show().width();
$('img').hide();
Now that code is incredibly vague, but it gives you my thought behind visibility flashing.

The correct method to use, to run your scripts after the dom has finished loading, is:
$(document).ready(function() { /*your code here*/ });

Related

jquery not getting the image values on server

I have this javascript that's supposed to get the image's actual width and height. It works when I test locally on 127.0.0.1:8000 console logs on the snapshot but on the server it fails returns 0 as the image width and height.
Tried nesting the code in jquery ready but it does trigger before the image fully loads so I believe this is the issue.
here's the javascript
$(function() {
$(document).ready(function() {
$('.lynk-section img').each(function() {
var width = $(this)[0].naturalWidth;
console.log(width);
//$(this).css('max-width', width+'px');
var height = $(this)[0].naturalHeight;
console.log(height);
//$(this).css('max-height', height+'px');
});
});
});
$(function() { and $(document).ready(function() { are the same thing (the first one is a shorthand), you only need one. But anyway, this will just wait for all the HTML code to be present in the page, not for the assets to be loaded. As #Rory said, window.load will wait for the images to be loaded, so you can then grab their dimensions.
you have to use the onload event of the image, or maybe you just have to use window.onload event
//....
$('img').each(function() {
$(this).on("load", function(){
console.log("width: ", this.naturalWidth);
console.log("height: ", this.naturalHeight);
});
});
//....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://via.placeholder.com/50x150">
<img src="http://via.placeholder.com/100x150">
<img src="http://via.placeholder.com/200x150">
Put your code under window load event.
$(function() {
$(document).on('load',function() {
// Your code to measure image dimensions should go here.
});
});

My javascript function doesn't fire on page refresh

I have a JavaScript function which doesn't fire on page refresh. It works when I navigate to the page from another page, but fails if I refresh the page.
All this function does is assign the height of one element in the page to the height of another element (If they both exist).
jQuery(document).ready(function ($) {
if ($(".Video_Pane iframe").length && $(".Image_Pane img").length) {
$(".Video_Pane iframe").height($(".Image_Pane img").height())
}
}
Any ideas? Console doesn't show any errors regarding this
The existence of the img does not imply that it has been loaded (so you can read its height). And refreshing will usually invalidate the cached version of the image so it must be reloaded.
Try using the load event (on the window object) and not the ready
jQuery(window).load(function ($) {
if ($(".Video_Pane iframe").length && $(".Image_Pane img").length) {
$(".Video_Pane iframe").height($(".Image_Pane img").height())
}
})
You have a syntax error in you code.
After the last } there is a ); missing.
I just tried it out and its working for me like this:
jQuery(document).ready(function ($) {
console.log("Hello");
});
You are missing a bracket.
jQuery(document).on('ready',function () {
if ($(".Video_Pane iframe").length && $(".Image_Pane img").length) {
$(".Video_Pane iframe").height($(".Image_Pane img").height())
}
});
I would also use .on('ready') rather than .ready.

JQuery fades not working in IE9

I'm new to JQuery and can't for the life of me figure out why this isn't behaving properly. As the content in my "content" div changes, I want it to fade in and out. I created a generic "load" function to do this:
function loadPage(page, callback) {
if(current_doc != page) {
current_doc = page;
$("#content").fadeOut(400, function() {
$("#content").load(current_doc, function() {
$("#content").hide().fadeIn(400, function() {
if(typeof(callback) == 'function'){ callback(); }
});
});
});
}
}
Is there some sort of glaring mistake that I'm missing?
Thanks.
P.S. - This code works fine in Firefox.
One thing to check in IE, in Internet Options > Advanced, under Multimedia should be a checkbox that says "play animations in webpages". Ensure that is checked.
While I'm not entirely sure why, placing the content div inside another div and fading that instead seems to have done the trick. I would think that that would have been giving me issues only if "content" itself were being deleted, but that isn't the case from my code. Oh well.

document.height not affected by jquery calls.

I have already followed instructions on how to make a specific div height take up the entire document. I created the following function, which works perfectly when the page is first loaded.
function resizeBody() {
$(document).ready(function () {
$(window).resize(function() {
$('.body').height((document).height - $(".topbar").height() - 30);
});
$(window).resize();
console.log(document.height);
});
};
In another section of my code, I am hiding and showing divs using jquery to create tabs. These tabs are all of different heights. The code is as follows:
$(document).ready(function() {
$(".tab").click(function () {
$(".tab_content").hide();
$(".tab").css("font-weight","normal");
resizeBody();
});
$("#infoButton").click(function() {
$("#info").show();
$("#infoButton").css("font-weight", "bold");
});
$("#toolsButton").click(function () {
$("#tools").show();
$("#toolsButton").css("font-weight", "bold");
});
$("#dataButton").click(function () {
$("#data").show();
$("#dataButton").css("font-weight", "bold");
});
$("#visButton").click(function () {
$("#vis").css('display','inline-block');
$("#visButton").css("font-weight", "bold");
});
resizeBody();
});
My problem is that when I hide or show a div, the properties of the document aren't updated. Calling console.log(document.height) in the resizeBody() function still prints the original height of the document. Oddly, when I type "document.height" directly into the developer console, the correct (resized) value is printed.
Additionally, after opening the developer console, the page seems to update (without any kind of refresh) and the body div is correctly resized.
What am I missing here? Is this a problem specific to Chrome or am I misunderstanding something fundamental about the way javascript deals with the document object.
It may be important to note that all of my divs use inline-block as their display style. Each div gives a specific value for it's height in the web inspector.

why does this jquery image swap not work in chrome and on first load in firefox

I am trying to use jquery to replace an image on rollover (with fade) you can see this on the bottom left here:
http://www.anzie.com/index_rollover.php
However in chrome it just fades to near opaque. and in firefox on the first load I get a small blue box on the top left corner (as if it is out of position). but then on refresh it works in firefox. This is working perfectly on my own machine, it only does not work when I try it online. Which leads me to thing it is not loading the images in time perhaps? I am not sure what to do..
Here is my php:
<img src="images/home_buttons/water_bag.jpg" alt="watch la vie en couleur" border="0" align="left" hoverImg="images/home_buttons/water_bag-hover.jpg" />
And here is the javascript:
<script type="text/javascript">
$(document).ready( function() {
$('body').find('*[hoverImg]').each(function(index){
$this = $(this)
$this.wrap('<div>')
$this.parent().css('width',$this.width())
$this.parent().css('height',$this.height())
$this.parent().css('background-image',"url(" + $this.attr('hoverImg')+")")
$this.hover(function() {
$(this).stop()
$(this).fadeTo('',.01)
},function() {
$(this).stop()
$(this).fadeTo('',1)
})
});
});
</script>
When I right click in chrome and say "Inspect"; your height/width are set to 0px. If I inline edit your height/width via chromes tools the image appears. Try jquery's outerWidth() and see if that provides better results.
http://api.jquery.com/outerWidth/
Try calling your code in
$(document).load( ... )
instead. Images aren't ready in ready. Load is a callback for anything with a src attribute. So once all those load (including images) it will fire. You can also call it on images. For example
$('img').load( function() ... );
Method chaining for performance.
$('body').find('*[hoverImg]').each(function(index){
$this = $(this)
$this.wrap('<div>')
.parent()
.css('width',$this.width())
.css('height',$this.height())
.css('background-image',"url(" + $this.attr('hoverImg')+")")
.end()
.hover(function() {
$(this).stop()
$(this).fadeTo('',.01)
},function() {
$(this).stop()
$(this).fadeTo('',1)
})
});

Categories