Storing mouse events

[rogerio]

I have a situation where I want to use onMouseOver and onMouseOut to open and close a popup; but if the user clicks on the link I want the popup to stay visible until it is manually closed. The problem seems to be that I cannot get a variable to maintain its' value between operations. Can this even be done with javascript? thanks...

[niche]

Yes. Just do an onclick that toggles the display property. See:http://w3schools.invisionzone.com/index.php?showtopic=44647&pid=248496&st=0entry248496

[rogerio]

I see the toggle, but the issue I am running into is that 3 events are involved:1 mouseover show popup2 if mouseout and no click, close popup3 if click keep popup open - the popup contains a close button. I have discovered that "return" will retain the variable - probably old hat to you.

[niche]

The popup isn't the close button. The original clickable element is. That's what's meant by toggle.

[rogerio]

I may be misunderstanding where you are going: I want it to toggle "only" in the case of mouseover and mouseout, and at the same time, when mouseover opens the popup and the link is clicked, I want the popup to stay open until the close button is clicked. If the link is not clicked then mouseout will close it.

[niche]

I don't think you can do that. I think that's one of the points of a mouseover/up. Plus, you might want to reconsider the mouseover thing. It doesn't work on mobile devices.

[rogerio]

Yea, I see the problem is in the order of events captured. I need to trap the 'onclick' ahead of the 'onmouseout' and that ain't going to happen:

1. onmouseover
2. onmouseout
3. onclick

Oh well, I was just doing it for convenience anyway - make the user pay their dues... I am currently only using click events. thanks for the help

[thescientist]

you can have multiple events on a single element, and each one can have a different behavior, as defined by the event handler you write for that event. you can set a flag when the user clicks the link so that way you can sort of manually "disable" the onmouseover/out events.

[rogerio]

That's what I was attempting to do, but for some reason, I don't seem to get the idea of how to make it work. If I block the onmouseout, and the user hasn't clicked, then the popup is going to stay open anyway.

[rogerio]

I have come up with this and the only problem is that the mouseover event is activated when moving back over the link and reactivates the mouseout which will close the popup. I tried using an array but the values are lost.

function mTest(event){if((event.type)=='mouseover'){  alert('over');  mVal=2;}if((event.type)=='mouseout' && (mVal!=3)){  alert('out');}if((event.type)=='click'){  alert('click');  return mVal=3;}}

[thescientist]

updated with better flag namehttp://jsfiddle.net/AyHwA/1/

Edited August 11, 2012 by thescientist

[rogerio]

That looks like it just might work, thanks... Ran into a problem. It appears that there is another script (/js/lib/mootools-core-1.4.5-nocompat.js) being loaded to make this work. Is the code in the frames complete because I cannot get them to work without the above mentioned?

Edited August 11, 2012 by rogerio

[thescientist]

oh, that's a mistake then. it was meant to be just pure javascript. you will probably need to wrap your code in a window.onload function to make sure the DOM has loaded before the javascript happens. i.e.

window.onload = function(){  //code goes here}

Edited August 11, 2012 by thescientist

[rogerio]

ok, got it working, thanks very much...

[rogerio]

thescientist got a question: I currently have 7 popups and that is going to escalate, since this code is loaded into memory, how do I pass variables to it?

[thescientist]

pass variables to what? to each popup? maybe if you can explain what the variable are going to do. You can just write a function to do whatever you need to do.

[rogerio]

Sorry, thought you understood. I have several links on a page and each link is connected to a popup using 1 .css and having different text. The way I currently call them is to pass the ID of the popups along with the event and a handle used to move the popups if they get stacked on top of each other. Not related to this it is possible to click on the popup and bring it to the front with the z-index.

[dsonesuk]

Just to point out .addEventListener won't work for older IE browsers less than version 9, they also use prefix of 'on' for mouseover, mouseout and click

[thescientist]

Just to point out .addEventListener won't work for older IE browsers less than version 9, they also use prefix of 'on' for mouseover, mouseout and click

yes, meant to include this link earlierhttps://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

[rogerio]

Apparently this is one that javascript can't handle and stay compatible for the user. I appreciate the help from all. I just found an interesting article on checking for detecting browser features:http://msdn.microsof...v=vs.85%29.aspx I have been doing some google-ing and there doesn't seem to be a list of browsers by DOM level, what is a recommendation for determining level 3 browsers? It looks like that going back past IE6 and using DOM 3 is not going to work.

Edited August 12, 2012 by rogerio

[dsonesuk]

You have two options 1) MS crossbrowser solution shown by your link, which i had to correct to work

 function registerEvent( sTargetID, sEventName, fnHandler ){   var oTarget = document.getElementById( sTargetID );  if ( oTarget != null )   {	  if ( oTarget.addEventListener ) {  		 oTarget.addEventListener( sEventName, fnHandler, true );	  } else {		var sOnEvent = "on" + sEventName;		if ( oTarget.attachEvent )		{		   oTarget.attachEvent( sOnEvent, fnHandler );		}	  }   }} window.onload=function()	{registerEvent( 'popup-link', 'mouseover', show )registerEvent( 'popup-link', 'mouseout', hide )registerEvent( 'popup-link', 'click', click_Toggle )		}  var trigger = document.getElementById('popup-link');var popup = document.getElementById('popup');var showingViaClick = false;var setDisplay = function(display){	popup.style.display = display;}; 	function show()		{		if(!showingViaClick)			{			   setDisplay('block');			}		 } 	function hide()		{		if(!showingViaClick)			{			   setDisplay('none');			}		   } 	function click_Toggle()		{		showingViaClick = showingViaClick ? false : true;		var display = showingViaClick ? 'block' : 'none';			 }

2) the old method

trigger.onmouseover=function()	{	if(!showingViaClick)			{			   setDisplay('block');			}	};	trigger.onmouseout=function()	{	if(!showingViaClick)			{			   setDisplay('none');			}	}; 	trigger.onclick = function()		{		showingViaClick = showingViaClick ? false : true;		var display = showingViaClick ? 'block' : 'none';		};  

Edited August 12, 2012 by dsonesuk

[rogerio]

Revealing my limited knowledge: I believe both these scripts are loaded into memory (window.onload); how is a 'id' passed to them for more than one popup?

[dsonesuk]

You would give the popup link a classname to identify as such, search through div elements with loop looking for classname, apply events, at same apply id ref for that current event to target 'popup1', 'popup2' etc.

Edited August 12, 2012 by dsonesuk

[rogerio]

Right, but those listed above do not have a entry point.

[dsonesuk]

Well yes! so I guess you will have to create one won't you.