This fiddle http://jsfiddle.net/paultrotter50/fdvC5/ shows the problem I am having with detecting the height of position absolute content.
I am creating a tabbed panel so users can choose a room type and then a room sub-type. The room subtypes (ul.sub-types) have a position of absolute so they can be positioned correctly.
When the user switches between room sub-types I need to use jQuery/javascript to detect the height of the ul.sub-types so that I can set the height of the whole panel (div.tab-panel – shown with a blue outline) to match its contents. This should mean the page content coming after the panel does not get overlapped by the absolutely positioned room subtypes.
Unfortunately the jQuery function seems to run twice – the first time it detects the correct value and adjusts the blue outlined tab-panel correctly. Then it immediately seems to run again and returns an incorrect value.
You can see this most clearly when you click on family in the left hand column and then the bottom Family Double on the right hand side. This has lots of items in the list so that the height change is emphasized.
Any advice on what is causing the problem and/or how to fix this would be greatly appreciated.
HTML:
<section id="main_col">
<div class="tab-panel">
<ul id="room-types" class="left-tabs">
<li class="type double selected">
<input id="double" type="radio" name="room-type" checked="checked">
<label for="double">Double
<ul class="sub-types">
<li class="selected">
<input id="subtype1" type="radio" name="double-subtypes" value="subtype1" checked="checked">
<label for="subtype1">
<span class="col2">
<img src="img/pg-specific/left_col/room_sea_view.jpg" alt=" ">
</span><!-- end col2 -->
<span class="col1">
<span class="title">Classic Double</span>
<ul>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>
</span><!-- end col1 -->
<span class="clearfix"></span>
</label><!-- end lable for subtype1 -->
</li>
<li>
<input id="subtype2" type="radio" name="double-subtypes" value="subtype2">
<label for="subtype2">
<span class="col2">
<img src="img/pg-specific/left_col/room_sea_view.jpg" width="124" height="70" alt=" ">
</span><!-- end col2 -->
<span class="col1">
<span class="title">Classic Double</span>
<ul>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>
</span><!-- end col1 -->
<span class="clearfix"></span>
</label><!-- end lable for subtype2 -->
</li>
<li>
<input id="subtype3" type="radio" name="double-subtypes" value="subtype3">
<label for="subtype3">
<span class="col2">
<img src="img/pg-specific/left_col/room_sea_view.jpg" width="124" height="70" alt=" ">
</span><!-- end col2 -->
<span class="col1">
<span class="title">Classic Double</span>
<ul>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>
</span><!-- end col1 -->
<span class="clearfix"></span>
</label><!-- end lable for subtype3 -->
</li>
</ul>
</label>
</li><!-- end .type.double -->
<li class="type twin">
<input id="twin" type="radio" name="room-type">
<label for="twin">Twin
<ul class="sub-types">
<li class="selected">
<input id="subtype1" type="radio" name="twin-subtypes" value="subtype1" checked="checked">
<label for="subtype1">
<span class="col2">
<img src="img/pg-specific/left_col/room_sea_view.jpg" width="124" height="70" alt=" ">
</span><!-- end col2 -->
<span class="col1">
<span class="title">Twin Double</span>
<ul>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>
</span><!-- end col1 -->
<span class="clearfix"></span>
</label><!-- end lable for subtype1 -->
</li>
<li>
<input id="subtype2" type="radio" name="twin-subtypes" value="subtype2">
<label for="subtype2">
<span class="col2">
<img src="img/pg-specific/left_col/room_sea_view.jpg" width="124" height="70" alt=" ">
</span><!-- end col2 -->
<span class="col1">
<span class="title">Twin Double</span>
<ul>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>
</span><!-- end col1 -->
<span class="clearfix"></span>
</label><!-- end lable for subtype2 -->
</li>
<li>
<input id="subtype3" type="radio" name="twin-subtypes" value="subtype2">
<label for="subtype3">
<span class="col2">
<img src="img/pg-specific/left_col/room_sea_view.jpg" width="124" height="70" alt=" ">
</span><!-- end col2 -->
<span class="col1">
<span class="title">Twin Double</span>
<ul>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>
</span><!-- end col1 -->
<span class="clearfix"></span>
</label><!-- end lable for subtype3 -->
</li>
</ul>
</label>
</li><!-- end .type.twin -->
<li class="type family">
<input id="family" type="radio" name="room-type">
<label for="family">Family
<ul class="sub-types">
<li class="selected">
<input id="subtype1" type="radio" name="family-subtypes" value="subtype1" checked="checked">
<label for="subtype1">
<span class="col2">
<img src="img/pg-specific/left_col/room_sea_view.jpg" width="124" height="70" alt=" ">
</span><!-- end col2 -->
<span class="col1">
<span class="title">Family Double</span>
<ul>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>
</span><!-- end col1 -->
<span class="clearfix"></span>
</label><!-- end lable for subtype1 -->
</li>
<li>
<input id="subtype2" type="radio" name="family-subtypes" value="subtype2">
<label for="subtype2">
<span class="col2">
<img src="img/pg-specific/left_col/room_sea_view.jpg" width="124" height="70" alt=" ">
</span><!-- end col2 -->
<span class="col1">
<span class="title">Family Double</span>
<ul>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>
</span><!-- end col1 -->
<span class="clearfix"></span>
</label><!-- end lable for subtype2 -->
</li>
<li>
<input id="subtype3" type="radio" name="family-subtypes" value="subtype3">
<label for="subtype3">
<span class="col2">
<img src="img/pg-specific/left_col/room_sea_view.jpg" width="124" height="70" alt=" ">
</span><!-- end col2 -->
<span class="col1">
<span class="title">Family Double</span>
<ul>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>
</span><!-- end col1 -->
<span class="clearfix"></span>
</label><!-- end lable for subtype3 -->
</li>
</ul>
</label>
</li><!-- end .type.family -->
</ul>
</div>
CSS:
/*--- booking tab panels --- */
.tab-panel ul.sub-types {display:none;}
.tab-panel { position:relative; width:100%; border: 1px solid blue; height:500px; font-size:0.9em;}
.tab-panel input[type="radio"]:checked + label ul.sub-types {display:block; position:absolute; right:0px; top:0px; width:80%;}
.tab-panel ul.sub-types > li .col2, .tab-panel ul.sub-types > li .col1 ul {display:none;}
.tab-panel ul.sub-types input[type="radio"]:checked + label .col2, .tab-panel ul.sub-types input[type="radio"]:checked + label .col1 ul {display:block;}
#main_col .tab-panel input, #main_col .tab-panel label {float:left;}
#main_col .tab-panel input {clear:both; margin-right:10px; width:auto;}
#room-types > li > input[type="radio"]:checked + label { font-weight:bold; background-color: #bfb2b5; width:60%; }
#room-types > li > input[type="radio"]:checked + label .sub-types { font-weight:normal;}
#room-types > li > label {padding:7px 0px 5px 5px;}
.tab-panel .sub-types {background-color: #e0d7c1; }
.tab-panel .col1, .tab-panel .col2 {display:block;}
.tab-panel .col1 {float:left; width:58%; margin-left:10%; margin-top:10px; margin-right:0px;}
.tab-panel .col2 {float:right; width:25%; padding:10px; margin-right:0px;}
.tab-panel .sub-types li.selected label {width:100%;}
.tab-panel .sub-types li.selected label { background-color:#f3ebde;}
.tab-panel .sub-types input[type="radio"]:checked + label {background-color:#f3ebde; background-image: url(../img/core/radio-on-cream-bg.gif); background-repeat:no-repeat; background-position:7px 13px; cursor:auto;}
.tab-panel .sub-types li label {background: url(../img/core/radio-off-sand-bg.gif); background-repeat:no-repeat; background-position:7px 13px; cursor:pointer; }
#main_col .tab-panel .sub-types li label {margin-bottom:0px; padding-bottom:10px; padding-top:5px;}
.tab-panel .sub-types li label li {background-image:url("../img/core/tick-description-text.gif"); background-repeat:no-repeat; background-position: 0px 2px; padding-left:15px; width: 100px; float: left; margin-right:15px; margin-bottom:3px;}
.tab-panel .sub-types li label ul {width:100%; float:left; margin-top:8px;}
.tab-panel .sub-types li label img {max-width: 100%; height: auto;}
.tab-panel .sub-types input[type="radio"]:checked + label .title { font-weight:bold;}
jQuery:
$(document).ready(function() {
/* book page panels -------------------------------------- */
$('.sub-types li').click(function() {
$(this).parent().find('input:radio').attr('checked', false)
$(this).children('input:radio').attr('checked', true)
$('.sub-types li').removeClass('selected');
$(this).addClass('selected');
var panelHeight = $(this).closest('ul.sub-types').height();
alert("height: " + panelHeight);
$(this).closest(".tab-panel").css('height', panelHeight)
});
}); /* end $(document).ready(function() */
Ok, so the reason it’s getting run twice is that your hidden elements underneath are also being clicked. Try specifying a :visible selector. I also had to switch the click event to On, and bind it to a different dom element otherwise the click event would bind only to whichever element was marked as ‘li:visible’ at document.ready: