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;
}
}
}
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.
I have several "a" tags that contain the attribute "onclick". When I click on one of them. They display an image and a modal(pop up). I am aiming to disable the rest of the "a" tags so I do not have other modal windows appearing if I click on other "a" tags.
I created the following code. I managed to do the first part but it does not work to enable all the "a" attributes once the modal is closed. Do you know why is it?
function toggleModal(modalId, toggle, bgImageId) {
var icons = document.getElementsByTagName('a');
var toytownImage = document.querySelector("#toytownImage");
var bgImage = document.getElementById(bgImageId);
var modal = document.getElementById(modalId);
////////
toytownImage.style.display = "none";
if (toggle) {
modal.style.display = "block";
//Appear another image
bgImage.style.display = "block";
//This block the icons to be clicked
for (var i=0; i < icons.length; i++) icons[i].onclick = null;
} else {
modal.style.display = "none";
bgImage.style.display = "none";
toytownImage.style.display = "block";
//Allows icons to click again
for (var i=0; i < icons.length; i++) icons[i].onclick = toggle;
//alert(toggle);
}
};
You could add a variable outside of the function and set that variable with the modalId when the function is called. On the function calls after that you can check if another modalId has been toggled and prevent toggling if the modalId in the variable is still set to display block. For example:
var active_modal;
function toggleModal(modalId, toggle, bgImageId) {
if(!active_modal) {
active_modal = modalId;
}
var current_modal = document.getElementById(active_modal);
if(current_modal.style.display !== 'block') {
active_modal = modalId;
//code is only executed when the current_modal is not displayed anymore
}
}
I've updated your fiddle https://jsfiddle.net/fv0w5by8/116/. Note that I moved the displays to each div instead of the .modal class. The other changes have been made to the toggleModal function itself.
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>
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'm trying to detect if certain element is clicked on onbeforeunload. I can't get it to work. Below is examples of the Javascript code and HTML code on the project (Please note that I have no control over the HTML element as it is not my site)
function checkLeave() {
var p = document.getElementByElementById('yeah');
if (p.href.onclick) {
//do something
}
else {
//do something else
}
}
window.onbeforeunload = checkLeave;
HTML CODE
//The goSomewhere goes to another page
<a id="yeah" href="javascript:goSomewhere();">
<img src="smiley.png">
</a>
Thanks in advance,
J
What you need to do is bind an event handler to each on the page.
This can be done with the following:
// Select all links
//var allLinks = document.querySelectorAll('a[href]');
var allLinks = document.links;
// Bind the event handler to each link individually
for (var i = 0, n = allLinks.length; i < n; i++) {
//allLinks[i].addEventListener('click', function (event) {});
allLinks[i].onclick = function () {
// Do something
};
}
You are testing for the presence of the onclick property to the <a> tag. It isn't present in the markup. Rather than using the onclick, the markup calls a script as the element's href. So you need to look for a script in the href instead:
var p = document.getElementByElementById('yeah');
if (p.href.indexOf("javascript") === 0) {
//do something
}
else {
// do something else
}
Maybe something like this? (just the idea)
document.getElementById('yeah').onclick = function() {
clicked = this.href;
};