Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript
<script type="text/javascript">
function winopen(e,linkid)
{
   if(document.all)
   {
   leftpos=event.screenX; 
   toppos=event.screenY;
   }
   if(document.layers||document.getElementById)
   {
   leftpos=e.screenX;
   toppos=e.screenY;
   }
   toppos=toppos+10
      MessageWin=eval('window.open(linkid,"newwin",config="width=200,height=100,location=no,status=no,directories=no,toolbar=no,scrollbars=no,menubar=no,resiza ble=no,top='+toppos+',left='+leftpos+'")');
   MessageWin.focus()
}
</script>
 
<a href="#" onMouseOver="winopen(event,'Default2.aspx')"  önMouseOut="MessageWin.close()">Open Window</a>
 
here is my code to open a new window on mouse over and close the windows when mouse out. it working fine at google chrome, but have 1 small problem with IE with windows 7.
 
if the new windows open at the center of my mouse cursor, the browser read it as 'onMouseOut', so what happend here is the new windows keep open and close. how to solve this?
=================================================================
Added
 
var time;
 
function chkFocus(){
 
   time = setTimeout(function(){
 
if(MessageWin.onfocus){
 
}
 
else{
 
   MessageWin.close();
 
}
 
}, 100);
and set my onmouseover="chkFocus()";
well, problem still the same, i believe we almost solve the problem. i put timeout as '100' because i want it to be closed instantely when mouseout.
Posted 13-Nov-12 18:55pm
Edited 13-Nov-12 22:14pm
v2
Comments
Pro Idiot at 14-Nov-12 2:49am
   
"here is my code to open a new window on mouse over and close the windows when mouse out. it working fine at google chrome, but have 1 small problem with IE with windows 7. " In chrome , the window keeps opened, does not close on mouse out !
melvintcs at 14-Nov-12 2:53am
   
check ur first "o" at onMouseOut...
Pro Idiot at 14-Nov-12 3:07am
   
yes, got it , Now it is working fine for me on Chrome and IE-8 the new window is closing on mouseout , perfectly fine !
Pro Idiot at 14-Nov-12 3:12am
   
or you can change the value toppos=toppos+10 10 to 20/30 as per your requirement , so the new window will never overlap on the mouse
melvintcs at 14-Nov-12 3:19am
   
i having the problem is the link is at the bottom right.
Pro Idiot at 14-Nov-12 3:26am
   
Try with " toppos=toppos+30" It is working fine, even on bottom right.
melvintcs at 14-Nov-12 3:29am
   
i tried, still the same, how u do the testing? u try to resize the window, and drag the whole parent window until the link is at the bottom right of your screen and try again. it do fine at windows XP, but having problem with windows 7
n.podbielski at 14-Nov-12 4:50am
   
Do you have to open a new window? Can't you do something like popup div, or toolpip? It is better solution since you have complete control of it.
melvintcs at 14-Nov-12 18:59pm
   
yes, tooltip or popup div also will do
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

this is how i solve it:
var scrWidth = window.screen.width;
var scrheight = window.screen.height;
 
var widthPercent = event.screenX / scrWidth * 100
var heightPercent = event.screenY / scrHeight * 100
 
if(document.all){
   leftpos=event.screenX; 
   toppos=event.screenY;
}
 
if(document.layers||document.getElementById){
   leftpos=e.screenX;
   toppos=e.screenY;
}
 
toppos=toppos+10
 
if(widthPercent > 70){
   leftpos = leftpos * 0.7
}
 
if(heightPercent > 70){
   toppos = toppos * 0.7
}
 
by doing this, the new windows will appear at left hand side if my cursor is at the bottom right. simple but efficient Smile | :)
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

You can use:
http://jqueryui.com/dialog/[^]
Set position of dialog to someplace not over your link and close dialog on mouseout.
 
Or maybe tooltip? It seems nice for hovering over link.
http://jqueryui.com/tooltip/#tracking[^]
 
I am not sure what you want to show in those windows. If you want show some info about website from link maybe this will help you?
http://www.thumbalizr.com/apitools.php[^]
It's creates some nice thumbs of websites. Should work great with tooltip and you could cache those images.
 
I founding jQuery UI somewhat slow so you could investigate some other libraries or even roll out something on your own.
 
Check dojo to:
http://livedocs.dojotoolkit.org/dijit/Dialog[^]
http://dojotoolkit.org/reference-guide/1.8/dijit/Tooltip.html[^]
 
I bet it is even slower then jQuery. But it is even prettier then jQuery UI Smile | :)
  Permalink  
Comments
melvintcs at 14-Nov-12 22:07pm
   
thx, ur links might help others, but i come with my own solution :)
n.podbielski at 15-Nov-12 2:03am
   
Great.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Your Filters
Interested
Ignored
     
0 Sergey Alexandrovich Kryukov 775
1 OriginalGriff 359
2 Manas Bhardwaj 295
3 Abhinav S 223
4 Sampath Lokuge 215
0 Sergey Alexandrovich Kryukov 7,967
1 OriginalGriff 4,332
2 Peter Leow 3,699
3 Maciej Los 3,515
4 Er. Puneet Goel 3,107


Advertise | Privacy | Mobile
Web01 | 2.8.140415.2 | Last Updated 14 Nov 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Use
Layout: fixed | fluid