View Full Version : Sliding inner div windows

10-07-2008, 07:44 PM
Hi there, I am a long time server side and app coder, now getting into the wonderful world of javascript.

I hope to be of more use to the forum in future but for now the reason I found here is, I have a problem with my code and I am just after a bit of advice on if I have gone about it the wrong way.

I was asked for an unusual navigation system for a site for a customer and it ended up being a div of fixed width but variable height inside a sized width and height div with the style set to: overflow:hidden;
So no scrollbar for the longer inner content.
I have a mouse over event on up and down arrows to literally change the inner div's .style.backgroundPosition to go -5 pixels or +5 pixels to move the content up and down the window.
I was well impressed with myself for getting it all looking nice in all browsers (FF, IE6,7 Safari, Chrome) but I am having issues with the smoothness of the inner div content moving.
The inner div content is images and text put together with fckEditor, and when I change the y pixel value by + or - 5 then I call the function again on a delay e.g.
TimerID = window.setTimeout("scrolldepthmeter(" + verticalpixels + ")", 20)
until the mouse out event cancels it.

I have trimmed the fat on the javascript function so cannot get that running any slicker on its iterations, but some browsers on different machines are slow and jerky on some of the longer content screens.
Is this the best way to go about this kind of scrolling on a mouse over of html content? I dont want to try and frig together an HTML scroll viewer in flash. I would rather keep all of this in HTML if I can.

Does anybody have any thoughts and advice on this as I dont think the customer is going to be happy with the trouble some browsers are having with it.
I can post a URL or javascript if it would help but I am not sure if I am allowed to straight away so will leave it for now.

Any help much appreciated.



10-08-2008, 05:06 PM
why not try using a js library like mootools/scriptaculous which have tried and tested solutions for your problem