What is the preferred method for setting a different width for newly created divs using JavaScript?

Currently, I am working on customizing a script found at the following link: http://tympanus.net/Tutorials/ExpandingImageMenu/index_3.html

However, instead of just 6 divs (or in this case, 6 guys), I have 11 divs where the last 4 are opened using a unique navigation.

My goal is to increase the width of these last 4 divs, potentially making them variable in size to occupy more space on the right side of the content div.

What would be the best approach to achieve this?

Thank you for your help!

/* 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,});

I attempted using the "+++++ css thingie", but unfortunately had no success. The website can be viewed at:

javascriptjqueryhtmlcss

Answer №1

At the moment, there are a few issues that need to be addressed. Firstly, it appears that the second line of code you added is actually part of a series of chained methods.

The first line of code you added is unnecessary and can be removed.

Upon examining the script, it seems that the variable current holds a zero-based array index of items in the trigger list. If this index is not zero-based, you may need to adjust the code below by changing 6 to 7 (or to the appropriate value).

I would recommend the following approach:

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

EDIT: Another line of code needs to be modified

You can also consider changing this line:

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

to

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

EDIT 2: Update regarding a css change

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

If you do not want the scrollbar to appear, you can also remove overflow: scroll; from .ei_descr2.

EDIT 3: Adjusting the width for the last four divs

You can update .ei_descr2 where you set width: 100%; to use min-width: 300px; instead. This will give the divs a minimum width of 300px and allow them to expand as needed for additional content. Feel free to customize the value of min-width as necessary.

Answer №2

If you're looking to style specific elements using CSS, the nth-child selector could be useful. Take a look at the example provided on 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/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I display the default value in a jQuery radio button when it changes?

I recently started developing and I encountered an issue with a change event function for two radio buttons that have the same name and id but different values. When I trigger the change event, the default value related content doesn't appear until a ...

phpjqueryhtml

Clarification on the Jquery .post() function

Hey everyone, I understand that this question has likely been asked numerous times, but I'm struggling to apply the solutions to my own project. I have a selector on my webpage that needs to initiate an AJAX query to retrieve data from my database and ...

phpjavascriptjqueryajaxsqlite

Counting in jQuery with duration intervals between numbers

My goal is to create a number counter that can either count up or down, such as from 1 to 100 or from 100 to 1. While I have come across several plugins that offer this functionality, they all contain a duration variable that dictates how long it takes to ...

javascriptjquery

The "Network" tab in Firefox does not display AJAX requests made from a content script

I'm currently working on my first web extension, but I've encountered some difficulties with web requests. Whenever I make an AJAX request or any other type of request, it doesn't seem to appear in the "Network" tab. I've been monitori ...

javascriptajaxfirefox-addon

Strict mode does not allow duplicate data properties in object literals within JavaScript

Challenge Description I am facing an issue with handling an optional variable called ByteRange. To accommodate this, I included 2 different URLs in the $resource. Upon doing so, I encountered the following error: Message: Error in parsing: "tools/tes ...

javascriptangular

Next.js presents a challenge with double-language applications

I am currently in the process of developing a web application using Next.js that will cater to users who speak my native language and English. I have a specific approach in mind: First, I plan to create a folder: /pages/en-us pages/ |--(all app pages) |- ...

javascriptnext.js

What is the process for adding an image to an HTML document?

Do you have any tips for inserting an image on a HTML page? I've been searching through various resources, like W3Schools, but can't seem to get it to work correctly. Specifically, I need to import an image in .jpg format and add a hyperlink to i ...

html

Delete the row from the table that contains incorrect information

In my table with inline create feature, when a user clicks on the new button, it creates a new empty row at the top of the table where they can input data. When the user clicks save, the controller checks if the values are valid and stores them in the data ...

javascriptjqueryhtmlasp.net

Excessive number of grid items causing page to exceed capacity with auto-fit feature

I am currently using a grid with an auto-fit feature. Everything is working smoothly, but when the screen size shrinks to less than 350 pixels, it starts to overflow. How can I ensure that it stays at least 350px wide if possible and then shrinks accordi ...

htmlcss

Aptana HTML Editor displays a blank page

Currently, I have Aptana set up as a plugin within Eclipse Neon. To create my HTML file, I used the template found at "New From Template => HTML => HTML 4.0.1 Strict Template (*.html)". The issue I am facing is that when I click on the file in the P ...

htmleditoraptana

Safari having trouble auto-playing Vimeo iframe embed

Update 6/26/23: Seems like a mysterious change occurred, as now the Vimeo video on project pages is playing automatically for me in Safari without any specific reason. It's working fine on Chrome too. Not sure if Vimeo made an update or if it's r ...

javascripthtmlangulariframevimeo

Adjust the column width dynamically in an Ionic framework

Need help with changing the size of a Column element dynamically. <ion-col [size]="this.size" [size-xl]="this.size_xl" [size-md]="this.size_md" [size-sm]="this.size_sm" [size-xs]="this.size_xs"> Faci ...

htmlcssangularionic-framework

What causes an error when trying to access with the member access operator?

When dealing with object properties in the code snippet below, an error is thrown when trying to access the object using the Member Access. Why does this happen? var d = {a: 10, b: 20, c:30}; var keys = Object.getOwnPropertyNames(d); ...

javascript

Is the term 'Literal' in Javascript Arrays simply referring to its dynamic nature, allowing it to be modified at any time?

I'm confused why Mozilla refers to this as an Array 'Literal' when it's declared using the VARIABLE keyword and its content can be modified... var drinks = ["Espresso", "Latte", "Cappuccino"]; Could someone shed some light on this for ...

javascriptliterals

Conceal a Div Element on a Website

My website's home page features a CSS animation that slides two images with a high z-index off the screen to reveal the content below. I want this animation to only run the first time the page is accessed during a session, and not every time the user ...

javascriptphpjqueryhtmlcss

Tips for integrating '.jar' files into React Native for Android operating systems

My English skills are not great. I work as a FRONT-END developer. Currently, we require an App that can connect to a Bluetooth Printer on Android using React-Native for development. The SDK file provided by the Printer's manufacturer has a 'ja ...

javascriptjavaandroidreact-nativefrontend

Tips for extracting user-provided data from a dynamic table in Python with the help of Flask and JINJA2

I have been working on a Flask application where users can interact with a table by changing a cell and having those changes immediately reflected, such as updating them in the database. Check out the screenshots below: https://i.sstatic.net/3KCVP.png htt ...

pythonhtmlformsflaskjinja2

Exploring the possibilities of implementing an accordion within a Drupal node

While there are many great Accordion (UI) modules available, I have yet to find one that can display accordion sections for subsections within a single node or article. For example, on my website, each article has sections titled "Start," "Middle," and "En ...

phpjquerydrupaluser-interface

browsing through the latest updates and news feed box

I have reviewed these three websites: www.foursquare.com www.untappd.com www.getglue.com The main page features a scrolling down most recent activity box. How can I create something similar to this? Is this achieved through jquery or another method? ...

jquery

Error encountered while attempting to invoke endpoint function

Recently, I was handed a Node.js API documented with swagger for debugging purposes. My task also involves implementing some new features, however, I've encountered some difficulty when it comes to calling the functions that are executed upon hitting ...

javascriptnode.jsapicallback