So i'm using the jQuery waypoints plugin for the navigation of a single page site
Right now it looks like this:
<div class="navigation">
<ul id="navi">
<li data-slide="1">DC3</li>
<li data-slide="2">THE ABOUT</li>
<li data-slide="3">THE WORK</li>
<li data-slide="4">THE CLIENTS</li>
<li data-slide="5">THE WHO</li>
<li data-slide="6">CONTACT</li>
</ul>
and each data-slide moves to a separate div like this:
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio=".5">
What I want to do is use the same navigation on a second page, that will target each data-slide div on teh original page. Is there a way to do this?
A very simple solution is to used named anchors. In the HTML, next to each element you want to target add a new anchor element like <a id="slide"></a> and then you can link to that anchor's position on the page by using a fragment in your URL like so example.html#slide.
Related
I want to click the third value(embedded li element) given the below code snippet, any help?
some-menu-title-value
some-menu-item-default-value
some-menu-item-optional-value
Assuming that the element will always be the 2nd <li> element, you can use:
element.all(by.css('li')).get(1).click();
If there are other <li> elements on the page, you can refine the css selector like:
element.all(by.css('li.some-menu-items')).get(1).click();
Its hard to tell from the HTML provided, but if your elements are nested like so:
<div class="myClass"
<li class="myClass"
<li class="myClass"</li>
</li>
</div>
Then you could do element(by.css('div>li>li')).click(); to click the inner <li> element.
I'm learning Joomla and I am facing this problem:
I need to add classes to a couple of li tags generated dynamically by Joomla.
Here is the HTML:
<div class="mod-menu">
<ul class="nav menu nav-pills margin-awards">
<li class="item-207 <!--NEED TO ADD A CLASS HERE--> firstItem">
<a class="span7" target="_blank" href="sadasfasfasfasdasdasd">
<img alt="TIFF" src="/images/tsadds.png">
</a>
</li>
<li class="item-208 <!--NEED TO ADD A CLASS HERE-->">
<a class="" target="_blank" href="http://sadasdasda">
<img alt="Fantasticfest" src="/images/asdasd.png">
</a>
</li>
so, I can add a class to the anchor tag and the unordered list tag, but I can't find an option to add it to the list item tag.
Please help.
Ok, I solved it by myself.
Using jQuery I added the classes using tags and classes to add the new class
<script>
jQuery( "li.item-207" ).addClass('span7');
jQuery( "li.item-208" ).addClass('span4');
jQuery( "li.item-209" ).addClass('span1');
</script>
Is there some built in functionality to open a tab pages(kendoUI TabStrip) based on the url? or do I have to write some custom function to read the url and do some work based on that?
I think you would have to parse the URL, then call the activateTab() function on the tab strip to open the tab you want.
Check if this is what you are looking for:
HTML:
<div id="tabstrip">
<ul>
<li class="k-state-active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
JavaScript:
$(document).ready(function () {
$("#tabstrip").kendoTabStrip({
contentUrls:[
"page1.html",
"page2.html",
"page3.html"
]
});
});
It creates a 3 tabs kendoTabStrip and the content of each of the tabs is page1.html, page2.html and page3.html.
Solution if you want to set the active tab in the rendering state (not with Js at the page load)
if you use a templete system (like groovy for play framework 1.x) you can write something like this:
<ul>
<li class="#{if params.get('ref') == 'application'}k-state-active#{/if}">Application</li>
<li class="#{if params.get('ref') == 'payment'}k-state-active#{/if}">Payment</li>
</ul>
<div>
content for tab application
</div>
<div>
content for tab payment
</div>
Note: params.get('ref') means the requests's get param with the name: 'ref'
And if you open this page with the url:
someting.dev/dashboard?ref=payment
you will get the payment tab as the active
<div id="suggestionlist">
<ol id="suggestionroot">
<li id="sugg_1">
<li id="sugg_2">
<li id="sugg_3">
<li id="sugg_4">
<li id="sugg_5">
<li id="sugg_6">
<li id="sugg_7">
<li id="sugg_8">
<li id="sugg_9">
<li id="sugg_10">
I have a search look ahead feature which I'm trying to automate. I'm trying to pick the 6th option in the list every time but I just can't seem to locate it! This is the nearest I've got but it's not working..
#Browser.div(:id, "suggestionlist").link(:index, 6).click
You should do some reading about HTML. <li> tag is not link, <a> tag is link.
So, to click <li id="sugg_6"> try this:
browser.li(:id => "sugg_6").click
To click a link inside the list item (not shown in your HTML but referenced in comments)
browser.li(:id => "sugg_6").link.click
(that presumes you want to click the first/only link inside the LI, otherwise you might need to specify an index value)
Did you try to access this element by XPath?
browser.find_elements_by_xpath("div[#id='suggestionlist'/li[6]").click
I have a menu like this, but the mark-up doesn't have to stay this way.
<div id="menu">
<ul>
<li>Item 1</li>
<ul>
<li>Subitem 1</li>
</ul>
<li>Item 2</li>
</ul>
</div>
And each time one of these menu items is clicked I want to load different content in a div - let's call it #content.
$(document).ready(function() {
$('#menu li').click(function(){
$('#content').load('content.txt');
});
});
Now, how do I pass which content page I want to load into #content? Thanks in advance!
Prevent the click from going to the page with the event's preventDefault() method, use the link's href that actually goes to that page loaded into the #content div.
$(document).ready(function() {
$('#menu a').click(function(e){
$('#content').load($(this).attr('href'));
e.preventDefault();
});
});
<div id="menu">
<ul>
<li>Item 1</li>
<ul>
<li>Subitem 1</li>
</ul>
<li>Item 2</li>
</ul>
</div>
You can do this in numerous ways. Essentially, you need to associate a URL with each <li> item.
To name a few ways, you could have them stored in a JavaScript array, in the jQuery cache i.e. $(selector).data, in a hidden input inside each <li> element, as an attribute on the <li> element.
I'd use something like jQuery UI's tab feature to handle this. It will probably degrade better.
If you need to do this manually, your easiest route may be to add an ID or rel attribute to the anchors, and then use that to determine the content page you want to load.
You can use "$(this).attr('blah');" within your function to access these properties.
in the realms of progressive enhancement - you should make the links point to another page with their respective content.
then you can load not just the entire contents of the page into your content div but a specified element. So if its the contents of the #content div in the other page is required something like:
$('#menu a').click(function(){
$('#content').load($(this).attr('href') + ' #content');
});
should do the trick.
only problem with joelpittets solution is that it would load the ENTIRE contents of the other page which may not be what is desired. He did however remember to cancel the default behaviour of clicking a link...