Resize DIV but maintain aspect ratio when window is resized - javascript

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.

Related

Why can't I get the container width without the scrollbar?

I have a container (masonry grid) with some images. I have a function to calculate the the width of the container and an other function to calculate the width of each image. But the function to get the container width, doesn't work as excpected, because the width contains the scrollbar. Therefore the calculation of the images width is also incorrect.
//Function to calculate the width of the container
getContainerWidth() {
const postContainer = document.getElementsByClassName(
'container'
);
if (postContainer.length > 0) {
let containerWidth = postContainer[0].clientWidth;
containerWidth = `${containerWidth}px`;
this.setState({
containerWidth: containerWidth,
});
}
}
I have already tried verious functions (offsetWidth, clientWidth, scrollWidth...) but none of them worked for me. I have also tried to get the width of the scrollbar and subtract it from the container width. This worked, but I need a solution which works on different Browsers.
If the browser width is for example 1920px. Then the container-width is also 1920px, but it should be 1905px (1920 - scrollbar).
Get the ClientWidth
The Element.clientWidth property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.
Example
var width = element.clientWidth;

Div with constant proportions and always 100% of screen height

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.

Is There Any Way To Get The Actual Size Of Full Window In JavaScript / Jquery?

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.

View disrupts on Window resize

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.

Extending div's height beyond its max height from javascript

I have a div in an user control, whose max height is set to 400px in css. This user control is used in many of aspx pages in my application.
I am trying to increase the div height to 500px dynamically in JavaScript for only one page, but it doesn't work. The div in user control always takes only the 400px (max height set in css) and not the height set by JavaScript.
Is there a way to change the div height over max height from JavaScript?
Thanks
You'll need to set the max-height property before you can set the height to be greater than it.
So, rather than this:
function setHeight()
{
var e = document.getElementById("myDiv");
e.style.height = "500px";
}
You'll do this:
function setHeight()
{
var e = document.getElementById("myDiv");
e.style.maxHeight = "500px";
e.style.height = "500px";
}

Categories

Resources