Can't Open URL in New Tab

[freddybrown]

I am new to website development. I can't figure out how to open a new tab for the following javasript. I went through related questions but nothing worked for me. I want the browser to open a new tab when someone clicks on the link (example.com) below. The code target="_blank doesn't work here... What code should I add and where should I place that code?

 

My html code is here -

<section id="work-grid" class="site-inner">
<div class="work-item" data-groups='["all", "webdesign"]' data-url="http://example.com">
<figure class="image-container"><img src="images/work/web-one.jpg" /></figure>
</div>

Thanks in advance.

[cyberRobot]

It's difficult to tell what's going on without the JavaScript. Can you post the code?

 

Also, is there a reason you're not using the anchor (<a>) tag? Perhaps the JavaScript code adds the tag dynamically.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

[CroNiX]

This jQuery will probably work, but only on browsers that don't block popups. There is no guarantee any link with _blank will open a new tab. It depends on the individual users browser settings.

$('div.work-item').on('click', function() {
  window.open($(this).data('url'), '_blank');
});

[CroNiX]

Also won't work if user has javascript disabled. If you want foolproof, wrap the image in an anchor, which has a native click event. div's don't.

[BuildMyWeb]

i agree with cronix. mostly. rather than wrapping the img in an anchor tag, might work better to just style the anchor with background image. would replace the div with an <a></a>

something like:

<a href="http://example.com" id="example_link"></a>

css:

#example_link {
    display:block;
    width:[width of image];
    height:[height of image];
    background:url('images/work/web-one.jpg');
}

[Shiftoii]

Personally I think that using css is probably going to be your best bet in this situation.. until I can see your java script at least.

#69{
    display:block;
    width:69;
    height:69;
    background:url('#');
}

You can then link simply by doing something as easy as.

<a href="#" id="69"></a>

If you're unaware of what this is doing it's basically doing the same thing that including a straight image would do.

<a href="#"><img src="#"/></a>

Going to keep an eye on this thread in hopes of the Java being posted because this method will get annoying very quickly.

[CroNiX]

@shiftoii They were discussing javascript, not JAVA, which is a totally different language.

[Tom8001]

You could try this 

<div class="work-item" data-groups=/["all", "webdesign"]' onClick="example()">

<script>
function example() {
window.open("http://example.com", "_blank");
}
</script>