I'm trying to get the reference of this particular part of the page, then I can use the method click() on it. I was trying to use a CSS selector like this:
var customersMenu = $('input[translate=menu.customers]');
But no success until now. Can you help me anyway?
<ul class="menu">
<li ui-sref-active="active">
<a class="ng-scope" translate="menu.home" href="#/home">Home</a>
</li>
<li ui-sref-active="active">
<a class="ng-scope" ui-sref="customer.list" translate="menu.customers" href="#/customers">Customers</a>
</li>
</ul>
First of all, you might need to open up the menu to be able to click the menu item:
var menu = $("ul.menu"); // $ is a shortcut to element(by.css("selector"))
menu.click();
Then, the easiest way to locate the menu item would be "by link text":
menu.element(by.linkText("Home")).click();
Related
I have a mobile nav, that looks like this
<ul id="mobile-menu" class="menu>
<li class="normal-link">link-1</li>
<li class="dropdown-link">link-2
<ul class="submenu">
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
</ul>
</li>
<li class="dropdown-link">link-3
<ul class="submenu">
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
</ul>
</li>
<li class="normal-link">link-1</li>
</ul>
I cant change the html/wordpress generated code, but I can add css and javascript. So is there a way for me to get next to the dropdown-link's a image that will let the submenu free. if the image is pushed the image will change. if pushed again it will go back to the normal image and the dropdown dissappears again?
I am mostly looking for answer for the problem with of javascript on the dropdown link's but just so you know what i want to do with it.
This question is so very, very vague. But I guess you're looking for the nth-child() selector.
See the docs here for more information. Target your 'mobile-menu' ul, and use nth-child to select the li elements within.
My big question would be, why can't you change the HTML? If it's Wordpress, you can modify the template to change the HTML.
You question is not really clear but if you want to retrieve an element without using id, first you may use their classes
var myClass = document.getElementsByClassName("classname"); //returns a nodeList like array
myClass[0] //first element with "classname"
You may also use tag names
var divs = document.getElementsByTagName("div");
divs[2] //third "divs"
You may also use querySelectorAll, this works pretty much like CSS selector and also returns a nodeList
var qs = document.querySelectorAll(".class");
I hope this helps
You could add a class and use the Jquery class selector: $(".class-name") to target a specific <li>
Please note that I want to use JQuery for this.
This question How to trigger a click on a link using jQuery provided a solution for when only one anchor exists inside the list
However I have more than one list item and more than one anchor.
<ul id="navigation_list">
<li id="sub_menu1_tab" style="">
<span class="decorator"></span>
<a id="policies" href="#admin/menu1_list" class="admin-submenu-item"></a>
</li>
<li id="sub_menu2_tab" style="">
<span class="decorator"></span>
<a id="rules" href="#admin/menu2_list" class="admin-submenu-item"></a>
</li>
<li id="sub_menu3_tab" style="">
<span class="decorator"></span>
<a id="reports" href="#admin/menu3_list" class="admin-submenu-item"></a>
</li>
</ul>
How do I trigger a click on only one of the anchors? For example I want to trigger the second list item anchor.
I have tried the following without success
$("#sub_menu2_tab a").trigger('click');
and
$("#navigation_list #sub_menu2_tab a").trigger('click');
just try
$("#sub_menu2_tab a").click();
I have a menu and I want an element with a class of active, parent element's sibling element to be clicked automatically on page load.
Here is my HTML:
<li class="level1">
<span class="level1 drop-down clicked">Oranges</span>
<ul class="level2" style="display: block;">
<li class="level2">Peel</li>
<li class="level2">Pips</li>
<li class="level2 active">Pegs</li>
</ul>
</li>
I've tried
jQuery('li.level2.active').parent('li.level1').children('span.level1.drop-down').click();
but it does not work. I'm not sure if I'm using the parent & children method's properly.
Although, jQuery("span.drop-down.level1").click(); does work, but it selects all the elements with that class which I would like to avoid.
Try this:
jQuery('li.active').closest('li.level1').find('span.level1.drop-down').trigger('click');
Because the li.level1 is two steps up, you need .parents(), which selects up multiple levels, instead of .parent(), which is only one.
jQuery('li.level2.active').parents('li.level1').children('span.level1.drop-down').click();
^^^^
How can I properly use AngularStrap's ScrollSpy interface to link to anchors within the current document?
Looking at the AngularStrap documentation I see that when a link is visited a double hash is actually generated. Such as: http://mgcrea.github.io/angular-strap/##scrollspy
However, when implementing the functionality myself I do not see this behavior. In my case the anchor tags are attempting to update the location instead of moving to a location within the current document.
My AngularStrap ScrollSpy resides on a sub-page: my-site.com/#/hig. With the following definition:
<div class="hig-sidebar hidden-print hidden-sm hidden-xs" role="complementary" data-offset-top="-34" bs-affix bs-scrollspy-list>
<ul class="nav hig-sidenav">
<li bs-scrollspy data-target="#overview">
Overview
<ul class="nav">
<li bs-scrollspy data-target="#suboverview">Subsection</li>
</ul>
</li>
<li bs-scrollspy data-target="#accessibility">Accessibility</li>
<li bs-scrollspy data-target="#typography">Color and Typography</li>
<li bs-scrollspy data-target="#graphics">Icons and Graphics</li>
<li bs-scrollspy data-target="#navigation">Navigation Design</li>
<li bs-scrollspy data-target="#elements">UI Elements</li>
<li bs-scrollspy data-target="#reference">Reference</li>
</ul>
<a href ng-click="gotoTop()">Back to top</a>
</div>
As I scroll through the document, the ScrollSpy properly highlights the current section. But when I click on a link, for example the Color and Typography link, it updates the URL to: my-site.com/#typography.
I've been looking at the AngularStrap code and can't see what I haven't done that it is doing. How can I make sure the anchor link adds to the #/hig instead of replacing it?
Yes, as I have explained here:
https://github.com/mgcrea/angular-strap/issues/573
In Angularjs the anchor links like Overview do not work when you have $routeProvider for configuring your routing.
You can fixed this by replacing the anchor links with a controller, as follows:
controller:
$scope.scrolltoHref = function (id){
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash(id);
// call $anchorScroll()
$anchorScroll();
};
HTML:
Overview
Given the way you talk about "update the location", i think that you may be using the scroll spy within an ngView directive. In this case, check out the workaround described at the beginning of this issue:
https://github.com/mgcrea/angular-strap/issues/573
This helped me to have a kind of working solution, with minor offsets issues
I have created a menu for my website which you can find here:
http://jsfiddle.net/nq9Nt/9/
When click a category on the menu it opens that category on my main navigation?
Is something conflicting or have I placed my Javascript in the wrong place?
So I want to be able to click a category and show the sub-categories but it just won't work. Also is there a way to keep open the category you clicked after you change page?
Thank you
<ul class="nav">
<li>Category 1
</li>
<li class="drop">Category 2
<ul id="sub1">
<li>Item
</li>
<li>Item
</li>
</ul>
</li>
<li class="drop">Category 3
<ul id="sub1">
<li>Sticker
</li>
<li>Sticker
</li>
</ul>
</li>
<li>Category 4
<ul id="sub1">
<li> Mural
</li>
<li>Mural
</li>
</ul>
</li>
$(".drop")
.on('click', function () {
$(this).find('ul').toggle();
})
Actually at least on jsfriddle animation works and if you replace href of your anchors from '#' to a real url you will be redirected to another page, so first make sure that you've attached jquery library in head of the document (since you use it in your script), then move your script to the bottom of the page, right before tag 'body' closes.
About keeping the state of the opened categories after refresh - usually it is made on server side while generating template by adding class, for example 'active', to current link and then, using css, corresponding category (or a hierarchy of categories) is set to be opened (li.active ul {display: block;} for example). Well, actually you could do the same trick - use js to find out current url with the help of window.location.pathname value and match it with a href value of your navigation links and then assign class 'active' to the found element (or its parent, it is up to your css)
You can add a class drop to li in 4th Category, so it will work as others. And remove that onclick if you don't plan to use it.
http://jsfiddle.net/nq9Nt/10/
Here the example,
jsbin
You have gave the anchor href with #, So It reloads the page. And also you have gave the onclick method, But it doesn't there.