Activating a link on rollover?

Activating a link on rollover? - javascript

Is it possible whit a simple script to activate a link just by a rollover without click?

You can do this:
<a onmouseover="window.location = this.href" href="http://google.com">test</a>
But use it wisely. No one will be expecting it.
May I ask why you're trying to do this?

I suppose by activate you mean follow. This may well work on your tag
onmouseover="window.location=event.target.href"
It's possible some browsers will block the attempt to do that though.

Using some unobtrusive javascript it can be achieved fairly easily.
var link = document.getElementById("link");
link.onmouseover = function(){
window.location.href = this.href;
};
Simple jsfiddle example.

Related

Is there a way to open href links in new tab without updating all the links with target="_blank code manually? [duplicate]

Let's say I have the following code:
<div id="link_other">
<ul>
<li>google</li>
<li>
<div class="some_class">
dsalkfnm sladkfm
yahoo
</div>
</li>
</ul>
</div>
In this case, the JavaScript would add target="_blank" to all links within the div link_other.
How can I do that using JavaScript?

/* here are two different ways to do this */
//using jquery:
$(document).ready(function(){
$('#link_other a').attr('target', '_blank');
});
// not using jquery
window.onload = function(){
var anchors = document.getElementById('link_other').getElementsByTagName('a');
for (var i=0; i<anchors.length; i++){
anchors[i].setAttribute('target', '_blank');
}
}
// jquery is prettier. :-)
You could also add a title tag to notify the user that you are doing this, to warn them, because as has been pointed out, it's not what users expect:
$('#link_other a').attr('target', '_blank').attr('title','This link will open in a new window.');

Non-jquery:
// Very old browsers
// var linkList = document.getElementById('link_other').getElementsByTagName('a');
// New browsers (IE8+)
var linkList = document.querySelectorAll('#link_other a');
for(var i in linkList){
linkList[i].setAttribute('target', '_blank');
}

Bear in mind that doing this is considered bad practice in general by web developers and usability experts. Jakob Nielson has this to say about removing control of the users browsing experience:
Avoid spawning multiple browser windows if at all possible — taking the "Back" button away from users can make their experience so painful that it usually far outweighs whatever benefit you're trying to provide. One common theory in favor of spawning the second window is that it keeps users from leaving your site, but ironically it may have just the opposite effect by preventing them from returning when they want to.
I believe this is the rationale for the target attribute being removed by the W3C from the XHTML 1.1 spec.
If you're dead set on taking this approach, Pim Jager's solution is good.
A nicer, more user friendly idea, would be to append a graphic to all of your external links, indicating to the user that following the link will take them externally.
You could do this with jquery:
$('a[href^="http://"]').each(function() {
$('<img width="10px" height="10px" src="/images/skin/external.png" alt="External Link" />').appendTo(this)
});

Using jQuery:
$('#link_other a').each(function(){
$(this).attr('target', '_BLANK');
});

I use this for every external link:
window.onload = function(){
var anchors = document.getElementsByTagName('a');
for (var i=0; i<anchors.length; i++){
if (anchors[i].hostname != window.location.hostname) {
anchors[i].setAttribute('target', '_blank');
}
}
}

Inline:
$('#link_other').find('a').attr('target','_blank');

Use this for every external link
$('a[href^="http://"], a[href^="https://"]').attr('target', '_blank');

Linking bookmarklet with site's bookmark [duplicate]

Is it possible to call a javascript function from the URL? I am basically trying to leverage JS methods in a page I don't have access to the source.
Something like: http://www.example.com/mypage.aspx?javascript:printHelloWorld()
I know if you put javascript:alert("Hello World"); into the address bar it will work.
I suspect the answer to this is no but, just wondered if there was a way to do it.

There isn't from a hyperlink, no. Not unless the page has script inside specifically for this and it's checking for some parameter....but for your question, no, there's no built-in support in browsers for this.
There are however bookmarklets you can bookmark to quickly run JavaScript functions from your address bar; not sure if that meets your needs, but it's as close as it gets.

You can use Data URIs.
For example:
data:text/html,<script>alert('hi');</script>
For more information visit: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

Write in address bar
javascript:alert("hi");
Make sure you write in the beginning: javascript:

/test.html#alert('heello')
test.html
<button onClick="eval(document.location.hash.substring(1))">do it</button>

you may also place the followinng
<a href='javascript:alert("hello world!");'>Click me</a>
to your html-code, and when you click on 'Click me' hyperlink, javascript will appear in url-bar and Alert dialog will show

About the window.location.hash property:
Return the anchor part of a URL.
Example 1:
//Assume that the current URL is
var URL = "http://www.example.com/test.htm#part2";
var x = window.location.hash;
//The result of x will be:
x = "#part2"
Exmaple 2:
$(function(){
setTimeout(function(){
var id = document.location.hash;
$(id).click().blur();
}, 200);
})
Example 3:
var hash = "#search" || window.location.hash;
window.location.hash = hash;
switch(hash){
case "#search":
selectPanel("pnlSearch");
break;
case "#advsearch":
case "#admin":
}

Using Eddy's answer worked very well as I had kind of the same problem.
Just call your url with the parameters : "www.mypage.html#myAnchor"
Then, in mypage.html :
$(document).ready(function(){
var hash = window.location.hash;
if(hash.length > 0){
// your action with the hash
}
});

you can use like this situation:
for example, you have a page: http://www.example.com/page.php
then in that page.php, insert this code:
if (!empty($_GET['doaction']) && $_GET['doaction'] == blabla ){
echo '<script>alert("hello");</script>';
}
then, whenever you visit this url: http://www.example.com/page.php?doaction=blabla
then the alert will be automatically called.

Just use:
(function() {
var a = document.createElement("script");
a.type = "text/javascript";
a.src = "http://www.example.com/helloworld.js?" + Math.random();
document.getElementsByTagName("head")[0].appendChild(a)
})();
This basically creates a new JavaScript line in the head of the HTML to load the JavaScript URL you wish on the page itself. This seems more like what you were asking for. You can also change the a.src to the actual code, but for longer functions and stuff it becomes a problem. The source link can also link to a JavaScript file on your computer if targeted that way.

No; because it would make links extremely dangerous.

you can execute javascript from url via events
Ex: www.something.com/home/save?id=12<body onload="alert(1)"></body>
does work if params in url are there.

There is a Chrome extension called Bookmarklet URL (no affiliation). To append a URL with JavaScript, so that the JavaScript command is executed just after loading the webpage, one can use ?bmlet=javascript:
Example: Display an alert box
https://github.com/?bmlet=javascript:alert("Hi");
Example: Enable spell-checking while editing a GitHub README file
[Obviously, a spelling checking extension must be originally available.]
https://github.com/<username>/<repositoryname>/edit/main/README.md?bmlet=javascript:document.getElementById("code-editor").setAttribute("spellcheck","true");
On some pages, it might take some time, as the JavaScript command runs after completely loading the page. Simple commands like alert("Hi"); should run quickly.

I am a student and I have just realized my school blocked JavaScript from the address bar. It works with the "a" tag on a .html file but not on the bar anymore. I am not asking for help, I would just like to share this.

You can do one thing that is you can first open the link www.example.com. Then you can search:
javascript:window.alert("Hello World!")

How to implement the "Pin it" function from pinterest

I'm trying to make a new pin it button just like Pinterest has, I've see the content at that bookmark:
javascript:void(
(function(){
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
document.body.appendChild(e)
})()
);
I'm new to javascript, so I am not sure how to start to do a new one. I have even no idea where should I start my coding. Is the backend for this Pin it button limited? Can anyone introduce how does this Pin it button works? Thank you so much.

Basically what that code does is injects a <script> tag into the page. The actual "pin it" code is located in the pinmarklet.js file.
To make your own feature like this, you can just reuse the code and replace the source with your own JavaScript file.
Side-note: the void(...) part is redundant because the function doesn't return anything anyway.

The code you posted simply injects a JavaScript file into the page's DOM which will cause it to get interpreted by the JavaScript engine. What you should be more interested in is the code in this file which implements the "Pin It" functionality:
http://assets.pinterest.com/js/pinmarklet.js
But since that is minified and somewhat obfuscated and probably proprietary, I would suggest what you want first is an easy to follow tutorial on how to create a Bookmarklet:
http://betterexplained.com/articles/how-to-make-a-bookmarklet-for-your-web-application/
Then, you need to think about how you will code your own web application to respond to asynchronous requests to "Pin" or save something. The following two simple but useful JavaScript variables could come in handy if you're just going for a simple "link-submission" type of functionality:
document.location.href -- to get the page's URL
document.title -- to get the contents of the page's TITLE tags
To compress your code into a single-line as is required by bookmarklets, you could use this tool:
http://subsimple.com/bookmarklets/jsbuilder.htm

If you want to add it to a button here is how:
html:
<button id="pintrest">Pin It</button>
And you script:
var btn = document.getElementById("pintrest");
btn.onclick = function () {
var e = document.createElement('script');
e.setAttribute('type', 'text/javascript');
e.setAttribute('charset', 'UTF-8');
e.setAttribute('src', 'http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random() * 99999999);
document.body.appendChild(e);
};
Now when you click on the button it should run the pintrest code

Call Javascript function from URL/address bar

Is it possible to call a javascript function from the URL? I am basically trying to leverage JS methods in a page I don't have access to the source.
Something like: http://www.example.com/mypage.aspx?javascript:printHelloWorld()
I know if you put javascript:alert("Hello World"); into the address bar it will work.
I suspect the answer to this is no but, just wondered if there was a way to do it.

There isn't from a hyperlink, no. Not unless the page has script inside specifically for this and it's checking for some parameter....but for your question, no, there's no built-in support in browsers for this.
There are however bookmarklets you can bookmark to quickly run JavaScript functions from your address bar; not sure if that meets your needs, but it's as close as it gets.

You can use Data URIs.
For example:
data:text/html,<script>alert('hi');</script>
For more information visit: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

Write in address bar
javascript:alert("hi");
Make sure you write in the beginning: javascript:

/test.html#alert('heello')
test.html
<button onClick="eval(document.location.hash.substring(1))">do it</button>

you may also place the followinng
<a href='javascript:alert("hello world!");'>Click me</a>
to your html-code, and when you click on 'Click me' hyperlink, javascript will appear in url-bar and Alert dialog will show

About the window.location.hash property:
Return the anchor part of a URL.
Example 1:
//Assume that the current URL is
var URL = "http://www.example.com/test.htm#part2";
var x = window.location.hash;
//The result of x will be:
x = "#part2"
Exmaple 2:
$(function(){
setTimeout(function(){
var id = document.location.hash;
$(id).click().blur();
}, 200);
})
Example 3:
var hash = "#search" || window.location.hash;
window.location.hash = hash;
switch(hash){
case "#search":
selectPanel("pnlSearch");
break;
case "#advsearch":
case "#admin":
}

Using Eddy's answer worked very well as I had kind of the same problem.
Just call your url with the parameters : "www.mypage.html#myAnchor"
Then, in mypage.html :
$(document).ready(function(){
var hash = window.location.hash;
if(hash.length > 0){
// your action with the hash
}
});

you can use like this situation:
for example, you have a page: http://www.example.com/page.php
then in that page.php, insert this code:
if (!empty($_GET['doaction']) && $_GET['doaction'] == blabla ){
echo '<script>alert("hello");</script>';
}
then, whenever you visit this url: http://www.example.com/page.php?doaction=blabla
then the alert will be automatically called.

Just use:
(function() {
var a = document.createElement("script");
a.type = "text/javascript";
a.src = "http://www.example.com/helloworld.js?" + Math.random();
document.getElementsByTagName("head")[0].appendChild(a)
})();
This basically creates a new JavaScript line in the head of the HTML to load the JavaScript URL you wish on the page itself. This seems more like what you were asking for. You can also change the a.src to the actual code, but for longer functions and stuff it becomes a problem. The source link can also link to a JavaScript file on your computer if targeted that way.

No; because it would make links extremely dangerous.

you can execute javascript from url via events
Ex: www.something.com/home/save?id=12<body onload="alert(1)"></body>
does work if params in url are there.

There is a Chrome extension called Bookmarklet URL (no affiliation). To append a URL with JavaScript, so that the JavaScript command is executed just after loading the webpage, one can use ?bmlet=javascript:
Example: Display an alert box
https://github.com/?bmlet=javascript:alert("Hi");
Example: Enable spell-checking while editing a GitHub README file
[Obviously, a spelling checking extension must be originally available.]
https://github.com/<username>/<repositoryname>/edit/main/README.md?bmlet=javascript:document.getElementById("code-editor").setAttribute("spellcheck","true");
On some pages, it might take some time, as the JavaScript command runs after completely loading the page. Simple commands like alert("Hi"); should run quickly.

I am a student and I have just realized my school blocked JavaScript from the address bar. It works with the "a" tag on a .html file but not on the bar anymore. I am not asking for help, I would just like to share this.

You can do one thing that is you can first open the link www.example.com. Then you can search:
javascript:window.alert("Hello World!")

How do I add target="_blank" to a link within a specified div?

Let's say I have the following code:
<div id="link_other">
<ul>
<li>google</li>
<li>
<div class="some_class">
dsalkfnm sladkfm
yahoo
</div>
</li>
</ul>
</div>
In this case, the JavaScript would add target="_blank" to all links within the div link_other.
How can I do that using JavaScript?

/* here are two different ways to do this */
//using jquery:
$(document).ready(function(){
$('#link_other a').attr('target', '_blank');
});
// not using jquery
window.onload = function(){
var anchors = document.getElementById('link_other').getElementsByTagName('a');
for (var i=0; i<anchors.length; i++){
anchors[i].setAttribute('target', '_blank');
}
}
// jquery is prettier. :-)
You could also add a title tag to notify the user that you are doing this, to warn them, because as has been pointed out, it's not what users expect:
$('#link_other a').attr('target', '_blank').attr('title','This link will open in a new window.');

Non-jquery:
// Very old browsers
// var linkList = document.getElementById('link_other').getElementsByTagName('a');
// New browsers (IE8+)
var linkList = document.querySelectorAll('#link_other a');
for(var i in linkList){
linkList[i].setAttribute('target', '_blank');
}

Bear in mind that doing this is considered bad practice in general by web developers and usability experts. Jakob Nielson has this to say about removing control of the users browsing experience:
Avoid spawning multiple browser windows if at all possible — taking the "Back" button away from users can make their experience so painful that it usually far outweighs whatever benefit you're trying to provide. One common theory in favor of spawning the second window is that it keeps users from leaving your site, but ironically it may have just the opposite effect by preventing them from returning when they want to.
I believe this is the rationale for the target attribute being removed by the W3C from the XHTML 1.1 spec.
If you're dead set on taking this approach, Pim Jager's solution is good.
A nicer, more user friendly idea, would be to append a graphic to all of your external links, indicating to the user that following the link will take them externally.
You could do this with jquery:
$('a[href^="http://"]').each(function() {
$('<img width="10px" height="10px" src="/images/skin/external.png" alt="External Link" />').appendTo(this)
});

Using jQuery:
$('#link_other a').each(function(){
$(this).attr('target', '_BLANK');
});

I use this for every external link:
window.onload = function(){
var anchors = document.getElementsByTagName('a');
for (var i=0; i<anchors.length; i++){
if (anchors[i].hostname != window.location.hostname) {
anchors[i].setAttribute('target', '_blank');
}
}
}

Inline:
$('#link_other').find('a').attr('target','_blank');

Use this for every external link
$('a[href^="http://"], a[href^="https://"]').attr('target', '_blank');

Develop Reference

JavaScript is the programming language of the Web.

Activating a link on rollover? - javascript

Is it possible whit a simple script to activate a link just by a rollover without click?

You can do this: <a onmouseover="window.location = this.href" href="http://google.com">test</a> But use it wisely. No one will be expecting it. May I ask why you're trying to do this?

I suppose by activate you mean follow. This may well work on your tag onmouseover="window.location=event.target.href" It's possible some browsers will block the attempt to do that though.

Using some unobtrusive javascript it can be achieved fairly easily. var link = document.getElementById("link"); link.onmouseover = function(){ window.location.href = this.href; }; Simple jsfiddle example.

Related

Is there a way to open href links in new tab without updating all the links with target="_blank code manually? [duplicate]

Linking bookmarklet with site's bookmark [duplicate]

How to implement the "Pin it" function from pinterest

Call Javascript function from URL/address bar

How do I add target="_blank" to a link within a specified div?

Categories

Resources