Question

I’m customizing the following script: http://tympanus.net/Tutorials/ExpandingImageMenu/index_3.html

But instead of 6 divs (or the 6 guys in this case), I have 11 where the 4 last divs are opened with a custom navigation.

But I want to make the last 4 divs wider in size, if possible a variable size to fill up the right side of the content div.

How should I do this?

Thanks in advance!

/* get the item for the current */
var $item   = $menuItems.eq(current);
var $item2  = $menuItems + 7; /* i added this line */

&

/* if not just show it */
$item.css({width : '400px'})
$item2.css({width : '700px'}) /* and this one */
.find('.ei_image')
.css({left:'0px', opacity:1,});

Iv’e tried the + + + + + css thingie but no luck for me, but I’ve uploaded the site…
http://www.vernietig.be/depandoering/index2.html

Answer 1

There are a couple of things wrong at the moment. Firstly, the second line of code you added is actually part of some chained methods.

You don’t need the first line of code you added.

After examining the script it looks like the current variable holds a zero based array index of the items in the trigger list. If it is not zero based you may need to change 6 to 7 in the code below (or to whatever is appropriate).

What I would suggest is:

/* if not just show it */
var itemWidth = current < 6 ? '400px' : '700px';
$item.css({width : itemWidth})
.find('.ei_image')
.css({left:'0px', opacity:1,});

EDIT: Update to include another line of code to change

Ok, You can also try changing this line:

itemParam   = (dir) ? {width : '400px'} : {width : '75px'},

to

itemParam   = (dir) ? current < 7 ? {width : '400px'} : {width : '700px'} : {width : '75px'},

EDIT 2: Update found a css change

In your css for .ei_menu ul remove width: 1300px;

And if you don’t want the scrollbar to appear you can also remove overflow: scroll; from .ei_descr2.

EDIT 3: Update for last 4 divs to have variable width.

You can just change .ei_descr2 where you tried width: 100%; to be min-width: 300px; that will cause the divs to have min-width of 300px and they will expand for more content if required. NOTE: you can change the min-width value to be whatever you like.