Let's say, I want to achieve this with Struts iterator:
<div class="carousel-inner">
<div class="active item">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3"><img src="images/sample/clients/client1.png"></li>
<li class="span3"><img src="images/sample/clients/client2.png"></li>
<li class="span3"><img src="images/sample/clients/client3.png"></li>
<li class="span3"><img src="images/sample/clients/client4.png"></li>
</ul>
</div>
</div>
<div class="item">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3"><img src="images/sample/clients/client4.png"></li>
<li class="span3"><img src="images/sample/clients/client3.png"></li>
<li class="span3"><img src="images/sample/clients/client2.png"></li>
<li class="span3"><img src="images/sample/clients/client1.png"></li>
</ul>
</div>
</div>
<div class="item">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3"><img src="images/sample/clients/client1.png"></li>
<li class="span3"><img src="images/sample/clients/client2.png"></li>
<li class="span3"><img src="images/sample/clients/client3.png"></li>
<li class="span3"><img src="images/sample/clients/client4.png"></li>
</ul>
</div>
</div>
</div>
This is what I have tried:
<div class="carousel-inner">
<div class="active item">
<div class="row-fluid">
<ul class="thumbnails">
<s:iterator value="members" begin="0" end="3">
<li class="span3"><img src="<s:property value='imageUrlPrefix' /><s:property value='imageName'>" /></li>
</ul>
</div>
</div>
<div class="item">
<div class="row-fluid">
<ul class="thumbnails">
<s:iterator value="members" begin="3" end="7">
<li class="span3"><img src="<s:property value='imageUrlPrefix' /><s:property value='imageName'>" /></li>
</ul>
</div>
</div>
</div>
I want my struts iterator to create item classes with 4 list items each. Once a class is filled with 4 list items, the iterator must create another item class. How can I achieve this?
Thank you
You can achieve this pretty easily by using the module operator (as described in this answer):
<div class="carousel-inner">
<div class="active item">
<div class="row-fluid">
<ul class="thumbnails">
<s:iterator value="members" status="ctr" >
<li class="span3">
<a href="#">
<img src="<s:property value='imageUrlPrefix' />
<s:property value='imageName'>" />
</a>
</li>
<s:if test="%{#ctr.count % 4 == 0}" >
</ul>
</div>
</div>
<div class="item">
<div class="row-fluid">
<ul class="thumbnails">
</s:if>
</s:iterator>
</ul>
</div>
</div>
</div>
Note: to set the active class to the right item, use an <s:if> inside the iterator, and another one outside to check if it's the first element to be active.
Related
I'm trying to wrap my list with div, here is my Thymeleaf structure:
<th:block th:if="${predStatus.namePrem}">
<div class="Holder">
<ul id="holder" class="price-table__info">
<li>
<p class="exam1" th:text="#{exam2}"></p>
</li>
</ul>
</th:block>
<ul id="holder" class="price-table__info">
<li>
<p th:unless="${predStatus.kom}" class="top" th:text="#{usp}"></p>
<p th:if="${predStatus.kom}" class="top" th:text="#{usp1}"></p>
</li>
</ul>
</div>
What I trying to achieve is this structure
<div class="Holder">
<ul id="holder" class="price-table__info">
<li>
<p class="top">Title 1</p>
</li>
</ul>
<ul id="holder" class="price-table__info">
<li>
<p class="top">Title 2</p>
</li>
</ul>
</div>
Can anybody help me?
Can you try the following?
Just put the condition in the div
<div class="Holder" th:if="${predStatus.namePrem}">
<ul id="holder" class="price-table__info">
<li>
<p class="exam1" th:text="#{exam2}"></p>
</li>
</ul>
<ul id="holder" class="price-table__info">
<li>
<p th:unless="${predStatus.kom}" class="top" th:text="#{usp}"></p>
<p th:if="${predStatus.kom}" class="top" th:text="#{usp1}"></p>
</li>
</ul>
</div>
In the image below you will see that my navbar is at the top of the page however it is slightly covering the heading that is supposed to be beneath it. How do I fix this?
My code for the navigation bar:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="userProfile1">
<img alt="Brand"">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Profile</li>
<li class="dropdown">
Menu <span class="caret"></span>
<ul class="dropdown-menu">
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Logout</li>
</ul>
</div><!-- /.navbar-collapse -->
I added the following to my CSS file but it didn't change anything:
body {
padding-top: 60px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
}
You can always give your heading a DIV tag and give that div a margin-top.
CSS:
.heading-text {
margin-top: 100px;
}
HTML:
<div class="heading-text">
<h1>My Title</h1>
</div>
I do not know how to click a menu item on a CSS dropdown menu.
The structure of the menu looks like this:
<ul id="nav" class="clearfix" role="navigation">
<li>
<li class="navMenu navActive">
Allfinanzberatung
<ul class="subMenu" role="navigation">
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/wie-ich-sie-unterstuetze/">Wie ich Sie unterstütze</a> <- I want to Select this Menu Point
</div>
</li>
</ul>
<li class=" subMenuPoint">
<li class=" subMenuPoint">
<li class="last subMenuPoint">
</ul>
I've tried it with the following code but it doesn't work: (Eclipse Junit)
WebElement elems=driver.findElement(By.linkText("Wie ich Sie unterstütze"));//Menu Item
WebElement elems1=driver.findElement(By.xpath("//li[#nav']/a"));//Menu
Actions builder = new Actions(driver);
Actions hoverOverRegistrar = builder.moveToElement(elems1);
hoverOverRegistrar.perform();
elems.click();//at last Menu Item Click
First of all, thank you all,
but unfortunately it still does not work properly.
here is again the code for the menu.
<ul id="nav" class="clearfix" role="navigation">
<li class="navMenu">
beratung
<ul class="subMenu" role="navigation">
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/wie-ich-sie-unterstuetze/">Wie ich Sie unterstütze</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/wie-ich-sie-berate/">Wie ich Sie berate</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/produktwelt/">Produktwelt</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/auszeichnungen/">Auszeichnungen</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/premium-partner/">Premium-Partner</a>
</div>
</li>
<li class="last subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/ihr-allfinanzcheck/">Ihr Allfinanzcheck</a>
</div>
</li>
</ul>
</li>
<li>
<img alt="" src="/test.user/javax.faces.resource/pic_bg_main_menu_separator.png.xhtml?ln=images/frontend/menus" />
</li>
<li class="navMenu">
Karriere
<ul class="subMenu" role="navigation">
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/ihre-perspektiven/">Ihre Perspektiven</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/ihr-neuer-beruf/">Ihr neuer Beruf</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/ihr-karrierefahrplan/">Ihr Karrierefahrplan</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/ihr-karrierecheck/">Ihr Karrierecheck</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/was-andere-sagen/">Was andere sagen</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/auszeichnungen/">Auszeichnungen</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/freie-stellen/">Freie Stellen</a>
</div>
</li>
<li class="last subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/im-falschen-film/">Führen Sie selbst Regie</a>
</div>
</li>
</ul>
</li>
</ul>
This code selects me the fourth element so "karriere" thats good driver.findElement(By.cssSelector("#nav > li:nth-child(4) a")).click();
But unfortunately I could not select the second element of it -> Karriere -> Ihr neuer Beruf
I try this but it dosnt work
driver.findElement(By.cssSelector("#nav > li:nth-child(4) li:nth-child(2) a")).click();
What is the error?
Try
driver.findElement(By.cssSelector(".navMenu a")).click();
This finds the elements with class navMenu, then selects the first child that is an html <a> element (aka your link) and clicks it.
Css selector doesnot support cross platform browsers, you have to use xpath.
if you want to select "Wie ich Sie unterstütze"
then use
element= driver.findelement(By.xpath("//ul[#class='clearfix']/li/ul/li[1]/div/a"));
element.click();
if you want to select "Wie ich Sie berate"
element= driver.findelement(By.xpath("//ul[#class='clearfix']/li/ul/li[1]/div/a"));
element.click();
I need to write script for drop-down boxes. There are two dropdown elements on same screen and both the dropdown boxes have got similar class names (Dropdown boxes are of search and select kind),and there is no unique-id for any element.
So the script works fine to select element from first dropdown, But it fails when it supposed to perform same for second dropdown.
Do reply
Regards
<div class="title-edit-form" id="49156080-2097-ea0f">
<div class="control-group required">
<label class="control-label">Title
</label>
<div class="controls row-fluid">
<div class="select2-container span12 select2-container-active select2-dropdown-open" id="s2id_title">
<a href="#" onclick="return false;" class="select2-choice" tabindex="-1">
<span>de</span>
<abbr class="select2-search-choice-close" style="display:none;">
</abbr>
<div>
<b></b>
</div>
</a>
</div>
<input class="span12" id="title" type="hidden" style="display: none;" value="-1">
</div>
</div>
<div class="select2-drop select2-drop-active" style="display: block; top: 177px; left: 536px; width: 530px;">
<div class="select2-search">
<input type="text" autocomplete="off" class="select2-input select2-focused" tabindex="-1" style="">
</div>
<ul class="select2-results">
<li class="select2-results-dept-0 select2-result select2-result-selectable select2-new">
<div class="select2-result-label">
<span class="select2-match">de</span>
</div>
</li>
<li class="select2-results-dept-0 select2-result select2-result-selectable">
<div class="select2-result-label">
<span class="select2-match">De</span>
"an"
</div>
</li>
<li class="select2-results-dept-0 select2-result select2-result-selectable select2-highlighted">
<div class="select2-result-label">
"Stu"
<span class="select2-match">de</span>
"nt"
</div>`enter code here`
</li>
</ul>
</div>
the best way is to use cssSelector() for that kind of things, and especially the nth-child() function from cssSelector().
Exemple :
// gets the first div that contains school as a class value.
driver.findElement(By.cssSelector("div.school:nth-child(1)"));
More about cssSelector()
exemple wokring here -> JSfiddle
Hi I have created a JSP page. First tab contains a SELECT field. Based on the selected value I want to show the next tab. Can anyone help me please? I tried many times, but I am not getting.
<div class="navbar btn-navbar">
<div id="tabs" class="tabbable">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#datacollector" target="main"
data-toggle="tab">Data Collector</a></li>
<li class="hidden"><a href="#fromDB" target="main"
data-toggle="tab">Data Load</a></li>
<li class="hidden"><a href="#fromFile" target="main"
data-toggle="tab">Data Load</a></li>
<li class="hidden"><a href="#email" target="main"
data-toggle="tab">Data Load</a></li>
<li><a href="ajax/DataFieldMapping.jsp" target="main" data-toggle="tab">Data
Map</a></li>
<li>Schedule</li>
</ul>
<br> <br> <br>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="datacollector">
<div class="container">
<div class="row">
<div class="span8">
<form name="selectType" action="selectType"
onsubmit="return validateForm()" target="#fromDB" method="get">
<fieldset>
</select> <label class="control-label" for="dataloadType">Data
load Type:</label> <select id="dataloadType" name="dataloadType">
<option>Choose Data load Type</option>
<option value="fromDB">From Database</option>
<option value="fromFile">From File</option>
<option value="email">E-mail</option>
<option value="webServices">Web Services</option>
</select>
<p>
<button id="nexttab" type="submit" class="btn btn-success">Submit</button>
</p>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="fromDB">
<iframe src="GenericFileUpload.jsp" width="1250" height="400"></iframe>
</div>
<div class="tab-pane fade" id="fromFile">
<iframe src="GenericDB.jsp" width="1250" height="400"></iframe>
</div>
<div class="tab-pane fade" id="email">
<iframe src="EmailService.jsp" width="1250" height="400"></iframe>
</div>
<div class="tab-pane fade" id="datamap">
<iframe src="DataFieldMapping.jsp" width="1250" height="400"></iframe>
</div>
<div class="tab-pane fade" id="schedule">
<iframe src="UploadConfiguration.jsp" width="1250" height="400"></iframe>
</div>
</div>
</div>
</div>
If the user selects from File it should show the next tab with id fromFile and also it should hide the tabs with ids fromDB and email. Can someone help me out?
How to do using Jquery?
How to make a DIV visible and invisible with JavaScript
Just to add-on to this:
onchange event should be registered with a java-script function. This function will read the current selected value in the select box.
Based on the value, make only the div visible that's required, rest all to hidden.
$('#dataloadType').live('change',function(){
var value = $(this).val();
$('#tabs').tabs('select',value);
});