Ever-changing CSS class attribute?

One challenge I'm facing involves a navigation bar with elements rendered using the Struts2 iterator tag. Here is an example:

<ul>
    <li><a href="#">Home</a></li>

<s:iterator var="row" value="#session.PrivMenu.children" status="stat">         
    <li>
        <a href="#" rel="ddsubmenu<s:property value="#stat.index+1"/>">
            <s:property value="#row.moduleName"/>
        </a>
    </li>
</s:iterator>  

</ul>

My current task involves adding an individual icon to each <a> element. Since each icon differs, unique styling is necessary for each <a> tag.

How can I accomplish this in Struts2?

One idea I had was to utilize a dynamic cssClass attribute. 

cssClass = '<s:property value="#row.moduleName"/>' + icon

However, I am concerned that if the module name were to change, I would need to update the CSS class, too. Am I on the right track? Any alternative suggestions?

javascriptjqueryhtmlcssstruts2

Answer №1

In case you want to utilize nth-child, please note that it may not function properly on browsers like ie8 or earlier versions. An alternative approach (assuming the menu structure remains constant) is to use a unique class with a counter on the li elements.

Subsequently, employ appropriate CSS to style the menu.

If incorporating a counter is feasible, the implementation would look something like this:

<ul>
  <li class="menu-1"><a href="#">Home</a></li>
  <s:iterator var="row" value="#session.PrivMenu.children" status="stat">
    <li class="menu-2"><a href="#" rel="ddsubmenu<s:property value="#stat.index+1"/>">
      <s:property value="#row.moduleName"/></a>
    </li>                       
  </s:iterator>
  <s:iterator var="row" value="#session.PrivMenu.children" status="stat">
    <li class="menu-3"><a href="#" rel="ddsubmenu<s:property value="#stat.index+1"/>">
      <s:property value="#row.moduleName"/></a>
    </li>                       
  </s:iterator>    
</ul>

Answer №2

To easily incorporate icons into your webpage, consider adding a class to the desired element and utilizing CSS for customization. By utilizing the 'nth-child' selector in your CSS, you can assign individual icons to each a tag.

For more information on this technique, refer to: .

By leveraging this selector, you can specify unique backgrounds for each a tag. For example, if you have 7 links and wish to set the background for the 5th link, follow this format:

.MyNavBar a:nth-child(7n+5) {width: 50px;background-image:url('MyImageurl');}

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

Exploring node.js: How to extract elements from a path

I have an array of individuals as shown below: individuals = ['personA', 'personB', 'personC']; I am looking to create a dynamic way to showcase each individual's page based on the URL. For instance, localhost:3000/indi ...

javascriptnode.js

What is the process for creating a custom Vue 3 element with incorporating styles for child components?

After experimenting with Vue's defineCustomElement() to develop a custom element, I encountered an issue where the child component styles were not being included in the shadow root for some unknown reason. To address this problem, I took a different ...

javascriptvue.jswebpackvuejs3shadow-dom

Having trouble with file uploads using PHP and Jquery

I am attempting to implement this solution for uploading a file using Ajax and PHP with Jquery, but unfortunately, it is not functioning as expected. Below is a snippet of my HTML form utilizing bootstrap: <form role="form" enctype="multipart/form-da ...

phpjqueryajaxformsfile-upload

How to Implement a Loop Inside a JavaScript Alert or Prompt?

Seeking clarity: Is it possible to embed code into an alert() or prompt()? For example, is there a way to include a loop or add data to the alert() or prompt just before execution or during execution? -Appreciate any help ...

javascriptloopsalerts

The output.library.type variable in WebPack is not defined

Currently, I am delving into WebPack with a shortcode. As part of my learning process, I am working on a code snippet that involves calculating the cube and square of a number, which are then supposed to be stored in a variable outlined in the webpack.conf ...

javascriptnode.jstypescriptwebpackwebpack-dev-server

Is it necessary to disrupt the promise chain in order to pass arguments through?

As a newcomer to nodejs and promises, I am facing a challenge in passing arguments into a callback function within my promise chain. The scenario is as follows: var first = function(something) { /* do something */ return something.toString(); } var second ...

javascriptnode.jstypescriptpromise

Exploring the Canvas with Full Element Panning, Minimap Included

Currently, I am working on incorporating a mini map onto my canvas that mirrors what is displayed on the main canvas. The main canvas includes zoom and pan functions. I have created a rectangular shape for the minimap to display the content of the canvas. ...

javascriptcsshtmlcanvas

The JSON output is throwing an error because it is unable to access the property '0' since it is

Trying to convert JSON data into an HTML table, I encountered the following error: "Cannot read property '0' of undefined" <?php $idmatchs = "bGdzkiUVu,bCrAvXQpO,b4I6WYnGB,bMgwck80h"; $exploded = explode(",", $idmatchs); $count = count( ...

javascriptphpjsonhtml-table

Tips for repairing a button using a JavaScript function in an HTML document

I am currently working on extracting titles from body text. To achieve this, I have created a button and linked my function to it. The issue I am facing is that when I click on the button, it disappears from its original position. I intend to keep it in pl ...

javascripthtmlcss

Ensure that the entire webpage is optimized to display within the viewport

My goal is to make the entire website fit perfectly into the viewport without requiring any scrolling. The main pages I am focusing on are index, music, and contact, as the other two pages lead to external sources (you can find the link at the bottom of th ...

javascripthtmlcssbootstrap-4

There seems to be an issue with loading data for the grid from the JSON

I need some help with creating a fiddle that loads data from a json file. I'm not sure why the data is not loading properly. You can view my fiddle here: Fiddle This is my code for the data store: Ext.create('Ext.data.Store', { storeI ...

javascriptjsonextjs

Identify a duplicate class name element using Selenium

<ul class="k9GMp "> <li class="Y8-fY "><span class="-nal3 "><span class="g47SY ">2</span> posts</span> </li> <li class="Y8-fY "><a class="-nal3 " href="/username/followers/" tabindex="0"><span ...

pythonhtmlseleniumclasshref

Styling JSON data in a jQuery Mobile list display

Currently working on a jQuery Mobile application that aims to achieve a similar output as shown in this image: https://i.sstatic.net/CfUHB.png The HTML code responsible for generating the image is as follows: <ul data-role="listview" data-i ...

javascriptjqueryjsonjquery-mobile

Implement JQuery to display a loading message whenever an a tag is clicked

The website's various pages are filled with standard <a> tags, some of which have a class attribute that is utilized for styling using CSS. Each <a> tag includes a href="" attribute linking to another page on the same site. My goal is to d ...

jquery

I'm curious about the ajaxSubmit function and some other bits of code. Can anyone assist me in understanding what this code

I've recently come across some code that requires debugging as it is not functioning correctly. My task is to fix the issues without any specific instructions provided. This task feels like a maintenance nightmare rather than a simple assignment. The ...

asp.netjqueryajax

Grunt is designed to generate a single file, instead of producing multiple files

I have a simple Gruntfile that is designed to read a plain text file line by line and create an html file of the same name for each line. However, it seems to only work with one line in the file at a time, not multiple lines. Here is the console output wh ...

javascriptnode.jsgruntjs

PHP: Extracting the selected value from a dropdown menu and incorporating it into an HTML link

Initially, I created a dropdown list Yet, there is uncertainty surrounding how to incorporate the selected choice (variable) into the input of the HTML <p style="text-align:center"> COVID-19 Checker</p> <br> <label for ...

javascriptphphtmlbuttondropdown

The function webpack.validateSchema does not exist

Out of the blue, Webpack has thrown this error: Error: webpack.validateSchema is not defined Everything was running smoothly on Friday, but today it's not working. No new changes have been made to the master branch since Friday. Tried pruning NPM ...

javascripttypescriptwebpackwebpack-dev-server

Problem with jQuery offset: SWF position remains unaffected

I attempted to create a code that would position an SWF file on top of an HTML button using jQuery's offset function to determine the coordinates. However, despite my efforts, the SWF does not appear to move as intended. var offset = $("#button").off ...

jquerycssoffset

A JointJS element with an HTML button that reveals a form when clicked

How do I bind data to a cell and send it to the server using the toJSon() method when displaying a form on the addDetail button inside this element? // Custom view created for displaying an HTML div above the element. // ---------------------------------- ...

javascriptjqueryhtmljointjs