As I was working on a project, I came across a tab-menu jQuery plugin that needed some modifications. The issue I encountered was that the tabs were absolutely positioned, causing them to be taken out of the flow and not contribute to the wrapping div's height, thus hiding the background behind them. To solve this problem, I attempted to dynamically adjust the height of the wrapping div (which contains the background image) to match the selected tab's height (+400px for navigation and header). In order to achieve this, I made some changes to the original jQuery file and added a few lines which are marked as 'added!'. Here is the modified code snippet:
var cbpHorizontalMenu = (function () {
var $listItems = $('#cbp-hrmenu > ul > li'),
$menuItems = $listItems.children('a'),
$body = $('body'),
current = -1;
function init() {
$menuItems.on('click', open);
$listItems.on('click', function (event) {
event.stopPropagation();
});
}
function open(event) {
if (current !== -1) {
$listItems.eq(current).removeClass('cbp-hropen');
}
var $item = $(event.currentTarget).parent('li'),
idx = $item.index();
if (current === idx) {
$item.removeClass('cbp-hropen');
//added!
current = -1;
} else {
$item.addClass('cbp-hropen');
current = idx;
$body.off('click').on('click', close);
var content2Height = jQuery(".cbp-hrsub").height() + 400;
jQuery('#content2').height(content2Height); //added
}
return false;
}
function close(event) {
$listItems.eq(current).removeClass('cbp-hropen');
//added!
current = -1;
}
return {
init: init
};
})();
The current implementation partially meets my requirements. However, it retrieves the height of the first div.cbp-hrsub element and applies it (plus 400px) to the div.content2. My goal is to target the height of the currently selected tab (presumably a child of event.currentTarget), calculate its height, and apply it to the content2 div.
To provide context, here is a simplified version of the HTML structure:
<div class="content2">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
<a href="#">tab 1</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
I am the 1st tab, with a height of 100px.
</div>
</div>
</li>
<li>
<a href="#">tab 2</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
I am the 2nd tab, with a height of 200px.
</div>
</div>
</li>
<li>
<a href="#" class="white06">Nigel's CV</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
I am the 3rd tab, with a height of 300px.
</div>
</div>
</li>
</ul>
</nav>
Just to clarify, I intend to retain the original functionality of the plugin and simply replace my two additional lines towards the end of the script. (
var content2Height = jQuery(".cbp-hrsub").height() + 400; jQuery('#content2').height(content2Height); //addedZel