Jump to:

23023 Posts in 11882 Topics by 2830 members

General Questions

SilverStripe Forums » General Questions » Anyone know jQuery?

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

Page: 1
Go to End
Author Topic: 2094 Views
  • Big Bang Creative
    Avatar
    Community Member
    92 Posts

    Anyone know jQuery? Link to this post

    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?

  • banal
    Avatar
    Community Member
    901 Posts

    Re: Anyone know jQuery? Link to this post

    Try the following:
    Instead of:

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

    Write:

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

  • Big Bang Creative
    Avatar
    Community Member
    92 Posts

    Re: Anyone know jQuery? Link to this post

    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.

  • banal
    Avatar
    Community Member
    901 Posts

    Re: Anyone know jQuery? Link to this post

    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;

  • Big Bang Creative
    Avatar
    Community Member
    92 Posts

    Re: Anyone know jQuery? Link to this post

    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.

  • Big Bang Creative
    Avatar
    Community Member
    92 Posts

    Re: Anyone know jQuery? Link to this post

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

  • banal
    Avatar
    Community Member
    901 Posts

    Re: Anyone know jQuery? Link to this post

    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');
       });
    });

  • Big Bang Creative
    Avatar
    Community Member
    92 Posts

    Re: Anyone know jQuery? Link to this post

    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');
    });

    });

    2094 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.