Grab link on hover - Firefox addon - javascript

I want to grab the underlying link address on mouse hover.
Even if I can grab the link shown in my statusbar it would be enough.
This is for a firefox addon that I am creating.

function mouseOver(event) {
alert(event.currentTarget.href);
event.preventDefault();
}

A few easy steps
Get all links on page
Subscribe to mouseover event for each link
Onmouseover get the url
This would be more straightforward with jQuery, but this gets the job done.
var links = document.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
links[i].addEventListener('mouseover',getLink,false)
//for less than ie9 use attachEvent (figure it out yourself)
}
function getLink() {
alert(this.href);
}

Related

How to remove permanent ToolTip on <a> tags in Edge and Internet Explorer when selecting on touchscreen

When using a touchscreen, pressing / pressing holding on href links tags shows a tooltip box with the site address, I cant figure out how to remove this. Does anyone have an idea about this? it only happens in IE and Edge, chrome and Firefox do not experience this issue
investigated event listeners, but no listeners show an event pointing to this
I would be very happy if someone other than me has experienced this and maybe has a fix, its kinda a showstopper for a POS system.
You could try setting title to empty string ( or perhaps just space). title is used for built in tooltip text
var links = document.querySelectorAll('a');
for(var i=0; i < links.length; i++){
links[i].title = ' ';
}
Simple jQuery can do the trick, let's mess with the title property.
$(document).ready(function(){
$("a").removeAttr("title");
});
//
$(document).ready(function(){
$("a").attr("title", "");
});
// Hide tooltip on hover, and restore when hover-off
$(function() {
$('a').hover(function(e) {
$(this).attr('data-title', $(this).attr('title'));
$(this).removeAttr('title');
}, function(e) {
$(this).attr('title', $(this).attr('data-title'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Hover over me

Javascript - Clicks and key events don't work in Cobalt

I'm quite nooby in using Cobalt. I try to create a simple app (just couple of pages) using HTML, CSS and JS. Static content looks fine in Cobalt. But mouse clicks and events from keyboard aren't handled. I mean code like
document.addEventListener("keydown", e => { do something });
//or
var links = document.getElementsByClassName("link");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function() {
document.location.href = URL_PAGE;
});
}
works in Chrome, but doesn't work in Cobalt. When I click something or press buttons on a keyboard - just nothing happens. For now I haven't found how to handle user events to make them work in Cobalt.
Any help would be very appreciated.
Thank in advance,
Evgeniy
Appears that I just had errors in my script. I fixed them and now everything work fine. Sorry for a false alarm.

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");

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';
}

Disabling a link tag using JavaScript on my printable page

I have a script that creates a printable page by copying the HTML across and then doing some manipulation, such as disabling the buttons on the page, on page load.
I also want to disable the links on the page. I don't really mind if they look like links still as long as they don't do anything, and don't give any JavaScript errors!
The anchor tag doesn't seem to have a disabled attribute...
Unfortunately, I can't use jQuery, so JavaScript only please!
Edit: I want to disable the links, buttons etc on the page so that when the 'printable page' opens in another window, the user cannot mess with it by clicking buttons or links. I want it to essentially be a 'frozen snapshot' of the page that they want to print.
Setting their href to # and overwriting the onclick event should do the trick.
var links = document.getElementsByTagName("A"), j;
for (j = 0;j < links.length; j += 1) {
links[j].href = '#';
links[j].onclick = function () {
return false;
};
}
Why can't you use jQuery? So much nicer...
$('a').each(function(){this.onclick=function(){return false}});
Anyway here is a normal javascript way. Smaller than above and you also don't need to modify the links... by defining the onclick function to return false it will not visit the href:
var anchors = document.getElementsByTagName("a");
for (i = 0; i < anchors.length; i++)
anchors[i].onclick = function(){return false};
There is also an array of links in the document object. While I've never tried, I believe you can set them too.
for (i=0;i<document.links.length;i+=1) {
document.links[i]=='#';
}

Categories