Smooth Scrolling Hidden DIV Tags in HTML & Web Development

Greetings,

I’ve got about 6 different websites I am in the midst of launching and more recently I’ve got one that I am working on where I had the desire to display a certain amount of data in a div tag, say 10 lines, and then I had 3 or 4 similar div tags that I wanted to scroll to and display them as well.  The traditional scrollbars that display in IE or Firefox just didn’t look good on the homepage and quite frankly I didn’t want them on the side, after much searching I came across this blog: http://elia.wordpress.com/2007/01/18/overflow-smooth-scroll-with-scriptaculous/.  I actually found that using the Effect.MoveTo post is more effective and smooth than the Effect.Scroll function of script.aculo.us.

It’s quite often that I find myself searching the Internet for clues and hints and tips and I figure the more information that can be placed out there, the better.  Not to mention that linking back to the blog that helped me, might help you too.

I still called the javascript function MoveTo from the onclick action but changed the Effect.Scroll to Effect.MoveTo posted further down.  So, my code looks like this:

[html]…

[script type=”text/javascript” charset=”utf-8″]
function moveTo(container, element){
Position.prepare();
container_y = Position.cumulativeOffset($(container))[1]
element_y = Position.cumulativeOffset($(element))[1]
new Effect.MoveTo(container, {x:0, y:(element_y-container_y)});
return false;
}
</script>
[/head]

and then in the body…

<a href=”#” mce_href=”#” onclick=”moveTo(document.getElementById(‘container’), document.getElementById(‘element’)); return false;”>
<img src=”images/arrows/down001.png” mce_src=”images/arrows/down001.png” style=”border:none” />

</a>

container refers to the div tag that would have the element nested inside of it.

I then added the Effect.MoveTo code to the effects.js file of scriptaculous:

Effect.MoveTo = Class.create();
Object.extend(Object.extend(Effect.MoveTo.prototype, Effect.Base.prototype), {
initialize: function(element) {
this.element = $(element);
var options = Object.extend({
x: 0,
y: 0,
to_element: null,
mode: ‘absolute’
} , arguments[1] || {} );
this.start(options);
},
setup: function() {
if (this.options.continuous && !this.element._ext ) {
this.element.cleanWhitespace();
this.element._ext=true;
this.element.appendChild(this.element.firstChild);
}

this.originalLeft=this.element.scrollLeft;
this.originalTop=this.element.scrollTop;

if (this.options.to_element) {
toElement=$(this.options.to_element)
container_dims=this.element.getDimensions()
to_element_dims=toElement.getDimensions()
Position.prepare();
container_x = Position.cumulativeOffset(this.element)[0]
element_x = Position.cumulativeOffset(toElement)[0]
container_y = Position.cumulativeOffset(this.element)[1]
element_y = Position.cumulativeOffset(toElement)[1]
this.options.x=this.options.x+element_x-container_x-(container_dims.width/2 – to_element_dims.width/2)
this.options.y=this.options.y+element_y-container_y-(container_dims.height/2 – to_element_dims.height/2)
}

if(this.options.mode == ‘absolute’) {
this.options.x -= this.originalLeft;
this.options.y -= this.originalTop;
} else {

}

},
update: function(position) {
this.element.scrollLeft = this.options.x * position + this.originalLeft;
this.element.scrollTop = this.options.y * position + this.originalTop;
}
});

It sounds like a lot, and it was a lot of research for what I was looking to successfully do.  But in the end, it’s quite simple.  Post or shoot me an email if you need some help.  I’ll post the link to the website once I launch it.

Good Day!

Mike

, , , , , ,

No comments yet.

Powered by WordPress. Designed by Woo Themes