Moo.fx javascript - smooth scrolling - anyone know how to use this?

3stripe · March 2006

'ello,

i'm trying to use the moo.fx smooth scroll effect but called from within a flash movie.

usually it is applied to any anchor element automatically, but because the link is inside the flash movie (via getURL), the scroll function can't be applied to easily... it doesn't work basically

so... i'm trying to figure out how to call it from flash:

butHome.onRelease = function() {
	getURL("javascript:StartScrollFunctionHere");
}

not knowing much javascript this is puzzling me... need a way to reference the function directly but no idea how...

3stripe · March 2006

anyone?

3stripe · March 2006

kind of got it working at http://tinyurl.com/jg9ln

butHome.onRelease = function() {
	getURL("javascript:ScrollLinks.scroll.scrollTo(home);");
};

but only my first anchor link to 'home' works, the rest give me a javascript error, eg if I click the 'services' link:

Error: services is not defined

(Although I've noticed that in Safari it is only the contact link that works, instead of the home link)

a_magical_me · March 2006

Put quotes around the element id:

butHome.onRelease = function() {
    getURL("javascript:ScrollLinks.scroll.scrollTo('home');");
};

3stripe · March 2006

Sweeeeeeeeet..... shoulda tried that already really, thanks.

Any ideas why #false is appearing at the end of the url whenever I click a link?

a_magical_me · March 2006

Possibly. Try this:

butHome.onRelease = function() {
        getURL("javascript:void(0);ScrollLinks.scroll.scrollTo('home');");
};

3stripe · March 2006

So have you used this before out of interest?!?

Just tried adding the void(0), still the same problem... do I need to end the function somehow...

var ScrollLinks = {
    currentHash: false,
    start: function(){
        this.scroll = new fx.Scroll({duration: 800, onComplete: function(){ScrollLinks.end();}});
        this.allinks = document.getElementsByTagName('a');
        for (i=0; i<this.allinks.length; i++){
            var lnk = this.allinks[i];
            if ((lnk.href && lnk.href.indexOf('#') != -1) && ( (lnk.pathname == location.pathname) || ('/'+lnk.pathname == location.pathname) ) && (lnk.search == location.search)) {
                lnk.onclick = function(){
                    ScrollLinks.scroll.clearTimer();
                    this.initialHref = this.href;
                    this.initialHash = this.hash;
                    this.href = "javascript:void(0)";
                    setTimeout(function(){this.href = this.initialHref;}.bind(this), 200);
                    ScrollLinks.click(this);
                }
            }
        }
    },

    click: function(link){
        this.currentHash = link.initialHash.substr(1);
        if (this.currentHash) {
            for (j=0; j<this.allinks.length; j++){
                if (this.allinks[j].id == this.currentHash){
                    if (!window.opera) this.scroll.scrollTo(this.allinks[j]);
                    else this.scroll.scrollTo(this.allinks[j].parentNode);
                    break;
                }
            }
        }
    },

    end: function(){
        window.location.href = "#"+this.currentHash;
        this.currentHash = false;
    }
}

3stripe · March 2006

Hmm maybe I need to set currentHash to whatever link has been clicked?

(And I might have broken Opera support as well it looks like)

a_magical_me · March 2006

So have you used this before out of interest?!?

I assume you're referering to moo.fx? Nope. :-)
Though, javascript was one of the first languages I learned.

Just tried adding the void(0), still the same problem...

Well, it was worth a shot.

I'll look have a good look at the code when it's not four in the morning to see if I can figure out the problem.

3stripe · March 2006

Sorry dude, I'm on work time here (it's 12pm!),very much appreciated - owe ya one!

Jazzman · March 2006

Really nice effect!!

I've made a Vanilla extensions for it!!!

Smooth Page Jump

You'll have to change two links in your theme, because it uses the "id" and not the "name" attribute. This means you'll have to change:


<a name="pgtop">

to

<a id="pgtop">

and ofcourse for the bottom link as well.

3stripe · March 2006

Cool... Got a working demo of it anywhere Mr Jazzman?

a_magical_me · March 2006

OK. The problem lies in using the ScrollLinks object (the code in site.js) to do the scrolling. ScrollLinks was designed to automagically replace anchor links (<a href="#anchorname">link<a>) with code that uses the moo.fx smooth scrolling. By calling the ScrollLinks.scroll.scrollTo function directly, you are throwing things a bit out-of-wack.

SO, I wrote some new code for you. If you just want the smooth scrolling, add this to the page header:

<script type="text/javascript">
var scroll = new fx.Scroll({duration: 1500, transition: fx.sineOut});
</script>

And use this in your flash script:

getURL("javascript:scroll.scrollTo('home');");

OR, if you want the achor to be added to the URL (for easy bookmarking of a specific section), put this in a js file, and include it on your page:

var flashScroll =
	{
	linkid: false,
	go: function(linkid)
		{
		this.linkid = linkid;
		this.scroll.scrollTo(linkid);
		},
	scroll: new fx.Scroll({duration: 1500, transition: fx.sineOut, 
		onComplete: function()
			{
			var href = String(window.location);
			if (href.indexOf("#") != -1)
				href = href.substr(0, href.indexOf("#"));
			if (flashScroll.linkid)
				window.location = href + "#" + flashScroll.linkid;
			}
		}),
	};

And use this in your flash script:

getURL("javascript:flashScroll.go('home');");

If you use the second solution, you might want to add name="same-as-the-id" to your anchors.

3stripe · March 2006

magical_me, thanks so much buddy, that is working a treat! http://tinyurl.com/jg9ln just need to work out some kind of fix for Opera users now, I think the original script serves them up a different kind of link - is there a way to detect Opera at the start and give them the other javascript link (if (!window.opera) this.scroll.scrollTo(this.allinks[j]);)

a_magical_me · March 2006

Well, it should work for opera. Perhaps an opera user can confirm?

3stripe · March 2006

Just tested on Opera 8.02 Mac - it's a no go.

a_magical_me · March 2006

Hmm. Unfortunately, I just ran into that "omg-it's-four-in-the-morning" problem again, so I'll investigate tomorrow.

lech · March 2006

I am really starting to hate all things opera from this latest little markup project of mine :/

3stripe · June 2006

Been a while since I started this thread, but, I still can't get scrolling to work correctly for Opera 8 on a Mac. (guessing it's the same on a PC) Any Opera coders about to test http://tinyurl.com/jg9ln ? Think there might be some clues at http://www.mad4milk.net/entry/scroll-your-internal-links-smoothly but not sure where to start :O?

Axel Segebrecht · June 2006

Works nicely on FF on Mac. Looks cool too, although I can hardly read anything because my monitor is 1280x854 px and the text is tiny. I would try making the text in HTML, so people can change font-size and copy-n-paste stuff like address details. Just my 2p worth :-) I can confirm however that scrolling does not work in Opera on Mac. Funnily enough I can't even scroll using my mousewheel.

Crypt · June 2006

hey 3stripe have i've tried it with the latest opera beta and it seems to work fine. i am also on a mac.

Moo.fx javascript - smooth scrolling - anyone know how to use this?

Comments