What is the code to produce the following:
I'm using visual studio 2013 with web essential installed...
I need a ul with 3 li with an and img inside...
<ul class="gallery">
<li>
<a href="../upload/files/image-1" class="fb" rel="gallery">
<img src="../upload/files/item-1" alt="Foto" />
</a>
</li>
<li>
<a href="../upload/files/image-2" class="fb" rel="gallery">
<img src="../upload/files/item-2" alt="Foto" />
</a>
</li>
<li>
<a href="../upload/files/image-3" class="fb" rel="gallery">
<img src="../upload/files/item-3" alt="Foto" />
</a>
</li>
thanks ...
Try the following:
ul.gallery>li*3>a[href=../upload/files/image-$][class=fb][rel=gallery]>img[src=../upload/files/item-$][alt=Foto]
Related
I am using materialize css 1.0.0-rc.2. I am having issues in dropdown. Same dropdown is linked to navbar and sidenav but only one of them working and next thing is it should come below the navbar or link when hovered or clicked.What should I do please help?
I think it won't work for same dropdown structure in both Navbar and Sidebar. Making two dropdown structure can solve your problem.
<nav>
<div class="nav-wrapper">
Logo
<a href="#" data-target="mobile-demo" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
Sass
</li>
<li>
Components
</li>
<li>
<a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown
<i class="material-icons right">arrow_drop_down</i>
</a>
</li>
</ul>
</div>
</nav>
<ul id="dropdown1" class="dropdown-content">
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul id="dropdown2" class="dropdown-content">
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul class="sidenav" id="mobile-demo">
<li>
Sass
</li>
<li>
Components
</li>
<li>
<a class="dropdown-trigger2" href="#" data-target="dropdown2">Dropdown
<i class="material-icons right">arrow_drop_down</i>
</a>
</li>
</ul>
<script>
$(document).ready(function () {
$(".dropdown-trigger").dropdown({
hover: true
});
$(".dropdown-trigger2").dropdown();
$('.sidenav').sidenav();
});
</script>
<div id="joblist-panel">
<ul class="list-job-box">
<li id="row" class="row bt-gray-border job white-bg list-arrow">
<div class="circle-outline">
<div class="circle-job circle-color" style="background-color: transparent; border: 1px solid rgb(183, 183, 183);">
<div class="circle-inner">
<div class="score-text"><i class="fa fa-file-text-o"></i></div>
</div>
</div>
</div>
title
<div class="row list-job">
<ul>
<li>
<div><i class="icon-glyph-111"></i></div>
3-6 Years
</li>
<li>
<div><i class=" icon-glyph-83"></i></div>
1 Opening
</li>
<li class="location-text"><i class=" icon-glyph-14"></i>
Bengaluru
</li>
</ul>
</div>
</li>
</ul>
Have content like this and I want to loop all 'li' tag and get href of 'a' tag and innertext of list-job class .. How can we achieve this by casperjs, phantomjs
I cannot find out the locator for "Scotiabank American Express Card".
Please see the code below:
<li>
<a id="inputBox" class="menulink menuhover">Scotia Mortgage</a>
<ul id="listOptions" style="overflow:visible; display:block; height:148px; z-index:414; visibility:visible; opacity:1;">
<li>
<li>
<a class="sub ">Credit Card</a>
<ul style="overflow:hidden; display:block; height:0px; z-index:415; opacity:0.0153846;">
<li class="topline">
<a class="sub">American Express</a>
<ul style="overflow:hidden; display:block; height:0px; z-index:401; opacity:0.0153846;">
<li class="topline">
<a onclick="changeValue(this, 'AmExRegular')">Scotiabank American Express Card</a>
</li>
<li>
<a onclick="changeValue(this, 'AmExGold')">Scotiabank Gold American Express Card</a>
</li>
<li class="bottomline">
<a onclick="changeValue(this, 'AmExPlatinum')">Scotiabank Platinum Amex Card</a>
</li>
</ul>
</li>
<li>
<li class="bottomline">
</ul>
</li>
<li>
<li>
<li>
<li>
<li class="bottomline">
</ul>
</li>
search by text
//a[text()='Scotiabank American Express Card']
When I resize my window, Flexslider does not resize. You can see my working code here.
I am following FlexSlider's example, and have reduced all possible variables.
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://placehold.it/500x300" />
</li>
<li>
<img src="http://placehold.it/500x300" />
</li>
<li>
<img src="http://placehold.it/500x300" />
</li>
<li>
<img src="http://placehold.it/500x300" />
</li>
</ul>
</div>
$(document).ready(function(){
$('.flexslider').flexslider({
animation: "slide"
});
});
Turns out it's an issue with version 2.6.4 of FlexSlider. In the meantime, I just used version 2.6.3
I am using bootstrap 3 dropdown toggle menu in my angularjs project and everything seems to be working fine but after using angular ui bootstrap (angular-ui-bootstrap.min.js) the bootstrap 3 dropdown toggle menu is not working (meaning its not opening). Does anyone had the same issue? Please help me on how to solve this.
Index.html
<ul class="nav nav-list">
<li>
<a href="index.html">
<i class="icon-dashboard"></i>
<span class="menu-text"> Dashboard </span>
</a>
</li>
<li>
<a href="#" class="dropdown-toggle">
<i class="icon-building"></i>
<span class="menu-text"> Projects </span>
<b class="arrow icon-angle-down"></b>
</a>
<ul class="submenu">
<li>
<a href="#">
<i class="icon-double-angle-right"></i>
Find Project
</a>
</li>
<li>
<a href="#">
<i class="icon-double-angle-right"></i>
Create Project
</a>
</li>
<li>
<a href="#">
<i class="icon-double-angle-right"></i>
Update Project
</a>
</li>
</ul>
</li>
<ul>
You need to do it the Angularjs way:
Make sure to include:
Index:
<ul class="nav nav-list">
<li>
<a href="index.html">
<i class="icon-dashboard"></i>
<span class="menu-text"> Dashboard </span>
</a>
</li>
<li class="dropdown" ng-controller="DropdownCtrl">
<a class="dropdown-toggle">
<i class="icon-building"></i>
<span class="menu-text"> Projects </span>
<b class="arrow icon-angle-down"></b>
</a>
<ul class="dropdown-menu">
<li ng-repeat="choice in items">
<i class="icon-double-angle-right"></i>
<a>{{choice}}</a>
</li>
</ul>
</li>
<ul>
JS:
angular.module('plunker', ['ui.bootstrap']);
function DropdownCtrl($scope) {
$scope.items = [
"Find Project",
"Create Project",
"Update Project"
];
}