Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

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

3stripe3stripe ✭✭
edited June 2006 in Vanilla 1.0 Help
'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...
«1

Comments

  • anyone?
  • 3stripe3stripe ✭✭
    edited 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)
  • Put quotes around the element id:

    butHome.onRelease = function() { getURL("javascript:ScrollLinks.scroll.scrollTo('home');"); };
  • Sweeeeeeeeet..... shoulda tried that already really, thanks.

    Any ideas why #false is appearing at the end of the url whenever I click a link?
  • Possibly. Try this:
    butHome.onRelease = function() { getURL("javascript:void(0);ScrollLinks.scroll.scrollTo('home');"); };
  • 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; } }
  • 3stripe3stripe ✭✭
    edited 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)
  • 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.
  • Sorry dude, I'm on work time here (it's 12pm!),very much appreciated - owe ya one!
  • edited 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.
  • Cool... Got a working demo of it anywhere Mr Jazzman?
  • 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.
  • 3stripe3stripe ✭✭
    edited 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]);)
  • Well, it should work for opera. Perhaps an opera user can confirm?
  • Just tested on Opera 8.02 Mac - it's a no go.
  • Hmm. Unfortunately, I just ran into that "omg-it's-four-in-the-morning" problem again, so I'll investigate tomorrow.
  • lechlech Chicagoland
    I am really starting to hate all things opera from this latest little markup project of mine :/
  • 3stripe3stripe ✭✭
    edited 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?
  • 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.
  • hey 3stripe have i've tried it with the latest opera beta and it seems to work fine. i am also on a mac.
This discussion has been closed.