---Edit---
Fixed, was due to a CSS error. The LI element had white-space: nowrap, whereas it should have been in the UL.
The script wouldn't get the full width of the LI due to this, it was getting the width of a wrapped version.
---/Edit---
Hi there,
I have a menu system which is comprised of a horizontal top menu, with each item having a singular submenu. Some of these submenus are being split into a number of columns to prevent them being too long. What I am trying to do at the moment is have the submenu divs auto resize their width and height based on the content inside. I've got height working with no issues, it loops the children of the submenu in order to find the highest column, and assigns the parent that height.
For example, should a submenu have 2 columns, one with a height of 123px and another with a height of 234px, the overall height is altered to 234px. I am trying to apply the same logic to handle widths, however I'm having odd results, some submenus have a nice clean width, some end up with extra padding for a seemingly unknown reason.
I've tried using a combination of both .width() and .outerWidth(), as well as using either of them mixed with some other mathematical functions to ensure that the gap between columns is also covered when assigning the width. However, I simply cannot get it working.
This is the jQuery code I am using to resize:
Code:
$(document).ready( function()
{
if( $(".menubox.last").children().length > 1 )
{
$(".menubox.last").width( $(".menubox.last").width() * $(".menubox.last").children().length );
}
var height = 0;
var heighest;
$(".menubox").children().each( function( index, value )
{
if( !$(this).parent().hasClass( "last" ) )
{
$(this).parent().width( ( $(this).parent().width() + ( $(this).outerWidth( true ) * 2 ) ) );
}
if( $(this).parent().children().length > 1 )
{
$this = $(this);
if ( $this.outerHeight() > height )
{
heighest = this;
height = $this.outerHeight( true );
}
$(this).parent().height( height );
}
else
$(this).parent().height( $(this).outerHeight( true ) );
});
});
A live example can be found at: patioshoppers.com/tmp/jp3.php
To illustrate my point further, if you visit the above URL and hover above Heating, there is a large run off of white, whereas, Furniture is a lot neater. This comparison can also be made with Grills and Lighting, respectively.
Ideally, I would like to be able to loop through the submenu's children and find each of their widths, and then calculate the total width of those plus the gap between columns (which is a set amount defined in the CSS), but I cannot figure out how to do this.
If anyone has any knowledge on the subject matter and feels they could be of help, please reply. Or, if I have failed to convey the issue I am having, please respond and ask for further information
Thanks.
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
