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.
Related
I'm writting a dynamic page using jQuery and I have a problem. I'm for example adding to my html file div's using append() function like this:
$("body").append("<div id ='dd_"+i.toString()+"' class='diamond_div'></div>");
I will be creating different amount of that div's base on datebase so that's why I use this variable i to assign different id's for each div.
My problem is that even if I'm creating that div's in body and when I look at code they are in it, if I check body's height it is 0 (width is ok, something like 1200).
Main problem with that is when there are too many div's they are beyond screen but there is no scroll bar. It's something like div's aren't in body although in code they are in.
Could you propose me any solution for that? Or what am I doing wrong? My line of thought is that I'm using $(document).ready so html file is creating a page, but see empty body so height = 0 and all my div's are beyond body. What do you think about that?
Take care of positioning; position:fixed removes your divs from normal flow ->
Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
as W3C says
An empty <div> does not have a height. Thus you could add as many as you want to the page and it will never get any longer. For the scroll-bar to appear you need to either set a height to the <div> with CSS like this:
.diamond_div{
height:100px;
}
Or add some content to the <div> so you would have something like this instead:
$("body").append("<div id ='dd_"+i.toString()+"' class='diamond_div'>hello</div>");
Then your <div> would have height and once there are enough on the page to go beyond the height of the browser, the scroll-bar will then appear.
Following on from your comments. Setting the position to "fixed" removes the element from the workflow and thus will not extend the length of the page in the normal way.
I added an svg image to the background of a div.
div#cover{
background-image:url('dwm.svg');
}
I would like to know if there is any way I could dynamically edit certain aspects of this svg such as fill, stroke , etc.
You can try having the svg as part of the DOM, do the modification and then set the background as a data uri of the modified svg pulled from the DOM.
While this might be kind of hacky it works
$('#bg').css('background-image', 'url(data:image/svg+xml;base64,'+btoa($('#svg').html())+')');
$('button').click(function(){
$('#fill').attr('fill', '#ff00ff');
$('#bg').css('background-image', 'url(data:image/svg+xml;base64,'+btoa($('#svg').html())+')');
});
<div id="bg"></div>
<div id="svg">[svg data]</div>
http://jsfiddle.net/zSRW5/
If you don't want to embed the svg you can always use ajax to get it.
No. I believe you can only do that if you embed the SVG within the page and reference it and even then, you would have to change the background value to something else and back to the reference, due to browser bugs.
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.
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