It is possible to display on screen 'ul' list like this?:
<ul>
<li> a </li> <li> f </li> <li> k </li>
<li> b </li> <li> g </li> <li> k </li>
<li> c </li> <li> h </li> <li> l </li>
<li> d </li> <li> i </li> <li> m </li>
<li> e </li> <li> j </li> <li> n </li></ul>
I need to be everything in one ul and li in blocks (for example 5 elements).
You can do this with column-count CSS3
Try
ul {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; /*3 in those rules is just placeholder -- can be anything*/
}
SEE DEMO
ul {width: 120px;}
li {margin: 0; padding:0; float: left; width: 40px;}
try looking into display: table-cell. I'm almost certain its what you want.
CSS-Tricks Display Property
You use CSS3 multi-column layouts. Apply following style to the UL:
UL {
column-count:3;
-moz-column-count:3;
-webkit-column-count:3;
}
(you may need to rearrange your LI as needed)
Demo: http://jsfiddle.net/2N7rB/
Related
This is my menu template - using the DDRMenu template style
<ul class="nav" id="side-menu">
[*>NODE]
</ul>
[>NODE]
<li class="[?SELECTED]active[/?]">
[?NODE]
[=TEXT]
[?ELSE]
</span>
[/?]
[?NODE]
<ul class="nav nav-****second****-level">
[*>NODE]
</ul>
[/?]
[/>]
How do I replace the ****second**** with the correct ordinal depending on how many levels down the menu goes
I'm using below logic to show multi level menu in one project.
<ul>
[*>NODE]
</ul>
[>NODE]
<li id="languages-box-holder">
[?ENABLED]
[=TEXT]
[?ELSE]
<span>[=TEXT]</span>
[/?]
[?NODE]
<ul class="languages-box popup-box cream-bg">
<li class="arrow-top"><span class="shadow cream-bg"></span></li>
<li class="focusor-top"></li>
[*>NODE]
</ul>
[/?]
</li>
[/>]
I am trying to achieve an iOS kind of look on a Zurb' Foundation 5 top menubar. I would like to have a icon font icon on top and the matching menu description below. Something that would look like this:
This is what I got now:
Having an icon first and following text is trivial with icon fonts:
<div class="contain-to-grid">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>Site name</h1>
</li>
</ul>
<section class="top-bar-section">
<ul>
<li class="show-for-medium-up" id="people-menu" data-tooltip data-options="disable_for_touch:true" title="People"><i class="fi-results-demographics"></i> <span class="menu-heading"> option 1 </span></li>
<li id="assets-menu" data-tooltip data-options="disable_for_touch:true" title="Assets"><i class="fi-euro"></i> <span class="menu-heading"> option 2 </li>
<li id="documents-menu" data-tooltip data-options="disable_for_touch:true" title="Documents"><i class="fi-page-edit"></i> option 3 </li>
<li id="services-menu" data-tooltip data-options="disable_for_touch:true" title="Services"><i class="fi-info"></i> Option4 </li>
<li class="divider"></li>
<li id="login-menu" data-tooltip data-options="disable_for_touch:true" title="Sign in"><i class="fi-key"></i> </li>
<li id="logout-menu" data-tooltip data-options="disable_for_touch:true" title="Sign out">Example login <i class="icon-bell color6"></i> </li>
</ul>
</section>
Adding a < br > before the span does not help as it breaks the top bar even if span has zero margin/padding in CSS.
How can I get the icon and text stack up nicely above each other?
You'll need to override a few default Foundation styles, but it's definitely possible.
Give these styles a try:
.top-bar ul>li a:not(.button) {
line-height: 1em;
padding-top: 8px;
}
.top-bar ul>li a i {
display: block;
height: 16px;
margin: auto 0;
line-height: 1em;
text-align: center;
}
You'll likely need to adjust both the padding-top, line-height, and icon height values to match your particular design.
I want find the numberof lis items (li) in html below:
<div class="li-control-block">
<div class="inner">
<a class="scroll-left" href="?slideId=7">
<img width="59" height="30" alt="btn-hero-promo-slider-left" src="/c/images/btn-hero-promo-slider-left.png">
</a>
<ul class="slides-8">
<li class="first">
1
</li>
<li class="">
2
</li>
<li class="">
3
</li>
<li class="">
4
</li>
<li class="">
5
</li>
<li class="">
6
</li>
<li class="">
7
</li>
<li class="last on">
</ul>
<a class="scroll-right" href="?slideId=1">
</div>
</div>
I have tried code below but that comes back with "12345678" which gives me size of 1.
So how can I get the size to be equal to 8 ?
List<WebElement> list=null;
list = driver.findElements(By.cssSelector(".slides-8"));
int length = list.size();
Try doing
WebElement temp = driver.findElement(By.classname("slides-8"));
List<WebElement> list = temp.findElement(By.xpath(".//li"));
System.out.println(list.size());
Your example works as expected; your code requests the number of elements which have a class of "slides-8", which is the list container. Then you ask for how many elements that is, and it's one -- just one container.
Either apply a CSS class to each list element, or ask the container for the count of its elements.
you can try using cssSelectors as well,
List<WebElement> list = driver.findElements(By.cssSelector(".slides-8 > li"));
int length = list.size();
I have a list of items with each having a like button and number of likes. I need to order then based off the number of likes. Any ideas how to accomplish this?
<div>
<h1>Ranking</h1>
<!-- The list -->
<ul>
<li>
<h4>Item 1</h4>
<p>200 likes</p>
<p>♥ like?</p>
</li>
<li>
<h4>Item 2</h4>
<p>100 likes</p>
<p>♥ like?</p>
</li>
<li>
<h4>Item 3</h4>
<p>50 likes</p>
<p>♥ like?</p>
</li>
<li>
<h4>Item 4</h4>
<p>25 likes</p>
<p>♥ like?</p>
</li>
<li>
<h4>Item 5</h4>
<p>1 likes</p>
<p>♥ like?</p>
</li>
</ul>
</div>
You can try this code:
function sortAlpha(a,b){
// here we take the number of likes
var aLikes = parseFloat($(a).children("p").first().html());
var bLikes = parseFloat($(b).children("p").first().html());
return aLikes > bLikes? 1 : -1;
};
$('div ul li').sort(sortAlpha).appendTo('ul');
I have an issue when rendering templated items within a ul with some pre-defined li elements, that i'd like the templating engine to respect:
This is what I'm trying to achieve:
<ul data-bind="{template: {name: itemTemplate, foreach: itemsToRender}}">
<li class="first">some pre-info</li>
//this is where I'd like knockout to render my templates
<li class="last">som-post info</li>
</ul>
This is what I actually get:
<ul data-bind="{template: {name: itemTemplate, foreach: itemsToRender}}">
//this is where all my templateItems get rendered
<li class="first">some pre-info</li>
<li class="last">som-post info</li>
</ul>
An obvious alternative is to use a template that rendered the entire ul, and looped over the child items, but this would render the entire template every time there was a change, and not just the updated items (li), which is the preferred way.
The best option is to use the containerless control-flow bindings available in KO 1.3 (in RC).
It would look like:
<ul>
<li class="first">some pre-info</li>
<!-- ko foreach: itemsToRender -->
<li class="item" data-bind="text: name"></li>
<!-- /ko -->
<li class="last">some post-info</li>
</ul>
or
<ul>
<li class="first">some pre-info</li>
<!-- ko template: { name: 'itemTemplate', foreach: itemsToRender } -->
<!-- /ko -->
<li class="last">some post-info</li>
</ul>
<script id="itemTemplate" type="text/html">
<li class="item" data-bind="text: name"></li>
</script>
Sample: http://jsfiddle.net/rniemeyer/tzJU3/