houssam_ballout Posted January 23, 2008 Share Posted January 23, 2008 Hello all,I'd a code, its about timer, it works fine, I just want to make it follow the mouse when I enter the page?Any helpThanks in advanceThe code is: <html><head><link rel="stylesheet" type="text/css" href="ex1.css"/><style type="text/css">div { background-color: #ccffff; size: 50pt }</style><script type="text/javascript">var second=0;var min=1;var hour=1;function start(){ window.setInterval("updatesec()",1000);}function updatesec(){ second++; if(second == 60 ) { second= -1; updatemin(); } seconds.innerText=second;}function updatemin(){ min++; if(min >= 59) { if(min== 59) { minutes.innerText=min; updatesec(); } else { updatehour(); } } minutes.innerText=min; updatesec();}function updatehour(){ hour++; hours.innerText=hour; if(hour == 12 && min == 60 && second == -1) { hour=1; min=-1; sec=-1; updatesec(); } updatesec();}</script></head><body onload="start()"><div style=" width: 100pt;height: 40pt"><h1><strong id="hours">1</strong>:<strong id="minutes">1</strong>:<strong id="seconds">0</strong></h1></div></body></html> Link to comment Share on other sites More sharing options...
jeffman Posted January 24, 2008 Share Posted January 24, 2008 You want the timer <div> to "follow" the mouse? Physically? Like, the mouse moves across the screen, and the timer moves with it? Or do you want the timer to start counting when the mouse enters the page? These would lead to very different answers. Link to comment Share on other sites More sharing options...
houssam_ballout Posted January 24, 2008 Author Share Posted January 24, 2008 You want the timer <div> to "follow" the mouse? Physically? Like, the mouse moves across the screen, and the timer moves with it? Or do you want the timer to start counting when the mouse enters the page? These would lead to very different answers.well,I want the timer that is already on the page to follow the mouse Link to comment Share on other sites More sharing options...
jeffman Posted January 24, 2008 Share Posted January 24, 2008 well,I want the timer that is already on the page to follow the mouseSo I think you mean the clock will move across the page. That's what I'm answering.First, your timer div needs an id or you can't access it. It also needs a style like this: {position: absolute; top: 0; left: 0} so it can move. It doesn't matter what the initial coordinates are--it's the position property that must be changed from 'static' (the default) to something else.Next, you need an "onmousemove" event-listener in your body tag or document.body element (that is, put it in the tag or let your script do it). Attach it to a function in your javascript.This function needs to capture the mouse coordinates. This page can help you with that: http://www.quirksmode.org/js/events_properties.html . It clarifies all the cross-browser problems with events and mouse coordinates. I don't know why, but IE treats both of these very differently from compliant browsers.Calculate the timer coordinates from the mouse coordinates. Then assign the timer coordinates to the div's style.top and style.left attributes. Something like myTimer.style.top = mouseY + 5;Since the document.body will signal an onmousemove event very frequently (while the mouse moves, anyway), it will call your function frequently, and this will move your div in a smooth fashion, especially since the timer is so small and contains no images.I hope this is what you want. If you can script, this should be enough help. Link to comment Share on other sites More sharing options...
houssam_ballout Posted January 25, 2008 Author Share Posted January 25, 2008 Well, I'd got you.But I am not expert in scripting the mouse events.Could any one help?Its running, I just want the div to follow the screen (because, the timer is working as supposed)Thanks for any comments Link to comment Share on other sites More sharing options...
clonetrooper9494 Posted January 25, 2008 Share Posted January 25, 2008 view the page source of this page:http://free.hostultra.com/~clonetrooper/mouse_coor2.htmlI know its messy, but try and find the code for the x and y coordinates of the mouse... Link to comment Share on other sites More sharing options...
jeffman Posted January 26, 2008 Share Posted January 26, 2008 Nice hack. CloneTrooper9494's got you covered, houssam_ballout. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.