Dynamically resize a div using jQuery - javascript

I have a div (id="mainDiv") which I need to dynamically resize if the user changes the size of their browser window. I have written the following code to try and get this to work however this doesn't seem to be setting the height of my div:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var height = $(window).height();
$("#mainDiv").height(height);
</script>
<body>
<div id="mainDiv"></div>
</body>
I don't know much jQuery, am I making an obvious mistake?

There are a few things going wrong here:
Your code will execute straight away before your document has finished loading.
Your code will execute only on load of the the script, not on resize
You're not setting the height of your mainDiv - you're setting the height of another element with the id: accordianMain (but I'm guessing you know that).
You need to handle the browser resize event to wait for the browser to resize then get the dimensions of the window and apply accordingly. You'd do this by handling the window.resize event liks this:
var $win = $(window);
$win.on('resize',function(){
$("#mainDiv").height($win.height());
});
What you probably want to do is wait for for a resize to finish to by adding a timeout so that it doesn't fire too often as well:
var timer,
$win = $(window);
$win.on('resize',function(){
clearTimeout(timer);
timer = setTimeout(function(){
$("#mainDiv").height($win.height());
}, 500);
});

You need to wrap it in a resize function:
$(window).on('resize',function(){
var height = $(window).height();
$("#mainDiv").height(height);
});
Although I should point out what your doing could easily be attained through CSS:
body,#mainDiv {
height:100%;
}
This is more to point out the "it needs to be in a resize event wrapper" larger point, in case you wanted to do some logic that actually needed the event.

Yes, the mistake is use jquery hehehe
You do this with CSS
<body>
<div id="mainDiv" style="height:100%"></div>
</body>

Use an event listener for the window resize (and you should wait for page load before accessing elements with JQuery):
$(function() {
$(window).on('resize', function() {
var height = $(window).height();
$("#mainDiv").height(height);
});
});

I used div content and div footer in my page, i will set this code in my js to set dynamic height for div content.
footer = $("div[data-role='footer']");
content = $("div[data-role='content']");
viewHeight = $(window).height();
contentHeight = viewHeight - footer.outerHeight();
contentHeight -= (content.outerHeight() - content.height());
content.height(contentHeight);

Related

Trigger jQuery function at specific different browser widths

So I have this jQuery function that adds margin-top to an element based on the height of another element.
I'm trying to have this function trigger again on window resizes. (Preferably 1200px, 991px, 768px, 500px breakpoints)
If there is a good solution that allows the function to trigger with any browser resize, even better. I just need to make sure this wont cause "lag" or "slowness" due to the function triggering 100 times during a resize event for example.
Here is a codepenn with my current function:
http://codepen.io/bruno-gomes/pen/vgRbBB
Code:
jQuery(document).ready(function($) {
(function() {
var navBarHeight = $('.header').height();
$('.content').css('margin-top', navBarHeight);
})();
});
The idea is that I want the fixed header to not cover the content, and the size of the header will vary depending on the width of the browser. This becomes an issue when user resizes browser because the function is only triggering once on load.
I have the IIFE setup like that because it's a Joomla site and they don't work properly otherwise by the way.
You can use .resize() for that
Ok seems like this approach solved all my problems ^.^
jQuery(document).ready(function($) {
var height = $('.header').height();
resizeHeader(height);
$(window).resize(function() {
var height = $('.header').height();
resizeHeader(height);
});
function resizeHeader(height) {
$('.content').css('margin-top', height);
}
});

jQuery window resize function not working

Sorry in advance if this is a minor question, but I'm new to javascript. I'm writing code for a webpage with full-width color backgrounds. Essentially, what I'm trying to do is detect the height of the window, and then make sure that the color block is the size of the window. The function works well on page load.
The problem is when I shrink the window, the div height doesn't change with the window size. I get all sorts of errors, like graphics poking out from behind the div.
I think what I'm missing is a way to detect the height of the content within each div and resize the height accordingly.
You can see how it works at http://pressshoppr.com
Here's the code:
$(function(){
var windowH = $(window).height();
if(windowH > wrapperH) {
$('.fullWidthSectionBG').css({'height':($(window).height())+'px'});
$('.fullWidthSectionBGFirst').css({'height':($(window).height())-120+'px'});
}
$(window).resize(function(){
var windowH = $(window).height();
var wrapperH = $('.fullWidthSectionBG').height();
var newH = wrapperH + differenceH;
var truecontentH = $('.fullWidthSection').height();
if(windowH > truecontentH) {
$('.fullWidthSectionBG').css('height', (newH)+'px');
$('.fullWidthSectionBGFirst').css('height', (newH)-120+'px');
}
});
});
I am not sure I totally understand the effect you are going for here, but I would imagine that if your initial bit of code achieves it, all you have to do is reuse exactly that. Treat each resize as if the page had just loaded, and get the results you want, eg:
$(function(){
// encapsulate the code that we know WORKS
function init() {
var windowH = $(window).height();
if(windowH > wrapperH) {
$('.fullWidthSectionBG').css({'height':($(window).height())+'px'});
$('.fullWidthSectionBGFirst').css({'height':($(window).height())-120+'px'});
}
}
// call on page ready
init()
// ...and call again whenever the page is resized
$(window).resize(init)
});

jquery (windows).height increase every time I resize the window

I want to resize a div on resize of the window to make it fill the entire browser window...
I searched a lot on internet finding a solution, but everything I tried cause the same problem...
at first load of the page it works well, but when I try to resize the window the value of bodyheight keeps increasing...
this is my code
$(document).ready(function() {
body_sizer();
$(window).resize(body_sizer);
});
function body_sizer() {
var bodyheight = $(window).height();
$("#contenitore_full").css('height', bodyheight);
}
EDIT
OK!!! my fault as i thought :)
problem was caused by a wrong way to call jquery in wordpress.
i'm sorry for let you loose time
thanks a lot everyone
ale
You don't need javascript to achieve what you want. All you need is CSS.
Here's a fiddle
CSS
body, html { margin:0; height:100% }
#contenitore_full { border:1px solid #FF0000; width:25%; height:99%; display:block; }
HTML
<div id="contenitore_full"></div>
The thing is in order for height to work, the parent's height also needs to be defined. That's why the height of the body and html tags also have a height of 100%.
It looks like your 'body_sizer' function might not be firing. Add your parens () to the end of it or either create an handler function inside .resize()
$(window).resize(function() {
var bodyheight = $(window).height();
$("#contenitore_full").css('height', bodyheight);
});
I had the exact same problem. I recommend using javascript instead of jQuery.
const width = window.innerWidth;
const height = window.innerHeight;

jQuery height issues when content is displayed in an iFrame in FireFox

I am working on a calendar/schedule that requires breaks to span the full height of the containing event. The below code works great in FF/Chrome and IE. The issue arises when loading the content via an iFrame in Firefox, the height is always set to zero. The page will only display correctly when the iFrame is reloaded.
here is DEMO
$(window).load(function () {
$(".event").each(function () {
var height = $(this).height();
$(".note, .break").each(function () {
$(this).height(height);
});
});
})
I am looking for a consistent solution or a workaround for FF so that the heights are applied correctly on first load of the iFrame.
Thanks in advance.
way 1: wrap your iframe with a div got float:left; and calculate div's height on fireforx.
try to calculate this div's height, not iframe's..
<div style="float:left">
<iframe></iframe>
</div>
.load() usage
way2:
$(document).ready(function () {//if u wont define more specific element, use docment ready
$(".event").each(function () {
var height = $(this).height();
$(".note, .break").each(function () {
$(this).css('height':height+'px');//to change css height
//$(this).attr('height',height);//to change inline attr height
});
});
})

How can I resize an image, added via ajax, to fit within specific dimensions while maintaining aspect ratio using JQuery/CSS?

I've got a web application that loads some content from an external source to the dom via an ajax call, one of the things that comes back is a set of images (different sizes and aspect ratios) to be displayed in an profile photo section. I'd like for each of the images to be resized to fit within a 64px x 64px area and I'd like to maintain aspect ratio. I was able to do this in firefox, chrome, and safari, but I've no luck getting this to work in IE 7 or 8. The problem I've had is finding a jquery event that reliably gets triggered after the image loads since the image was added after the page load. Here's what works in the listed browsers:
$(window).load(function () {
$('.profileThumbnail').each(function (i) {
var divHeight = $(this).height();
var divWidth = $(this).width();
if (divHeight > divWidth) {
$(this).css('height', '64px');
$(this).css('width', 'auto');
}
else {
$(this).css('height', 'auto');
$(this).css('width', '64px');
}
divHeight = $(this).height();
var divParentHeight = $(this).parent().parent().height();
var divNewHeight = (divParentHeight - divHeight) / 2;
$(this).parent().css('top', divNewHeight);
divWidth = $(this).width();
var divParentWidth = $(this).parent().parent().width();
var divNewWidth = (divParentWidth - divWidth) / 2;
$(this).parent().css('left', divNewWidth);
});
});
I'm also trying to center (horizontally and vertically) them which is what the rest of that code does, but I think I've got all of that working if I can find a way to trigger this code after the image loads in IE.
keep in mind this needs to work both on the first visit (not cached) and subsequent visits (cached). I'm looking for a jquery, javascript, or css solution as I want to avoid the roundtrip/bandwidth for each image.
Have you tired to add a load event to the images yourself which triggers when the image is loaded? This is how image preloaders work.
var img = document.createElement("img");
img.onload = function(){ alert('loaded'); }
img.onerror = function(){ alert('error'); }
img.src = "foo.png";
You can add the onload to the image elements themselves if you are not doing the preload approach.
The problem I've had is finding a jquery event that reliably gets triggered after the image loads since the image was added after the page load.
Instead of setting an onload listener for the window, set an onload listener for the images you are loading remotely. Set the listener after you create the image object and before you insert it into the body. The listener can basically be all the stuff insife of the .each() in the code you posted,

Categories

Resources