How do I specify another width for newly added divs in javascript

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

Answers


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.


You can try to use the css nth-child, check example in jsfiddle below

div{
    width:20px;
    height:100px;
    float:left;
    margin:1px;
    background:blue;
}
div:nth-child(n+7){
    width:100px;
}

http://jsfiddle.net/k39B7/1/


Need Your Help

WSO2 ESB Topic Subscription for REST url

rest soap wso2 wso2esb esb

We are successfully using WSO2 ESB for basic mediation using REST for the caller and the service (via a message queue).

Defining const static that needs setting up at runtime

c++ class static

I'm making use of a class with a few utilities defined as static methods eg.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.