Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Anyone know jQuery?


Reply


8 Posts   2292 Views

Avatar
Big Bang Creative

Community Member, 92 Posts

25 June 2009 at 9:01pm

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?

Avatar
banal

Community Member, 901 Posts

25 June 2009 at 11:14pm

Try the following:
Instead of:

window.location=$(this).find("a").attr("href");return false;

Write:

$(this).find("a").trigger("click");

Avatar
Big Bang Creative

Community Member, 92 Posts

25 June 2009 at 11:43pm

Just tried that, it works so long as you click on the actual anchor "Read more". If you click anywhere within the div nothing happens.

Avatar
banal

Community Member, 901 Posts

25 June 2009 at 11:54pm

Hm yeah. This will only trigger events that are bound via jQuery and not the default click. You could try this instead:

window.open($(this).find('a').attr('href')); return false;

Avatar
Big Bang Creative

Community Member, 92 Posts

26 June 2009 at 12:00am

Almost there.. maybe?

I tried:

$(document).ready(function(){

$(".promoBox.anchor").click(function() {
window.open($(this).find('a').attr('href')); return false;
});

$('.promoBox.anchor').hover(function() {
$(this).addClass('boxHover');
}, function() {
$(this).removeClass('boxHover');
});

});

This opens all links in a new window. I'd like to be able to either add in "_blank" or a class as not all links need to open in a new window.

Avatar
Big Bang Creative

Community Member, 92 Posts

26 June 2009 at 12:06am

Actually the code above will open the link in the new window and in the current window.

Avatar
banal

Community Member, 901 Posts

26 June 2009 at 1:03am

This function should consider the "target" attribute correctly:

$(document).ready(function(){
   $(".promoBox.anchor").click(function(evt) {
      evt.preventDefault();
      var a = $(this).find('a');
      var tgt = a.attr('target');
      window.open(a.attr('href'), (tgt == undefined || tgt == '') ? '_self' : tgt);
      return false;
   });
   
   $('.promoBox.anchor').hover(function() {
      $(this).addClass('boxHover');
   }, function() {
      $(this).removeClass('boxHover');
   });
});

Avatar
Big Bang Creative

Community Member, 92 Posts

26 June 2009 at 1:11am

I now have it working with the following code:

$(document).ready(function(){

$(".promoBox.anchor").click(function() {
window.location=$(this).find("a").attr("href");return false;
});

$(".promoBox.anchorexternal").click(function() {
strUrl=$(this).find("a").attr("href");
window.open(strUrl);return false;
});

$('.promoBox.anchor').hover(function() {
$(this).addClass('boxHover');
}, function() {
$(this).removeClass('boxHover');
});

$('.promoBox.anchorexternal').hover(function() {
$(this).addClass('boxHover');
}, function() {
$(this).removeClass('boxHover');
});

});