background image
HomeRecent PostsDrupalSearchTagsRSSContactAboutAccount

How to open all external links in a new window using jQuery
Eric.London's picture
Submitted by Eric.London on 5/13/2009
Tags:
  • 6 comments
  • Share this

This quick code snippet will show you how to update every external link on your site to open in a new window using jQuery. You can put this code in the script.js file in your theme.

$(document).ready(function(){

  // apply to all <a> tags that have an href that starts with "http"
  $("a[href^='http']").each(function(){

    // remove http:// and https://
    link = $(this).attr('href');
    if (link.substring(0,7)=='http://') {
      link = link.substring(7);
    } else if (link.substring(0,8)=='https://') {
      link = link.substring(8);
    } else {
      return;
    }

    // spilt on '/'
    split1 = link.split('/');

    // compare href hostname to site hostname
    if (split1[0]!=location.hostname) {
      // add target attribute to link
      $(this).attr('target','_blank');
    }

  });

});

Linking to a form element by adding an anchor
Eric.London's picture
Submitted by Eric.London on 3/16/2009
Tags:

This code snippet shows you how you can modify a preexisting form and insert an anchor, which will allow you to link to a specific form element from your content. This could be useful if you'd like a user to update their profile details or fill out a certain section of a form. In this example, I add an anchor to the user profile form picture fieldset.

<?php
function MYMODULE_form_alter(&$form, $form_state, $form_id) {
  // check for the user profile form
  if ($form_id == 'user_profile_form') {
    // add a new anchor form element
    $form['picture']['anchor'] = array(
      '#value' => '<a name="MYMODULE_picture"></a>',
    );
  }
}
?>

Then in my content, I added a link with an anchor.

<?php
$html .= l('Upload profile picture', 'user/' . $GLOBALS['user']->uid . '/edit',
  array('fragment' => 'MYMODULE_picture')
);
?>

Manually replace a link in breadcrumbs
Eric.London's picture
Submitted by Eric.London on 10/7/2008
Tags:

At some point, you may need to change a link in the breadcrumbs. I put this function in my theme's template.php file to overrides the theming of the breadcrumbs and manually replace one of the links.

<?php
function MYTHEME_breadcrumb($breadcrumb) {
  if (!empty($breadcrumb)) {
    // loop through breadcrumbs
    foreach ($breadcrumb as $k => $v) {
      // convert a tag into xml
      $o = simplexml_load_string($v);

      // replace link
      if ($o['href']=='/OLDLINK') {
        // create new link
        $breadcrumb[$k] = l($o, 'NEWLINK');
      }
    }

    return '<div class="breadcrumb">'. implode(' » ', $breadcrumb) .'</div>';
  }
}
?>

Changing links to HTTPS (SSL) using jQuery
Eric.London's picture
Submitted by Eric.London on 6/2/2008
Tags:

Here's how you can change your hrefs for any node/add link to https using jQuery:

<?php
$(document).ready(function(){
  $('a').each(function(){
    href = $(this).attr('href');
    splitA = href.split('/');
    if (splitA[1]=='node' && splitA[2]=='add') {
      $(this).attr('href', 'https://'+location.host+href);
    }
  });
});
?>

Adding a new window icon to an external link in a news aggregator block using jQuery
Eric.London's picture
Submitted by Eric.London on 5/28/2008
Tags:

It increases usability to indicator that an external link is going to open a new window. Here is a code snippet that shows how I added a few lines of jQuery to append a "new window" icon to each <li> in my news aggregator block:

<?php
<script type="text/javascript">
var themePath = '< ?php print base_path() . path_to_theme(); ? >';
$(document).ready(function(){
  img = "<img src='" + themePath + "/images/new-window-icon.jpg' />";
  $('div.block.block-aggregator div.content div.item-list ul li').each(function(i){
    $(this).html( $(this).html() + img );
  });
});
</script>
?>

Syndicate content