0

I have a pop up that appears on my page when I mouse over a link. The popup is not just some text or an image, it is its own web page. The popup appears without any problems onmouseover, but I can't seem to get it to disappear onmouseout. I know that I need to write some kind of javascript code to hide the popup onmouseout, but I can't seem to get it to work. Does anyone have any suggestions? Here is my code:

<a class="hoverlink" href="#" onmouseover="javascript:openPopup('TCW_BannerIPGChart.aspx?IPG_desc=<%# Eval("IPG_desc") %>&banner=Cub Foods&enterprise_zone=1')" onmouseout="javascript:closePopup()"><%# Eval("IPG_desc")%></A>

The error when I mouse out on the page says closePopup is undefined, which makes sense because I haven't been able to correctly define it in JQuery so if anyone knows how I'd really appreciate it. As a side note, I don't need to define openPopup any more than I have in the above asp.net code. I'm not sure why it doesn't need any extra code.

5
  • What does closePopup do? As far as I know openPopup and closePopup are not built into javascript – Abe Miessler Dec 19 '11 at 18:55
  • But in the example that you show ins't jquery, instead it's look's like pure javascript. Show us your js code – Jorge Dec 19 '11 at 18:57
  • Yeah sorry I should have explained better. The openPopup javascript was part of an earlier attempt, and I don't have any js or jquery code because I couldnt figure out what code I need. The reason I show my asp code was that I hoped to get some advice on what I need to cut out of the asp code when I add in javascript. For instance, do I leave the onmouseover? if so, what code do I use to direct it to the javascript code I have written elsewhere? My most recent (failed) attempt at writing the jquery is the following – TBK Dec 19 '11 at 19:37
  • <script type="text/javascript"> $(".hoverlink").live('mouseover', function () { $(this).find('.hoverlink').show(); }).live('mouseout', function () { $(this).find('.hoverlink').hide(); }); </script> – TBK Dec 19 '11 at 19:37
  • in jQuery use mouseenter aand mouseleave... also see my comment below ...also your code says to show the .hoverlink in this .hoverlink on mouseover of .hoverlink... but you want to show the popup, not the .hoverlink.. or if the popup also has the class "hoverlink" and is inside the .hoverlink you should change the class of the popup . – user950658 Dec 19 '11 at 23:23
1

maybe you should use hover. I don't know how your code looks, but this is a simple jQuery way of doing this

http://jsfiddle.net/pixelass/8y7RP/

$('.hoverlink').hover(function(){
    $('#popup').toggle();
})

---UPDATE--- 2 more fiddles...

http://jsfiddle.net/pixelass/8y7RP/6/

http://jsfiddle.net/pixelass/8y7RP/5/

4
  • Thanks for the code, this is definitely the kind of solution I was looking for. But I have a couple questions. First, the popup doesn't seem to be showing up when I hover over the link, though I'm confused because I implemented the html, javascript, and css that you showed in the jsfiddle link. My other question is can I have the popup be defined by a hyperlink rather than creating content in a div on the page? – TBK Dec 19 '11 at 19:49
  • you should put the code in a $(document).ready(function(){CODE GOES HERE}); jsfiddle.net/pixelass/8y7RP/6 or jsfiddle.net/pixelass/8y7RP/5 for a dynamic window. anything could be created. – user950658 Dec 19 '11 at 23:13
  • this was really helpful, sorry for the delayed response. Alse I like the jsfiddle site. makes it very easy to understand and play around with the code. – TBK Jan 3 '12 at 7:40
  • jsfiddle is awesome... I have some really freaky fiddles.. ;) – user950658 Jan 3 '12 at 13:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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