When I input the following:
ul*3>li{Item $}*5
I will get the following:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Is it at all possible to get the following result using a similiar input?
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<ul>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<ul>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
</ul>
From the docs, it seems it's not possible.
Probably not as concise as you'd like, but this works:
ul>li{item $}*5^ul>li{item $#6}*5^ul>li{item $#11}*5
Related
I have code like this(it is not the exact code.)
<div class="Scroll">
<ul class="List">
<li class="Item">Option 1</li>
<li class="Item">Option 2</li>
<li class="Item">Option 3</li>
<li class="Item">Option 4</li>
<li class="Item">Option 5</li>
<li class="Item">Option 6</li>
<li class="Item">Option 7</li>
<li class="Item">Option 8</li>
<li class="Item">Option 9</li>
<li class="Item">Option 10</li>
</ul>
</div>
I was trying to catch all the list items (li). However, when i clicked to dropdown, it only shows 5 of them since rest of them are not in the view. So, if i try to get all items, webdriverio gives me only 5 options while there are 10 of them.
thus, i need to scroll down a little bit to get all of them. I know there is a "scrollIntoView" but i could not use it.
I'm building something like a "treeview" on bootstrap3. But I'm struggling with the collapse system. There is no problem when I expand the parent. But when I try to expand a child, it expands it, but also collapse the parent. And so on...
Here is the html
<div class="panel-collapse" role="tabpanel">
<div class="panel-body">
<ul class="treeview">
<li data-toggle="collapse" class="collapse1" href=".collapse1-1">Item 1
<ul class="collapse collapse1-1">
<li data-toggle="collapse" href=".collapse1-1-1">Item 1-1
<ul class="collapse collapse1-1-1">
<li>Item 1-1-1
<ul>
<li>Item 1-1-1-1</li>
<li>Item 1-1-1-2</li>
<li>Item 1-1-1-3</li>
</ul>
</li>
</ul>
</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
And here is a jsFiddle: https://jsfiddle.net/yL71kopn/
Can anyone help me on this? I would wish a purely bootstrap solution rather than a custom JS here. Unlees it's completely impossible.
Cheers! :)
Use links inside li tags, because when you click to open Item 1-1 you are also clicking on Item 1 li.
<div class="panel-collapse" role="tabpanel">
<div class="panel-body">
<ul class="treeview">
<li>
<a data-toggle="collapse" class="collapse1" href=".collapse1-1">Item 1</a>
<ul class="collapse collapse1-1">
<li>
<a data-toggle="collapse" href=".collapse1-1-1">Item 1-1</a>
<ul class="collapse collapse1-1-1">
<li>Item 1-1-1
<ul>
<li>Item 1-1-1-1</li>
<li>Item 1-1-1-2</li>
<li>Item 1-1-1-3</li>
</ul>
</li>
</ul>
</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
JSFIDDLE
Is there anyone that has used a similar menu style to Spotify? https://www.spotify.com/se/
I would like to have the menu cover whole page....
Example
Im using Bootstrap 3.
Has anyone done something similar?
You need to modify this code as you want..DEMO
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-right" data-toggle="collapse"
data-target="#example-navbar-collapse">
<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="#">menu</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Dogs <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Terrier</li>
<li>Labrador</li>
<li>Pitbull</li>
<li>German Shephard</li>
<li>Chihuahua</li>
<li>Beagle</li>
</ul>
</li>
<li class="dropdown">
Cats <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Persian</li>
<li>Siamese</li>
<li>Ragdoll</li>
<li>Lion</li>
<li>Tiger</li>
</ul>
</li>
<li class="dropdown">
Primates <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Monkey</li>
<li>Lemur</li>
<li>Gorilla</li>
<li>Chimpanzee</li>
</ul>
</li>
<li class="dropdown">
Reptiles <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Boa</li>
<li>Monitor Lizard</li>
<li>Comodo Dragon</li>
<li>Iguana</li>
<li>Alligator</li>
</ul>
</li>
</ul>
</div>
</nav>
How to click on the element with the value "Policy Search", which has dynamic attributes for each users, so please help me to set the xpath for below code.
<div class="navbar-collapse collapse in">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">My Business <b class="caret"></b>
<ul class="dropdown-menu">
<li>Agent Hierarchy
</li>
<li>Pending New Business
</li>
<li>Book of Business
</li>
<li>Commissions
</li>
<li>License Renewals
</li>
<li>Trial Applications
</li>
</ul>
</li>
<li class="dropdown">Policy Search <b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-submenu"> <a tabindex="-1" href="#">Book of Business Search</a>
<ul class="dropdown-menu">
<li>Client Search
</li>
<li>Policy Search
</li>
<li>Advanced Search
</li>
</ul>
</li>
</ul>
By.xpath("//a[contains(#class="dropdown-toggle" and text()="Policy Search")]));
and if you have multiple items with same value, you can specify it like,
By.xpath("//a[contains(text()="Policy Search")][1]));
By.xpath("//a[contains(text()="Policy Search")][2]));
after days passed on the internet searching for a solution (I'm really new with HTML, JQuery, php, I'm an as400 rpg programmer that now is moving to this kind of architecture), finally I'm here to ask for a help. I want to obtain a sortable list of items in one tab (and this is done) and from this list I want to drag one item to another tab and this is the main problem : the following code it's working but I can't drag into the first tab. In the sortable I have put the alert to visualize the tab code and to see that the update is working. In the php I put the code to write the database which I have to update with the information from the lists. I copied all the code from JQueryUI.com.
$(document).ready(function() {
$( "ul.dropfalse" ).sortable({
connectWith: "ul.dropfalse",
cursor: 'crosshair',
opacity: 0.8,
placeholder: "ui-state-highlight",
revert: true,
scroll: true,
update: function (event, ui) {
var target = event.target.id;
alert(target);
var order = $(this).sortable('serialize');
$("#update").load("tabsitem.php?"+order);
alert("update")
}
});
$( "#sortable" ).disableSelection();
$( "#tabs" ).tabs();
})
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1">
<ul id="sortable1" class='dropfalse'>
<li id="TABItem_11"><img src="arrow.png" alt="move" />1st TAB.Item 1</li>
<li id="TABItem_12"><img src="arrow.png" alt="move" />1st TAB.Item 2</li>
<li id="TABItem_13"><img src="arrow.png" alt="move" />1st TAB.Item 3</li>
<li id="TABItem_14"><img src="arrow.png" alt="move" />1st TAB.Item 4</li>
<li id="TABItem_15"><img src="arrow.png" alt="move" />1st TAB.Item 5</li>
</ul>
</div>
<div id="tabs-2">
<ul id="sortable2" class='dropfalse'>
<li id="TABItem_21"><img src="arrow.png" alt="move" />2nd TAB.Item 1</li>
<li id="TABItem_22"><img src="arrow.png" alt="move" />2nd TAB.Item 2</li>
<li id="TABItem_23"><img src="arrow.png" alt="move" />2nd TAB.Item 3</li>
<li id="TABItem_24"><img src="arrow.png" alt="move" />2nd TAB.Item 4</li>
<li id="TABItem_25"><img src="arrow.png" alt="move" />2nd TAB.Item 5</li>
</ul>
</div>
<div id="tabs-3">
<ul id="sortable3" class='dropfalse'>
<li id="TABItem_31"><img src="arrow.png" alt="move" />3rd TAB.Item 1</li>
<li id="TABItem_32"><img src="arrow.png" alt="move" />3rd TAB.Item 2</li>
<li id="TABItem_33"><img src="arrow.png" alt="move" />3rd TAB.Item 3</li>
<li id="TABItem_34"><img src="arrow.png" alt="move" />3rd TAB.Item 4</li>
<li id="TABItem_35"><img src="arrow.png" alt="move" />3rd TAB.Item 5</li>
</ul>
</div>
</div>
<pre>
<div id="update">Waiting for update</div>
</pre>
There is also another question : why when I drop into another tab, the item is always put to the 4th place in the list ?
Thank to anybody could help me.
You need to check out http://www.java2s.com/Code/JavaScript/jQuery/jQueryUISortableConnectlistswithTabs.htm