i use 1 div element to make the .background for my site. and it's will be 100% height. to achieve that i use jQuery dimensions utility.
<div class="background"></div>
with this script to get the height
$('.background').css( 'height', $(window).height() );
but now, i want to make it's height dynamic. if we resizing the browser. the height of .background will follow the new size of browser. i understand this will require some event since the size change after the page is first rendered.
can you please tell how to make it with jQuery?
Use .resize().
$(window).resize(function() {
$('.background').css( 'height', $(window).height() );
});
Take a look at http://api.jquery.com/resize/.
You'll have to add the same code above to the window's resize event.
Shouldn't you be using css fixed positioning? This lets you set the height, width and position of an element relative to the viewport (the browser window).
Take a look at http://www.w3schools.com/Css/pr_class_position.asp
Related
I've made an example on paint
This might be overthinking this but I'm trying to have a div that always keeps its aspect ratio (9:16) and that is showing entirely on screen whatever the windows size. I tried searching for "div keep aspect ratio" but in these cases the div doesn't resize with the window. I thought using javascript to check when the height of the window is greater than its width (and vice versa) and change the css but I don't know if it's possible to run a javascript function upon resizing the page. Also, all my content is in this container and I just want black bars to fill the rest.
Thanks for helping.
There are lots of ways to do that.
use javascript resize function:
window.onresize = function() {
// resize your div according to window size
};
use Jquery resize function:
$(window).resize(function(){
// resize your div according to window size
});
use css #media https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
#media all and (min-height:640px) and (max-height:960px){
// resize your div according to window size
}
I need to adjust several elements in width and height in relation to window width. So I am using
window.onload = function() {
slideSizeUpdate();
};
$(window).resize(slideSizeUpdate);
to call my function.
After window resize everything is displayed correctly - but not onload. I guessed that this had something to do with the window-width-value.
So, I printed the width value of window and recognized that - onload - my window width had a value 'x' and when I resized for 1px left or right value 'x' of window width increased / decreased + / - 18px.
I assume that this causes the problems on my website onload. Does anybody know the reason for this and has anybody a solution how to fix it? That would be great!
EDIT
Its not that onload doesn't work at all. Its just the wrong values that it seems to get when it reads out the window width.
You can do like this:
$(window).on('load resize',function(){
slideSizeUpdate();
}).resize(); // trigger resize when page is loaded
Consider this scenario:
Some of the content is hidden via CSS. The resulting page is short and no horizontal scrollbar is required.
You calculate the window width on load event at which point scrollbars are not there.
You un-hide the content and now the page is tall and requires horizontal scrollbar.
The width of the window decreases by 17px (usual width of scrollbar) without you noticing.
If this is the case then one solution is to force the window horizontal scrollbar using CSS. You can use the following (although I recommend searching more on StackOverflow):
html {
overflow-y: scroll;
}
Im trying to get pagesection to fill the browserheight. I´ve tried to apply a 100 height to all elements, but it´s not working. It works good if I set a heigh: 100vh, but It´s not the way I want to take, so I wonder what Im doing wrong?
Site: Svenssonsbild.se/Konsthandel Second and third menu are anchorlinks to the spagesections.
Setting height:100% means 100% of the height of the parent element so you need to specify the height of the parent for it to work.
If you want to set your element to 100% of the height of the browser, you need to make sure all the parent elements up to the <body> tag have a percent height.
Setting the element's CSS height to 100vh is the intended way to do exactly what you're trying to do. 100vh specifies that the element should always be the full height of the viewport, so unless you've got some other requirement that you haven't described, that's what you should be doing -- you'll need to explain why "that's not the way I want to take" if there's more to your question.
Depending on your content it might be a good idea to set the min-height property instead of the height property since the content might need more space than the available viewport size offers. Or you can just evaluate the section's height and compare it to the viewport height. Using jQuery the following might work:
$('section').each(function(){
var height = ($(this).height() > $(window).height()) ? $(this).height() : $(window).height();
$(this).css('height', height + 'px');
});
You might need to adjust the selector to fit your needs.
I have a one page website that uses jquery scrollLeft to scroll between horizontally aligned divs that will work as pages.
These divs should be 100% width and 100% height (equal to current viewport).
with jquery I did it right:
$('.row').css('min-height', $(window).height());
$('.row').css('width', $(window).width());
$(window).resize(function() {
$('.row').css('min-height', $(window).height());
$('.row').css('width', $(window).width());
});
The problem is that these divs will not be re-sized until the jquery.js is fully loaded and the doc is ready.
So I think the best way is to do it with raw JavaScript. How?
Thanks.
Have your tried loading jquery right before your <div class="row">...</div>
and put the script your wrote right after it?
I have a sidebar on my page that I want to always be 100% of the container size. Sadly, I can't tell the element to do this via CSS alone as the page has a variable height due to dynamic content.
Is it possible to use jQuery to find the height of the content container, and adjust the sidebar height to match it?
I found a few jQuery plugins that kind of do what I want, but feel they are over complicated (and I can't seem to get them to work anyway!).
Assuming the id of your container is "container" and the id of your sidebar is "sidebar", you could try the following (untested!)
$(document).ready(function() {
$('#sidebar').height($('#container').height());
});
This should (on document load), resize the sidebar height to the same as the container height.
I'm going to continue on from Damovisa's answer.
$(document).resize(function(){
$('#sidebar').height($('#container').height());
});
However, this could fire an awful lot if you resize the page a lot. You could try this
$(document).resize(function(){
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() {
$('#sidebar').height($('#container').height());
}, 100);
});
In the second example, it will only resize 100 microseconds after resizing.
This is also assuming that $(document).resize() will be triggered when the page size changes. You could always wrap it in a function, and call it on completion of any slideDown() etc