Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthornein
    • CommentTimeJan 13th 2008
     permalink
    Hi everyone,

    I am very interested in figuring out what this piece of javascript is called. You can find it at http://www.iswirl.com/ and I am referring to when you click login at the top right a slider bar comes down to display more information.

    You can find another example of it here: http://www.toggle.uk.com/ and access it by clicking clients in the top right corner.

    I was thinking it was a mootools app but I am having trouble tracking it down, any help would be great!

    Thanks,

    James
  1.  permalink
    Yes, that looks like mootools. You could probably do it using the slide effect.
    • CommentAuthorvuurvosje
    • CommentTimeJan 14th 2008 edited
     permalink
    At dynamicdrive they have a very simple script that seems to do the trick.

    It is called animated collapsible div and it can be found here.
  2.  permalink
    Hi there,

    This effect is very simple and can be done with or without js framework. The whole magic is by changing the height of the div from 0 to X, where X is the desired height and then again from X to 0 in order to hide it. Both sites listed in your post are using a little more advanced techniques like fading during the slide.


    http://www.toggle.uk.com/ are using jQuery as a js framework and a slideDown plugin. They are using a function named toggleIt() which can be found here: http://www.toggle.uk.com/admin/jscript/public.js.php?s=home />
    http://www.iswirl.com/ are using both MooTools (which I love as a js lib) and Prototype.js, but for the slide, they use toggle() method from mootools lib with Fx.Combo(). You can view the code here:
    http://www.iswirl.com/home/js/moo_002.js />
    Also you might want to take a look at:
    http://docs.mootools.net/Effects/Fx-Slide.js#Fx.Slide.toggle />
    :)
    • CommentAuthorkylesteed
    • CommentTimeJan 21st 2008
     permalink
    I'm having trouble trying to incorporate the "toggle" effect into a website I'm working on. Can anyone help with the way I need to write my js function. I'm still learning javascript, so bear with me please. Also, I've already visited the moo tools website and downloaded the .js file. I just can't seem to figure out how to make it work.

    Thanks.
Add your comments
    Username Password
  • Format comments as (Help)