prevent all the browser events firing for mouse movement when user not interacting with the target element

[andersonk17474]

i have added a little improvement to only update the style attrivute when the element is actually hovered over

usage:

/*
some text
*/

/*
--------------------------------------------------------------------------
Code for link-hover text boxes
By Nicolas Honing
Usage: a link
(width is optional - default is in CSS: #pup {width: x;},
escape " in content with ")
Tutorial and support at http://nicolashoening.de?twocents&nr=8
--------------------------------------------------------------------------
*/

popupVars = {};
popupVars.minMargin = 15; // set how much minimal space there should be (in pixels)
// between the popup and everything else (borders, mouse)
popupVars.ready = false; // we are ready when the mouse event is set up
popupVars.default_width = 200; // will be set to width from css in document.ready

// activate or deactivate the move hoverover
popupVars.setReady = function(p_bool){
if (typeof p_bool === "boolean"){ popupVars.ready = p_bool; }
}

/* Prepare popup and define the mouseover callback */
jQuery(document).ready(function(){
$('body').append('

');
css_width = $('#pup').width();
if (css_width != 0) popupVars.default_width = css_width;
// set dynamic coords when the mouse moves
$(document).mousemove(function(e){
var x,y;

    x = $(document).scrollLeft() + e.clientX;
    y = $(document).scrollTop() + e.clientY;

    x += 10; // important: if the popup is where the mouse is, the hoverOver/hoverOut events flicker

    if (popupVars.ready){
        var x_y = nudge(x,y); // avoids edge overflow

        // remember: the popup is still hidden
        $('#pup').css('top', x_y[1] + 'px');
        $('#pup').css('left', x_y[0] + 'px');
    }
});
//popupVars.ready = true;

});

/*
The actual callback:
Write message, show popup w/ custom width if necessary,
make sure it disappears on mouseout
*/
function popup(msg, width)
{
if (popupVars.ready) {
// use default width if not customized here
if (typeof width === "undefined"){
width = popupVars.default_width;
}
// write content and display
$('#pup').html(msg).width(width).show();
// make sure popup goes away on mouse out
// the event obj needs to be gotten from the virtual
// caller, since we use onmouseover='popup(msg)'
var t = getTarget(arguments.callee.caller.arguments[0]);
$(t).unbind('mouseout').bind('mouseout',
function(e){
$('#pup').hide().width(popupVars.default_width);
}
);
}
}

/* Avoid edge overflow */
function nudge(x,y)
{
var win = $(window);

// When the mouse is too far on the right, put window to the left
var xtreme = $(document).scrollLeft() + win.width() - $('#pup').width() - popupVars.minMargin;
if(x > xtreme) {
    x -= $('#pup').width() + 2 * popupVars.minMargin;
}
x = max(x, 0);

// When the mouse is too far down, move window up
if((y + $('#pup').height()) > (win.height() +  $(document).scrollTop())) {
    y -= $('#pup').height() + popupVars.minMargin;
}

return [ x, y ];

}

/* custom max */
function max(a,b){
if (a>b) return a;
else return b;
}

/*
Get the target (element) of an event.
Inspired by quirksmode
*/
function getTarget(e) {
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
return targ;
}

[andersonk17474]

add to the mouseover event
onmouseover="popupVars.setReady(true);popup('Lorem ipsum dolor sit ...');"
and add a mouse out event
onmouseout="popupVars.setReady(false);"

[nhoening]

Hi @andersonk17474 thanks for the contribution. I see some good ideas in there (e.g. putting variables in an own namespace - I should rewrite this one day to have a modern module namespace on its own anyway).

However, please make a proper pull request, so I can actually see what the difference your commit makes line by line. I looked at the code for three minutes and it is just too hard. I know pull requests are a weird concept at first (I only made one so far and I had to look it up myself), but this is the reason github exists. It's actually pretty easy. You fork and then make your changes in your fork and then send me a pull request (there is a pretty good tutorial on github for that). By the way, an accepted pull request also looks good in github (it will then show that you became a contributor to a project).

I'm reluctant to make popup.js more work to use (adding more stuff to onmouseover and also onmouseout), but maybe there is real benefits and maybe even a more elegant way to do it, but I can't say now.

What is actually the benefit of this? I know that the nudge function gets called a lot and that could be improved, but I didn't think that accessing the style often is a problem, as well. Maybe the browser is working hard to follow up on the style update behind the scenes as well?

This change can potentially also make the script less annoying if a page is visited on a mobile which has no hover over events.

[andersonk17474]

really?
I changed like 8 lines...and it was all spelled out in the comments. Copy paste that into notepadd++ and do a compare with the orginal. But as you asked...I forked it onto my user space so you can 'see' it better.
github.com/andersonk17474 / popup.js

And yes...this is a huge improvement. Load up your original file in firefox with firebug. you move the mouse anywhere in or out of the browser and there are 100s to 1000s of events that fire changing the DOM like crazy.

[nhoening]

There is no need to be condescending towards me just because you don't appreciate github or don't want to take time to use it as intended (which is your right, but not my fault). I don't need to copy paste because now we have this and can discuss it.

As I said, I only need to think about changing the usage for a bit, but of course doing something like this makes a lot of sense.

[andersonk17474]

then this line is probably unnecessary.
--if (popupVars.ready) {

you would just set the popupVars.ready = true via the external function at the first line of the popup function, and then set it back to false ononmouseout event, as you suggested.

I just tested it out on my side and your suggestion worked well. I am unable to post to github from work through...

I think it would also be nice to have the target element id as a parameter for the popup function so that your not bound to always using just the #pup tag...make the popup a little more versatile if you want to have lots of different styled popups on the page

[nhoening]

Agreed on the omission of the line.

You can post to github (and make the pull request, if you want) later of course, we are in no hurry. Otherwise let me know and I take it up from here.

The target element id as a possible parameter (I would not make it mandatory) is also a good idea. Let's open a new issue for that.

[andersonk17474]

i have the code all worked out for the id argument. tis pretty slick. do you have an email i can shoot the code over to you at? i cant interact with the push pull on git hub behind my work firewall

[andersonk17474]

downlod the attached image and rename that .jpg extension to a .zip....it has all the files in it.

[nhoening]

Okay, thanks. Is this a refusal to work in github? You could do it later, when you're home, you know? :) Anyway, just tell me then I know.

I looked at your test example and it has two problems:

• it creates a new element every time popup() is called, when all that is necessary is to set the ID of the popup element.
• If I pass no ID to popup(), then the style will simply be the one of the last popup shown. It should fallback to the default ID 'pup'

[nhoening]

Two more improvements (which I also can do myself later): I love using namespaces, wanted to do that a long time ago. Why not use one overarching namespace, eg "nhpup"? E.g., the file looks like this:

nhpup = {
    minmargin: 15,
    setReady: function(p_bool) {
        ...
    },
    ...
}

Calling it would become

onmouseover="nhpup.popup('Lorem ipsum', 'my-pup-id')"

But as I said, I can do that later. Make sure your code works well and then you've already helped me out.

[andersonk17474]

not a refusal to use git hub...just unable to interact with it at work...trying to get this baby going for a project i'm working on. I'll look into that fall back issue...good catch on the recreating element issue...a simple check of the tag in jquery in the init function should fix that
if ( ! ($('#'+p_elemTag).length)){ // build hidden target div}

[nhoening]

Another improvement (more of a note for me):

onmouseout="nhpup.quiet()"

where nhpup.quiet sets read=false. A bit more elegant this way, as we now don't use setReady(true) (popup can simply directly set ready=true.

[andersonk17474]

no reason not to use one namespace...just went for two in this instance since i had all the other code written for popupVars and putting the functions in there seemed odd.

[nhoening]

As I said, I can do the polishing, you seem to be in need to get this to work.

As for the creation of elements, why would you ever make more than one? Why mess with the ID of the popup element in the first place. Wouldn't it be nice to pass a CSS class to popup(), and set that on $(#pup)?

[andersonk17474]

hey if you have a more elegant way to get err done i'm all for it. i write code with duct tape and wd-40.

my fixes

variable declaration changed:

popupVars.defaultIdTag = "pup"; // default tag to use for target element
popupVars.idTag;

Init function update

popupFunct.initNew = function(p_elemTag){
// only create the hidden target div if it doesnt already exist
if (!($('#'+p_elemTag).length)){
$('body').append('

');
css_width = $('#'+p_elemTag).width();
if (css_width != 0) popupVars.default_width = css_width;
}
}

document.ready altered

popupVars.idTag = popupVars.defaultIdTag; // init the popup tag to the default
// create default popup on the page
popupFunct.initNew(popupVars.idTag); // same just here for refence

popup function fallback

popupFunct.popup = function(p_msg, p_elemTag, p_width )
{
if (typeof p_elemTag !== "undefined" && p_elemTag != null && p_elemTag.length){
popupVars.idTag = p_elemTag; // reassign default object tag value
// create new popup on the page
popupFunct.initNew(popupVars.idTag);
}
else{
popupVars.idTag = popupVars.defaultIdTag;
}

[nhoening]

So these are changes w.r.t. what you send to dropbox, or to what? Jesus, man, it's as if you want to prove why they felt they should built github :D Thanks, anyway!

[andersonk17474]

thanks for making this code originally available...it will be a huge fix to an issue i was having needing TONS of hover over tags on a gigantic table.

i know...mad firewalls at work are a pain. trying to get this code to you...cause i'm off to finish my project asap and i wanted to be sure this got to you. rename the attached file to popup.js

[andersonk17474]

when i have more time i'm sure there is an easy way to manipulate the one div instead of needing multiples ... tis a start for me for now. thanks

[nhoening]

You know one reason why I suggested you make a pull request? To get "github fame". It's a bit silly, but cool software companies pay attention to your open source activities when they hire. Contributions to open source projects are a nice selling point if you want to switch employers sometime. And I suggest you consider that, firewalling is not nice.

[nhoening]

Success for today with this, at least, and thanks for the discussion starter and the code.

[andersonk17474]

i have the single popup div now working with separate classes. it also doesn't get constructed till the popup function is called the first time.

i'll push it out to my fork this evening and you can pull the updates in via the proper method. thanks for your input this am... made this thing 100% better than it was when i started at 6am.

i agree git hub fame is nice. My current employer is a major telecom company...so since they are experts at firewalls ... the have us all behind a rather ugly one. my apologies for the funky update approach this am. thanks.

[nhoening]

i'll push it out to my fork this evening and you can pull the updates in via the proper method.

Awesome!