SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sliding Login Panel - jQuery query

    Hi,

    I'm loving this: Sliding Login Panel with jQuery 1.3.2

    However, I'd like it to work so the 'Close Panel' link actually appears in the #panel itself and doesn't swap/toggle with the 'Login | Register' part.

    Can anyone show me how this can be done?


    Many thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    That hidden panel is inaccessible with JavaScript off, making this not a very good plugin, to be honest. It's worth always checking something like that before using JavaScript. It's also not easy to tab through, even with JS on.

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    Thanks for the reply.

    Unfortunately the client I'm working for *really* likes this so I'm a bit stuck I'm afraid.

    Is there an easy way to do this so I can place the Close button inside the Panel?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    As far as the JS goes, I'm no use to you, but you could relocate the close button with CSS, as it has its own class and id.

    Code:
    <a href="#" class="close" style="" id="close">Close Panel</a>
    You could place the close butt wherever you like by using that id. All the same, though, it might be confusing for users. The way it's set upówith the close btton where the open button wasóis much more intuitive.

    Undoing the toggle feature is more for the JSers, I'm afraid, among whom I'm not included.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    The script looks to be quite simple. Here's the part that handles the login/register/close part.

    Code javascript:
    // Switch buttons from "Log In | Register" to "Close Panel" on click
    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });

    The script doesn't need to duplicate the same reference, and could instead be this:

    Code:
    // Switch buttons from "Log In | Register" to "Close Panel" on click
    $("#toggle a").click(function () {
        $(this).toggle();
    });
    Aside from improvements like that though, what's the #toggle section?

    Code html4strict:
    <li id="toggle">
        <a id="open" class="open" href="#" style="display: block; ">Log In | Register</a>
        <a id="close" style="display: none; " class="close" href="#">Close Panel</a>			
    </li>

    So instead of toggling the links in the #toggle section, you can only instead toggle the close link.


    Code javascript:
    // Switch visiblility of the "Close Panel" button
    $("#close").click(function () {
        $(this).toggle();
    });

    That, along with the previously mentioned CSS adjustment, should be all you need.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks for your detailed reply.

    I've now got it working

    Went with:
    <script type="text/javascript">
    $(document).ready(function() {

    // Expand Panel
    $("#open").click(function(){
    $("div#panel").slideDown("slow");
    });

    // Switch visiblility of the "Close Panel" button
    $("#close").click(function () {
    $("div#panel").slideUp("slow");
    });

    });
    </script>
    and added:
    HTML Code:
    <a id="close" class="close" href="#">Close Panel</a>
    to the page.

    Now it works


    Thank you for your help matey.


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
  •