You might wanna try something like this:
<style type="text/css">
#Container {
width:20em;
height:20em;
background: #666;
position: relative;
}
#Move {
width: 15em;
height: 15em;
background: #ccc;
}
</style>
<div id="Container">
<div id="Move">
move
</div>
</div>
<script language="javascript">
var Fixie = new Class({
Implements: [Events, Options],
options: {
top: 0,
left: 0,
onStart: $empty,
onUpdate: $empty
},
initialize: function(el,options) {
this.el = $(el);
this.el.set('morph',{
'duration':250,
'link':'cancel'
});
this.parent = this.el.getOffsetParent();
this.el.setStyles({
'position':'absolute',
'top': this.options.top,
'left': this.options.left
});
window.addEvents({
'resize':
this.update.bindWithEvent(this),
'scroll':
this.update.bindWithEvent(this)
});
this.fireEvent('onStart');
},
update: function() {
var parent =
this.parent.getCoordinates();
var scrollSize =
this.parent.getScrollSize();
var el =
this.el.getCoordinates(this.parent);
var scroll = window.getScroll();
var y = 0;
var x = 0;
if (scroll.y > parent.top && scroll.y <
(parent.top +
scrollSize.y - el.height)) y = scroll.y - parent.top +
this.options.top;
if (scroll.x > parent.left && scroll.x
< (parent.left +
scrollSize.x - el.width)) x = scroll.x - parent.left +
this.options.left;
this.el.morph({
'top':y,
'left':x
});
this.fireEvent('onUpdate');
}
});
var f = new Fixie('Move');
</script>
On Sep 19, 8:15 am, "Nathan White" <[EMAIL PROTECTED]> wrote:
> Your issue has to do with how css works. Without testing or seeing your code
> what I would do is attach a 'beforeStart' event to may drag objects. Just
> before it is about to be dragged I would move the object outside of the
> scroll area, reattaching it somewhere in the DOM but at the same time
> calculating the position so I can position it exactly where it was at. This
> bring up other issues. 1. When you move it out of the scrollarea it will
> effectively loose its position. So you could do something with clone.
>
> On Fri, Sep 19, 2008 at 8:43 AM, Paul Spencer <[EMAIL PROTECTED]> wrote:
>
> > Here's a crap example of keeping the element on the page scrolling in both
> > directions. I suggest you start from here and add whatever fancy stuff you
> > want for sliding it around, delaying, offsetting etc.
>
> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> > "http://www.w3.org/TR/html4/strict.dtd";>
> > <html>
> > <head>
> > <title></title>
> > <script src="mootools-1.2/mootools-1.2-core-yc.js"
> > type="text/javascript" charset="utf-8"></script>
> > <script type="text/javascript" charset="utf-8">
> > window.addEvent('scroll', function(){
> > var coords = $('floater').getCoordinates();
> > var pageSize = window.getSize();
> > var pageScroll = window.getScroll();
> > if (coords.top < pageScroll.y) {
> > $('floater').setStyle('top', pageScroll.y);
> > }
> > if (coords.bottom > pageScroll.y+pageSize.y) {
> > $('floater').setStyle('top',
> > pageScroll.y+pageSize.y-coords.height);
> > }
> > });
> > </script>
> > </head>
> > <body>
> > <div style="height: 3000px;"></div>
> > <div id="floater" style="position: absolute; right: 0px; top: 0px;
> > width: 50px; height: 50px; background-color: red"></div>
> > </body>
> > </html>
>
> > On 19-Sep-08, at 7:12 AM, Tetsuo wrote:
>
> >> I've seen only 1 or 2 examples of fixing an element onto a page using
> >> MooTools, making the element scroll with the window, or a position
> >> relative to the window, as the page is scrolled up and down. This is
> >> the most basic example I can find:
>
> >> window.addEvent('scroll', function(){
> >> $('id-name').setStyle('top', Window.getScrollTop()+'px');
> >> });
>
> >> The problem is I'd like add effects so that, for instance, there is a
> >> delay on the element scrolling with the window using Transitions, and
> >> also the ability to specify the duration on this.
>
> >> Also, I'd like to start the event only when the element "hits" the
> >> window pane, rather than always being stuck to the browser window.
>
> >> Basically, I want this (see URL), but in MooTools, not JQuery!:
> >>http://kitchen.net-perspective.com/open-source/scroll-follow/
>
> >> Any idea's appreciated
> >> Thanks
