3

I have an images with a fading overlay div on hover which displays a text link within.

When the link is clicked it opens a shadowbox with content. I want the whole overlay div to be clickable so I used :

$("div.overlay").each(function(){                
         $(this).click(function(){
             $('a#overlink').trigger('click'); // id of shadowbox link

             return false;

             });


       });

It works fine in FF, Safari & Chrome but IE shows a 'Object doesn't support this property or method' error.

Is there another way of doing this or another method to use?

2
  • I would suggest you alert out a few items in your each loop to see what they return as in FF and then check IE. This will help you determine what is coming up different and from there you can better assess where the bug is located.
    – Seth
    Commented Jun 27, 2011 at 14:14
  • as stated by @Val, don't forget that a#overlink is unique, if you have multiple a with the same id this is not correct, and in this case you must declare the scope of it, something like: $('a#overlink',this)
    – malko
    Commented Jun 27, 2011 at 14:17

5 Answers 5

2

Which version of ie are you using ? I remember that some version of IE don't support clicking objects other than links or buttons :(

perhaps try with a mousedown event as a workaround

1
  • This seems to have fixed it, I am using IE tester and an old pc with ie7 installed. The shadowbox fires on the pc but not IE tester. No more errors are shown. Many thanks.
    – areid
    Commented Jun 27, 2011 at 14:43
1

I wouldn't recommend this approach. Why can't you call the function which handles your anchor's (link's) click event? Or navigate using location from your link. That would make more sense.

0
$("div.overlay").each(function(i,n){                
         $(n).click(function(e){
             //do not need "a" in front of it as #overlink is unique anyways
             $('#overlink').trigger('click'); // id of shadowbox link

             return false;

             });


       });

try this and note my comment above your trigger

1
  • thanks for your suggestion, I will change my code where there are these types of id.
    – areid
    Commented Jun 27, 2011 at 14:45
0

Have you tried:

 $('a#overlink').click();
0

Try this:

$("div.overlay").each(function(){                
  $(this).click(function(){
      var $elm = $('a#overlink');
      if (document.createEvent) {
        var e = document.createEvent('MouseEvents');
        e.initEvent( 'click', true, true );
        $elm.get(0).dispatchEvent(e);
      }
      else {
        $elm.trigger("click");
      }
     return false;
  });
});
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.