8

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?

Krzysztof Jabłoński
  • 1,890
  • 1
  • 20
  • 29
Flaxbeard
  • 134
  • 1
  • 1
  • 9

6 Answers6

4

This 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)

Soumya Mukherji
  • 91
  • 5
3

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>
Junior
  • 31
  • 1
2

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');
  }
})
NikolaiDante
  • 18,469
  • 14
  • 77
  • 117
1

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);
  }
}
Sudhir Bastakoti
  • 99,167
  • 15
  • 158
  • 162
  • I was more looking for the right click -> open in new tab to be available rather than new tab all the time. – Flaxbeard Sep 21 '12 at 11:52
  • So would that open a new tab when I right click? That's sort of what I want, yeah. You know when yo right click on a link how it shows options of how to open that? That's what I want the div to do, if possible. – Flaxbeard Sep 21 '12 at 12:04
0

use target="_blank"

Have a look here

Document : HTML <a> target Attribute
Demo : Try It

CRDave
  • 9,279
  • 5
  • 41
  • 59
0

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.

Áxel Costas Pena
  • 5,886
  • 6
  • 28
  • 59