SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jun 2005
    Location
    Germany
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Login Fade In like on ****.com?

    If you click on "Login" when you are on ****.com (diigg) the Login form fades in at the top. The Code:

    Login Form (hidden, fades in when Login is clicked)
    Code:
    <div id="login-form" style="display:none;">
     <form action="/login" id="side-login" method="post">
      <label for="side-username">Username:</label>
      <input type="text" name="side-username" id="side-username" size="15" tabindex="1" />
      <label for="side-password">Password:</label>
    
      <input type="password" name="side-password" id="side-password" size="15" tabindex="2" />
      <label for="side-persistent">Remember Me?</label><input type="checkbox" name="side-persistent" id="side-persistent" tabindex="3"/>
      <input type="submit" value="Sign In" class="log2" tabindex="4" />
      <input type="hidden" name="processlogin" value="1" />
     </form>
    </div>
    Login Click Event
    Code:
    <a href="/login" onclick="return(toggleLogin())">Login</a>
    JS for toggleLogin() and the other stuff:
    Code:
    function unpopp(){poppDiv=$('poppDiv');if(poppDiv){poppDiv.parentNode.removeChild(poppDiv);poppDiv=false;}}
    function popp(id,text){if($('lbContent')){valid.deactivate();}
    function toggleDisclosureWidget(id){var div=document.getElementById(id);if(div.className=='slide-show'){div.className='slide-hide';}else{div.className='slide-show';}
    return(false);}
    function tdw(id){return(toggleDisclosureWidget(id));}
    function toggleLogin(){unpopp();toggleDisclosureWidget('login-form');return(false);}
    However, when I try exactly that code on some HTML page with

    Code:
    <script src="pathtojscode.js" type="text/javascript"></script>
    in the header I just get this error:

    Error: $ is not defined
    Source File: pathtojscode.js
    (Refering to this: unpopp(){poppDiv=$('poppDiv'))

    What am I doing wrong or what do I miss? Thanks!

  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)
    $ is a function that comes with Prototype (a javascript library) which is a shortened version of document.getElementById(). If you look at the javascript, you'll see that it looks for divs with ID 'poppDiv' and 'lbContent', so your HTML or the JS will need changing to use the right IDs.

    Replace $ with document.getElementById.

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2005
    Location
    Germany
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    $ is a function that comes with Prototype (a javascript library) which is a shortened version of document.getElementById(). If you look at the javascript, you'll see that it looks for divs with ID 'poppDiv' and 'lbContent', so your HTML or the JS will need changing to use the right IDs.

    Replace $ with document.getElementById.
    Thanks, that's the info I needed. Cheers

    reteep


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
  •