Add class to an element if on same url - javascript

I am trying to get the following bit of code to work, but I seem to be missing something
var dom = document.URL;
$("a[href=dom]").addClass("active");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<a href="http://example.com">
<i class="fa fa-home"></i>
Home
</a>
</li>
<li>
<a href="http://example.com/about">
<i class="fa fa-info"></i>
About
</a>
</li>
What's supposed to happen is when at http://example.com the class active will be added to the first a element, if at http://example.com/about then the second a will get the class.
I used javascript's alert to make sure I was getting the right URL, and it is as it shows in href, however what I have above doesn't work. I have tried the Javascript responses given here but they don't work either.

$("a[href=dom]").addClass("active");
should be
$("a[href=" + dom + "]").addClass("active");
You're mixing in a variable with a string. Also, I would recommend just adding a class to the body and targeting the current page like that. It's much more reusable.

Related

How to keep submenu opened after page load in JavaScript

I have almost done my work and my client ask for keeping submenu opened when user click the item in the menu and also set active color. The idea is better orientation when user actualy is. In React App it wouldn't be problem, cuz whole app works like single page. In this case i've decided use only HTML/JS as my challenge.
Is it even possible somehow keep menu opened/open again menu when new page is loaded please?
I tried make from this app something like single page app by some tutorials like "load paghe without refresh" etc, but nothing worked.
menu
<div class="menu">
<div class="item">
<a class="sub-btn">
Matice
<i class="fas fa-angle-right dropdown"></i>
</a>
<div class="sub-menu">
<a
href="/pages/matice/zakladni-operace.html"
id="matice/zakladni-operace"
onClick="reply_click(this.id)"
class="sub-item">
Základní operace
</a>
<a
href="/pages/matice/hodnosti.html"
id="matice/hodnosti"
onClick="reply_click(this.id)"
class="sub-item">
Hodnost
</a>
<a
href="/pages/matice/determinanty.html"
id="matice/determinanty"
onClick="reply_click(this.id)"
class="sub-item">
Determinanty
</a>
<a
href="/pages/matice/inverzni-matice.html"
id="matice/inverzni-matice"
onClick="reply_click(this.id)"
class="sub-item">
Inverzní matice
</a>
<a
href="/pages/matice/maticove-rovnice.html"
id="matice/maticove-rovnice"
onClick="reply_click(this.id)"
class="sub-item">
Maticové rovnice
</a>
<a
href="/pages/matice/vlastni-cisla-a-vektory.html"
id="matice/vlastni-cisla-a-vektory"
onClick="reply_click(this.id)"
class="sub-item">
Vlastní čísla a vektory
</a>
</div>
</div>
</div>
You can try to get window.location.href on load of your page and add style classes depending on conditionally with something like
<div class="<%= 'yourStyleClass' if #url== 'urURL' %>"> to set active color
You could use AJAX to call the page. But that doesn't sound like what you want. An alternative way in javascript would be to get the current window.location.href when the page loads, then inject a class name into the relevant node, and have the css for that class make it visible and highlighted.
If you're using a library like jQuery this shouldn't be too hard to achieve.

How can i call the same fancyapp [fancybox 3.5] javascript from more than one link?

I have a code like this :
<div id="logreg" style="display: none;width:100%;max-width:660px; height:450px;" class="logreg">
my content
</div>
and i need use in many links on my site like this :
<a data-fancybox="logreg" data-src="#logreg" href="javascript:;" class="btnReg float-right">
Register
</a>
<a data-fancybox="logreg" data-src="#logreg" href="javascript:;">
<i class="fas fa-user"></i>
</a>
but doesn't work too many links, only one link work :-(
Please help me.
You are creating gallery that contains two items and both items refer to the same content. Therefore simple use different value for data-fancybox element to not create a group and everything will work fine, demo - https://jsfiddle.net/tecnw6x7/

On click for child element

I want to trigger an on click event for my <i> tag. I added an ID to it but if i try use:
$("#delete-playlist-song").on("click", function() {
console.log("in"); //doesnt trigger
});
It won't trigger so I want to try a different approach? Something like:
$("master-playlist-entries").find("i.pl-action").on("click", function() {
console.log("in"); //Won't work
});
My HTML code:
<ul id="master-playlist-entries" class="database">
<li id="db-" track-name="James Darren - Goodbye Cruel World" data-path="http://example.com/Cruel%20World.mp3" class="active">
<i style="display:none;" class="fa fa-bars db-action" title="Actions" data-toggle="modal" data-target="#modal"></i>
<i id="delete-playlist-song" class="fa fa-times pl-action" title="Remove Song From Playlist"></i>
<i class="fa fa-music db-icon"></i><span class="sn"> Goodbye Cruel World</span> <span class="bl">James Darren</span></li>
</ul>
What I did try was an onclick event to call a function which worked but you see, I want to grab the data-path information and pass it to that function so I can use: $(this).attr("data-path") which will return a different link each time for different li.
Any help will be appreciated!
Your original code works in a one item snippet, https://jsfiddle.net/TrueBlueAussie/6qhhyxs7/ so I have to guess as your example is incomplete:
It is not shown, but I would guess you have multiple <i> elements with the same id (e.g. id="delete-playlist-song). If that is the case it simply will not find any except the first one as browsers use a fast-lookup cache which can only have one element stored against each ID value. IDs must be unique on a HTML page to work property.
Switch to using classes instead and use a delegated event handler.
https://jsfiddle.net/TrueBlueAussie/6qhhyxs7/1/
e.g.
$(document).on('click', '.delete-playlist-song', function() {
$(this).closest('li').slideUp();
});
Notes:
You should connect delegated event handlers to a non-changing ancestor element, but document is the best default if nothing else is close. Do not use body as it has a bug to do with styling that can cause mouse events to not fire. Use document as your friendly backup as it also exists before DOM ready.
I guess your html is added dynamically - so register the click listener dynamically using this:
$("body").on("click", "#delete-playlist-song", function() {
And for getting the attribute data-path you can use $(this).closest('li').attr("data-path") inside the listener.
See a demo below:
$("body").on("click", "#delete-playlist-song", function() {
console.log($(this).closest('li').attr("data-path"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<ul id="master-playlist-entries" class="database">
<li id="db-" track-name="James Darren - Goodbye Cruel World" data-path="http://example.com/Cruel%20World.mp3" class="active">
<i style="display:none;" class="fa fa-bars db-action" title="Actions" data-toggle="modal" data-target="#modal"></i>
<i id="delete-playlist-song" class="fa fa-times pl-action" title="Remove Song From Playlist"></i>
<i class="fa fa-music db-icon"></i><span class="sn"> Goodbye Cruel World</span> <span class="bl">James Darren</span>
</li>
</ul>

How to get the title of anchor tag which is inside a list and having class as selected

I have an unstructured list(ul) inside div tags and I am trying to get the title of an anchor tag, which is inside an li that has class="selected".
<div class="mainmenu">
<div class="mainmenulinks">
<ul>
<li class="selected">
<a class="topmenu-navigation-links" id="topMenuItem0" href="" title="Private">
<span class="span-link-Private">Private</span>
</a>
</li>
<li>
<a class="topmenu-navigation-links" id="topMenuItem1" href="" title="Business">
<span class="span-link-Business">Business</span>
</a>
</li>
<li>
<a class="topmenu-navigation-links" id="topMenuItem2" href="" title="Broker">
<span class="span-link-Broker">Broker</span>
</a>
</li>
</ul>
</div>
</div>
In this case, I should be getting Private as its li has class="selected".
[Updated] Working Fiddle https://jsfiddle.net/prashantkumar_999/rd9zttyn/9/
You can use:
$("li.selected>a").attr("title")
If you need to be more specific, you can add before the li, eg:
$(".mainmenu .mainmenulinks li.selected a").attr("title")
Your fiddle doesn't work as you've
not included jquery
not included "." for some classes (but have for others)
with hasClass, it needs to be in quotes without ".", eg .hasClass("selected")
tried to use this outside of a relevant context
Prop vs Attr
Summary of Preferred Usage
The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method.
while prop does work and is an easy fall-back incase you're not sure which to use, it should be attr for title.
Try this
$('li.selected').find('a').attr('title');
Updated Fiddle https://jsfiddle.net/rd9zttyn/3/ which is working fine

how to locate dynamic elements in `protractor`

I get this error when I try to run the code below:
Failed: element not visible
Following is the html code for the elements I want to locate:
<a class="dropdown-toggle ng-binding ng-scope" aria-expanded="false"
role="button" href="/" data-toggle="dropdown" ng-if="tab.subtabs">
Content
<span class="caret"></span></a>
<ul class="dropdown-menu ng-scope" role="menu" ng-if="tab.subtabs">
<li class="ng-scope" ng-repeat="test in tab.subtabs">
<a class="ng-binding" target="_self" href="/custom/ui">Custom</a>
</li>
<li class="ng-scope" ng-repeat="test in tab.subtabs">
<a class="ng-binding" target="_self" href="/patch/ui">Patch</a></li>
<li class="ng-scope" ng-repeat="test in tab.subtabs">
<a class="ng-binding" target="_self" href="/swd/ui">Software</a>
I want to click on element within the tags:
<a class="ng-binding" target="_self" href="/custom/ui">Custom</a>
<a class="ng-binding" target="_self" href="/patch/ui">Patch</a>
<a class="ng-binding" target="_self" href="/swd/ui">Software</a>
I have tried following code in protractor, but it is not working:
it("should click on Content and then custom", function(){
element(by.xpath('/html/body/bf-header/div/nav/div/div/div[2]/ul[1]
/li[2]/a')).element(by.xpath('/html/body/bf-header/div/nav/div/div
/div[2]/ul[1]/li[3]/ul/li[1]')).click();
element(by.xpath('/html/body/bf-header/div/nav/div/div/div[2]/ul[1]
/li[2]/a')).element(by.xpath('/html/body/bf-header/div/nav/div/div
/div[2]/ul[1]/li[3]/ul/li[1]')).click();
Well, now you can probably see why the Protractor Style Guide recommends not to ever use XPath location technique:
NEVER use xpath
Why?
It's the slowest and most brittle locator strategy of all
Markup is
very easily subject to change and therefore xpath locators require a
lot of maintenance
xpath expressions are unreadable and very hard to
debug
It is not always true and, if you choose XPath, the expressions you make must at least really be simple and readable. The first thing to fix, if you are gonna stay with XPaths, is not to make absolute XPath expressions - you don't have to start with html element and check every single element going down the tree to the desired element.
In this case, simple "by link text" or "by partial link text" locators should work perfectly:
element(by.linkText("Custom")).click();
Note that the Failed: element not visible error might be thrown, because you don't click the menu to open it up, before trying to click the submenu (assuming these are the submenu links you need to click).
You might also need to wait for the element to be clickable:
var EC = protractor.ExpectedConditions;
var custom = element(by.linkText("Custom"));
browser.wait(Ec.elementToBeClickable(custom), 5000);
custom.click();
Hope that helps.

Categories

Resources