Comments on: CSS: Position-x and Position-y

By: PD

PD — Wed, 21 Sep 2011 20:24:20 +0000

I’m trying to integrate with jQuery, I’ve tried 1.4 w/out luck. When I link the jQuery Lib none move in the allowed direction. Do you know if this is compatible with other versions of jQuery?

Thanks
PD

By: Mateng, TYPO3 Developer Cologne

Mateng, TYPO3 Developer Cologne — Thu, 11 Aug 2011 12:55:02 +0000

This looks nice – but as my project is depending on jQuery: Is there an alternative method without Mootools?

By: tatarao mylipalli

tatarao mylipalli — Thu, 07 Jul 2011 04:49:40 +0000

Hi Ricky,
The demo is so nice and its working fine in IE browser and the events of rad grid control also fired, but in firefox and chrome rad grid control events are not fired. please suggest me is their any modification to work in firefox and chrome.
Thanks.

By: Reinhard

Reinhard — Thu, 09 Jun 2011 16:57:03 +0000

Looks great and is exactly the problem I would like to solve, i.e. fixed x and absolute y pos., but I am not experienced enough to use your code. I want to scroll a widget element in WP Theme Weaver. Any directions how and whether your solution can be applied are very much appreciated.

By: Philip Dahl

Philip Dahl — Sun, 10 Apr 2011 17:58:59 +0000

Oh man I should have looked for this years ago! Thanks for the knowledge!

By: maxmurd

maxmurd — Fri, 08 Apr 2011 17:13:17 +0000

Sorry man your demo is cool but your explaination is defintely too brief and lacks of some fundamental details; your code in demoMain is quite different, that’s why the demo works!

By: Luke

Luke — Wed, 30 Mar 2011 04:24:42 +0000

Great tutorial, thanks!

By: Cliff

Cliff — Thu, 17 Mar 2011 17:48:09 +0000

As an update, I figured out what my problem was. The jquery library does not seem to play nicely with mootools, so ensure that you’re not including both if you want to avoid an hour of frustration.

By: Cliff

Cliff — Thu, 17 Mar 2011 01:36:35 +0000

Hey Ricky,

The demo you have is awesome, but I cannot get it to work. I’ve copied the javascript you posted in the earlier comment, saved it as ScrollSpy.js, and still nothing. I also tried copying the source of your demo example and using that, but that doesn’t work either. I’d really like to get this working because it seems like easily the best fix anywhere on the internet that I can find.

Basically what I’d like to know is this: What isn’t displayed in the source of the demo page? I feel like thats probably the key to whatever I have that isn’t working.

By: admin

admin — Wed, 23 Feb 2011 21:33:25 +0000

var ScrollSpy = new Class({

/* implements */
Implements: [Options,Events],

/* options */
options: {
min: 0,
mode: ‘vertical’,
max: 0,
container: window,
onEnter: $empty,
onLeave: $empty,
onTick: $empty
},

/* initialization */
initialize: function(options) {
/* set options */
this.setOptions(options);
this.container = $(this.options.container);
this.enters = this.leaves = 0;
this.max = this.options.max;

/* fix max */
if(this.max == 0)
{
var ss = this.container.getScrollSize();
this.max = this.options.mode == ‘vertical’ ? ss.y : ss.x;
}
/* make it happen */
this.addListener();
},

/* a method that does whatever you want */
addListener: function() {
/* state trackers */
this.inside = false;
this.container.addEvent(‘scroll’,function() {
/* if it has reached the level */
var position = this.container.getScroll();
var xy = this.options.mode == ‘vertical’ ? position.y : position.x;
/* if we reach the minimum and are still below the max… */
if(xy >= this.options.min && xy <= this.max) {
/* trigger Enter event if necessary */
if(!this.inside) {
/* record as inside */
this.inside = true;
this.enters++;
/* fire enter event */
this.fireEvent(‘enter’,[position,this.enters]);
}
/* trigger the “tick”, always */
this.fireEvent(‘tick’,[position,this.inside,this.enters,this.leaves]);
}
else {
/* trigger leave */
if(this.inside)
{
this.inside = false;
this.leaves++;
this.fireEvent(‘leave’,[position,this.leaves]);
}
}
}.bind(this));
}
});