Currently I'm using this small piece of js in my site to allow my div to act as a button:
<div id="item" onclick="location.href='';" style="cursor:pointer;">Google</div>
But something I do very often when web browsing is opening a large amount of tabs. Is there any way I could modify my code to allow for this?
Currently I'm using this small piece of js in my site to allow my div to act as a button:
<div id="item" onclick="location.href='http://www.google.com';" style="cursor:pointer;">Google</div>
But something I do very often when web browsing is opening a large amount of tabs. Is there any way I could modify my code to allow for this?
Share Improve this question edited Sep 21, 2012 at 11:52 Krzysztof Jabłoński 1,9411 gold badge21 silver badges30 bronze badges asked Sep 21, 2012 at 11:40 FlaxbeardFlaxbeard 1341 gold badge1 silver badge9 bronze badges 1- plz visit stackoverflow.com/questions/4907843/… – Sreenath S Commented Sep 21, 2012 at 11:46
6 Answers
Reset to default 4This should do it:-
<html>
<head>
<style>
.sampleDiv
{
position:relative;
margin:0px auto;
width:400px;
height:200px;
background-color:#CCCCCC;
text-align:center;
}
.actualLink
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
}
.linkText
{
position:relative;
top:80px;
}
</style>
</head>
<body>
<div class="sampleDiv">
<a class="linkText" href="test.html">testing</a>
<a class="actualLink" href="test.html"></a>
</div>
</body>
</html>
The link with class actualLink is covering whole of the div. The link with class linkText is providing the text. The purpose of using two tag is that if you only use actualLink then you cannot position the text wherever you want.By using the link with class linkText you have flexibility of centering(vertically) the text(horizontal centering can be done using only actualLink)
My solution was to replace the div blocks with anchor blocks. Anchor blocks can now take on the CSS styles of nearly anything a div can do, but it can also include href, which the browser will recognize and give you the right-click options you want to see.
So old:
<div class="divClass" onClick="location.href='http://www.google.com'">asdf</div>
becomes
<a class="divClass" href="http://www.google.com">asdf</a>
You can't directly do this, as it's a user setting on their browser whether windows open as new windows or as tabs.
There is target="_newtab" but that isn't widely supported.
So in the onclick:
window.open('page.html','_newtab');
But attempting to override a users browser preference isn't a good idea IMO.
To do it on a right click something like:
$('#item').mousedown(function(event) {
if(event.which == 3) { // right click
window.open('page.html','_newtab');
}
})
you could do:
onclick="window.open('http://www.google.com', somename);" ...
do you mean, something like:
..onmousedown="op(your_url,event);"..
function op(url,event) {
if (event.button == 2) {
window.open(url);
}
}
There is actually no cross-browser way to do this. Forms or window.open will open a new window, not a new tab. And don't try to create a link in memory and click it with javascript because chrome won't open the new tab, as a security feature.
use target="_blank"
Have a look here
Document : HTML <a> target Attribute
Demo : Try It