Sorry... meant to add duration and transition options in there for
you:
<style type="text/css">
#Container {
width:200em;
height:200em;
background: #666;
position: relative;
}
#Move {
width: 15em;
height: 15em;
background: #ccc;
}
#Position {
position: fixed;
top: 0;
right:0;
</style>
<div id="Container">
<div id="Fixie">
This element stays put.
</div>
</div>
<script language="javascript">
var Fixie = new Class({
Implements: [Events, Options],
options: {
top: 0,
left: 0,
duration:250,
transition:'linear',
onStart: $empty,
onUpdate: $empty
},
initialize: function(el,options) {
this.el = $(el);
this.el.set('morph',{
'duration':this.options.duration,
'transition':this.options.transition,
'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('Fixie');
</script>
On Sep 20, 2:33 pm, "Ryan J. Salva" <[EMAIL PROTECTED]> wrote:
> 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
