I'm working on a project where I need to temporarily disable all hyperlinks, and then enable them again once my pop-up div is gone. I am able to successfully disable all the links using this function I wrote:
function disableHyperlinks(){
link_targets = Array();
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++){
link_targets.push(anchors[i].href);
anchors[i].href= "#";
}
}
Which also saves all the URLs so it can put them back later using this function:
function enableHyperlinks(){
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++){
anchors[i].href= link_targets[i];
}
}
The above code seems to work just fine, it removes all the links, and then puts them all back without any issues, however the problem is that if I run the 'enable' code after a link is clicked, its almost as if the javascript is setting the link back to the original destination and then registering the click. So despite being 'disabled' in this fashion, the link still ends up leaving the page.
The problem is demonstrated here
Click the red "L" with the white background to enable the javascript I made for selection, you'll notice anything you bring your mouse over will get a blue dashed border, I need to be able to "select" parts of the web page without redirecting to another page if a link is also clicked.. any idea how I could go about doing this properly?
(Please note I am trying to avoid JQuery)
Work on the onClick listener:
var areEnabled = false;
function toggleLinks(){
var anchors = document.getElementsByTagName('a');
for(var i=0; i < anchors.length; i++)
anchors[i].onclick = (areEnabled) ? null : function(e){ return false };
areEnabled = !areEnabled;
};
Instead of searching for many links and disabling them (which, BTW, won't help you against other clickable objects), you can create another invisible div, just below your popup on z-index that would cover entire page and catch all clicks instead of elements underneath. You can even make it semi-transparent instead of completely invisible for visual effect alerting user that "lower-level" is disabled.
I was finally able to solve my own problem by manipulating the onclick property of each hyperlink, then setting it back to what it was previously. The only problem with bokonic's response was that the onclick property was set to null to "re-enable" the link, which would then disable any javascript functionality the link had previously.
var onclickEvents;
function disableHyperlinks(){
onclickEvents = Array();
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++){
onclickEvents.push(anchors[i].onclick);
anchors[i].onclick=function(){return false;};
}
}
function enableHyperlinks(){
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++){
anchors[i].onclick = onclickEvents[i];
}
}
Related
I have the following retrieved from the web page:
next page
the onclick=onClkRdMsg is constantly changing, is there any method to click on the next page button directly?
since the onclick selector is keep changing, and the href=# if not working, sorry for not having code included here.
just want to know how to click on the next page...
casper.then(function (){
this.click("[????='next page']");
});
what is the ????
casper.click("[????='next page']"); invokes a click using a CSS selector. CSS selectors are not capable of matching an element based on its content (text).
It's easy with XPath expressions, though:
var x = require('casper').selectXPath;
...
casper.click(x('//*[contains(text(),"next page")]'));
If you're sure that there is no whitespace around the search text, then you can also use casper.clickLabel():
casper.clickLabel('next page');
You have to check every link on the page for text "next page":
casper.evaluate(function(){
var tags = document.getElementsByTagName("a");
var searchText = "next page";
var found;
for (var i = 0; i < tags.length; i++) {
if (tags[i].textContent == searchText) {
found = tags[i];
found.click();
break;
}
}
})
Based on How to get element by innerText
I'm on a website that forces me to click numerous elements on the page
This is the code for the elements
<span class="icon icon-arrow-2"></span>
Is it possible to tell me the code to write into the console of google chrome to click all the elements on the page named "icon icon-arrow-2" at once?
var items = document.getElementsByClassName('icon icon-arrow-2');
for (var i = 0; i < items.length; i++) {
items[i].click();
}
Or if there is jQuery on the page:
$('.icon.icon-arrow-2').click();
I have a popup player for my radio station website. The window has links to various other pages in my site, some of which are created dynamically by Wordpress widgets.
I want the links to open in the parent window as most of the content isn't suitable for the small popup window.
The approach I have taken is to use javascript to re-write the links as target="parent". This works (from the footer) with the following script.
<script>
var aEls = document.getElementsByTagName('a');
for (var i = 0, aEl; aEl = aEls[i]; i++) {
aEl.href = aEl.href.replace('target="_self"','target="_parent"');
}
var imgEls = document.getElementsByTagName('img');
for (var i = 0, imgEl; imgEl = imgEls[i]; i++) {
imgEl.src = imgEl.src.replace('target="_self"','target="_parent"');
}
</script>
However, this only works for static links on the page, and not those generated via my slider widget or another widget.
Is there some place this needs to be included, or an adjustment able to be made to find and replace all links after that have been generated?
Edit: To avoid confusion, I'll reiterate the requirement (my attempt was just that, an attempt). I need to re-write all the links, on load, of my popup page, to open in the main site (parent window).
Edit2: While I seem to be able to substitute target="_parent" it's not having the desired effect. Perhaps I need to somehow use window.opener. Any ideas?
Edit3: This works correctly. I think my find/replace is going to have to rebuild this function around the links somehow.
You can use this.
$('img').each(function() {
var OldSrc = $(this).attr("src");
var newSrc = OldSrc.replace('target="_self"','target="_parent"');
$(this).attr("src",newSrc);
});
This is short solve.
You cant replace attribute target, from attribute href. use el.target and just set the value
var aEls = document.getElementsByTagName('a');
for (var i = 0, aEl; aEl = aEls[i]; i++) {
aEl.target="_parent";
}
I have 4 'headers' (they are a div tag with a link that opens up the hidden area of each header... this is to neatly organize everything for a mobile device while still having alot of content) Point is i'm getting at here... these headers are all the same sized collapsed, but NOT when they are expanded.
What I need to be able to do is to click a link and the header moves up, click another link and it would move down. So i have 1,2,3,4... I click 'up' on 2, and now 2 is where 1 was, and 1 is where two was.
Currently, I have header 1 at the top, then I have content that will be edited quite frequently, then I have the other 3 headers. I just want to add an 'up' link and a 'down' link that'll swap the entire div with the one above/below it
EDIT: Right now, I have
function toggle() {
var ele = document.getElementById("toggleText");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
for each of my headers (so 4 seperate javascript functions)
and in short this is what my page is like:
--Nav Links--
~~Header 1~~
content
~~Header 2~~
~~Header 3~~
~~Header 4~~
Theres a only a break tag seperating them while they are collapsed. I want to add a link to each header so when I click it, it will swap positions with the one above/below it.
Does this help explain it any better?
And i'd prefer to stick to Javascript if at all possible
This sounds like a combination of a tab and accordion pattern. Take a look here:
http://docs.jquery.com/UI/Accordion
I just want to make sure I'm on the right track with this. I doubt I could do this in vanilla Javascript so I used jQuery. Here's a fiddle of what I believe you want?
http://jsfiddle.net/jT2gS/3/
Something like this would work for you, proof of concept using document.getElementsByClassnNme
var elements = document.getElementsByClassName('container');
for (var i = 0; i < elements.length; i++) {
elements[i].onclick = function() {
var bodies = document.getElementsByClassName('body');
for (var j = 0; j < bodies.length; j++) {
bodies[j].style.display = 'none';
}
this.children[1].style.display = "block";
}
}
NOTE: no IE8 or below support for getElementsByClassName
Or with jQuery:
jQuery('#list1a').accordion();
Got a client who is strictly no javascript, but in this particular circumstance, I don't think I can avoid it.
I've got a "next / previous" featured area situation going on using CSS (overflow: hidden and position: absolute) - where the click next or previous (a href="#section...") then brings the relevant div ID into view -but, the browser jumps to the top of the screen which is really very annoying.
What's the simplest possible way to prevent this jumping from happening (with javascript) - yet still be usable for users with javascript turned off?
You can only solve this problem by a) Using JS or b) Getting rid of those anchor links.
If you chose choice a:
var links = document.getElementsByTagName('a');
var link;
for(var i = 0, j = links.length; i < j; i++) {
link = links[i];
if(link.href.substring(0, 1) == '#') {
link.onclick = function(e) {
var ev = e || event;
ev.preventDefault();
};
}
}
Just replace '#' link to 'javascript:void(0)' and your page will not gona scroll
HTML
Link // if you want no link, just like '#' link.
Link // for link that you don't want to show.
JS
function page()
{ window.location.assign("home.html"); }