Background should adapt to content height using JQuery on window resizing - javascript

The content of a div will be set dynamically. The div #background, should adapt to the height that (separate) div will have. The background also should adapt to resizing of the div when the browser is resized. So the action should happen when the page loads, or when the browser is resized.
<div id="wrapper">
<div id="background"></div>
<div id="content">
<p>This content will be set dynamically.
<br>The div #background should adapt to this height.
<br><br><br><br><br><br>
<br>This should happen when the page loads,
<br>or when the browser is resized.
<br>At this moment, it only works when
<br>the page loads.
<br>
</p>
<!-- end #content -->
</div>
<!-- end #wrapper -->
At this moment, it only works when the page loads eventhough I added this code:
$(window).resize(function () {
$("#background").css({
height: ($("#wrapper").height() + 50) + 'px'
});
});
How can I get the resizing bit working? Thanks.
here is a jsfiddle to test this

Your resize handler is working as intended, but the issue is that #wrapper won't change height unless you give it height, so right now you're simply updating the height on #background to the same value each time resize is fired:
$(window).resize(function () {
$("#background").css({
height: ($("#wrapper").height() + 50) + 'px'
// ^^^^^^^^^^^^^^^^^^^^^^ this value never changes
});
});
Here's an updated demo where I've added
html, body, #wrapper { height: 100%; }

Demo
use display: inline-block.
$(window).resize(function () {
$("#background").css('display': 'inline-block');
});

You should use .on():
$(window).on("resize load", function () {
$("#background").css({
height: ($("#wrapper").height() + 50) + 'px'
});
});
does that work for you?

Trigger it on load.
$(window).resize(function () {
$("#background").css({
height: $("#wrapper").height() + 50
});
}).trigger("resize");
http://api.jquery.com/trigger/
http://jsfiddle.net/dzdH5/

Related

Set parent div height to content that is not overflowing

I have a slider that's in place on my website.
The basic way that it works is depicted in this jsfiddle -
http://jsfiddle.net/6h7q9/15/
I've written code to set the parent's height to the height of the content div. This worked fine, until I introduced some content that did not have a fixed height and whose height might increase while it was being shown on the page. Is there a way, I can dynamically change the height of this parent div whenever content inside it increases or decreases it's height.
HTML -
<div id="slider_container">
<div id="slider">
<div id="slide1">
Has content that might increase the height of the div....
</div>
<div id="slide2">
Has content that might increase the height of the div....
</div>
<div id="slide3">
Has content that might increase the height of the div....
</div>
</div>
</div>
<input type="button" value="Next" id="btnNext">
<input type="button" value="Previous" id="btnPrev">
<input type="button" value="Add text" id="btnAddText">
<div class="footer">
I appear after the largest container, irrespective of which one is present....
</div>
JavaScript -
var currSlider = 1;
$('#btnNext').click(function(){
debugger;
var margin = $('#slider').css('margin-left');
if(parseInt(margin) <= -400) {
return;
}
currSlider++;
// Moving the slider
$('#slider').css('margin-left', parseInt(margin) - 200 + 'px');
// Resetting the height...
$('#slider').height($('#slide' + currSlider).height());
});
$('#btnPrev').click(function(){
debugger;
var margin = $('#slider').css('margin-left');
if(parseInt(margin) >= 0) {
return;
}
currSlider--;
// Moving to the previous slider
$('#slider').css('margin-left', parseInt(margin) + 200 + 'px');
// Resetting the height...
$('#slider').height($('#slide' + currSlider).height());
});
$('#btnAddText').click(function() {
$('#slide' + currSlider).text('Hello World'.repeat(100));
});
String.prototype.repeat = function(times) {
return (new Array(times + 1)).join(this);
};
I hope this "answer" gets you going in the right direction. Since i don't have the time to fully look this up right now, i hope to send you in the right direction. if you do find out how to do this properly, please shoot me a message, since i would really like to know ^_^
http://www.w3.org/TR/DOM-Level-3-Events/#legacy-event-types
An example on how to use: (DOMSubtreeModified didn't work in IE from what i read. Therefor the propertchange event)
$('#slide1').on('DOMSubtreeModified propertychange', function() {
console.log('test',this);
});
Another option is by using the MutationObserver:
http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers
https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers
Updated 6-8-2014 15:00 CET
Since i totally misread the original post, this answer was useless to say the best. But since the problem is actually really easy to solve (or... at least i hope i understand the problem this time), i thought i'd post an answer that worked for the situation: a slider with content of different heights.
What was the problem with the original slider? You moved the content out of the container, which made it hidden. However, the container would still pick up the height of it, since it only had a fixed width. The fixed height on the '#slider' did not prevent the container of picking up the height from the '#slide-*'. Had you set the height for the container... all would be fine :-)
Here's the outline of the hidden slide, moved 'off canvas': http://i.gyazo.com/f2404e85263a7209907fdbc8f9d8e34e.png
I did not fix your fiddle by completing your code. I just rewrote it to provide you with an easier to maintain slider. Here's a fiddle with a working slider where you can add and remove stuff in the slides: http://jsfiddle.net/3JL2x/3/
Just remove the height properties in the .slide1, 2 and 3 and add min-height instead.
Like that :
#slider > div {
min-height:200px;
float:left;
width : 200px;
}
#slide1 {
background-color : red;
}
#slide2 {
background-color: green;
}
#slide3 {
background-color: blue;
}
Live example
http://jsfiddle.net/6h7q9/27/

Trouble getting height to scale to width on responsive website

Im trying to have a div re-size so that the height stays the same width as the height.
The divs are constantly changing size,
The width changes size because of percentages, however the height is changed using Jquery.
Html
<div id="inner_container">
<div id="Sbox1" class="select_tile" > </div>
<div id="Sbox2" class="select_tile" > </div>
<div id="Sbox3" class="select_tile" > </div>
<div id="Sbox4" class="select_tile" > </div>
<div id="Sbox5" class="select_tile" > </div>
<div id="Sbox6" class="select_tile" > </div>
<div id="Sbox7" class="select_tile" > </div>
<div id="Sbox8" class="select_tile" > </div>
<div class="clr"> </div>
Css
#inner_container
{ width:98%; min-width:50%; max-width:1600px;
margin:auto; padding:1% 1%; text-align:center; background:;}
.select_tile
{ width:23%; min-width:50px; min-height:50px;
background:green; margin:1%; float:left;}
Jquery
$(window).resize(function() {
var ccW = $('.select_tile').width();
$('.select_tile').css("height", ccW);
});
This works fine for when the browser window is re-sized but the #inner_content div re-sizes when a button is pressed, so the height of the div.select_tile
stays the same as it was before the button press but the width changes.
I was wondering if there was an event that waits for a change in the width or for something to change.
basically I want the width and height at 1:1 ratio to stay the same but scale to the size of the browser window on any change on either property.
Any assistance on this would be much appreciated, Thanks
edit: added html
you could create your own event :)
$(function() {
// moved this out of the event so it doesn't
// do a DOM traversal every 300ms!!! :)
var $tiles = $('.select_tile');
// this is your own custom function, which can be triggered
// as you see below
$(window).on("resizeBoxes" , function(e,$selector) {
//set your box resize code here.
var ccW = $selector.width();
$selector.css("height", ccW);
});
// using 300 ms as it's not too short to kill a device,
// and not too long to show noticable lag.
// importantly though you want the resize event to
// be succinct and easy on cpu.
var resizeTimer = setInterval( function() {
$(window).trigger("resizeBoxes",$tiles);
}, 300);
$(window).on("resize", function(e) { $(window).trigger("resizeBoxes",$tiles); });
$("#button").on("click", function(e) { $(window).trigger("resizeBoxes",$tiles); });
// this next one might be best for you :)
$(window).on("mousemove", function(e) { $(window).trigger("resizeBoxes",$tiles); });
});
You have one solution here jquery-how-to-determine-if-a-div-changes-its-height-or-any-css-attribute with the setTimeOut() function but I would make the button trigger that change...

Element height after page is complete

I have an absolute div, and a parent div. How I can define the height of the parent based on the absolute div, knowing I have images which take some time to load?
CSS:
#parent {
overflow:hidden;
width:100%;
}
.absolute {
overflow:hidden;
width:100%;
height:100%;
}
HTML:
<div id="parent" style="height:[HEIGHT OF CHILDREN]">
<div id="absolute1" class="absolute">
[LOTS OF CONTENT WHICH MAKE A VARIABLE HEIGHT, INCLUDING IMAGES WHICH TAKE SOME TIMES TO LOAD HERE]
</div>
<div id="absolute2" class="absolute">
[LOTS OF CONTENT WHICH MAKE A VARIABLE HEIGHT, INCLUDING IMAGES WHICH TAKE SOME TIMES TO LOAD HERE]
</div>
</div>
SAMPLE LINK 1
SAMPLE LINK 2
JS:
jQuery(document).ready(function($) {
$('a').bind('click', function(e) {
var target = $(this).attr('href');
if($(target).html() !== undefined ) {
$('#parent').css({
'height': $('#parent').find(target ).height(),
})
}
e.preventDefault();
});
// The problem: height is not correct until image is loaded/in cache
$('a[href="#absolute1"]').trigger('click');
});
instead of running your code inside $(document).ready(...) use:
$(window).load(function(){
// Your code here
});
This will ensure the assets of the page have loaded, including images.

close and reset height and width to its original sizes on "close" click

I have this html:
<div class="box">
<div class="info">
<p>..some content..</p>
Close
</div>
</div>
<div class="box">
<div class="info">
<p>..some content..</p>
Close
</div>
</div>
Since I don't know .box height as it will expand and its height will depend on .info content, i run this:
$('.box').each(function() {
$(this).data('height', $(this).height());
});
When I click "close" once .box has expanded, I should be able to close expanded .box and reset its height and width to its original sizes before it was expanded.
I tried to run this, which is inside another function and it doesn't get the correct height:
$(".close").click(function (e) {
e.preventDefault();
$(".info").empty();
$(".box").width(251);
$(".box").data('height');
});
Anyone?
In regards to your .close method:
$(".close").click(function (e) {
e.preventDefault();
$(".info").empty();
$(".box").width(251);
$(".box").data('height'); // Just retrieves the height value
});
I think you're trying to do this?
$(".close").click(function (e) {
e.preventDefault();
$(".info").empty();
$(".box").width(251);
// Sets the element's height to the stored height value
$(".box").height( $(".box").data('height') );
});

How to get the height of the div dynamically

i have 2 div's, left and right, the content in right div is setted dynamically so as its height, so i haven't specified its height in html, now what i want is the height of the left div should be equal to the right div, how to set the height of the left div as per the height of right div, using jquery, i tried
$("#leftDiv").height($("RightDiv").height());
this does not seems working, as i haven't specified the height of the right div in html.
is there any other wayout, apart from using tables.
Description
Looks like your selector for RightDiv is not right or you forgot to wait while the DOM is loaded.
Sample
Html
<div id="leftDiv" style="border:1px solid red">left div</div>
<div id="RightDiv" style="height:100px; border:1px solid red">right div</div>
jQuery
$(function() {
$("#leftDiv").height($("#RightDiv").height());
})
More Information
jSFiddle Demonstration
jQuery - .ready()
jQuery - .height()
Try this:
$("#leftDiv").height($("#RightDiv").get(0).scrollHeight);
try
var firstHeight = $("#RightDiv").height() + 'px';
$("#leftDiv").css("height", firstHeight);
$(function() {
if($("#RightDiv").height() > $("#leftDiv").height()){
$("#leftDiv").css("height", $("#RightDiv").height() + "px");
} else {
$("#rightDiv").css("height", $("#leftDiv").height() + "px");
}
}

Categories

Resources