Continued increments in Emmet? - emmet

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

Selecting all li tags from dropdown list on WebdriverIO

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.

Bootstrap 3 nested ULs collapse system (without JS/jQuery)

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

Spotify menu bootstrap (responsive)

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 select elements with same values using xpath

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]));

JQueryUI Connected lists + sortable in tabs

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