PDA

View Full Version : Giant cursor div gets lost when scrollbar is used



erjati
05-11-2008, 04:05 AM
The floating, mouse-following div containing the giant cursor in the page linked below works fine in FF but in IE6 it gets lost off to the right if one uses the scroll bar, not reappearing unless you scroll back to the top of the page. I haven't tested it in later versions if ie - let me know what it does.

Can anyone fix this so the div will realign with the cursor in the above situation when the pointer is back over the page?

http://www.netpositivesolutions.com/cursordemo.htm

As a second issue, I would also like the image and or div to change to a pointing hand image -really big - when the cursor is over a link. I don't know if this can be done. Anyone up to it?

Nile
05-11-2008, 04:21 AM
If you gave me a big hand to do it with, I'd be happy to do issue #2.

erjati
05-11-2008, 04:04 PM
Clap, Clap, Clap, Clap, Clap, Clap, Clap, Clap, Clap, Clap, Clap..... lol

Thanks for your offer. Here's what i have:

http://www.netpositivesolutions.com/cursorhandwhitelarge.gif

http://www.netpositivesolutions.com/cursorhandwhitelarge.gif

Nile
05-11-2008, 04:05 PM
http://www.netpositivesolutions.com/cursorhandwhitelarge.gif
-Cannot be found

erjati
05-11-2008, 04:08 PM
It's there now. sorry, beat me to the upload....

Nile
05-11-2008, 04:33 PM
Well, there's 2 ways that I know of on how to do this, and 1 way that works, but its time consuming.
You go in everysingle link and add:

onMouseOver="document.getElementById('divCursor').innerHTML='<img src=\'http://www.netpositivesolutions.com/cursorhandwhitelarge.gif\' />';
onMouseOut="document.getElementById('divCursor').innerHTML='<img src=\'http://www.netpositivesolutions.com/curbigblack.gif\' />';

erjati
05-11-2008, 05:39 PM
needed

erjati
05-11-2008, 06:47 PM
That would work, but I'm using Joomla and the links are generated dynamically from a database, not hard coded into the page. I can't even insert those lines into the db.

You haven't mentioned the second way yet.

I'm wondering if somehow css can be used. I have one application of hiding a div but not conditionally. it reads:

div.idnameofdiv { display:none; }

I thought if i have both cursor divs following the mouse, one invisible and the other showing, then when on any thing that uses the link signifier "a" the visibility would switch on the two divs. I know with css I can change the cursor when the mouse is over a link. The trick will be to make it change the visibility of the div as well. Unfortunately, cursors can't be much bigger than they already are. I tried a large custom made cursor and it was shrunk back down by the browser.

Is there a way in a pagewide javascript to have one mouse-following div disappear when the pointer is over a link, at the same time making the other visible?

erjati
05-14-2008, 01:14 AM
Thanks, but where in the code do I put it? I tried a few spots and it didn't work. The giant cursor div still gets lost off to the right if i use the right scroll bar.