I can't seem to figure out how to make my site navigation have an active link for the current page.
This is the only code that is working for me, however, there is always two links with the class "active." I only want the current page to be active.
Here is my code:
<script>
function setActive() {
aObj = document.getElementById('nav').getElementsByTagName('a');
for(i=0;i<aObj.length;i++) {
if(document.location.href.indexOf(aObj[i].href)>=0) {
aObj[i].className='active';
}
}
}
window.onload = setActive;
</script>
Here is my staging site: http://champhero.wpengine.com
Thanks for any help!
You are checking an indexOf. Therefore, URL http://champhero.wpengine.com/ is always contained in others like http://champhero.wpengine.com/the-enemies/
If you just check an equality, it should work:
function setActive() {
var aObj = document.getElementById('nav').getElementsByTagName('a');
for (var i = 0; i < aObj.length; i++) {
if (document.location.href == aObj[i].href) {
aObj[i].className = 'active';
}
}
}
Note: You were not declaring local variables with 'var', making them globals and potentially unstable across the environment. i changed that in my suggested code.
a tag href contains whole link so you could check for equality like below.
<script>
function setActive() {
aObj = document.getElementById('nav').getElementsByTagName('a');
for(i=0;i<aObj.length;i++) {
if(document.location.href === aObj[i].href) {
aObj[i].className='active';
}
}
}
window.onload = setActive;
</script>
Home page nav link(http://champhero.wpengine.com/) is highlighted in every page because it's present in all other links(http://champhero.wpengine.com/pagelink)
<script>
window.onload = function(){
var anchors = document.getElementsByTagName('a');
for (var i = 0; i < anchors.length; ++i)
if (anchors[i].href === window.location.href)
anchors[i].className += ' active';
};
</script>
though this snippet will apply the class to all anchors. For just the ones in, say, your navigation bar, give them a specific CSS class to hook into and then:
<script>
window.onload = function(){
var nav_links = document.querySelectorAll('.nav-link');
for (var i = 0; i < nav_links.length; ++i)
if (nav_links[i].href === window.location.href)
nav_links[i].className += ' active';
};
</script>
Related
I am trying to remove some links inside different span tags with the same class (.front) when a button is pressed (class .tm-woocompare-button).
I have tried by using below code but I cant get the anchor.onclick function to work. Any ideas?
Please note that I am looking for a pure javascript solution, no jquery.
<script>
window.onload = function() {
var anchors = document.getElementsByClassName('tm-woocompare-button');
for(var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
anchor.onclick = function() {
document.getElementsByClassName('front').style.display = 'none';
}
}
}
</script>
try: document.getElementsByClassName('front')[0].style.display = 'none'
instead of: document.getElementsByClassName('front').style.display = 'none';
getElementsByClassName returns an array, rather than an element.
Good afternoon. On the site (for example) nnmclub.to
have some ad units in the iframe.
How to implement a click on them?
I clicked on the part of the href links (links are kind of like http: //site.xyz) click on .xyz. But it opens the same source site and not link that was clicked on. That is, clicks but returned nnmclub.to.
Options are tried
<script>
window.onload = function() {
document.querySelector('a[href*=".xyz"]').click();
}
</script>
2.
window.onload = function() {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
var link = links[i].getAttribute('href');
if (link.indexOf('.xyz') !== -1) {
links[i].click();
break;
}
}
}
I have the following javascript to make the webpage title change again and again after every five seconds.
<script>
var titleArray = ["TITLE-1","TITLE-2","TITLE-3","TITLE-4"];
var N = titleArray.length;
var i = 0;
setInterval(func,5000);
function func(){
if (i == 4) {
i = 0;
}
document.title = titleArray[i];
i++;
}
</script>
I want it to work only when the user has opened a different tab in order to "attract" him/her back to my site.While he/she is on my site I want this javascript to stop working so the title of the webpage is what I simply write in the title tags.
here is a summary of what I want.
<script>
if (the user is not on this tab but has opened and is using a different tab)
{the javascript I have mentioned above};
elce {nothing so the title tags work};
</script>
P.S: Is this a good idea? Got any other suggestions? I just really like thinking out of the box.
Please try with below script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var isActive;
window.onfocus = function () {
isActive = true;
};
window.onblur = function () {
isActive = false;
};
// test
var titleArray = ["TITLE-1","TITLE-2","TITLE-3","TITLE-4"];
var N = titleArray.length;
var i = 0;
function changeTitle(){
if (i == 4) {
i = 0;
}
document.title = titleArray[i];
i++;
}
setInterval(function () {
if(window.isActive !== true){
changeTitle();
}
}, 1000);
</script>
How can i rewrite all external links with a single onmousedown event?
Kinda like what facebooks does with it's link shim
Please check the original Facebook Article about the link shim:
http://on.fb.me/zYAq0N
Requirements:
Should work for all subdomains on mainsite.com.
Should redirect example.com to
mainsite.com/link.cgi?u=http://example.com
Should only redirect links not belonging to mainsite.com.
Uses:
This is for security of the users of a private web app, and to protect referrers.
Best to do it on the fly for good UI as pointed out in the FB article.
That's so when users hovers over some link it shows the correct link but when he clicks it, js redirects it to my.site.com/link.cgi=http://link.com
Thanks in advance
SOLVED: https://gist.github.com/2342509
For an individual link:
function $(id){ return document.getElementById(id); }
$(link).onclick = function(){ this.href = "http://otherlink.com"; }
My Sheisty Link
So to get all external links:
window.onload = function(){
var links = document.getElementsByTagName("a");
for(a in links){
var thisLink = links[a].href.split("/")[2];
if(thisLink !=== window.location.hostname){
links[a].href = "http://mainsite.com/link.cgi?u=" + links[a]; }
// Or you could set onclick like the example above
// May need to accommodate "www"
}}
Edit:
Found this answer and got a better idea.
document.onclick = function (e) {
e = e || window.event;
var element = e.target || e.srcElement;
if (element.tagName == 'A') {
var link = element.href.split("/")[2];
if(link !=== window.location.hostname){
links[a].href = "http://mainsite.com/link.cgi?u=" + links[a]; }
return false; // prevent default action and stop event propagation
}else{ return true; }
}};
If you use jQuery then the following will work
$('a:link').mousedown(function() {
this.href = 'http://my.site.com/link.cgi=' + this.href;
});
Otherwise
var anchors = document.getElementsByTagName('a');
for(var i = 0; i < anchors.length; i++) {
var a = anchors[i];
if(a.href) {
a.addEventListener('mousedown', function(e) {
this.href = 'http://my.site.com/link.cgi=' + this.href;
}, false);
}
}
I have these links:
<a class="active" href="#section1">Link 1</a>
Link 2
When a link 2 is clicked I would like it to receive the active class and remove the class from link 1 itself so it would effectively become:
Link 1
<a class="active" href="#section2">Link 2</a>
This should work both ways. Ie. whatever link is clicked gets the class and removes it from the other.
How can this be done with JavaScript/Prototype?
Try this:
// initialization
var links = document.links;
for (var i=0; i<links.length; ++i) {
links[i].onclick = function() {
setActive(links, this);
};
}
function setActive(links, activeLink) {
for (var i=0; i<links.length; ++i) {
var currentLink = links[i];
if (currentLink === activeLink) {
currentLink.className += " active";
} else {
currentLink.className = currentLink.className.split(/\s+/).map(function(val) {
return val === "active" ? "" : val;
}).join(" ");
}
}
}
You could write a little helper function with prototype support that removes the class from all active elements and adds it to the one that was clicked on:
function active(e) {
$$('.active').each(function(i) {
i.removeClassName('active');
});
e.addClassName('active');
};
You can than call this function from your onclick events:
a
b
c
If it were jQuery, I would do it like
$(document).ready(
function(){
$("a").click(function(){
$("a").toggleClass("active");
});
}
)