I have a dynamic HTML element which has a height set in percent and a width equal to the height. – The height changes, depending on the viewport size and I always have to obtain a 1:1 aspect ratio, which is why I use a scrip, on page load, to look at the height and make that the width too.
So when I open the site, everything looks like it should, but as soon, as I resize it, the height value of course changes and the width stays the same.
Is there a way so that I can make it, that my scrip reloads, when the viewport changes size?
<body onresize="myFunction()">
…solves the Problem. – I just made my script into a function an added onresize to the body.
Credit to: w3schools – onresize Event and #SlawomirDziuba for pointing this out to me.
Edit:
As #SlawomirDziuba pointed out, you can also use:
window.addEventListener ('resize', myFunction);
Doing it like that allows you to have all your JS at one place.
Related
Hi i need get the page size without scrolls.
What´s the minimum and maximum width and height size www.google.com page without scrolls?
I trying document.body.scrollHeight document.body.scrollWidth, but the size depends of size of window of navigator...
What´s the fixed size of page using a javascript function?
Show me an example please.
Modern web design resigned from staticly defined sizing of elements in favor of relative positioning and sizing. If you really need to know the size at a given viewport (i can't thnik of possible use-case for that, perhabs you could clarify what are u trying to achieve) I would recommend parsing the sites' DOM and CSS using PHP f.e. and then design a script that finds proper sizes (absolute are easy, relative can be converted to absolute knowing relative size and viewport dimensions).
As for the scrolls I'm guessing you think about elements with overflow rather than the actual page scrolls - in this case you will have just as many answers as the number of viewers since both browser font-size and type, scaling factor (the zoom that doesn't change the viewport) and things like that make every element relatively sized even despite of one's effort to make it staticly defined.
I know this sounds a bit weird but I have function that changes the height and width of images
and I execute it on document ready. But every time I refresh the page I get different results for the same images (it gets them right every 4th or 5th time). Here is my code:
$("img").each(function(){
$(this).width(
parseInt($(this).width()) / (parseInt($(this).width())/parseInt($(".container").css("height")))
);
$(this).height(parseInt($(".container").css("height")));
});
The images are in a container and I want them to have the same height as the container and the width changed equally as the height. The height of the container is changed dynamically and every time I change the size of the container I also change the size of the image (I don't have the problem here). I don't quite understand how can this work differently every time I load my page.
You should wait for all images to load using $(window).load() function, or use some other way to controll your images loading. Choose your way but the problem is simply that your function gets fired before images are loaded.
You don't need to wait for images to load.
But you do at least need to wait for them to start loading.
What's the difference? Well, in all image formats that I'm aware of, one of the first pieces of metadata is the image's dimensions. This is why with bigger images you can see the browser reserve the space as soon as the image has started loading, and then fills it in with the image as it loads.
So! With this in mind, let's get your page looking as sharp as possible, shall we?
Forget all that, I've just realised, you're setting the height to the height of the container? In that case...
$("img").each(function(){
this.style.width = "auto";
this.style.height = "100%";
});
There you go. Using auto for the width will keep the aspect ratio.
I have added image map on my map based web page.
Since it is supposed to work on different resolutions, hot-spots defined in the image map have to be dynamically changed when browser viewport size changes.
ex: when I initially place a hot-spot in India and change the browser size it should still
placed on India not in somewhere else.
I saw that there is a property called "coords" containing 3 parameters.
Does these properties dynamically change when it changes the browser viweport size?
Or can I make them dynamically changing?
Or going to javascript is recommended?
(As far as I tested they are fixed to absolute locations.)
I did some research on imagemaps and found that;
They do not dynamically change their position when it changes the browser viewport size
I didn't tried to change'em dynamically. Hopefully you may able to do it with javascript
javascript was the solution for my problem
with the use of javascript ;
Browser viewport width and height can be taken
And relative to that width or height you can position the elements
imagemaps in dreamviewer is not a solution for this matter
Is it possible to use an iframe with a fixed width (.ex. 75%) and a dynamic height? Want I want to achieve is that when the page that is loaded into the iframe, it will not be wider than I have specified, but the lenght needs to be according to the page its content. Is it a page with 5 lines text, the frame will be just big enough to display these 5 lines. Are we loading a large document with 1000 lines, the Iframe height will be automatically adjusted.
Prerequisites:
The url in the frame is on a different domain from the parent.
The code should work on mobile phone browsers too.
Let's try to avoid jQuery if possible. (to make the above faster)
I know you'd like to avoid it, but it really shouldn't slow you down so much that it'd be a burden on your site. I've done far crazier things with jquery and it's handled it like a champ. When talking "dynamic" it's usually a safe bet that you will need to touch some javascript at some point :P
$(selector)[0].scrollHeight
As for making it dynamic? You could setup an interval to adjust the height.
Something like this:
function setHeight(selector){
var contentHeight = $(selector)[0].scrollHeight;
$('#iframe-id').attr('height', contentHeight);
}
Then you either load it on page load or you wrap it in a setInterval.
If it's just the jquery thing and you don't mind javascript, then this site could help you
http://www.mattcutts.com/blog/iframe-height-scrollbar-example/
IFrame height can be manipulated using the page rendering code, or JavaScript...but there is no way for the iframe to dynamically resize based on content.
The link in mplungjan's comment takes you to a really good post about this subject.
I have a simple page with images, and when the user clicks the image, it opens up a new browser window with the image filling the area. I have the css set on the new window so that the image height and width are both 100% (and overflow is set to hidden) so that the window can be resized.
But what I need is for the window to maintain aspect ratio if the user resizes it. Right now, I'm stuck because I'm not getting how the event works, but I think I'm making this harder than it needs to be. Right now I have:
$(function(){
$(window).resize(function() {
var height = $(this).attr("innerHeight");
var width = $(this).attr("innerWidth");
if(height/width != .75){
window.resizeTo(width,width*.75);
}
});
});
Before I added the conditional, the window would immediately start shrinking (apparently opening a new window fires the resize event). Adding the conditional preventing this from happening when the window opens, but any resizing starts the shrinking again.
Is it just because the height and width are never exactly the right ratio (should I manually set the width to a round number ever time) or is there something else I'm doing wrong? Or is there some other way to get what I'm after that's more straightforward?
I believe you're on the right track, but resizeTo() resizes the entire browser window, including window frames, toolbars, menus, etc.
So, when you call resizeTo(), it fires, detects the inner height/width isn't the desired aspect ratio, and resizes the entire window, frames and toolbars and all.
This then fires resizeTo() again, which finds, again, the inner aspect ratio isn't right, and so keeps firing and resizing ad infinitum.
To fix this, you'd need to:
Detect the outer size by resizing and then testing the innerWidth/innerHeight. Remember, this can change as the user works with their browser.
Call resizeTo with a size that accounts for the outer chrome and achieves the desired aspect ratio for the innerWidth/inner Height.