In jquery, how can I write a function to copy the height of one DIV to another DIV once?

Question

Consider the following,

<div id="outerDIV">
     <div id="innerDIV" style="height: 100%;">
         <asp:ContentPlaceHolder... />
     </div>
</div>

These DIVs reside in the master page of an asp.net site. I would like to write a function that copies the innerDIV's height and apply it to the outerDIV's height. I can do this normally, like so:

    $(document).ready(function () {
        $('#outerDIV').height($('#innerDIV').height());
    });

but the problem is I only want it to occur at the first load of the page. When the user navigates away to other pages, I don't want the outerDIV to resize again.

How may I accomplish this?

Thanks

In other words, you do not want to declare this script in the master page, and only apply it to the first content page, right? — Andrei, Feb 19 '15 at 18:49

Tui Popenoe · Answer 1 · 2015-02-19T19:38:20.680

1

From the MDN Docs: Use a class selector in conjunction with your ID selector.

 $(document).ready(function(){
         $('#outerDIV.firstpage').height($('#innerDIV.firstpage').height());
     }
 });

By adding the class='firstpage' selector, you can differentiate between your first page and your other pages, without worrying about cookies or tracking another variable.

edited Feb 19 '15 at 19:38

answered Feb 19 '15 at 19:33

Tui Popenoe

2,098
2
23
44

score 0 · Answer 2 · answered Feb 19 '15 at 19:05

Maybe you could do something like this

var applied = 0;/*use it to check if height to outter div has been applied */
$(document).ready(function(){

  if(applied == 0){
  $('#outerDIV').height($('#innerDIV').height());
applied = 1;
}//this way the height will be applied only once

});

score -1 · Accepted Answer · edited Feb 19 '15 at 19:40

-1

Why don't you use cookies.

    $(document).ready(function () {
        if(!$.cookie("setHeight"))
        {
           $('#outerDIV').height($('#innerDIV').height());
           $.cookie("setHeight", "1");
        }
    });

And delete the cookie whenever you want using $.removeCookie("setHeight");

edited Feb 19 '15 at 19:40

Tui Popenoe

2,098
2
23
44

answered Feb 19 '15 at 18:50

void

36,090
8
62
107

2

Very important read: [cookies vs localStorage](http://stackoverflow.com/questions/3220660/local-storage-vs-cookies). In short, don't set cookies unless server needs to see them! – Scott Feb 19 '15 at 19:05
1

Like Jaxo said, you should not be using cookies for something you can control client side with HTML classes and jQuery selectors. – Tui Popenoe Feb 19 '15 at 20:50

In jquery, how can I write a function to copy the height of one DIV to another DIV once?

3 Answers3