I want to create div which would behave in a following way:
it would always resize his height to 100% of browser window height.
it will adjust his width to maintain constant proportions (so that his width would be allays equal to 3/5 of his height for an instance)
There are some examples here which do opposite thing - maintain width at some fixed % value of browser window size, and adjust height accordingly but its not what i need.
Try the below jQuery:
$(window).resize(function(){
$('#resizable').width($('#resizable').height()*3/5);
});
$(window).trigger('resize');
Demo:
$(window).resize(function(){
$('#resizable').width($('#resizable').height()*3/5);
});
$(window).trigger('resize');
html,body,#resizable{
height:100%;
}
#resizable{
border:1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="resizable"></div>
I use jquery here:
window.onresize = function() {
var el_height = $(element).height(window.innerHeight);
$(element).width((el_height*3)/5);
}
What you could do is get the height of the browser window with jQuery and set the width of the div accordingly.
function changeDivSize(){
var wHeight = $(window).height();
var newDivWidth = height * 0.6;
$("#divId").height(wHeight);
$("#divId").width(newDivWidth);
};
$(document).ready(changeDivSize);
$(window).resize(changeDivSize);
i was going to support Nocky Tellekamp's answer but it misses couple of things :
first, in order to get window Hieght in cross browser you need to use $(window).innerHeight();
Proper code view :
$(document).ready(function() {
var WindowHeight = $(window).innerHeight(); //$(window).height() not working in I.E and part of other wierd browsers not based on mozila engine
$("#divId").css { //proper and more orgenized code view of css changing
hieght : WindowHeight,
width : WindowHieght * 0.6
};
});
you dont have to call method on window.resize (causes very bad performance issue if bigger algorithem involved), if it does bother's you, i would suggest to use different css properties such as clear:both when setting the div so actually it will spread on the entire window height and width.
Related
So if have this function in order to dynamically set a div's height based on the browser height:
$(window).resize(function() {
$('#slideshow').height($(window).height() - 110);
});
$(window).trigger('resize');
This works like a charm. As you can see, there's a 110px margin (that belongs to my header height).
This code is not optimal since, a header height might vary based on the current viewport.
Is there a way to set this up dynamically as well? Or at least set some conditions like:
If browser width is more than 768px then set a 110px margin. If less than 767, then the margin should be 80px.
This is my edited code so far, but I'm not sure if I'm on the right path:
$(window).resize(function() {
var set_width = $(window).width();
if(set_width <= 767)
$('#slideshow').height($(window).height() - 110);
});
$(window).trigger('resize');
Thanks a lot!
EDIT:
Now that I think of it better, this 110px are not a margin, it's a subtraction I'm doing in order for my header and the slideshow to fill the entire window. If I don't do this subtraction then I end up with my header height + slideshow height (which takes take browser height) making it scroll.
So I don't think I can do this with CSS. That's why I was thinking on a Javascript solution.
So, you'd need something like the following. I hope the code is straightforward.
$(window).on("resize", function() {
var winHeight = $(window).height();
var headerHeight = $("header").height();
$('#slideshow').height(winHeight - headerHeight);
});
$(window).trigger('resize');
The sample HTML I'd used as a model is:
<body>
<header>my header</header>
<div id="slideshow"></div>
</body>
You can do something like this:
$(window).resize(function() {
var buffer = ($(window).width()<768)?80:110;
$('#slideshow').height($(window).height() - buffer );
});
$(window).trigger('resize');
As Halcyon suggested in comments, use css. That is the neatest way to do it.
Is there a way to get the realtime width and height values using Javascript and apply them to a number of div id's? I want to build a site that has 5 sections that are always width: 100vw and height: 100vh. Only one section can be seen at a time as each section has a # anchor and vertical scrolling is disabled.
The problem I'm having is when I resize the browser window, the CSS doesn't keep up and must be refreshed for new values for the section width and height. I'm wondering if there is a way for Javascript to constantly monitor the browser width and height and apply those values to a set of id's.
Example
The browser window is 1000px by 500px so the id #one, #two now have a width: 1000px and height: 500px and when the browser is resized to 1200px by 600px the values for #one , #two would be set as width: 1200px and height: 600px in the CSS.
Here is my codepen.
As #gary-storey already said, use the resize event:
$(window).resize(function() {
var curWinWidth = $(window).width();
var curWinHeight = $(window).height();
// do stuff here
});
i've done this for my own page, that way:
$(window).resize(function() {
<!-- get viewport size//set content size -->
var currentViewPortHeight = $( window ).height();
var currentViewPortWidth = $( window ).width();
$("#mainFrame").css({ "height" : currentViewPortHeight, "width" : currentViewPortWidth });
$("#mainFrame").resize();
};
you may set a timeout interval though - since this event fires very often during a windo resize - especially if the user uses drag&drop. according to my stackoverflow studies, the best would be a 300ms timeout, to get a smooth resize transition, and not firing it to often...
I'm trying to make a fluid layout for my site but the problem is that if a window is re-sized to be small before the page loads and then they maximize their window, the page is a small size, my question here is how would i get the width and height of a window at its full size even if the page is small.
$(document).ready(function()
{
var Height = $(document).height();
var Width = $(document).width();
});
This gives me the window height and width, i want the maximized size even if the window is small.
Sounds like what you actually need to do is listen to the window's resize event and rearrange content as needed.
Alternatively, do it the modern way and use CSS Media Queries:
#media all and (max-width:480px) {
/* styles for when the window is less than or equal to 480px wide */
}
var Height = $("html").height();
var Width = $("html").width();
You could also try body, and it may even depend on the browser. It is possible for some specially positioned elements to extend past the body, I believe.
Here's an example of how to listen for window resize events:
HTML:
<body>
<p>Resize result window to see updated dimensions</p>
Dimensions: <div id="debug"></div>
</body>
JavaScript:
function updateSize() {
var $win = $(window);
$('#debug').html($win.height() + ' x ' + $win.width());
}
$(window).resize(updateSize); // listen for window resize
$(updateSize); // call on page load to get initial size
Try it on jsFiddle:
http://jsfiddle.net/TKAFc/
If you need the screen size, you should use screen.width and screen.height.
You can subtract the "window borders" so you will have the useful area:
screen.width - (window.outerWidth - window.innerWidth)
And the same for the height.
I've created a page using squares. The squares combine to make a particular word. But when I resize the window, the squares disrupt their place in a haphazard way. How I can change my CSS or javascript so that the squares retain their original positions on window resize?
You can view the page at : http://www.tryst-iitd.com/13/beta
I've included the following code to take care of the resizing, still the problem remains unsolved.
<script type="text/javascript">
$(function () {
var screenWidth = $(window).width() + "px";
var screenHeight = $(window).height() + "px";
$("#container").css({
width: screenWidth,
height:screenHeight,
});
$(window).resize( function () {
var screenWidth = $(window).width() + "px";
var screenHeight = $(window).height() + "px";
$("#container").css({
width: screenWidth,
height:screenHeight,
});
});
});
</script>
The square is disrupted because the width of the container is adjusted automatically whenever you resize your window. Set a fix value or set a minimum width for the square and container should fix the problem. The square width is in %.
Also, the window resize event itself is useless because the div (id=container) is adjusted according to the width of the body tag
Set the position and size of your squares in percentages and your resize code will works fine.
Also, set the min-width/min-height CSS properties will prevent your squares from being too small.
Your problem is that your css margins are fixed width, so even if squares width are in %, margins causes this issues.
As an example, try disabling wrap1 and wrapalphabet css classes, you will see that your design will be much more responsive.
You probably have to rethink the way you deal with margin/padding to get the results you expect.
I have a DIV element in my page, that I want to resize when the window is resized, but maintain a square aspect ratio. I want to set the width to be 50% of the browser width, and the height to be equal to the width. How can I do this?
If the solution requires Javascript that's fine but I'd prefer not to use jQuery.
Use width:50% in css and window.onresize event for resize. Have a look
http://jsfiddle.net/536UJ/
You can set the width to be 50% of the window in css;
you just need to adjust the height-
window.onresize=function(){
var who= document.getElementById('divtoresize');
who.style.height=who.offsetWidth+'px';
}
I'm not sure you can make one property (height) equal to other property (width) in CSS... well, at least in CSS 2.
But you of course can do this in JavaScript.
<div id = "myDiv"></div>
<script>
document.onresize = function() {
var element = document.getElementById('myDiv'); // the element
var size = Math.floor(window.innerWidth / 2) + 'px'; // 50% window width
element.style.width = size; // set the width
element.style.height = size; // set the height
};
</script>
Note that the window.innerWidth property is not present in IE. There, you'll have to use document.documentElement.clientWidth.