View Full Version : Vertically Floating Layer
Shirohagen
03-10-2003, 02:06 PM
Hi Everyone
I am trying to build a site currently which I need your help on.
I want to create a small layer on the left hand side of the screen which will hold the navigation links for the site. The thing is that I want it to float smoothly up and down level with the user's mouse pointer. I can't use Flash which I am confident with as the mouse would not be recognised outside the boundary of the Flash movie. I thought Javascript would be the answer.
I have seen a lot of 'mouse trail' scripts and wondered if these might be the answer, I just want to constrain the motion to purely vertical along the left edge of the screen (or a slight editable gap). Also, the nav layer must stop once the mouse enters it so the user can move up and down within it to click links. Really I want the motion to be as smooth as possible, some scripts I have seen are pretty jerky, I have also seen some with an 'elastic' effect which might be cool.
Basically can anyone help with this? Perhaps there is a script I can modify or someone could talk me through it. I'm not a Javascript programmer, and use Dreamweaver on a Mac so don't often get into the coding side but would love to gain confidence with it!
Cheers!
10 minutes from scrap
<script>
function trackMouse(menuId){
// VAR declaration
menu = document.getElementById(menuId);
x = parseInt(event.x);
y = parseInt(event.y);
menuLeft = parseInt(menu.offsetLeft);
menuTop = parseInt(menu.offsetTop);
menuHeight = parseInt(menu.offsetHeight);
menuWidth = parseInt(menu.offsetWidth);
scrollX = parseInt(window.document.body.scrollLeft);
scrollY = parseInt(window.document.body.scrollTop);
windowHeight = window.document.body.clientHeight;
windowWidth = window.document.body.clientWidth;
// IF MOUSE IS OVER THE MENU, BETTER NOT MOVE IT
// SO THE USER CAN CLICK ON THE LINKS =)
if (( y > menuTop ) && ( y < ( menuTop + menuHeight ))) return;
gotoTop = y;
// Check if mouse is under the menu
if (y >= (menuTop+menuHeight)) gotoTop = y - menuHeight;
// Make sure the menu doesn't go under the bottom of the window
if (gotoTop > (windowHeight - menuHeight)) gotoTop = windowHeight - menuHeight;
// Make sure the menu doesn't go above the top of the window
if (gotoTop < 0) gotoTop = 0;
// Take the vertical scroll into account
gotoTop += scrollY;
// And finally, move the menu into the right place =)
menu.style.top = gotoTop;
}
</script>
It's not a SUPER SMOOTH function, like, no acceleration and stuff. But it works. How to use it:
1- Copy paste the script to your page
2- Give your menu an ID
3- Call this function on the body:
<body ... onmousemove="trackMouse('menuID')">...</body>
4- enjoy =)
Basically, when you move the mouse over the top of the menu, the menu follows up. when the mouse is under the bottom of the menu, the menu follows down. when the mouse is at the same height as the menu, the menu doesnt move so the user can click the buttons. Which is sort of the purpose of a menu =).
hmm, just spotted a couple of issues regarding scrolling... well, will work on them as soon as I get back from the doctor =P. Just use if for the time being on a non-scrolling page ^_^;
Shirohagen
03-10-2003, 03:24 PM
Wow! That's really great, thanks!
I don't intend the page to scroll, but it is more than possible that it may end up doing so. Also, the layer floats really well downwards but tends to stick more moving upwards, why might this be?
Basically this is exactly what I was after, and I think I can even see how it is working! I really need to read up on the old Javascript as I'm starting to see how powerful it is. Maybe one day I will be posting some hyper-useful script on here to help other people out...
...maybe.
Well, thanks again, and don't hesitate to develop it - if you feel like doing so I would be grateful for any developments.
I will post the URL up when the site gets a bit further in development.
:-)
www.richard-holt.com
www.measuretwicecutonce.co.uk
Shirohagen
03-10-2003, 10:46 PM
I have been playing around with the webpage and your script and there is a small issue with the resizing of the screen.
It's fine when the screen is stretched, but if it is then shrunk again, vertical scroll bars appear even though there is no content to scroll.
It's only a small issue, but I wondered what you made of it. I will be able to post the page itself up tomorrow evening for you to see if it's my part of the HTML which has caused it (It probably is)
Many thanks though - I wish I could just russle up a solution to these things i 10 minutes!
Cheers
Shirohagen
03-11-2003, 10:53 PM
Hi
I have uploaded the page as promised to:
www.richard-holt.com/civvies
There's nothing much on it yet, but you can see basically what I'm trying to do. The nav layer works really well, any ideas on the resizing of the screen or maybe an 'elastic' motion? I thought that perhaps a line to tell the page to refesh when it is resized. Have a look at my source code - There is already a similar Netscape fix in there which I thought I could amend, but have had no luck. I also altered the vertical area so the nav layer butts up to the border rather than the absolute top and bottom of the screen.
Well, the ultimate aim of the site is to design (and maybe sell) some funky T-Shirts, so the nav layer is a kind of clothing label effect. Let me know what you think about how it's working, it's not for a client, more of a self motivational exercise between me and a few fellow designers. I am viewing it with IE 5.2 on Mac OSX 10.1.5...
Cheers.
Richard
www.richard-holt.com
www.measuretwicecutonce.co.uk
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.