SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member CaptainNoob's Avatar
    Join Date
    Mar 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Effect.Opacity on Class not on ID, is this possible? Scriptaculous

    <ul id="menu">
    <li id="nav_home" class="fade-in"><a href="/">Home</a></li>
    <li id="nav_archives"><a href="/archives">Archives</a></li>
    <li id="nav_contact" class="fade-in"><a href="/contact">Contact Me</a></li>
    <li id="nav_google"><a href="http://google.com" rel="external">Google</a></li>
    </ul>

    -----------
    <script type="text/javascript" charset="utf-8">

    // -> Face in the li's with a class name fade-in
    new Effect.Opacity('.fade-in', { from: 0, to: 1, duration: 1.5 });

    </script>

    -----

    Hello,
    I was wondering if it is possible to trigger this effect with a class name rather than an ID? In looking at the wiki I do not see a way to do so.

    I have tried this
    new Effect.Opacity$$('.fade-in', { from: 0, to: 1, duration: 1.5 });


    Thanks for your help.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The first block of javascript is based on the class "fade-in". Please be a bit more explicit in what you want to do. Also use the code highlighting and if you have a link to a live example that would help a lot.

  3. #3
    SitePoint Member CaptainNoob's Avatar
    Join Date
    Mar 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <ul id="menu">
    <li id="nav_home" class="fade-in"><a href="/">Home</a></li>
    <li id="nav_archives"><a href="/archives">Archives</a></li>
    <li id="nav_contact" class="fade-in"><a href="/contact">Contact Me</a></li>
    <li id="nav_google"><a href="http://google.com" rel="external">Google</a></li>
    </ul>

    -----------
    Code JavaScript:
     
    // -> Fade in the li's with a class name fade-in
    new Effect.Opacity('.fade-in', { from: 0, to: 1, duration: 1.5 });

    -----

    OK,
    Basically I am trying to have the li's with the class "fade-in" change opacity when the page is loaded. I am just doing this as a test to see if scriptaculous allows you to use effects on a class name rather than an ID. I could see having section headers with a class name "fade-in" do just that on a page.

    I know with javascript and scriptaculous you need to have a unique ID name. But that could be annoying to write a function for each section throughout a site.

    The above is just an example really.

    The basic question is: Can scriptaculous run effects on a class just as it run one on an ID? If so, how would I do that.

    Thanks


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •