I am trying to get image width of image with class product-thumbnail. There are several images with this width but all of them have the same width. So this is my javascript:
$(document).ready(function() {
alert($('img').('.product-thumbnail').width());
});
and these are image tags
<img src="img/produkt1.png" title="Názov produktu" class="product-thumbnail">
<img src="img/produkt2.png" title="Názov produktu" class="product-thumbnail">
however it doesnt work and I am not getting any alerts. There should be no problem with the selectors (jquery is included) and I want to use this so I can set div width acording to image width but the image width changes with browser windows width. Do you know a solution for this? Maybe I have only som syntax error there.
alert($('img').('.product-thumbnail').width());
That is invalid jquery, the selector should all be inside the $(''), like a CSS selector, so it should be
alert($('img.product-thumbnail').width());
You also need to pick which image to get the width of, for the first one, you would do:
alert($('img.product-thumbnail')[0].width());
You should be doing:
alert($('img.product-thumbnail').width());
But even so, it's problematic since you will get an array back. In any case, the syntax you are using is wrong.
Related
I am trying to make a p always have the same width and height as an image that is placed next to it.
I set specific dimensions to both of the divs containing those elements, and then set the img width and height to 100% (as mentioned here). Unfortunately that led to images getting distorted even if I used the dimensions of the actual images being provided. Forgot to mention that I use Picturefill by the way, perhaps it has something to do with that..
I should mention that it is possible to somewhat control the amount of distortion, by adjusting the values in the sizes attribute of the picturefill HTML. However it turned out that I would have to add thousands of different values to that attribute to actually make it work this way. It just didn't really feel like the correct approach to something like this.
HTML
<div>
<img
sizes="(min-width: ...px) ...vw, (min-width: ...px) ...vw etc"
srcset="/images/img1.jpg 280w,
/images/img2.jpg 350w"
alt="...">
</div>
<div>
<p> ... </p>
</div>
Set the image width to 100% and height to auto. That way, the image will preserve its aspect ratio while still being resized.
In my web app, I want to display popup element which has <img> element in it. Image source is usually bigger than I need it, so it get's resized in css. And before I display it, I need to know it's outerHeight.
The popup looks something like this:
<div class="popupContainer">
<div class="popupHeader">Header</div>
<img class="popupImage" src="source" />
<div class="popupMessage">message</div>
</div>
After I append it to another element, I'v tried retrieving it's height in two ways: simply popup.outerHeight(true) and using imagesLoaded library:
imagesLoaded(popup, function () {
popup.outerHeight(true)
})
In most caes, both options return the same and expected result (like how tall the element actually is in browser). But there are times when option #1 returns height that is too small, because the image source hasn't been loaded yet, whereas option #2 returns height that is way too big, because the css hasn't been applied yet. (I think that those are the reasons). So I wanted to know, which is the best time to retrieve it's height? When the image will be loaded and element will be formatted correctly accoring to css.
You should do when the image will be loaded.
Well as the title says.
Right now each signature (on a forum) div got:
<div style='height:Xpx;overflow:scroll'> (X = depends on each signature due to the image heights shifting)
And I want to change the height so I don't have to scroll through each signature, but showing all images directly.
Here is the right part of a signature:
http://puu.sh/4xOW7.jpg (couldn't use the website-image-feature due to not having 10 rep)
And I tested around and managed to make it like this:
http://puu.sh/4xPar.jpg (it's much more further down)
and like this..
http://puu.sh/4xPco.jpg (couldn't post more than 2 links -_-)
I also tried to remove the overflow:scroll, change it, and so on. (also tried removing height: etc)
But I just can't get it to simply remove the scrollbar - making all images show normally. I'd really appreciate help! :)
instead of style="height:250px;overflow: auto;"
you need style="display:inline;"
I am loading in some html using YUI3, that looks like this:
<div id="content">
<p>This is all of my content, neat neat neat!!!!</p>
<img src="ps_logo.png" alt="Google" />
</div>
I've tried using .get('offsetHeight') and .getComputedStyle('height'), but both only return the height of the div and paragraph tag and don't take into account the height of the image. So, even though the image is 150px tall, I am getting 73px returned.
Whats the best way to get the width and height of a nodeList when the elements haven't had it set via CSS?
Thanks for the help.
Either set the img height in the img tag - account for it, or ensure that the height query is called after the image has loaded, not just after the image tag has been put in the page.
My JS code includes some images that are empty at the beginning
(without src attribute specified at all + display:none).
When added to sites with CSS1 compatibility I see broken image icon where the image should be even though the images are supposed not to be displayed (display:none).
Any idea how I can hide the broken image icons?
Notes:
I don't want to load empty images.
I tried width and height= 1px or 0px . didn't work.
specifying src="" also gives empty image icons.
Edit:
I found the solution:
add style="display:none" to the img definition (Not in CSS)
Have you tried wrapping the images inside a div and hiding the div instead?
My JS code includes some images that are empty at the beginning (without src attribute specified
That's not a valid state for an image. Best use a placeholder transparent image or leave the image out of the DOM until you can set a ‘real’ src attribute.
I see broken image icon where the image should be even though the images are supposed not to be displayed (display:none).
Doesn't happen for me, either ‘display: none’ or ‘visibility: hidden’ removes the visible image from the page. Example code demonstrating the problem, and which browser(s)?
The solution is quite simple:
add style="display:none" to the img definition (Not in CSS)
how about just having a placeholder div tag and replacing it with an image when the time comes to show the image? any decent ajax framework (e.g. jQuery) will make this easy to do so it works across all major browsers
in addition to display:none, maybe try setting visibility:hidden
If you are using a JavaScript library it may be worth applying a class to name to all of these images and letting the library handle it. Prototype example using a class name of myImages would be
var images = $$('.myImages');
if (image != null)
{
for (int i = 0; i < images.Length; i++)
{
images[i].hide;
}
}
You would still need to add the style attribute style="display: none;" to the images