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?

areid
  • 283
  • 2
  • 5
  • 14
  • 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 Jun 27 '11 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 Jun 27 '11 at 14:17

5 Answers5

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

malko
  • 2,292
  • 18
  • 26
  • 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 Jun 27 '11 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.

Ruslan
  • 9,927
  • 15
  • 55
  • 89
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

Val
  • 17,336
  • 23
  • 95
  • 144
0

Have you tried:

 $('a#overlink').click();
Nicola Peluchetti
  • 76,206
  • 31
  • 145
  • 192
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;
  });
});
Emre Erkan
  • 8,433
  • 3
  • 48
  • 53