Set min-height and min-width on window resize - javascript

First of all pardon me if this is a duplicate , but I have been trying solutions from other posts but none of them seems to work for me.
This is what I am trying to achieve:
I want to set the min-height and min-width of a div with the current width and height of the document. The Event should trigger on every resize of the document window.
This is what I have tried so far:
$(document).ready(function() {
function reset_demensions() {
doc_height = $(document).height();
doc_width = $(document).width();
$(".flicker-div").css("min-width", doc_width + "px");
$(".flicker-div").css("min-height", doc_height + "px");
alert("From - Function" + doc_width + "x" + doc_height);
}
reset_demensions();
$(window).resize(function() {
reset_demensions();
});
});
The problem I am facing:
First time when the window loads it shows me the correct width and height. But when I try to resize the window manually two problems are being noticed:
1> The function is called twice i.e. alert box
2> The captured height of the document doesn't change.
3> The captured width of the document keeps increasing rapidly , and the values are not garbage as it's static for every run.
Test Run OUTPUT:
On Load:
1349x626
On Resize:
1369x3130
1389x15650
I am sure I missed something here , might be something very silly. Kindly help me figure this out.

I think your mistake is that you are capturing the height of the DOCUMENT .. instead of the window.
You are changing the window size and expecting the document size to change.
change your code to check for $(window).height() and $(window).width()

First you don't need the + 'px';
When you reload your browser after refreshing. it should be working or?
A few days ago i had the same issue and recognized its because of the document.width/document.height.
Is it possible to calculate the same with window.width/window.height?
the function is called every step you resize your window but you can add a timeout, so it will be only once executed. --> timeout plugin http://benalman.com/projects/jquery-dotimeout-plugin/

Not sure if this will make a difference, but you don't need to have your function definitions nested in the onready function. It may be having some effect on the scope of the function/garbage collection etc? You can safely define the functions before the onready, as it won't be called until the document is ready. Also take out the alert from where it is. Doing that has caused me many a browser crash because of the speed that the event fires and it tries to fire an alert when you resize the window!
You might want to try $(window).width() too as that might explain your cumulative results as your document is getting bigger as you resize your div, especially if there is padding/margins involved somewhere.

Related

jQuery callback for element size change?

Is there a way to use a callback function after the screen is done resizing an element?
For example:
element.css('height', 'auto', function() {
element.css('height', element.height() - 6);
});
In words: when the element is reset to it's default height. The DOM needs to re-evaluate the height of the element. That takes a bit of time, but that time varies from client to client. So I don't want to use a setTimeOut function and slow down the script much more then needed.
So how can I execute some JavaScript just after the element's height is reset?
PS: I already tried the jQuery animate function. But still that callback function doesn't seem to wait long enough for the element to actually obtain it's original height.
Even tough the comments weren't helpful at all. I found something that actually seems to work. It waits for the height change to process and instantly process the next rule afterwords.
element.css('height', 'auto').delay(1).css('height', element.height() - 6);

Jquery resize document height

I'm having a little trouble with my jQuery/JS code.
Whenever the window resizes, the "stretch" function should be run.
Now, I tried this:
function stretch() {
var stretch_elem = $('.stretch');
if (stretch_elem.length) {
var h = $(document).height() - stretch_elem.offset().top - 70;
stretch_elem.height(h);
}
}
$(window).resize(stretch);
But something strange is happening, when I resize the window. The element I'm stretching is just getting longer and longer, even if I upsize the window and the document height is getting lower.
What am I doing wrong here?
Thanks in advance.
Just fixed it. Had to add stretch_elem.height(0); before setting the new height. Didn't think I needed to do that. But it's working now.

jQueryui animation with inital undefined height

See the following fiddle:
[edit: updated fiddle => http://jsfiddle.net/NYZf8/5/ ]
http://jsfiddle.net/NYZf8/1/ (view in different screen sizes, so that ideally the image fits inside the %-width layouted div)
The image should start the animation from the position where it correctly appears after the animation is done.
I don't understand why the first call to setMargin() sets a negative margin even though the logged height for container div and img are the very same ones, that after the jqueryui show() call set the image where I would want it (from the start on). My guess is that somehow the image height is 0/undefined after all, even though it logs fine :?
js:
console.log('img: ' + $('img').height());
console.log('div: ' + $('div').height());
$('img').show('blind', 1500, setMargin);
function setMargin() {
var marginTop =
( $('img').closest('div').height() - $('img').height() ) / 2;
console.log('marginTop: ' + marginTop);
$('img').css('marginTop', marginTop + 'px');
}
setMargin();
Interesting problem...after playing around with your code for a while (latest update), I saw that the blind animation was not actually firing in my browser (I'm testing on Chrome, and maybe it was firing but I wasn't seeing it as the image was never hidden in the first place), so I tried moving it inside the binded load function:
$('img').bind('load', function() {
...
$(this).show('blind', 500);
});
Now that it was animating, it seemed to 'snap' or 'jump' after the animation was complete, and also seemed to appear with an incorrect margin. This smacks of jQuery not being able to correctly calculate the dimensions of something that hadn't been displayed on the screen yet. On top of that, blind seems to need more explicit dimensions to operate correctly. So therein lies the problem: how to calculate elements' rendered dimensions before they've actually appeared on the screen?
One way to do this is to fade in the element whose dimensions you're trying to calculate very slightly - not enough to see yet - do some calculations, then hide it again and prep it for the appearance animation. You can achieve this with jQuery using the fadeTo function:
$('img').bind('load', function() {
$(this).fadeTo(0, 0.01, function() {
// do calculations...
}
}
You would need to work out dimensions, apply them with the css() function, blind the image in and then reset the image styles back to their original states, all thanks to a blind animation that needs these dimensions explicitly. I would also recommend using classes in the css to help you manage things a little better. Here's a detailed working example: jsfiddle working example
Not the most elegant way of doing things, but it's a start. There are a lot more easier ways to achieve seemingly better results, and I guess I just want to know why you're looking to do image blinds and explicit alignment this way? It's just a lot more challenging achieving it with the code you used...anyways, hope this helps! :)

how to detect document size change in jquery

so suppose that clicking something would lead to a new content being loaded to the screen hence the height of document changes and whereas previously there are no scroll bars, now there actually are scrollbars...
how do I detect something like that happening using jquery
binding resize event onto window only detects window resize whereas binding it into document doesn't work
Update:
Please don't use the DOMSubtreeModified event. It is old, deprecated and not well-supported by browsers. In 99,9 % of the cases, there is a different event you can listen on. Most likely you are one of those people using jQuery and doing some AJAX stuff, so please take a look at their AJAX docs.
These are all available events. You would have to detect $(document).bind('DOMSubtreeModified', function() { ... }); and check for a dimension change to the previous firing.
var height = $(this).height(),
width = $(this).width();
$(document).bind('DOMSubtreeModified', function() {
if($(this).height() != height || $(this).width() != width) {
recalibrate();
}
});
This event is firing every time anything is done to the DOM. Therefore it will slowdown your browser.
We should get a better alternative. Could you please give us more information to your scenario?
Here is the solution.
// ajdust margins when page size changes (ie rotate mobile device)
$(window).resize(function() {
// Do something more useful
console.log('doc height is ' + $(window).height());
});
You could try a percentage scrolled event like this one:
http://www.jquery4u.com/snippets/jquery-detect-scrolled-page/
You might need to add a check to see whether the vertical scrollbar is present:
var hasVScroll = document.body.scrollHeight > document.body.clientHeight;

How can i dynamically update DIV block height?

I have 2 divs. 1st div should automatically change own height if 2nd div height was changed.
var height = jQuery('#leftcol').height();
height += 20;
jQuery('.rightcol-botbg').height(height);
There is no ability to change HTML markup :(
I have many DHTML layout changes, so I can't run prev. code anytime.
I want to run it dynamically. I need to do something like event/trigger.
I tried to use jQuery('#leftcol').resize(function(){}) or jQuery('#leftcol').change(function(){}). but it doesn't work. (resize triggers when window size changes.)
When does your 1st div change ? Whatever triggers that should get the new div height, add 20 to it and set the height of the other div. Can you post some code samples ? If the size changes happen really frequently, a timer/interval that repeatedly checks one size and set's the other should also work, but this is less efficient.
I would monitor the other div using an interval then update accordingly
setInterval(function(){
var height = $('#leftcol').height();
if(height != $('#leftcol').data('oldHeight'))
{
$('.rightcol-botbg').height(height+20);
$('#leftcol').data('oldHeight',height);
}
},500)
(untested)
The above code checks for changes in height every 0.5 seconds, then updates .rightcol-botbg;
I don't understand JQuery, but seeming as this question is tagged Javascript I'll give you a Javascript solution
document.getElementById("yourDivID").style.height = "300px";
Edit - You want to know when the height of the div has changed?
I don't know if there is a better way for that, but I would approach it with a function:
function changeBlockHeight(divID, newHeight)
{
document.getElementById(divID).style.height = newHeight + "px";
blockHeightChanged(divID);
}
function blockHeightChanged(divID)
{
alert("Div " + divID + " has been changed in height!");
}
Somewhere in your code:
<div id="testBlock"></div>
<button onlcick="changeBlockHeight('testBlock')">Test</button>
Every time you change the blocks height, blockHeightChanged() is called.
well there is not any generic triggers for an element resize.
what is the cause of div's size change at your case? you can check your heights righta after or in that cause.
only alternative that i can think of is setting up a timer with setInterval and check both div sizes every once in a while.
var myInterval = self.setInterval("myCheckFunction()",1000);
function myCheckFunction() {
jQuery('.rightcol-botbg').height(jQuery('#leftcol').height());
}
Using an interval is not very browser friendly.
If you have a setup like this:
<div id="content">
<div id="tree">should be full height</div>
<div id="data">this one is half the height</div>
</div>
You could easily do this with css. I'm not sure if this is the case...
Otherwhise the solution proposed by Tom Gullen is the best one.
Use .bind() to create a custom event type, and then trigger that event using .trigger().
Here is a fiddle with an example (a bit contrived, but I think you will get the idea)

Categories