Topic awaiting preservation: Script(bug) Help! $Pages that link to <a href="https://ozoneasylum.com/backlink?for=8894" title="Pages that link to Topic awaiting preservation: Script(bug) Help!" rel="nofollow" >Topic awaiting preservation: Script(bug) Help!\$

Author	Thread
buddylee Bipolar (III) Inmate From: Kennesaw, GA - USA Insane since: Oct 2003	posted 10-08-2003 19:29 Ok here the is the javascript. { window.onload=mainloop; document.onmousemove=doMouseMove; ypos = 0; delay = 40; } function doMouseMove(){ ypos=window.event.clientY window.status = "MouseX:" + ypos } function mainloop(){ if(ypos<550) { //ruler_line is the image that I want to move with the mouse. document.getElementById("ruler_line").style.top=ypos; } mainTimer=setTimeout("mainloop()", delay) } Now the script works fine, its just that its not smooth. The cursor will show the hour glass every now and then. I know that this can be fixed, I just couldn't find anything to help me. PS - The blinking cursor is really annoying. :-P Also this is my first visit to this forum so: 10 Print "Hello World!"
wrayal Bipolar (III) Inmate From: Cranleigh, Surrey, England Insane since: May 2003	posted 10-08-2003 22:20 Try this: <script> { function mouse() { document.getElementById("ruler_line").style.top=event.y; document.getElementById("ruler_line").style.left=event.x; } } </script> <img name="ruler_line" style="position:absolute"> <body onMouseMove=mouse()> or click here: www.wrayal.4t.com/cursor.html Hope this helps Wrayal Go to kimber-ja.demon.co.uk and click on the link to the raytracer!
buddylee Bipolar (III) Inmate From: Kennesaw, GA - USA Insane since: Oct 2003	posted 10-09-2003 20:02 Btw, I found that your script works fine. The problem is that, you can't reposition the <div> tags with images quickly. Or so I'm guessing... Anyone have anything to add?
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 10-09-2003 20:49 buddylee: Moving a DIV or an IMG won't hurt your browser, really. Experience, and the asylum's inmates, have prooved that much more heavy tasks can be achieved with DHTML in realtime. And, welcome in the asylum. Mathieu "POÏ" HENRI
buddylee Bipolar (III) Inmate From: Kennesaw, GA - USA Insane since: Oct 2003	posted 10-11-2003 01:37 I'm not trying to disagree with you poi, ok I am trying to disagree with you... The script went like: [javascript] <div>(with the image inside the div) follow the mouse. [/javascript] The script ran fine, the problem was the the cursor showing the thinking(waiting) cursor. I can't have that!! When I tossed the div tag and just told the script to move the image it worked fine. Am I missing something here? If you want to see the script in action, it is used on my site: http://www.phyquest.com Be sure to judge the site :-P Maybe if I setup the events differently it would work with the <div> tag? Any ideas???
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 10-11-2003 19:31 buddylee: By moving a DIV, I meant moving a DIV with an IMG tag inside. I just had a look at your site. In fact your busy cursor problem may come from the fact that you put the moving image as a background of your DIV. I've seen ( and timed ) that moving a background is slower than moving a simple IMG or DIV tag. Though I've never had the busy cursor. The page is light and you're not loading something after so I don't see how you can have had one. Weird. But I trust you, I swear To talk about your site, first I must say I like it. It's clean, looks pro and all. The only things I found to tease you is a discontinuity of antialiasing quality and some bicubic interpolation glitches. However you could easily fool some one and make them pass for JPG artifacts ... hum?! who said I'm an ass ? To continue on the design aspect, the bright white of the ruler line may look too bright compared to the ruler. You could change the way your ruler works to a sort of canvas animation. Pick the color of the grid along the ruler, expand it to the size of the whole ruler and clip the resulting image accordingly to the y of the mouse. Your doMouseMove() doesn't tackle very well when the user move the mouse outside the content area. Here comes a little fix : code: function doMouseMove() { document.getElementById("ruler_move").style.top = Math.min( 550, Math.max( 0, event.y - parseInt( document.getElementById( "site" ).style.top ) ) ) } Finally, let me suggest you to replace your complex menus by some CSS rollovers which aside from putting your page on diet will make your life easier and remove the browser specific code in the onmouseover events ( I refer to the link2.style.cursor='hand'; ). Cheers, Mathieu "POÏ" HENRI
buddylee Bipolar (III) Inmate From: Kennesaw, GA - USA Insane since: Oct 2003	posted 10-13-2003 03:18 Thanks for the tips poi. I need to check out the math.min and the math.max functions. Do they make the functions faster? Or, what is the benefit? /turnon spellchecker :P I checked out what you said about the background-image, your correct --------------- Reply: The only things I found to tease you is a discontinuity of antialiasing quality and some bicubic interpolation glitches. However you could easily fool some one and make them pass for JPG artifacts ... hum?! who said I'm an ass ? Maybe you could elaborate on the jpg statement. Do you mean I should you png? --------------- Thanks alot for the CSS trick, gonna save me some headaches in the future. Anyway please if you have any thoughts please share them, I LOVE TO LEARN! [This message has been edited by buddylee (edited 10-13-2003).]
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 10-13-2003 16:59 The real benefits of Math.min() and Math.max() here are that they "saturates" the coordinate of the ruler line. Since you only have one object in movement, the speed is far from being a problem. Nonetheless my implementation is faster than your previous one, but only because I've removed 2 "parseInt(document.getElementById("site").style.top)". Here comes a picture to illustrate my words about bicubic interpolation glitches : I didn't meant that you should use another format, but that though your images have a vectorial look, it clearly shows that you did them in bitmap. The distortions you've applied brought some bicubic interpolation glitches the non-initiated people may take for some JPG compression artifacts. If you had done your images in Illustrator, or with the Pen Tool or the Custom Shape Tool you wouldn't have those glitches at all. Who said I'm an ass ? again! You could also center the main DIV with CSS, but you'd have to retrieve the height of the window in the doMouseMove() function. Mathieu "POÏ" HENRI
buddylee Bipolar (III) Inmate From: Kennesaw, GA - USA Insane since: Oct 2003	posted 10-13-2003 17:33 Thanks again for all your help poi. And you are an ass I will delay your message to my graphic designer. I only do the coding for the site, we are a deuo [This message has been edited by buddylee (edited 10-13-2003).]

Topic awaiting preservation: Script(bug) Help!\$

Author

Thread

buddylee
Bipolar (III) Inmate

From: Kennesaw, GA - USA
Insane since: Oct 2003

posted 10-08-2003 19:29

Ok here the is the javascript.

{
window.onload=mainloop;
document.onmousemove=doMouseMove;
ypos = 0;
delay = 40;
}
function doMouseMove(){
ypos=window.event.clientY
window.status = "MouseX:" + ypos
}
function mainloop(){
if(ypos<550) {
//ruler_line is the image that I want to move with the mouse.
document.getElementById("ruler_line").style.top=ypos;
}
mainTimer=setTimeout("mainloop()", delay)
}

Now the script works fine, its just that its not smooth. The cursor will show the hour glass every now and then.
I know that this can be fixed, I just couldn't find anything to help me.
PS - The blinking cursor is really annoying. :-P
Also this is my first visit to this forum so: 10 Print "Hello World!"

wrayal
Bipolar (III) Inmate

From: Cranleigh, Surrey, England
Insane since: May 2003

posted 10-08-2003 22:20

Try this:

<script>
{
function mouse() {
document.getElementById("ruler_line").style.top=event.y;
document.getElementById("ruler_line").style.left=event.x;
}
}
</script>
<img name="ruler_line" style="position:absolute">
<body onMouseMove=mouse()>

or click here:
www.wrayal.4t.com/cursor.html

Hope this helps

Wrayal

Go to kimber-ja.demon.co.uk and click on the link to the raytracer!

buddylee
Bipolar (III) Inmate

From: Kennesaw, GA - USA
Insane since: Oct 2003

posted 10-09-2003 20:02

Btw, I found that your script works fine. The problem is that, you can't reposition the <div> tags with images quickly. Or so I'm guessing...
Anyone have anything to add?

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 10-09-2003 20:49

buddylee: Moving a DIV or an IMG won't hurt your browser, really. Experience, and the asylum's inmates, have prooved that much more heavy tasks can be achieved with DHTML in realtime.

And, welcome in the asylum.

Mathieu "POÏ" HENRI

buddylee
Bipolar (III) Inmate

From: Kennesaw, GA - USA
Insane since: Oct 2003

posted 10-11-2003 01:37

I'm not trying to disagree with you poi, ok I am trying to disagree with you...

The script went like:

[javascript]
<div>(with the image inside the div) follow the mouse.
[/javascript]

The script ran fine, the problem was the the cursor showing the thinking(waiting) cursor. I can't have that!! When I tossed the div tag
and just told the script to move the image it worked fine.

Am I missing something here?

If you want to see the script in action, it is used on my site: http://www.phyquest.com
Be sure to judge the site :-P

Maybe if I setup the events differently it would work with the <div> tag? Any ideas???

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 10-11-2003 19:31

buddylee: By moving a DIV, I meant moving a DIV with an IMG tag inside. I just had a look at your site. In fact your busy cursor problem may come from the fact that you put the moving image as a background of your DIV. I've seen ( and timed ) that moving a background is slower than moving a simple IMG or DIV tag. Though I've never had the busy cursor. The page is light and you're not loading something after so I don't see how you can have had one. Weird. But I trust you, I swear

To talk about your site, first I must say I like it. It's clean, looks pro and all. The only things I found to tease you is a discontinuity of antialiasing quality and some bicubic interpolation glitches. However you could easily fool some one and make them pass for JPG artifacts ... hum?! who said I'm an ass ?

To continue on the design aspect, the bright white of the ruler line may look too bright compared to the ruler. You could change the way your ruler works to a sort of canvas animation. Pick the color of the grid along the ruler, expand it to the size of the whole ruler and clip the resulting image accordingly to the y of the mouse.

Your doMouseMove() doesn't tackle very well when the user move the mouse outside the content area. Here comes a little fix :

code:

function doMouseMove()

{

    document.getElementById("ruler_move").style.top = Math.min( 550, Math.max( 0, event.y - parseInt( document.getElementById( "site" ).style.top ) ) )

}

Finally, let me suggest you to replace your complex menus by some CSS rollovers which aside from putting your page on diet will make your life easier and remove the browser specific code in the onmouseover events ( I refer to the link2.style.cursor='hand'; ).

Cheers,

Mathieu "POÏ" HENRI

buddylee
Bipolar (III) Inmate

From: Kennesaw, GA - USA
Insane since: Oct 2003

posted 10-13-2003 03:18

Thanks for the tips poi. I need to check out the math.min and the math.max functions. Do they make the functions faster? Or, what is the benefit? /turnon spellchecker :P
I checked out what you said about the background-image, your correct

---------------
Reply:
The only things I found to tease you is a discontinuity of antialiasing quality and some bicubic interpolation glitches. However you could easily fool some one and make them pass for JPG artifacts ... hum?! who said I'm an ass ?

Maybe you could elaborate on the jpg statement. Do you mean I should you png?
---------------

Thanks alot for the CSS trick, gonna save me some headaches in the future.
Anyway please if you have any thoughts please share them, I LOVE TO LEARN!

[This message has been edited by buddylee (edited 10-13-2003).]

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 10-13-2003 16:59

The real benefits of Math.min() and Math.max() here are that they "saturates" the coordinate of the ruler line. Since you only have one object in movement, the speed is far from being a problem. Nonetheless my implementation is faster than your previous one, but only because I've removed 2 "parseInt(document.getElementById("site").style.top)".

Here comes a picture to illustrate my words about bicubic interpolation glitches :

I didn't meant that you should use another format, but that though your images have a vectorial look, it clearly shows that you did them in bitmap. The distortions you've applied brought some bicubic interpolation glitches the non-initiated people may take for some JPG compression artifacts. If you had done your images in Illustrator, or with the Pen Tool or the Custom Shape Tool you wouldn't have those glitches at all. Who said I'm an ass ? again!

You could also center the main DIV with CSS, but you'd have to retrieve the height of the window in the doMouseMove() function.

Mathieu "POÏ" HENRI

buddylee
Bipolar (III) Inmate

From: Kennesaw, GA - USA
Insane since: Oct 2003

posted 10-13-2003 17:33

Thanks again for all your help poi. And you are an ass

I will delay your message to my graphic designer. I only do the coding for the site, we are a deuo

[This message has been edited by buddylee (edited 10-13-2003).]