We Keep Coding

External dependency clashing with preventDefault()?

Take a look at the following JavaScript for me that opens a pop up window, please:
function openPopup(e) {
e.preventDefault();
window.open(this.href, "popupWindow", "width=600,height=600,scrollbars=yes");
}
var el = document.querySelector(".bbc-popup");
el.addEventListener("click", openPopup);
Here is a JSFiddle of it in action:
http://jsfiddle.net/dvadcgps/1/
However, when I include it on my page, the code doesn't work, and the link opens in the current tab. The only external JavaScript resources I rely on are jQuery (1.11.3) and Bootstrap 3, and those are both included within the above fiddle, to no effect.
What other reasons could there be for this code to not work?
Here is the full HTML code of the page, with all external resources included, for you to see how it stops working... the links that should open popups are behind the View Chairs' Builds button:
http://jsfiddle.net/e60y004n/1/

Working off Brian Ray's comment, I had to ensure the Event Listener was added to every element, as my current code was only adding it to the first.
Firstly, I add all the elements I want to be targeted to an array.
var chairPopup = document.getElementsByClassName("chair-popup");
I then loop through every element in that array, adding the Event Listener to each:
for (var i = 0; i < chairPopup.length; i++) {
chairPopup[i].addEventListener("click", openPopup);
}
The full code, with the function(), reads as follows:
var chairPopup = document.getElementsByClassName("chair-popup");
function openPopup(e) {
e.preventDefault();
window.open(this.href, "popupWindow", "width=300,height=1000,scrollbars=yes");
}
for (var i = 0; i < chairPopup.length; i++) {
chairPopup[i].addEventListener("click", openPopup);
}
In an answer that has since been deleted by it's author, they mentioned a need to change popupWindow to _blank within the window.open() function. I can confirm that this is needed, otherwise each link opens up in the same popup window.
window.open(this.href, "_blank", "width=300,height=1000,scrollbars=yes");

how to disable right-click link with specific domain

I want to disable right click link and i found this code:
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$('body').on('contextmenu', 'a', function(e){ return false; });
});
</script>
I want to add on a specific domain. something like this code (adfly fullpage script)
<script type="text/javascript">
var ad5fly_id = 4484512;
var ad5fly_advert = 'int';
var domains = ['depositfiles.com', 'rapidshare.com'];
</script>
<script src="https://cdn.adf.ly/js/link-converter.js"></script>
Basically, I dont want visitor to right click on my ad5fly link because they can bypass it easily. im talking about this: http://ad5f.ly/4484512/www.google.com : they can copy it and copy only the google link . then i wont earn any. help me guys.
thanks !!
sorry for my bad english

This is what you might be looking for
<script type="text/javascript">
$(document).load(function(){
$('body').on('contextmenu', 'a[href*=ad5f]', function(e){
e.preventDefault();
//or return false; does the same
});
});
</script>
If the anchor have a href which contains ad5f somewhere, then the contextmenu will be prevented.
Update:
I've added to be on LOAD instead of READY because if on ready, it might trigger before the link-converter.js ended doing it's thing (swapping urls) and the selector might fail.

Haven't tested this, but this is the solution from this thread here:
Disabling right click on images using jquery
$('body').bind('contextmenu', function(e) {
return false;
});
If that doesn't work, you could also try attaching the function you document or window instead.

You could iterate through the domains and cancel the right-click menu on page load.
var domains = ['depositfiles.com', 'rapidshare.com'];
for (var i = domains.length - 1; i >= 0; i--) {
$('body').on('contextmenu', 'a[href*="'+domains[i]+'"]', function(e){ return false });
};

How to make a link open multiple pages when clicked

I have two (or more) links. For example: http://google.com and http://yahoo.com.
How can I make them both open when I click on a single link?
For example, a link entitled "click here" which, when clicked, will open two different blank windows.

HTML:
Click Here
JS:
$('a.yourlink').click(function(e) {
e.preventDefault();
window.open('http://yoururl1.com');
window.open('http://yoururl2.com');
});
window.open also can take additional parameters. See them here: http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
You should also know that window.open is sometimes blocked by popup blockers and/or ad-filters.
Addition from Paul below: This approach also places a dependency on JavaScript being enabled. Not typically a good idea, but sometimes necessary.

I did it in a simple way:
<a href="http://virtual-doctor.net" onclick="window.open('http://runningrss.com');
return true;">multiopen</a>
It'll open runningrss in a new window and virtual-doctor in same window.

You might want to arrange your HTML so that the user can still open all of the links even if JavaScript isn’t enabled. (We call this progressive enhancement.) If so, something like this might work well:
HTML
<ul class="yourlinks">
<li><a href="http://www.google.com/"></li>
<li><a href="http://www.yahoo.com/"></li>
</ul>
jQuery
$(function() { // On DOM content ready...
var urls = [];
$('.yourlinks a').each(function() {
urls.push(this.href); // Store the URLs from the links...
});
var multilink = $('Click here'); // Create a new link...
multilink.click(function() {
for (var i in urls) {
window.open(urls[i]); // ...that opens each stored link in its own window when clicked...
}
});
$('.yourlinks').replaceWith(multilink); // ...and replace the original HTML links with the new link.
});
This code assumes you’ll only want to use one “multilink” like this per page. (I’ve also not tested it, so it’s probably riddled with errors.)

You can open multiple windows on single click... Try this..
<a href="http://--"
onclick=" window.open('http://--','','width=700,height=700');
window.open('http://--','','width=700,height=500'); ..// add more"
>Click Here</a>`

You need to unblock the pop up windows for your browser and the code could work.
chrome://settings/contentExceptions#popups

I created a bit of a hybrid approach between Paul & Adam's approach:
The link that opens the array of links is already in the html. The jquery just creates the array of links and opens each one when the "open-all" button is clicked:
HTML:
<ul class="links">
<li></li>
<li></li>
</ul>
<a id="open-all" href="#">OPEN ALL</a>
JQUERY:
$(function() { // On DOM content ready...
var hrefs = [];
$('.links a').each(function() {
hrefs.push(this.href); // Store the URLs from the links...
});
$('#open-all').click(function() {
for (var i in hrefs) {
window.open(hrefs[i]); // ...that opens each stored link in its own window when clicked...
}
});
});
You can check it out here:
https://jsfiddle.net/daveaseeman/vonob51n/1/

Here is a basic implementation in javascript - I separated it into an external file
HTML
Click To Open Links
JS
var myLinks = [
"https://google.com",
"https://www.w3schools.com/jsref/met_win_open.asp",
"https://developer.mozilla.org/en-US/docs/Web/API/Window/open"
]
function openMultipleLinks(links) {
for (var i = 0; i < links.length; i ++) {
window.open(links[i]);
}
}
Note that the user will have to enable pop-ups for the pages to open.
Here it is in action: https://jsfiddle.net/cuppajoeman/rjavuhcg/

If you prefer to inform the visitor which links will be opened, you can use a JS function reading links from an html element. You can even let the visitor write/modify the links as seen below:
<script type="text/javascript">
function open_all_links() {
var x = document.getElementById('my_urls').value.split('\n');
for (var i = 0; i < x.length; i++)
if (x[i].indexOf('.') > 0)
if (x[i].indexOf('://') < 0)
window.open('http://' + x[i]);
else
window.open(x[i]);
}
</script>
<form method="post" name="input" action="">
<textarea id="my_urls" rows="4" placeholder="enter links in each row..."></textarea>
<input value="open all now" type="button" onclick="open_all_links();">
</form>

Use HTML/CSS/Javascript to open links in new pages

I have a div that is represented in multiple pages across my site. I don't want to set each one specifically to open in a new window, rather I want all links in that specific div to open in a new window. How can I do this using HTML/ CSS/ javascript?
Thanks

here's how you could do that with jQuery
if you have something like <div class="myLinks">...</div>
$('.myLinks a').attr("target", "_blank");

Well, I guess there are two reasonable ways to open the href from an anchor in a new window.
Edit the node and set its target to _blank ()
Use Javascript to catch the click event, prevent the default behavior and call window.open()
var anchors = document.querySelectorAll('#mydiv a');
[].forEach.call(anchors, function(anchor) {
anchor.addEventListener('click', function(e) {
window.open(e.target.href, 'mywindow', '_blank');
e.preventDefault();
e.stopPropagation();
}, false);
});
That example code is vanilla Javascript and it'll only work in a W3C compliant browser (!= IE).
If you can afford to you use a JS framework live is going to be easier since all of those will abstract browser differences for you.

I think you have a div and link like this in some pages:
<div id="myDiv">
Link Text
<!--some other elements-->
</div>
you need to create a js file like bellow and add it to end of all of your pages :
var div = document.getElementById("myDiv");
if (div) {
for (var i = 0; i < div.childNodes.length; i++)
{
if (div.childNodes[i].nodeName.toLowerCase() == "a")
div.childNodes[i].target = "_blank";
}
}
And its all things you need to do !
this code is fast enough and even does not need JQuery.

Couldn't you use jQuery to iterate through all links within a specified div, then set the target to "_blank".

You can use javascript and jQuery.
First of all I suggest that DIV have id outgoing.
<div id='outgoing'>
<a href='http://google.com'>Go to Google</a><br>
<a href='http://stackoverflow.com'>Look at SO!</a>
</div>
Now we can use simple JavaScript to dynamiclaly add target='blank' into these links:
$(function() {
$('#outgoing a').attr('target', '_blank');
});
You can check example here

Change link targets

Is there a way (I assume it would be with javascript) that I can have a checkbox or link on my page that will make all the links on my page have target="_blank"?
I want to have a checkbox that says something like "Open all links in new page/tab" on my site that when checked will change the target and unchecked will put it back to how it was.

jQuery example
$(function() {
$('#yourCheckoxId').toggle(function() {
$('a').attr('target', '_blank');
},
function() {
$('a').removeAttr('target');
});
});

You might want to try jQuery as an alternative to genuine Javascript
the actual code could look something like that:
$('a').attr(target, '_blank')

Modifying the target attribute of all the anchors on the page is merely a matter of getting all links, and setting their target properties one by one:
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++) {
anchors[i].target = '_blank';
}