Search jQuery

jQuery Forum

Toggle (Show and Hide) a function

in Using jQuery • 8 years ago

Hi I have what I thought was a simple problem but my solution does not work.

On click of #FuBuHelp I need to toggle (Show/Hide) the .HelpBox and .HelpInformation, I have tried to simply change this line "$('.HelpBox').text(HelpInformation).show();" to .toggle instead of .show and this works but once toggle is on "Show" the .HelpBox and . HelpInformation flickers and I move the cursor. I'm guessing I'm being blinded by something and the // Co-Ordanties is also toggling .... any help or advice of links would be a great help!

$(document).ready(function(){

    // Help Button
    $('#FuBuHelp').click(function(){

        $('.Help').mousemove(function(e){

            var HelpInformation = $(this).attr('HelpInformation');

            $('.HelpBox').text(HelpInformation).show();
            $('.HelpBox').css('top', e.clientY+10).css('left', e.clientX+10);

        }).mouseout(function(){

            $('.HelpBox').hide();

        });

        // Co-Ordanties
        $(document).mousemove(function(e){

            $('#co').text('x: ' + e.clientX + ' y: ' + e.clientY);

        });

    });

});

Replies(13)

jakecigar

Re: Toggle (Show and Hide) a function

8 years ago

It’s hard to tell what flickers without the HTML and the CSS.

Make a demo using http://jsfiddle.net.

JΛ̊KE

watusiware

Re: Toggle (Show and Hide) a function

8 years ago

You stated just that you want to show/hide the HelpBox and HelpInformation. But your code also does stuff when the mouse moves. What is your intent with that?

For one, every time the user clicks, you will add another mousemove listener. If the user clicks 10 times, now you have 10 mousemove listeners. That is not a good thing.

You should try to minimize what you do on mousemove. You will get frequent callbacks as the user moves the mouse. The frequency of callbacks will vary by browser. I would certainly expect flicker if you try to do too much. And if you do the same thing unnecessarily 10 times...

Fred Perr..

Re: Toggle (Show and Hide) a function

8 years ago

Hi Jake I have created a simple version of my project on jsfiddle for anyone that could take a look.
http://jsfiddle.net/56kjX/4/

Thanks for your help!

watusiware

Re: Toggle (Show and Hide) a function

8 years ago

That's different from what you posted earlier. You removed the .click() handler.

And it seems to work just fine. What is the problem? Are you have a problem on a particular browser?

Fred Perr..

Re: Re: Toggle (Show and Hide) a function

8 years ago

Yeah I edited it on your comments,
I still can't get the help information to turn off (hide) on the second click on the Need Help? button.

jakecigar

Re: Toggle (Show and Hide) a function

8 years ago

If you use the mouseenter event, to create the box, then move it in the mousemove event. You will see less flicker.

JΛ̊KE

Fred Perr..

Re: Toggle (Show and Hide) a function

8 years ago

If you compare it to this one where I have added the .toggle event.
http://jsfiddle.net/56kjX/5/

It works for clicking on and off but now flickers when hovering over the items.

jakecigar

Re: Re: Toggle (Show and Hide) a function

8 years ago

You didn’t use mousenter.

try http://jsfiddle.net/56kjX/6/

JΛ̊KE

watusiware

Re: Toggle (Show and Hide) a function

8 years ago

It's unclear to me what you want it to do.

It shows help when you hover over either of the buttons. Is that what you want or something else?

I don't know if you want something to happen when you hover, click, or something else.

If there really is a performance problem, you can improve it a bit by creating variables with your jQuery selectors instead of writing them inline each time. And you could use a data- attribute and use jQuery .data() to retrieve instead of using a made-up attribute. (It is more efficient.)

Those may just be nuances. But when you are doing something on mousemove, you should optimize the code as much as possible.

But I haven't seen a flicker yet. ... I take it back - the original jsFiddle does not flicker. The second one above flickers badly. Jake's doesn't flicker, but may or may not do what you want.

jakecigar

Re: Toggle (Show and Hide) a function

8 years ago

http://jsfiddle.net/56kjX/7/ now turns on and off.

JΛ̊KE

watusiware

Re: Toggle (Show and Hide) a function

8 years ago

Here's an optimized version of Jake's Fiddle.

Not that you'd likely notice.

http://jsfiddle.net/56kjX/10/

and a bit more optimized:

http://jsfiddle.net/56kjX/14/

It's good to get in the habit of "caching" queries. Usually it's not a really important for performance, but makes the code more maintainable. If you're doing something on a mouse move event or looping over a lot of elements, then it becomes more important.

and a tad more:

http://jsfiddle.net/56kjX/15/

Actually, there's no mousemove here any more so the optimization won't give you anything that the user would notice. But good to know if you ever really do need to use mousemove.

I had to help write a sketch tool...

jakecigar