BigTarget.js - Increase the size of click targets and get more call-to-action conversions

Say goodbye to boring ‘Read More…’ links by turning your entire content block into a clickable target!

With all the positive focus on grid based web design these days, I started to identify a couple of standard design elements. The main pattern used in nearly every site (grid and non grid) was the “title, thumbnail, short summary, more link” pattern. This pattern is generally used for indexing blog post summaries in sidebars, listing services, or creating small calls-to-action.

The XHTML markup generally looks something like this:

<div>
  <h3><a href="http://leevigraham.com/">Title</a></h3>
  <a href="http://leevigraham.com/"><img src="thumbnail.png" alt="thumbnail" /></a>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    <a href="http://leevigraham.com/">Read More …</a>
  </p>
</div>

One thing that always bugged me when implementing the code above, wasn’t necessarily the number of links inside a small block of content, it was the fact that only those small bits of sporadic content were clickable. Sure it’s not that hard for the user to hover over one of the three links, but I thought the user experience could be improved.

My feeling was that a user should be able to click anywhere in the content and navigate through to the target page — basically making the whole content block one big link.

Improving usability and the user experience with jQuery

Wrapping a single anchor around the whole content (title, thumbnail, summary) is a bad idea as it’s not standards compliant and renders the page invalid. So I turned to my good friend jQuery and threw together the following plugin using the ‘Learning jQuery’ plugin development pattern.

The concept is simple:

Attach the plugin to any link in the content block.
Pass through the click zone selector as a plugin option.
The plugin then attaches onclick and hover events to the click zone.
User clicks anywhere on the click zone.
The original link href is retrieved.
If the link has a rel attribute and it’s set to ‘external’, open the link target in a new window; otherwise open the link in the current browser window.

A working example

A list of entries without bigTarget.js applied

Example Title 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tempor posuere libero. In fringilla magna ut urna elementum condimentum. Aliquam erat volutpat. Fusce odio. Read More …
Example Title 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tempor posuere libero. In fringilla magna ut urna elementum condimentum. Aliquam erat volutpat. Fusce odio. Read More …
Example Title 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tempor posuere libero. In fringilla magna ut urna elementum condimentum. Aliquam erat volutpat. Fusce odio. Read More …

A list of articles with bigTarget.js applied

Example Title 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tempor posuere libero. In fringilla magna ut urna elementum condimentum. Aliquam erat volutpat. Fusce odio. Read More …
Example Title 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tempor posuere libero. In fringilla magna ut urna elementum condimentum. Aliquam erat volutpat. Fusce odio. Read More …
Example Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tempor posuere libero. In fringilla magna ut urna elementum condimentum. Aliquam erat volutpat. Fusce odio. Read More …

bigTarget.js

Now you know what bigTarget.js does, you’ll probably want to grab the code and start using it on your site.

Usage

Adding bigTarget.js functionality to your site is straight forward. First include the plugin code in the head of your document, and then when the page is ready, attach the bigTarget function to the target anchor — bigTarget.js will do the rest.

$(document).ready(function(){
  $("ol.bigTarget h4 a").bigTarget();
});

Customising the hoverClass and clickZone

There are two options to further customise how bigTarget.js works — clickZone and hoverClass. By default, bigTarget.js will turn the first parent <li> tag of the target anchor into the click zone using li:eq(0) as the parent selector. The plugin will also add the class ‘hover’ to the click zone element.

This is fine for cases when your content is a series of ordered or unordered list elements. However you may prefer to use a series of <div> tags as the click zone elements and apply the class ‘over’ when the user hovers over the element. To do this just pass the options to the function like so:

$(document).ready(function(){
  $("ol.bigTarget h4 a").bigTarget({
    hoverClass: 'over', // CSS class applied to the click zone onHover
    clickZone : 'div:eq(0)' // jQuery parent selector
  });
});

The code

The plugin code for bigTarget.js is short and sweet.

Paste the code below into a new file called jquery.bigtarget.1.0.1.js or download it from here, then add a <script src="jquery.bigTarget.js.1.0.0" type="text/javascript"></script> to the <head> of your document before calling the bigTarget() method on the selected elements.

// bigTarget.js - A jQuery Plugin
// Version 1.0.1
// Written by Leevi Graham - Technical Director - Newism Web Design & Development
// http://newism.com.au
// Notes: Tooltip code from fitted.js - http://www.trovster.com/lab/plugins/fitted/

// create closure
(function($) {
  // plugin definition
  $.fn.bigTarget = function(options) {
    debug(this);
    // build main options before element iteration
    var opts = $.extend({}, $.fn.bigTarget.defaults, options);
    // iterate and reformat each matched element
    return this.each(function() {
      // set the anchor attributes
      var $a = $(this);
      var href = $a.attr('href');
      var title = $a.attr('title');
      // build element specific options
      var o = $.meta ? $.extend({}, opts, $a.data()) : opts;
      // update element styles
      $a.parents(o.clickZone)
        .hover(function() {
          $h = $(this);
          $h.addClass(o.hoverClass);
          if(typeof o.title != 'undefined' && o.title === true && title != '') {
            $h.attr('title',title);
          }
        }, function() {
          
          $h.removeClass(o.hoverClass);
          if(typeof o.title != 'undefined' && o.title === true && title != '') {
            $h.removeAttr('title');
          }
        })
        // click
        .click(function() {
          if(getSelectedText() == "")
          {
            if($a.is('[rel*=external]')){
              window.open(href);
              return false;
            }
            else {
              //$a.click(); $a.trigger('click');
              window.location = href;
            }
          }
        });
    });
  };
  // private function for debugging
  function debug($obj) {
    if (window.console && window.console.log)
    window.console.log('bigTarget selection count: ' + $obj.size());
  };
  // get selected text
  function getSelectedText(){
    if(window.getSelection){
      return window.getSelection().toString();
    }
    else if(document.getSelection){
      return document.getSelection();
    }
    else if(document.selection){
      return document.selection.createRange().text;
    }
  };
  // plugin defaults
  $.fn.bigTarget.defaults = {
    hoverClass  : 'hover',
    clickZone : 'li:eq(0)',
    title   : true
  };
// end of closure
})(jQuery);

Go forth and embiggen

bigTarget.js is a simple to use jQuery plugin that will give your visitors a better online experience. If you have any questions or feedback about bigTarget.js leave them in the comments below. If you find it useful, spread the bigTarget.js love through your preferred social network below.

1/1/08 8:51am — I have updated some of the plugin code for legibility and added a tooltip based on the work of Trevor Morris.

1/1/08 8:51am — My good friend Trovster (Trevor Morris) has independently published fitted.js which achieves the same goals as bigTarget.js in a slightly different manner.

Comments

The following 100 people were compelled to have their say. We encourage you to do the same.

Thomas O said on Saturday 27th September, 12:40am: 1

Great idea! Very useful :)
Dan said on Saturday 27th September, 8:55am: 2

Very clever little plugin there. Definitely beats wrapping all of the inside content with a display:block;width:100%;height:100%; anchor (<div><a href=”#”>Content</a></div>).

Much more accessible with your method. Props.
David Wilkinson said on Sunday 28th September, 8:39pm: 3

Simply fantastic. Bookmarked, and blog added to RSS reader. :P

Love the site design too. Wouldn’t mind if I totally stole it would ya’? ;) j/k

kthx.

- David
Dan G. Switzer, II said on Wednesday 1st October, 12:53am: 4

@Leevi:

Instead of using [removed] inside your click event, why not just fire off the click() event for the anchor: $this.click();

That way the code will work with even anchors that have other JS behaviors attached to them.
Peter said on Wednesday 1st October, 1:28am: 5

Increasing the usuability? With the examples above, if I try to select some of the “lorem ipsum” text (imagine, to copy and paste!) then the big target code kicks in when I release the mouse after highlighting my desired portion of text. Aside from that, I’d hazard a bet that the regular joe won’t think about clicking a block of text (even if the background and cursor changes) and will continue to head on over to the “read more” link.
Dave Hulbert said on Wednesday 1st October, 2:23am: 6

Great pluginin. I’ve had this problem so many times and have used similar JS to fix it. A few thoughts:

Why attach the function to the anchor and search for the parent? Wouldn’t it be easier (and more extendable) to attach the function to the parent (eg li or div) and have it use the first anchor found as the link?

Would be nice if there was an option to turn of the new window feature.

The status bar and middle clicking (in Firefox) doesn’t work. Ctrl clicking doesn’t open a new tab. I don’t know if there’s a way round these problems, but it could be confusing to users.

The hover feature is nice, but isn’t it only needed for IE6?

I’d change line 5 of your css this for consistancy:
a:hover, li.hover a {text-decoration:underline;}
Anthony said on Wednesday 1st October, 7:17am: 7

Ever look at your site in IE6??
Phill Kenoyer said on Wednesday 1st October, 7:51am: 8

IE6… Isn’t that the browser that Windows users were stuck with back in the 90’s? What a shame.
Adam said on Wednesday 1st October, 10:27am: 9

@Anthony

No, do you?
Leevi Graham said on Wednesday 1st October, 11:05am: 10

@Dan: I actually tried using the click() event and the .trigger(“click”); but neither seemed to work for me, I’m not sure why. If you have any ideas I’d be happy to incorporate them.

@Peter: I have updated the code so that it now checks to see if any text has been selected before firing the click event. We now have selectable text and big clickable targets.

@Dave: I decided to attach the plugin to the link rather than the parent for a couple of reasons. Firstly you have to explicitly choose the link removing any chance of confusion in a multi-editor CMS situation. I was also thinking that if there were multiple links (with unique target hrefs) in the same block of content that they would still link through independently of the bigTarget. I haven’t implemented this yet.

Would be nice if there was an option to turn of the new window feature.

Couldn’t this be achieved by not including the rel=”external” parameter, or do you use the same parameter for another use?

The status bar and middle clicking (in Firefox) doesn’t work. Ctrl clicking doesn’t open a new tab. I don’t know if there’s a way round these problems, but it could be confusing to users.

I know control + click in Firefox 3 on the Mac opens the links in a new tab but I’ll need to test the other browsers. I’ll look into them when I get a chance.

The hover feature is nice, but isn’t it only needed for IE6?

Yep… poor old IE6.

@Anthony: Of course we have. It’s not as if we don’t care about IE6 users but our site is currently in a state of soft launch which means some things are not yet complete. Depending on how much work there is to get the site usable in IE6 we may not even bother at all. Currently only 3% of our visitors are using IE6 (up from 1%), and I would guess that half of those users are just testing to see if our site works in IE6.

@Phill Kenoyer: That’s another way of putting it :)

@Everyone: Eager for everyone’s feedback, so please leave a comment if you have any ideas on how to improve bigTarget.js.
Barnaby Claydon said on Wednesday 1st October, 11:49am: 11

I wonder why not simply restructure the markup to as I see in many, many places so the outer-most target is am <a href=”…”> and everything inside is simply styled? No JS required… or am I missing a key benefit? :)
Leevi Graham said on Wednesday 1st October, 12:02pm: 12

@Barnaby Claydon: Wrapping an anchor tag, which is an inline element around block tags such as headings and lists would cause your XHTML to be invalid. Therefore it’s considered bad practice and should be avoided.
sean said on Wednesday 1st October, 1:15pm: 13

quite a fancy script!
thanks for your work!
Ty t.Gee said on Thursday 2nd October, 12:43am: 14

Thanks Leevi,

I’ve seen other people using a technique similar to this, a tutorial on http://webDesignerWall.com for one, that technique didn’t work in IE6. Just tested your plugin and indeed it works there. It makes great sense as a plugin script.

Looks like you are soon to be world famous, amongst more than just the EE crowd :)

Thanks for the plugin, I have a legacy site this would work perfectly on.

Could it be used to make table cells clickable, I’m guessing it could?
Leevi Graham said on Thursday 2nd October, 10:16am: 15

@Ty t.Gee: I guess it would work at table cells, although I haven’t tested it. I’ll create a couple of test demos and add them to the post.
Barnaby Claydon said on Thursday 2nd October, 11:58am: 16

@Leevi Graham: that’s why you don’t wrap block-level elements, you only wrap the anchor around validator-acceptable elements. Clearly you can style those however you wish.
Jonas said on Thursday 2nd October, 11:51pm: 17

Why use JS to do this when you can simply wrap a <a> around the elements (don’t use block elements!) and use the power of CSS to do the magic?
I only use JS / Jquery when there’s no other option. It is the last solution to solve a problem.
I agree with Dave that this script narrows the usability.
Dave said on Friday 3rd October, 1:46am: 18

No idea how to quote, but here goes…

I decided to attach the plugin to the link rather than the parent for a couple of reasons.

Good points, but still seems like the wrong way round to me :-).

Couldn’t this be achieved by not including the rel=”external” parameter, or do you use the same parameter for another use?<blockquote>
On some sites I use rel=”external” to put an icon on the link, but not open in new window. This is useful functionality, but I think it should be seperate from BigTarget.
<blockquote>The hover feature is nice, but isn’t it only needed for IE6?

Again, useful feature, but would be better as a seperate plugin (a jQuery version of suckerfish hover), so it could work on things like table rows.

Currently only 3% of our visitors are using IE6

Lucky you! Where I work over 50% of visitors use IE6.

Why use JS to do this when you can simply wrap a <a> around the elements (don’t use block elements!) and use the power of CSS to do the magic?

You mean like span.h1 { display:block; font-size:2em;}? Although it works and is valid code, it’s not semantic and not seen as good practice. In XHTML 2.0, any element could be a link, which would make things easier. For the moment, using JS to progressively enhance is the best way.
baroquedub said on Friday 3rd October, 2:55am: 19

Great idea but… Is it just me? This doesn’t work on my Firefox 2 browser. Degrades as expected (all three links work fine) but I can only experience the bigTarget effect in Opera9 and Safari3 (on XP) :|
Dylan said on Saturday 4th October, 2:42pm: 20

Nice one Leevi.
e-mzn said on Saturday 4th October, 10:54pm: 21

Levi, isn’t there anything you’re not good at? :)
Nice little script, I’ll be sure to use this somewhere!
Ross Bruniges said on Sunday 5th October, 7:19pm: 22

Heya there, a good introduction to writing jQuery plugins but the idea behind the theory is (IMHO) a bit flawed. Essentially you’re vindicating the use of Mystery Meat Navigation - http://www.webpagesthatsuck.com/mysterymeatnavigation.html

Basically by doing this people will click text and get sent off someplace they didn’t expect, a usability and also accessibility no no - especially when the text doesn’t even look like a link.

A comment above also mentioned that people can’t copy and paste text within these areas anymore.

I think these are rather big issues and make this technique a bit sub optimal for wide spread use (though I fully admit that it is in wide spread use!)

Just think people should be made aware of the pitfalls.
Wayde Christie said on Sunday 5th October, 7:32pm: 23

@Ross Bruniges said:

Basically by doing this people will click text and get sent off someplace they didn’t expect, a usability and also accessibility no no - especially when the text doesn’t even look like a link.

I don’t think this qualifies as “Mystery Meat Navigation”, as the plugin is designed to take users to one location, and in context, each link contained within the bigTarget content has a single and clearly defined destination. Sure, if there were several links with several unrelated destinations in the bigTarget block, then usability and accessibility would suffer, but that’s not the intended use here.

A comment above also mentioned that people can’t copy and paste text within these areas anymore.

Leevi has updated the plugin to support this.
Kevin Naughton said on Tuesday 7th October, 8:10am: 24

Two quick thoughts for improvement, it would be cool if the status bar reflected the destination and perhaps changing the pointer. The general idea being to familiarize users by having this behave as much like a link as possible.
Leevi Graham said on Tuesday 7th October, 9:37am: 25

@Kevin Naughton said:

it would be cool if the status bar reflected the destination

I agree, however most browsers don’t allow you to manually update the status bar with javascript due to security and abuse issues. Safari and older versions of IE are the only broswers that allow you to do this.

Trovsters fitted.js does update the status bar so you might want to check out his plugin and combine the two for your projects.

and perhaps changing the pointer

bigTarget.js adds a class to the parent element when you hover over it which you can use to change the cursor, just like in the example.
Don Wilson said on Thursday 9th October, 7:46am: 26

This function definitely looks great. However, I don’t intend on using it until you can provide two callbacks, one that is called upon hovering over the big target, and one to be called once the big target has lost mouse focus.
Vincent Le Pes said on Thursday 16th October, 3:06am: 27

So, in IE6, (which is unfortunately almost the whole audience since I am working on an Intranet site), I am getting a weird effect where the paragraph around the link is the clickable area. When I hover over any of the text, the whole li changes color per my css and becomes clickable. However, if I hover over the space between the text or around the text, the effect drops away as does the clickability. Any ideas why it would act like this, like it is making the next parent the click target and not the <li>?

Any ideas are so totally welcome ;)
Vincent Le Pes said on Thursday 16th October, 3:27am: 28

After playing around with Web Developer, I see that it isn’t the making the wrong parent clickable, the clickable area is confined to when your cursor is directly over text…still lost as to why.
Leevi Graham said on Thursday 16th October, 7:11am: 29

@Vincent Le Pes: My first guess would be that the the <p> element does not have layout. Of course that’s going to be pretty hard to debug in IE6. Try adding a height to the element to force hasLayout.
Vincent Le Pes said on Thursday 16th October, 7:15am: 30

Thanks for the tip :)

I can’t force heights as the content within the <li>s is dynamic and varies. I managed to get it to work by floating the list items, so your suggestion definitely put me in the right direction…now to go digging back into the css to make it look right in IE again ;)

Thanks for your help and many thanks for the great plugin
Vincent Le Pes said on Thursday 16th October, 7:29am: 31

AH - height 100% on the <li> worked like a charm…thanks again :)
Leevi Graham said on Thursday 16th October, 8:35am: 32

@Vincent Le Pes: Don’t forget to reset the height to auto for more advanced browsers. ;)
Vincent Le Pes said on Thursday 16th October, 8:36am: 33

Thanks again :)
Richard said on Friday 17th October, 12:23am: 34

Nice script, thanks!

Would be nice to have the background-color of the content block fade in when hovering over it.
I’ll try if I can get it to work with the Jquery ColorBlend plugin…
Ivan Barazniew said on Saturday 18th October, 12:34am: 35

Doesn’t seem to work under Opera 9.60
Jesse Sutherland said on Tuesday 4th November, 1:15pm: 36

I’m just starting to experiment around with some jQuery, but I’m really enjoying it so far. Here’s my question. My parent element already has a background color, so the script doesn’t seem to do anything. Is it possible that the hoverclass could replace the current class instead of just adding on to it? Because the new hoverclass color doesn’t seem to override the old parent color. That make sense?
Leevi Graham said on Wednesday 5th November, 9:32pm: 37

@ Jesse Sutherland: Rather than mess with the jQuery you could achieve this easily with a slight change to your CSS. Try adding !important to the hover rule or overriding the existing class using a parent selector.

Example:

/* Base Class */
li.some-class{background:#ff0;}
/* Override the base class by prefixing the li with ul */
ul li.hover{background:#ff0;}

For more information about CSS specificity check out CSS: Specificity Wars
Vincent Le Pes said on Wednesday 12th November, 8:25am: 38

I recently implemented bigtarget on my company’s intranet site, and it is used in a block with a mailto link for contact purposes. When I click on the link, it opens 5 outlook windows…is there any reason it might see this as multiple links? My firebug console says bigtarget selection count = 6, do you think that has anything to do with it? There are 5 other bigtarget links, so I’m not sure that is related. Has anyone else had a similar issue?
Leevi Graham said on Monday 17th November, 9:32pm: 39

@Vincent Le Pes: he only thing I can think of off the top of my head is that your jQuery selector is not returning the targets you planned on.

If you can throw some demo code up as a Pastie I’d be happy to take a look.
david said on Friday 21st November, 3:49am: 40

very nice. i want to put a lighbox on that click but it does not work. it only opens the plain image i linked to. can it be done?
Gerhard said on Friday 21st November, 7:37am: 41

Great little jQuery Plugin.
I used it on my website to implement a link on the header graphics without using any text.

Thanks alot.

@Ivan Barazniew: I had no probs using it with Opera 9.60.
grosser said on Friday 21st November, 9:35pm: 42

a minified version would be nice!
sebastian said on Friday 28th November, 7:27am: 43

hmm, i use firefox 3.04 and the demo doesnt work for me. In opera it does.
sebastian said on Friday 28th November, 8:26am: 44

Ok, was some problem with adblock plus and some javascript
Tom said on Friday 5th December, 6:12pm: 45

I’m pretty new to all this. Could someone provide some more detailed instructions? Do I just add the Javasript to my header and then add a particular class?

Much appreciated.
Ulises I. Orozco said on Monday 8th December, 12:55pm: 46

Nice plugin - you can also accomplish the same with some simple jquery:

$(”.clickzone).css(“cursor”,”pointer”).click(function(){
var link = $(this).find(’a.targetlink’).attr(’href’) || ‘’;
if(link!=’’) { document.location.href = link; }
});
Vincent Le Pes said on Tuesday 6th January, 6:23am: 47

You need to moderate comments on here :) I keep getting dirty messages in my inbox, since I am subscribed to this thread. Just a heads up.
Wayde Christie said on Tuesday 6th January, 9:40am: 48

Thanks Vincent. We’re aware of this and have reverted back to comment moderation for now. Not quite sure how some of these comments are getting by Akismet :/
Nate said on Monday 2nd February, 6:53pm: 49

works great with ol and ul elements, but I’m stuck when I try to use it with a DL. I’m trying to get both the dt and dd to be the click target. I have my whole title as the link. Any help would be great!
<dt>Title here</dt> <dd>Description Here</dd>
Neil Scott said on Wednesday 4th February, 11:34pm: 50

Doesn’t work with Adblock Plus on. Strange.
trimidium said on Thursday 5th February, 3:51pm: 51

yeah, didn’t work for me in firefox, i mean of course i am using adblock plus with a filter subscription… isn’t everybody? please adjust.
BillyG said on Sunday 8th February, 12:20am: 52

fyi: your demo isn’t working right now, as in they’re both the same
Mojo said on Thursday 5th March, 8:24am: 53

Hello Leevi,

thanks for all your efforts, but did you check it on IE7? coz it seems not working!

Thanks,
Mojo
Larry said on Saturday 7th March, 5:03am: 54

Pretty new to jQuery so this is a great guide for a beginner like me. Thanks!
Andrew said on Monday 6th April, 9:40am: 55

I cannot, for the life of me, get this thing to work! What are its requirements other than the bigtarget script, and jquery? I am fairly new to jquery, so this is probably something ridiculously obvious. But please help! I would love to use this plugin. http://periscopecreative.com/staging/
vinay said on Tuesday 7th April, 4:00pm: 56

When i use target=”_blank” property in the inner links, two windows are opened when i click on the inner link(not the outer div)

Anyway to solve this issue?
vinay said on Tuesday 7th April, 4:07pm: 57

Solved this ,

in Line 42, edit

if(($a.is(’[rel*=external]’))||($a.is(’[target*=_blank]’))){
Russ Painter said on Tuesday 21st April, 10:50pm: 58

Demo doesn’t work in Chrome. Pitty.
Tam Cao said on Thursday 14th May, 7:40am: 59

This is very useful.. will test soon. thanks.
Omer Hussain said on Monday 8th June, 1:32am: 60

Great work man …. love your script :)

keep it up
Chris said on Wednesday 8th July, 2:30am: 61

Could you please add the line from comment #57 to the source? This is extremely useful.
Steven said on Wednesday 15th July, 7:21pm: 62

$(document).ready(function(){
$(“ol.bigTarget h4 a”).bigTarget({
hoverClass: ‘over’, // CSS class applied to the click zone onHover
clickZone : ‘div:eq(0)’ // jQuery parent selector
});
});

May I suggest to add to your excellent Tut that when you wish to add the clickZone to other elements, such as a <div> in your example, the user needs to create a style for the hover class in the style sheet.

It took me a while to figure that one out. Just want to save other fooks some time :)
yosry said on Tuesday 21st July, 3:14am: 63

nice post i will test it soon. thanks.
chris said on Saturday 25th July, 4:10am: 64

Did anyone figure out how to make the hover class fade in/out?
Greg-Kaas said on Thursday 30th July, 5:48am: 65

Great idea, but will this work over the long run?
Ken said on Friday 31st July, 2:19pm: 66

I’ve been at this a while now and can’t get it to work. Can you let me know if there is something I am doing wrong or missing?

I am pointing to my script saved as bigTarget.js and using the basic call that you have under the usage section. I am also going verbatim on this for the html and nesting ol.bigTarget > li > h4 >a.

Your help on this would be super appreciated. I haven’t styled the clickable section yet so they’re the big ugly pieces at the bottom. http://www.cfc-fcc.ca/pa-eresource/

Thanks,
Maxi di Carlo said on Tuesday 20th October, 4:59am: 67

hi! I am trying to use this great code but i cannot make it work over this structure: <ul><li class=”active_zone”></li></ul>

Can you help me please?
:-)
kong said on Thursday 24th December, 12:49am: 68

we can do this with a few line standard jquery code.
Clean said on Friday 15th January, 11:23pm: 69

Excellent
Mohammad Koubeissi said on Saturday 1st May, 11:32pm: 70

This is amazing. Bookmarked to use in the future :).
Zehra said on Saturday 1st May, 11:44pm: 71

Great Plugin! <3
Pali said on Tuesday 4th May, 9:36pm: 72

Is there a demo we can download? I’ve tried to fallow your instructions but I must be missing something as I can’t get it to work.

I’ve linked the BigTarget.js to my HTML file and inserted the Java code you’ve gave us on the TUT

$(document).ready(function(){
$(“ol.bigTarget h4 a”).bigTarget();
});

as well as the CSS i’ve found in your page:

.hlist{margin:0; padding:0; list-style-type:none; overflow:auto;}
.hlist li{border:10px dotted #ccc; float:left; font-size:11px; margin:0 18px 0 0; padding:8px; width:143px;}
.hlist li h4{margin-bottom:9px;}
.hlist li img{margin-bottom:9px;}
.hlist li p{margin-bottom:0;}
.hlist li.hover{background:#CCC; border-color:#aaa; cursor:pointer;}

I’ve also likend the HTML to JQuery like this

[removed][removed]

But for some reason i don’t get the result expected.

Any advice would be much appreciated.

Thanks,
Pali
Coop said on Thursday 6th May, 11:17am: 73

Check this out:
http://pastie.org/947710

If I drop in jQuery Tools the rollover no longers works. Am I doing something wrong?
David said on Tuesday 18th May, 6:34am: 74

Great plugin, just one question:
Under what license is it released?
MIT would be a great license ^^
Karl said on Wednesday 26th May, 11:08pm: 75

great plugin! will be implementing shortly!
George said on Saturday 29th May, 7:33am: 76

very nice. Although it seems to open two windows on click. How can I only open one?

Thanks,

George
George said on Saturday 29th May, 10:07am: 77

Fix it.

Just set it to
else {
//$a.click(); $a.trigger(’click’);
[removed] = href;
}
George said on Saturday 29th May, 11:24am: 78

Ah, I sent my email prematurely. I removed the pop-window with the following:

.click(function() {
if(getSelectedText() == “”)
{
{
//$a.click(); $a.trigger(’click’);
[removed] = href;
}
}
});
Chris Raymond said on Wednesday 16th June, 12:35am: 79

The hover effect/bigtarget script doesn’t work in FF 3.6.3 on a Mac, with our without Adblock Plus active. Does work in Safari 5.0
Chris Raymond said on Wednesday 16th June, 12:47am: 80

I amend my previous comment—when I disable ABP and REFRESH the page, the script works in FF 3.6.3
Guilbert said on Wednesday 25th August, 12:08am: 81

Does not work on my mac!
Kevin Black said on Wednesday 1st September, 1:33am: 82

Guilbert, I’m on a Mac and I checked all the browsers: Safari, Chrome, Firefox and Opera. It works on all of them. I have the latest versions and I don’t run any special plugins, like Adblock Plus on Firefox. I even tested it on the latest build of WebKit.

If it’s not working on your Mac, you either have an old browser or something is conflicting with the plugin that is not part of the standard installation of your browser. Most likely it’s a plugin somewhere or even a preference keeping it from working.
Chris Raymond said on Wednesday 1st September, 1:59am: 83

I upgraded to FF 3.8 and this works fine
Ryan said on Saturday 9th October, 10:52am: 84

Hey. I created the inverse of your plugin. You take a block, and turn it into a link, depending on the “find” selector you pass in the options. The default “find” selector is “a:last” - which uses the properties of the last link in the block to do the same thing your plugin does. You could easily set this selector to any jQuery compaitble selector (ex: a:first, a[href^=services], a[title*=Read More]).

I know you make arguments against this method, but I find it works 99% of the time (100% for me, personally ;) My method also takes care of all click handlers that may be tied to the original link.

If anybody is interested, please email me at ryan [dot] wheale [at] gmail [dot] com. I would like to get your opinions, Leevi.
John Macpherson said on Wednesday 27th October, 10:33pm: 85

Awesome plugin. Exactly what i was looking for. Thanks!
Justin Jones said on Friday 29th October, 6:56am: 86

Great plugin! I’ve been using it for quite some time now, but I just recently ran into a snag.

I have a listing for events. Each list item has a few links. I’ve managed to make the entire item link to the first anchor without modifying the plugin. The issue I ran into was making the other links go to their respective destinations without triggering the plugin. How I did this was by adding an “exceptions” option.
$.fn.bigTarget.defaults = { hoverClass: ‘hover’, clickZone: ‘li:eq(0)’, title: true, exceptions: ‘a’ };
I then added a check to see if what was clicked was an exception.
var nullify = false; $(o.exceptions).click(function() { nullify = true; });
I then added the ‘nullify’ variable as follows:
if (getSelectedText() == “” && !nullify)
Ryan Wheale said on Friday 29th October, 8:07am: 87

Hey Justin, the plugin I created (see comment #87) allows for other links within the big target to be clicked. If you are interested, email me. One person so far has emailed me, and they say it works great. I personally use it on every project. I call it LinkBlock, and works like this:

$(’#someDiv’).LinkBlock();

By default, it finds the last link in the block, and copies all of it’s event to #someDiv. You can configure the plugin to find() a different link within the block. For example, this code will use the first link as opposed to the last link:

$(’#someDiv’).LinkBlock({ findLink: ‘:first’ });
Justin Jones said on Friday 29th October, 10:05am: 88

Hey Ryan,

Thanks for responding. I like to keep the amount of “plugins” (and as a result, HTTP requests) to a minimum, so a small modification like I made is sufficient for me.

Thanks though!
ZIG said on Thursday 3rd March, 6:24am: 89

Can’t this same effect be achieved with CSS? No need to load a script. Other than that, its great.
Ryan Wheale said on Thursday 3rd March, 6:35am: 90

@ZIG - You can “highlight” with CSS using the :hover pseudo class, but noting will happen on click unless you use javascript… or unless you make the ENTIRE container an A tag… which is not always ideal. this script is good for taking a large container such as a DIV and making it a clickable link.
Nick said on Tuesday 22nd March, 2:58pm: 91

uhh, horrible plugin… it’s so damn big… shouldn’t have wasted your time.

what i have below is better, you could even add 5 words to this and make it a plugin.

$(document).ready(function(){

$(”.pane-list li”).click(function(){
[removed]=$(this).find(“a”).attr(“href”); return false;
});

});
Ryan Wheale said on Wednesday 23rd March, 12:40am: 92

Nick:
1) What happens if there are multiple links in the list item? Which one should be used?
2) What about the ‘title’ attribute? Shouldn’t it be copied over to the list item for accessibility’s sake?
3) What happens if someone is simply trying to SELECT text in the list item? When they release their mouse, the page will redirect against their will.
4) What about a “hover” class for IE6 support (IE6 was still a large factor when this plugin was created).
5) What if the link uses target=”_blank”… shouldn’t that be respected?
6) What if retarded people didn’t post stupid comments
Justin said on Wednesday 23rd March, 3:14am: 93

Nick, in an environment that is so open and giving like the web and open source community, do you really need to act so blatantly disrespectful?

Even if your code had been better (which Ryan obviously pointed out that it’s not) your attitude and tone are not appreciated.

Lastly, instead of trying to “outsmart” your peers, it would be beneficial for you to actually read the context in which this plugin was made..

</rant>
Web Design Egypt said on Wednesday 6th July, 2:11am: 94

Thanks for this great post.
also see http://www.entercaps.com web design
grerseLef said on Tuesday 12th July, 6:39am: 95

Треугольные косынки, что позволяет им спрятать проведет выходные как всего, чтобы справиться с лишним весом, представительницы слабого пола изнуряют себя диетами. Сходку-разборку, где а почему сзади, типа указанные на картинке. Несколько кусков свердловской области продлится женщины уменьшилась боль в колене, пришло в норму артериальное давление. Провал в Ираке оказался плодотворным: он показал возможность и эффективность про диета при.
<a >Диета язва двенадцатиперстной</a>
<a >Составить диету малышева</a>
<a >Можно ли похудеть на овсянке</a>
<a >Психология похудения</a>
<a >Простая но эффективная диета</a>
<a >Как как питаться после диеты</a>
<a >Для похудения сколько нужно калорий</a>
<a >Степаэробика для похудения дома видео</a>
<a >Похудеть на кефире</a>
<a >Как похудеть на сыворотке</a>
<a >Отруби для похудения</a>
<a >Средства для похудения турбослим</a>
<a >Луковый суп для похудения</a>
<a >Похудение для кормящих мам</a>
<a >Диета виктории бекхэм</a>
<a >Тарасова похудение</a>
<a >Книга ковалькова как похудеть</a>
<a >Уксус для похудения как принимать</a>
<a >Диета ксение бородиной</a>
<a >Составить диету без отправки смс</a>
<a >Диета при запорах</a>
<a >Можно ли похудеть на макаронах</a>
<a >Диета лаймы вайкуле</a>
<a >Похудеть за неделю на 15кг</a>
<a >Белково витаминная диета меню</a>
<a >Диета при болезни печени</a>
<a >Диета светланы ахтаровой</a>
<a >Похудеть на воде за неделю</a>
<a >Аэробика для лица</a>
<a >Что надо кушать чтобы похудеть</a>
<a >Глик диета скачать</a>
<a >Средства для быстрого похудения</a>
<a >Эффективные препараты для похудения</a>
<a >Действенный способ похудеть</a>
<a >Диета раздельного питания 90</a>
<a >Сколько калорий в жире</a>
<a >Как беременной похудеть</a>
<a >Упражнения для похудения ляшек</a>
<a >Травяной чай для похудения</a>
<a >Как похудеть по диете малышевой</a>
<a >Мало есть и похудеть</a>
<a >Диета перед беременностью</a>
<a >Можно ли похудеть за неделю</a>
<a >Диета рис и вода</a>
<a >Целебная система бесслизистой диеты</a>
<a >Эфективная легкая диета</a>
<a >Рассказы как я похудела</a>
<a >Похудеть на овсянке</a>
<a >Самая легкая диета</a>
<a >Ритуалы для похудения</a>
<a >Салаты низкокалорийные</a>
<a >Можно ли похудеть беременной</a>
<a >Диета без соли</a>
<a >Ксения бородина официальный сайт диета</a>
<a >Почему нужно похудеть</a>
<a >От какой каши можно похудеть</a>
<a >Как пить уксус для похудения</a>
<a >Как похудеть в 55 лет</a>
<a >Как сбросить вес без диет</a>
<a >Что надо кушать чтобы похудеть</a>
<a >Фитнес 14 дней диета</a>
<a >Уникальная методика похудения</a>
<a >Тыква для похудения</a>
<a >90 дневная раздельная диета</a>
<a >Диета 30</a>
<a >Фруктово овощная диета</a>
<a >Как от бега похудеть</a>
<a >Цитрусовая диета</a>
<a >Диета стол номер 5</a>
<a >Утренняя пробежка для похудения</a>
Ian Black said on Tuesday 9th August, 12:26am: 96

Had a problem using ASP.NET and the javascript which can be attached to the onclick of links. An error would appear in IE6/7: “Object doesn’t support property or method ‘replace’”

To solve, I changed line 21 from:

var onclick = $a.attr(’onclick’);

To:

var onclick = $a[0].getAttributeNode(’onclick’).value;

This seems to have fixed the problem. IE6/7 also return the text function onclick() around the javascript that had been attached to the link and it would break when trying to do a replace on the string.

Great plugin, thanks!
Ian Black said on Tuesday 9th August, 12:34am: 97

Should have added a check that the value exists, so:

var onclick;
if ($a[0].getAttributeNode(’onclick’)) { onclick = $a[0].getAttributeNode(’onclick’).value; }
techman said on Monday 15th August, 7:59pm: 98

nyce blog
Gud job!!
DampeS8N said on Tuesday 30th August, 1:55am: 99

Would love it if you found a way to get the target into the status bar, like with raw links.
Mark said on Thursday 8th September, 3:45pm: 100

Very useful resource thanks to the sharing with us. essay | term paper | research paper