javascript mouseover/out combined with click behavior

Question

I am very new in programming, please give me a mercy. Below is my code:

$(function(){
document.getElementById("custom_link").addEventListener("mouseover",function(){
document.getElementById("siteContent").contentDocument.getElementById("custom_div").classList.toggle('highlightDiv');
},false)})

$(function(){
    document.getElementById("custom_link").addEventListener("click",function(){
    document.getElementById("siteContent").contentDocument.getElementById("custom_div").classList.add('highlightDiv');
    },false)})

What I want to do is:

when the user hovers mouse on "custom_link", the "custom_div" is being highlighted.
when the user moves mouse out off "custom_link", the highlight at "custom_div" is eliminated.
when the user clicks at "custom_link", "custom_div" is being highlight again. However, when the user moves mouse out, the 'highlightDiv' is still being added to "custom_div".

According to my code, it does not work properly because the behavior when hovering is strange. It would be very nice if you can explain me with full code structure or jsfiddle example. Thank you for your advance help.

Zevi Sternlicht · Answer 1 · 2013-02-12T09:26:15.493

1

You are mixing Javascript with its framework jQuery. Stick with jQuery for this.

// CSS: Create the highlight accessible with two classnames.

.highlight, .highlight_stay{
    background:yellow;
}

Jquery

$(function(){
     $('.custom_link').hover(function(){
          $(this).addClass('highlight');
      }, function(){
          $(this).removeClass('highlight');
      });

      $('.custom_link').click(function(){
           $(this).addClass('highlight_stay');
      });
});

edited Feb 12 '13 at 09:26

answered Feb 12 '13 at 09:16

Zevi Sternlicht

5,399
19
31

There are some errors in your code you should change the hover function from }), function to }, function and the hightlight css to highlight http://jsfiddle.net/95aGH/1/ – Anton Feb 12 '13 at 09:24

score 1 · Accepted Answer · answered Feb 12 '13 at 09:25

1

http://jsfiddle.net/ETrjA/2/

$('#custom_link').hover(function () {
    $('#custom_div').toggleClass('highlighted'); 
});

$('#custom_link').click(function (e) {
   $('#custom_div').addClass('highlighted');
   $(e.currentTarget).unbind('mouseenter mouseleave');
});

You only need one class highlighted and you can access the link element directly within the click event callback via e.currentTarget.

answered Feb 12 '13 at 09:25

Vinay

6,204
6
38
55

Thank you very much for your fast reply. I had forgotten to inform that the "custom_div" which I would like to highlight, it is in iFrame page(same domain). Could you please suggest me how to access the div in iFrame? – Ajarn Canz Feb 12 '13 at 09:29
Basically, `$('iframe').contents().find('#custom_div');` if it's the same domain. – Vinay Feb 12 '13 at 09:35
could you please clarify how can I implement iframe reference in the code. I tried to embed `$('iframe').contents().find('#custom_div');` to the code but nothing happened. Besides, "Custom_link" is in parent document. But "Custom_div" is in iframe document. Thanks again for help. – Ajarn Canz Feb 12 '13 at 10:19
If there's only one iframe in your document, `$('iframe')` should reference it correctly. There are other factors for why it could not be working. Your javascript could be running before the document and/or iframe is fully loaded. Also, you should get used to using the built-in Web Inspector, Firebug, etc. and break points for whatever browser you're using. That will help you a ton when trying to debug these kinds of things. – Vinay Feb 12 '13 at 19:55

score 0 · Answer 3 · answered Feb 12 '13 at 10:03

here is a link http://jsfiddle.net/8GV7B/2/

 $(function(){
        mouse_is_clicked = false;
         $(".custom_link").hover(function(){ 
            $("#container").addClass("highlight");
        }, function(){ 
            if(!mouse_is_clicked){ 
                $("#container").removeClass("highlight");
            }else{
                mouse_is_clicked = false;
            }
        });

          $(".custom_link").click(function(){
               $("#container").addClass("highlight");
              mouse_is_clicked = true;
          });
    });

javascript mouseover/out combined with click behavior

3 Answers3

Linked