How to get the original Height of a HTML element?

Question

I have a div:

<div id="div" style="height:150px; border:solid thin blue;"></div>

is there a way to retrieve the original div height? The div is resizable, so the user may have resized it before my code loads.
Note: my code is a jQuery plugin, so I have no clue about what happened to the element before my plugin is called (so please don't tell me to store height in element data...)

jqFiddle in this demo, I want to get the 150 after resizing the div.
Any help would be greatly appreciated!

score 2 · Accepted Answer · answered May 11 '12 at 13:13

2

No, because resizable() method override inline style height value.

You need to store it somewhere else.

For example before making div resizable:

var originalHeight = $('#div').height();
$('#div').resizable();

$('#cmd').button().click(function(){
    alert(originalHeight);
});

answered May 11 '12 at 13:13

antyrat

27,479
9
75
76

I cannot, is not me who initialize the elements, my plugin may be called after other plugins executed.. – ilyes kooli May 11 '12 at 13:15
1

So, as I said, you can't. There is no such thing as history of changes in element. – antyrat May 11 '12 at 13:16
1

Unfortunately, this answer is technically helpful! At least I have to find another way to solve my issue. I had 3 answers teaching me how to set size, how to store size in data!!!! WTF!!!!! Thanks anyway – ilyes kooli May 11 '12 at 13:20
@skafandri: You may rewrite your plugin so that its initialisation is apart from the execution. Like `$(...).plugin("init");` then do "something" you don't know, then call `$(...).plugin("reset");` – Bergi May 11 '12 at 13:27
I'm trying to approach my problem another way, please check http://stackoverflow.com/questions/10552382/find-out-if-html-height-is-set-by-style-or-by-contnet – ilyes kooli May 11 '12 at 13:33

score 0 · Answer 2 · edited May 11 '12 at 13:29

0

originalHeight=0;
$(document).ready(function()
{
    originalHeight= $("#div").height()
});

edited May 11 '12 at 13:29

Joel Etherton

37,325
10
89
104

answered May 11 '12 at 13:23

unarity

2,339
2
21
17

While the code speaks for itself, the intention behind the code could use a little description. Why would you employ this technique? How is it specifically helpful to the question at hand? I think this answer has the most merit to it and will gladly upvote it if you provide an edit with this information. – Joel Etherton May 11 '12 at 13:35
I don't understand the problem of resizing dvi before loading code. This code will get original height after document is loaded(or I can bind this logic on div load event).My apologies if i didn't understand problem well – unarity May 11 '12 at 13:46
Oh I think you have the problem understood. The code you've presented here matches the accepted answer. What I think you've omitted that would have made this a better answer is the description of *why* this should work. – Joel Etherton May 11 '12 at 13:51
Yes it does, but the intention behind it does not. – Joel Etherton May 11 '12 at 14:01

score 0 · Answer 3 · answered May 11 '12 at 13:23

I don't know of a way to get old data from the DOM, but could you not insist on the plugin having an init function called and get the values then? You could also advise in your documentation that the elements not be moved until you've completed the init function, although if it's called via .ready() this should occur before the user has a chance to blink anyway.

How is the div resizable, using jquery-ui?

Another option might be to get the page again using ajax and then parse the page, but it would be a lot of effort and very messy.

I'm trying to approach my problem another way, please check http://stackoverflow.com/questions/10552382/find-out-if-html-height-is-set-by-style-or-by-contnet — ilyes kooli, May 11 '12 at 13:33

How to get the original Height of a HTML element?

3 Answers3