Hi All, Neither of the properties clientHeight and offsetHeight has worked out for me while I try to determine the height of the div created dynamically. Could someone suggest alternative please? Thanks a ton in advance.
Could u provide me with the syntax please?
Ashriya
2010-10-12 09:25:41
`$('div#whatever').outerHeight()`
Júlio Santos
2010-10-12 09:26:23
It shows an undefined value..What do I do now?
Ashriya
2010-10-12 09:29:47
Well, i guess that means it doesn't work. I have no idea :(
Júlio Santos
2010-10-12 09:36:44
Julio, thanks for the help anyway!
Ashriya
2010-10-12 09:55:30
+1
A:
Ashriya,
if you are able to use jquery, (as an alternative) then you can easily find (and set) the height of any div (in your domain) as such:
// get the height
var myDivHeight = $('#myDiv').css('height');
// set the height
$('#myDiv').css('height', myDivHeight + someothernumber);
hope this helps a 'little'...
[edit] - forgot to use the # id placeholders in my original response. have corrected above!! - argh :)
jim
2010-10-12 09:19:10
Hello there,It doesn't seem to work..:( Is there any other possible alternative in JavaScript itself?
Ashriya
2010-10-12 09:24:06
ashriya =- the above example of course assumes that you have id's set on your divs. it wasn't explicitly mentioned in your OP, so obviously, will rely heavily on that discipline being followed. (plus i had omitted the # id placeholders originally. have corrected my example)- doh!!
jim
2010-10-12 09:42:29
ashriya - i'm not sure what to suggest. this certainly works under 'normal' circumstances and is something I do all the time with great success. maybe you could post the little bit of html/jquery code that you have and i could look at that.
jim
2010-10-12 10:08:00
Allright Jim, I'll tell my actual problem. I have to show a div onmouseover of an icon. It does get shown up, but in the bottom, so am unable to see the content. How do I format the div so that the div shows up right next to the icon itself? P.S. The div is actually a label created by a certain Label.js file
Ashriya
2010-10-12 10:10:32
Label.prototype.draw = function() {var projection = this.getProjection(); var position = projection.fromLatLngToDivPixel(this.get('position'));
Ashriya
2010-10-12 10:10:51
this.span_.innerHTML = this.get('text').toString(); var projection = map.getProjection(); var bounds = map.getBounds(); var sw = this.getProjection().fromLatLngToDivPixel(bounds.getSouthWest()); var ne = this.getProjection().fromLatLngToDivPixel(bounds.getNorthEast()); var mapheight = Math.abs(ne.y - sw.y); var mapwidth = Math.abs(ne.x - sw.x); var mapvlimit = mapheight / 2; var mapHlimit = mapwidth / 2;
Ashriya
2010-10-12 10:11:30
if (position.x > mapvlimit) { fx = position.x - 100; } else { fx = position.x + 100; }
Ashriya
2010-10-12 10:12:18
var div = this.div_; div.style.left = fx +'px'; div.style.top = position.y + 'px';
Ashriya
2010-10-12 10:13:03
hmm - i think this is a different question really. it might be best to redo it with that full detail as the answers given will be quite different and potentially more focussed on your dilema.
jim
2010-10-12 10:17:05
Oh no:( Its close to a month since I'm bothered with this app..Can sumone help me asap please? I gotta finish it this week. Thanks.
Ashriya
2010-10-12 10:24:52
ashriya - i'm sure the SO community will offer as much help as they can if you provide your exact needs on this one.
jim
2010-10-12 10:31:03
A:
I'm not a fan of JQuery. I use the "native" mydiv.offsetHeight - works with IE and FF.
Simon Catlin
2010-10-12 09:29:22
I don't seem to get it right with Javascript though I use the correct method. Could someone help me asap please? This is very urgent. Thanks in advance.
Ashriya
2010-10-12 09:33:39
myDiv.offsetHeight and myDiv.offsetWidth work OK. If you use "position = 'relative';" the width appears to pick up the screen width. With "position = 'absolute';" the width and height reflect the real width and height.
Simon Catlin
2010-10-12 19:20:35
A:
I'm not sure, that I completely understand your problem. However, a following approach may be helpful.
<html>
<body onload="documentReady();">
<script type="text/javascript">
function documentReady() {
var div = document.createElement("div");
div.innerText = "I'm a div, excluded from DOM!";
var helper = div.cloneNode(true);
helper.style.position = "relative";
helper.style.top = "-100000px";
helper.style.left = "-100000px";
document.body.appendChild(helper);
var height = helper.offsetHeight;
var width = helper.offsetWidth;
document.body.removeChild(helper);
alert([height, width]);
}
</script>
</body>
</html>
Mikhail Nasyrov
2010-10-12 09:41:37
Allright, I'll tell my actual problem. I have to show a div onmouseover of an icon. It does get shown up, but in the bottom, so am unable to see the content. How do I format the div so that the div shows up right next to the icon itself? P.S. The div is actually a label created by a certain Label.js file.
Ashriya
2010-10-12 09:47:24
Label.prototype.draw = function() {var projection = this.getProjection();var position = projection.fromLatLngToDivPixel(this.get('position'));
Ashriya
2010-10-12 09:49:04
this.span_.innerHTML = this.get('text').toString();var projection = map.getProjection();var bounds = map.getBounds();var sw = this.getProjection().fromLatLngToDivPixel(bounds.getSouthWest());var ne = this.getProjection().fromLatLngToDivPixel(bounds.getNorthEast());var mapheight = Math.abs(ne.y - sw.y);var mapwidth = Math.abs(ne.x - sw.x);var mapvlimit = mapheight / 2;var mapHlimit = mapwidth / 2;
Ashriya
2010-10-12 09:52:34
if (position.x > mapvlimit) { fx = position.x - 100; } else { fx = position.x + 100; }
Ashriya
2010-10-12 09:53:24
var div = this.div_;div.style.left = fx +'px';div.style.top = position.y + 'px';
Ashriya
2010-10-12 09:53:54
It looks like a google maps api. I'm not familar with it.Nevertheless, if you want to make a popup, you should use an 'absolute' position to set it arround an icon and set a z-index to bring the div up to the top layer:div.style.position = 'absolute';div.style.zIndex = '1000'; //a big numberAlso, make sure that the div has width and height, if they are undefined, you can use my snippet to get them.
Mikhail Nasyrov
2010-10-12 10:11:41
Yes Jim, you're right. Its a Google maps API version 3. I've set the position of the div to absolute only(in the aspx page).
Ashriya
2010-10-12 10:17:25