SOLVED: jQuery div as an anchor ("_blank")
My first post (of many?) so excuse if it does not make much sense.
I'm trying to get a link to open in a new window, I have the following jQuery so that the whole div is clickable.
-
$(document).ready(function(){
$(".promoBox.anchor").click(function() {
window.location=$(this).find("a").attr("href");return false;
});
$('.promoBox.anchor').hover(function() {
$(this).addClass('boxHover');
}, function() {
$(this).removeClass('boxHover');
});
});
If I add "_blank" to the link in the HTML it does not open in a new window, I know this is a limitation. I can add a line in the jQuery to tell it to add an attribute to overcome this but this is not working with what I have above. If I use Firebug I can clearly see that the "_blank" is appended to the anchor though.
-
$(".external a").attr('target', '_blank').attr('title','This link will open in a new window.');
So with the code above I tried:
-
$(document).ready(function(){
$(".external a").attr('target', '_blank').attr('title','This link will open in a new window.');
$(".promoBox.anchor").click(function() {
window.location=$(this).find("a").attr("href");return false;
});
$('.promoBox.anchor').hover(function() {
$(this).addClass('boxHover');
}, function() {
$(this).removeClass('boxHover');
});
});
My html div looks like this:
-
<div class="promoBox anchor external">
<div class="inner">
<h2>Advert Box</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a href="http://www.google.co.uk">Read more</a></p>
</div>
</div>
And in Firebug:
-
<div class="promoBox anchor external">
<div class="inner">
<h2>Advert Box</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a href="http://www.google.co.uk" target="_blank" title="This link will open in a new window.">Read more</a></p>
</div>
</div>
So can anyone help?