CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Genocide_Hoax
Genocide_Hoax

Reputation: 853

Set min-height and min-width on window resize

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.

Upvotes: 1

Views: 5667

Answers (3)

Darren Crabb
Darren Crabb

Reputation: 580

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.

Upvotes: 1

Timotheus0106
Timotheus0106

Reputation: 1586

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/

Upvotes: 1

scartag
scartag

Reputation: 17680

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()

Upvotes: 2

Related Questions