sliding-login-panel-jquery

March 26, 2009

AJAX / Javascript, All, Forms, Freebies, jQuery, Tutorials, Wordpress

Nice & Clean Sliding Login Panel built with jQuery

Article written by Jeeremie
If you are looking to implement this sliding login panel into Wordpress, check this article: Implement A Nice & Clean JQuery Sliding Panel In Wordpress 2.7+ »

Remember my Sliding Login Panel with Mootools 1.2? Well, I thought it could have been improved both for design and functionnalities and so I did! but with jQuery this time.

sliding-login-panel-jquery

Preview/Download

View DemoDownload(68.6 KiB, 215,573 hits)

This script is distributed under the GNU General Public License version 3.

The sliding panel works like a charm in IE6, IE7, Firefox, Safari, Opera and Chrome. I didn’t test it in IE8 yet. Let me know if it does.

Please note the Login and Register forms in this demo will not work “out of the box” without a user login system pre-installed on your site (e.g. PHP/MySQL user login system)!

What’s new in this version?

  • Panel has been redesigned to be “slicker”.
  • Panel overlaps content instead of “pushing” it.
  • Images are transparent… and work in IE6! (Thanks to 24Ways for their IE PNG Fix.) This means, you can change the background color of the body as you wish or even set a background image.
  • Login button that slides the panel down changes from “Log In | Register” to “Close Panel” on click and I have added some nice rollover images:

Login button when panel in closed state:
sliding-login-panel-jquery-closed-state
Close button when panel in opened state:
sliding-login-panel-jquery-opened-state

Toggle effect (.toggle() in the javascript code below) behaves differently in jQuery than in Mootools and makes it dead simple to switch the login and close buttons on click. Here’s how I proceded:

?View Code HTML4STRICT
1
2
3
	<li id="toggle">
	<a id="open" class="open" href="#">Log In | Register</a>
	<a id="close" class="close" style="display: none;" href="#">Close Panel</a></li>

… and the javascript to expand/collapse panel and switch the buttons on click:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function() {
 
	// Expand Panel
	$("#open").click(function(){
		$("div#panel").slideDown("slow");
	});	
 
	// Collapse Panel
	$("#close").click(function(){
		$("div#panel").slideUp("slow");
	});		
 
	// Switch buttons from "Log In | Register" to "Close Panel" on click
	$("#toggle a").click(function () {
		$("#toggle a").toggle();
	});		
 
});

Check the jQuery documentation for usage.

Known Bugs

  • Rollover effect for the login button doesn’t work in IE6 because of 24Ways’ script. Knowing alpha transparency works perfectly in this browser I think we can disregard that minor bug.

Preview/Download

View DemoDownload(68.6 KiB, 215,573 hits)

How to have the panel “push” the content down?

Many people ask me how to have the panel “push” the content down instead of overlapping it so I thought I would answer it here instead of answering each comment individually. This is actually extremely easy to do so. All you have to do is open slide.css (Appearance>Editor) and find:

1
2
3
4
5
6
7
8
9
10
/* sliding panel */
#toppanel {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

Change position:absolute; for position:relative;. That’s it!

Update: Plugins for WordPress, Drupal, Joomla, Tutorials…

It seems this sliding panel has inspired many people. Some of them even have created some plugins for WordPress, Drupal…:

Enjoy!

(Note: If you created a plugin based on this script for another CMS, feel free to contact me or leave a comment below and I will add it to this list).

The Author

Article written by Jeeremie:

Hi, My Name is Jeremie Tisseau. I am a French UI/UX Designer, Event Organizer and Web Entrepreneur based in Bangkok, Thailand, since January 2009. I design beautiful and functional web and mobile apps for early stage startups.

Want to become a guest author on this blog?

629 Comments

  1. Benjamin says:

    26 Mar, 2009

    Works perfectly in IE 8 for me. Tried it on Windows 7.

  2. alex says:

    27 Mar, 2009

    Looking forward for the tutorial on how to implement this into wordpress.

  3. Dustin says:

    27 Mar, 2009

    I really hope you integrate this into PigNews, can’t wait for the tutorial for WordPress implementation, i may mess around with it while i wait for your new theme :) Amazing work as usual!

  4. Jeremie Tisseau says:

    27 Mar, 2009

    Thanks!

    I talked to Chris (the guy who’s coding PigNews theme) about this script. He told me “very nice” but didn’t tell me he would implement it yet. He is working on the backend at the moment to create options page and he is not quite ready to work on the front end yet.

  5. Mario says:

    27 Mar, 2009

    Hi, nice script! I found a bug, if you click in the very bottom of the bar, just under the login link, if you click there, the text+button swap, but the slider stays in the same position.

    BTW I want to ask something, how can I create multiple sliders in the same page without collision? I have a php that create X contacts, I want every contact to has a slider under his name. How can implement it?

    Keep the great work and thx in advance!

  6. dewey says:

    28 Mar, 2009

    Excellent! Waiting for the WP implementation. this deserves a donation ;)..

  7. Jon says:

    29 Mar, 2009

    Thanks for the script. I got it implemented today into wordpress.
    Works like a charm.

  8. Jeremie Tisseau says:

    30 Mar, 2009

    @Mario. you are right. It is because the <a> tag doesn’t fill the <li> tag. So if you click inside the <li> tag but not on the link, it switches the buttons but doesn’t expand or collapse the panel. One simple way to fix that is to add “a” to our first selector below:

    ?View Code JAVASCRIPT
    1
    2
    3
    
    $("#toggle a").click(function () {
     $("#toggle a").toggle();
    });

    I tried to check it in IE6 but it doesn’t stop crashing for no reasons so I hope it works well in this browser. I will update the code in my post.

    @Jon: yes, I saw that this weekend but did you remove the code already? Did you run into problem?

  9. Pre says:

    30 Mar, 2009

    Hey nice script, ran into an issue though. I’m trying to add ajax login verification. The script doesn’t work with the verification script I have. Do you have one that could work?

  10. fred says:

    30 Mar, 2009

    where is your code ???
    This is just 10 lines of basic jquery’script ….
    a big buzz for nothing…

    BUT , the css is beautifull .

    • Jeremie Tisseau says:

      30 Mar, 2009

      Yes, just a few lines of code. Are you disappointed? The point was not much to write a complicated jQuery application but more to create a beautiful Panel with some nice but simple effects that you can implement on your site.

      • Sam says:

        7 Apr, 2012

        Nice tutorial

  11. Berke says:

    30 Mar, 2009

    Hi.How can convert button to Turkish.Thanks

  12. Jeremie Tisseau says:

    31 Mar, 2009

    Open index.html, and replace “Login” in the Value attribute by your own turkish text:

    ?View Code HTML4STRICT
    1
    
    <input type="submit" name="submit" value="Login" class="bt_login" />

    Same for the register button. You might have to change charset to support your language:

    ?View Code HTML4STRICT
    1
    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    Turkish alphabet: charset=windows-1254 (see reference)

  13. Olivier says:

    2 Apr, 2009

    Bonjour,
    j’ai vu que pour utiliser ce (super) script, il y avait une license creative common 2.5
    pouvez-vous m’en dire plus ?
    merci

  14. taewoo says:

    3 Apr, 2009

    What about browsers with javascript not enabled? Your script doesn’t degrade gracefully

  15. Juan says:

    3 Apr, 2009

    I believe this is a great example of a case in which it is better not to use PNG-24. Your image only has a light shadow. You could save the image on Fireworks as PNG-8 with alpha transparency. That way you’ll see it perfectly on any modern browser and IE 6 will show the all the image except the light shadow (the part with alpha transparency) without the typical grey/white background. PNGFix is actually quite slow so this way you’ll be saving javascript file size and processing time.

  16. awake says:

    3 Apr, 2009

    very nice…

  17. Jon Berry says:

    4 Apr, 2009

    Love it!! Thanks so much. Works great in IE8/Vista.

  18. thom says:

    4 Apr, 2009

    thats great! thx as much!

  19. antonio says:

    6 Apr, 2009

    We are waiting the tutorial too, but please, instructions for noobs ;-)

  20. Joakim says:

    7 Apr, 2009

    Greate Stuff!

    This is one of the best Javascript/css improvment I have seen. Good locking layout, simple installation and one known javascript library. Things tends to be more and more complex nowaday, but this is a school example, simple is more!

    Keep up the good work!

    Best regards, Joakim

  21. Ayham Alsuleman says:

    7 Apr, 2009

    Great Brilliant

  22. anyup says:

    7 Apr, 2009

    thinks for share

  23. Jeremie Tisseau says:

    7 Apr, 2009

    Thanks guys!

    @Antonio, I didn’t post the tutorial last week as promised because I was trying to turn this script into a WordPress plugin but, not being an experienced PHP developer, it proved to be more difficult than I thought. I will have a look at the plugin later and write the article today. The tutorial will be as easy as 1,2,3. ;)

    @Joakim: Thanks! I always try to optimize my scripts whenever I can.

  24. Jeremie Tisseau says:

    7 Apr, 2009

    @Juan, Sorry, I forgot to answer you. First, my images are PNG-32, not PNG-24. Second, I tried PNG-8 with alpha transparency but shadow under the tab turned to be black and lost transparency in IE. Besides, gradient was really ugly. If you know a way to keep transparency with PNG-8 in IE without any fix, let me know.

  25. john says:

    7 Apr, 2009

    Great stuff here ! Does anyone know a good login script ? I use access_user right now, but as most php/mysql login sripts it can only be used to protect the whole page and there is no way to show content to registered users etc.. Can´t use a CMS.

  26. Gençay says:

    7 Apr, 2009

    Yes, thanks for lesson.

  27. JN0117 says:

    8 Apr, 2009

    Is there a way to make this push down the page(like the old script for mootools)?

    I have an issue with this script dropping down under the flash on my page. Tried using a z-index to fix this but I was unsuccessful.

    Nevertheless, I still need it to push down the page. Any ideas?
    Thanks

    • Jeremie Tisseau says:

      8 Apr, 2009

      @JN0117, To “push” the content down, change the position property to “relative” for the toppanel ID:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      
      #toppanel {
          /*position: absolute; */ /*Panel will overlap  content */
          position: relative; /*Panel will "push" the content  down */
          top: 0;
          width: 100%;
          z-index: 999;
          text-align: center;
          margin-left: auto;
          margin-right: auto;
      }
  28. John says:

    8 Apr, 2009

    Just mirroring taewoo’s concerns, is there any way of making the script degrade gracefully?

    I’m not the best at Javascript by a long shot, but could it be possible to have the ‘Login/Regsiter’ link to a login page if Javascript is disabled but toggle the slider if Javascript is enabled.

    The only way I could think this might work is if you assign a href value of the login page as default, then use jQuery to change this once the page is loaded.

    Just a theoretical approach, whether or not it would work, I was hoping you could tell me.

    Great script though, keep up the good work.

    John

  29. plisvb says:

    8 Apr, 2009

    Very Nice Script,

    I have a question though:

    Does the panel have to be on the top of the page, I would like to incorporate the script into my current design below my main navigation. Everything works fine however, when I click to open the panel, it always forces the browser to jump to the top of the page first.

    Anyone have an idea???

    Thanks in advance

    • Jeremie Tisseau says:

      9 Apr, 2009

      @plisvb, you can place the panel wherever you want but you will have to change the #toppanel position property to “relative” in your css (see my comment above for code).

      You can keep “position:absolute;” if you want the panel to overlap the content but in that case you will have to add “position:relative;” to your container. For example, if you want to display your panel within <div id=”content”> … </div>, then your CSS code has to be something like this:

      1
      
      #content{position:relative;}

      Browser jump to top because we set the link location to href=”#”:

      ?View Code HTML4STRICT
      1
      2
      3
      4
      
      <li id="toggle">
       <a id="open" class="open" href="#" rel="nofollow">Log In | Register</a>
       <a id="close" style="display: none;" class="close" href="#" rel="nofollow">Close Panel</a>			
      </li>

      Write href=”#content” instead and it will jump to the content.

      • anna haener says:

        6 Jun, 2011

        OR, just remove the href=”#” and set style=”cursor:pointer”, like this you got your “hand cursor” and NO jumping at all…

  30. MissionSix says:

    9 Apr, 2009

    @John

    You wouldn’t have to change the href value… you can have your onclick event, which is essentially what the jquery is doing, return false. When a javascript returns false to an onclick event, the link is not followed.

    <a href=”link” rel=”nofollow”>don’t link me</a>

    i’m not exactly sure how to do this in jQuery, but its definitely possible.

  31. David says:

    9 Apr, 2009

    Great stuff. However, it’s not working in IE8/Windows 2003.
    Has anyone tried it if it’s working on IE8/XP?

    Thanks.

    • Jeremie Tisseau says:

      9 Apr, 2009

      Wow! Still some people use Windows 2003? ;)

      It works perfectly in IE8/XP.

  32. David says:

    9 Apr, 2009

    Update to my comment.

    Sorry please ignore my previous post.
    It’s working great with IE8.

    I wasn’t set the security stuff correct.

    Sorry my friend.

    David

  33. ChevronX says:

    9 Apr, 2009

    I wonder how hard would this be to put it into Doku or Mediawiki.

  34. Linda Kelson says:

    9 Apr, 2009

    Great script… thanks.
    Check out: jQueryBasics.com
    http://www.jquerybasics.com

  35. plisvb says:

    10 Apr, 2009

    Thank you for this Jeremie Tisseau

  36. Matt says:

    12 Apr, 2009

    I tried to make it stick to the head even when i scroll but couldn’t manage. anyone, help please

  37. flo says:

    13 Apr, 2009

    Bonsoir, je vous remercie pour ce script sympathique, mais j’ai du mal à l’installer sur ma DB pour un site wordpress. Pourrait tu m’indiquer d’avantages ?
    Merci bien.

    • Jeremie Tisseau says:

      13 Apr, 2009

      Je ne vais pas pouvoir t’aider si tu m’en dit pas plus ou si tu ne me montres pas un exemple en ligne.

  38. Johnny5 says:

    14 Apr, 2009

    Very nice article!

  39. Kim Alsgaard says:

    14 Apr, 2009

    This is great!

    I am currently developing a new site for our project, and this fits in perfectly. Easy to use “out-of-the-box”.

    Thanks!

  40. Graeme says:

    14 Apr, 2009

    How difficult would this be to make using the prototype framework?

  41. S. Muralikrishna says:

    15 Apr, 2009

    Thanks a ton, i was waiting for this for a long time

  42. Web Design Quote says:

    15 Apr, 2009

    Great script, I tried it and it looks nice. I’m trying to do some modifications though, lets see what I can come up with.

  43. Silver Firefly says:

    16 Apr, 2009

    It’s very nice but guess what? I won’t use it because it doesn’t degrade at all. There needs to be a fallback (using good ‘ole fashioned HTML and CSS) for those who have Javascript disabled (regardless of supposed stats). Good rule of thumb – don’t use Javascript in place of CSS.

  44. Silver Firefly says:

    16 Apr, 2009

    CORRECTION

    “Good rule of thumb – don’t use Javascript in place of CSS.”

    was meant to say:

    “Good rule of thumb – don’t use Javascript in place of HTML and CSS.”

  45. Jeremie Tisseau says:

    16 Apr, 2009

    I don’t agree at this point. Javascript is going to play an important role in the future. We should better encourage users to turn on their Javascript and even explain them how to do so with a short message than trying to work on some fallbacks.

    This is the code I use on this site to display a message to my readers who disabled Javascript:

    ?View Code HTML4STRICT
    1
    2
    3
    4
    
    <!-- If Javascript is disabled, display message below: -->
    <noscript>
     <p class="noscript">You will have to enable Javascript in your browser in order to view this site properly! <small>[ <a href="https://www.google.com/adsense/support/bin/answer.py?answer=12654" title="enable javascript in your browser" target="_blank" rel="nofollow">View Help!</a> ]</small></p>
    </noscript>
  46. David Pratt says:

    16 Apr, 2009

    Very nice. Have you thought about extending it so that the unused panel area could also act as an additional close trigger?

    This should do the job nicely:

    // Collapse the panel when the panel bg is clicked.
    $(“#panel”).bind(“click”,function(event){
    $(“#panel”).slideUp(“slow”);
    $(“#toggle a”).toggle();
    });
    // Prevent the panel form elements from trigging a panel close.
    $(“#panel *”).bind(“click”,function(event){
    event.stopPropagation();
    event.preventDefault();
    });

  47. Silver Firefly says:

    16 Apr, 2009

    @Jeremie Tisseau,

    I totally disagree with that because Javascript shouldn’t be required for a website to work correctly, instead it should be used to enhance a website’s functionality. A website should work without having to have Javascript enabled, including basic functionality such as logging in etc. If you have to display a message telling your visitors that they need to turn on Javascript to be able to use your website etc then your website is broken. End of.

    It’s acceptable to use Javascript if it enhances something. For example, if I applied the link nudging effect (http://davidwalsh.name/mootools-link-nudging) to my links, and a non-Javascript user was browsing my website, they would still be able to use the links. The Javascript is enhancing the links’ appearance but it isn’t required for the links to work as intended i.e. a non-Javascript user can still click on them and be taken to the destination page.

    Most people, if they have to do something to get your website to work for them, aren’t going to hang around. They’ll likely go elsewhere.

  48. Jax Newton says:

    17 Apr, 2009

    You might find the information here:
    jQueryBasics.com
    http://www.jquerybasics.com

  49. Silver Firefly says:

    18 Apr, 2009

    Someone on SitePoint confirmed that something similar to this sliding panel can be created with CSS only, which would make provisions for non-Javascript users.

    You could modify the CSS in the link below for it to look and behave almost like the jQuery sliding panel (just disable Javascript when you try the demo out).

    http://www.visibilityinherit.com/code/slide-in-demo2.php

  50. Julien says:

    19 Apr, 2009

    Hi

    Very nice job.

    I have a little problem. Is it possible to do a link in the title (like the control panel “Login | Register”), but a link which launch an other page.

    I want to put my flags for translation on it but … its not ok. I want a link to the profile too when we are log.

    Thank you for answer :)

  51. Jeremie Tisseau says:

    20 Apr, 2009

    @Silver Firefly, thanks for the link. I will have a look later. By the way, sorry for my previous comment. I totally agree with you, it is just I am really annoyed with all that talk about about script that must “degrade gracefully”. What a mouthful!

    Anyway, I still think we should tell users how to turn on their Javascript. Javascript can do much more than just enhance your pages with some cool effects and we should not be limited by just a few conservative users. My two cents. :)

    @Julien, you can add as many links as you want in the “tab”. Just add another list to the tab, like this:

    ?View Code HTML4STRICT
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    
    <!-- The tab on top -->	
    <div class="tab">
     <ul class="login">
      <li class="left">&nbsp;</li>
      <li>Hello Guest!</li>
      <li class="sep">|</li>
      <li id="toggle">
       <a id="open" class="open" href="#" rel="nofollow">Log In | Register</a>
       <a id="close" style="display: none;" class="close" href="#" rel="nofollow">Close Panel</a>			
      </li>
     
    <!-- External Link -->
      <li><a href="http://yourexternallinkhere.com" rel="nofollow">You External Link here</a></li>
    <!-- END external link -->
     
      <li class="right">&nbsp;</li>
     </ul> 
    </div> <!-- / top -->

    Did you have a look at the next article “Implement a Nice & Clean jQuery Sliding Panel in WordPress 2.7+“? If not, you should. It will help you understand how it works. Bonne chance!

  52. julien says:

    20 Apr, 2009

    hi and thx for your answer but… it doesn’t work at home…

    i can see the link when i go on mouse over but the click do nothing :(

    could you test if its the same for you plz or if i did a bad thing lol

    ty a lot

  53. Ainslie Stephens says:

    22 Apr, 2009

    Excellent job with this!

    For those asking about graceful degradation, it’s easy to achieve. As was already mentioned, you just have to set the HREF for the open link to reference a standard login page, and then add return false to the expand panel function. Actually you probably want to add it anyway to prevent unwanted page jumps.

    // Expand Panel
    $(“#open”).click(function(){
    $(“div#panel”).slideDown(“slow”);
    return false;
    });

    // Collapse Panel
    $(“#close”).click(function(){
    $(“div#panel”).slideUp(“slow”);
    return false;
    });

  54. Jeremie Tisseau says:

    22 Apr, 2009

    Thanks Stephens for the info.

  55. julien says:

    22 Apr, 2009

    y ty for info.

    i found my pb… it was a conflict with another plugin (bslink)

    i will try to correct it.

    ty again for ur job

  56. julien says:

    22 Apr, 2009

    for information, my problem was ther because there was a conflict with the plugin bslink, which have a class “tab” too.

    so i just modify the class to “tab_login” in the panel and the css file and now its ok.

    bye and ty

  57. Jeremie Tisseau says:

    23 Apr, 2009

    Glad to know you could fix it.

  58. Craig says:

    24 Apr, 2009

    First of all, thanks for this. I have my login all hooked up with Expression Engine on a test site and it’s working great.

    It seems like it should be possible given some of the earlier versions of this (the Mootools one) to have more than one tab/window, but I couldn’t find anything to help me figure this out with the jquery version.

    What I would like to do is to have a second tab next to the login tab which could be used for a “view cart” sliding panel. Currently the login tab spans the width of the container. I’m not sure if it’s my CSS skills that are lacking, my jquery, or both.

    Can you point me in the right direction?

  59. John Dorian says:

    27 Apr, 2009

    Man this sucks ! It’s overlapping all over the place, i can make that in five seconds. Lame, really lame. Bagingo !

  60. Cody says:

    27 Apr, 2009

    How do I make it so when someone submits the form, it doesn’t automatically close the panel?

  61. joe says:

    28 Apr, 2009

    Does anyone know how to make a mediabox lightwindow work when the login panel is operational. I can get the lightwindow to work when I take out the mootools12.js script for the slide in login in. But when i put it back the login window will not work. Anyone run into this problem. Thanks for everything.

  62. Derleth says:

    29 Apr, 2009

    que bonito :D y es gratis :D

    nice i love you xD

  63. Mark says:

    29 Apr, 2009

    Hi jeeremi,

    Thanks for a GREAT SCRIPT!!! :D Should be way more people like you!

    I have a question:
    Is it possible to have the menu in the bottom of the page so it “drops” up istead?

    Again thanks, a donation is comming your way. :)

    • Jeremie Tisseau says:

      30 Apr, 2009

      Thanks! You can have the menu at the bottom if you want, but it won’t be easy. First, you will have to edit the tab images and then tweak the code to make it stick at the bottom and have tab on top.

  64. Eve says:

    30 Apr, 2009

    I have tried to tweak the events triggering the slide down and up such as mouseover and mouseout but I can’t get it to work properly. The panel is blinking and rapidly slides up and down many times, it doesn’t work as smoothly as it does with click event.

    Do you know what I can do to fix it?

  65. mubarak says:

    2 May, 2009

    Amazing !!!!!!!!!!!!!!!!!!

  66. JR says:

    4 May, 2009

    again this is an awesome jquery write up… i just changed my theme and would like to implement the jquery version but with the mootools look that you created initially (and would definitely like to integrate it into the top nav bar…just like you did on this site)… any help you can throw my way would be much appreciated.

    basically i already got this (the above tutorial) working before i just couldnt figure out how to change the look to the mootools look.

    and again thanks.

  67. Phil says:

    5 May, 2009

    Is it possible to position the tab to stay in the middle of the page? I’ve got a page width of 860px and would love for the tab to stay aligned on the right of that. Any coding help would be appreciated!

  68. Dan says:

    6 May, 2009

    Crazy, I just came here to ask the same thing… I’d like to center the tab too. So far, changes to #toppanel and #panel have yielded no results.

  69. Jeremie Tisseau says:

    6 May, 2009

    An easy way would is to change the right value for .tab ul.login in slide.css:

    1
    2
    3
    4
    5
    6
    
    .tab ul.login
    ...
    /*right:150px;*/
    right:400px;
    ...
    }
  70. Phil says:

    6 May, 2009

    Not exactly what I was looking for. I’m trying to keep the login tab fixed on the right side of a wrapper (860px wide). Changing the css from right: 150px to 400px does move it over, but doesn’t keep it aligned on the right side of my wrapper. Sorry, I should have clarified this earlier. Any other suggestions?

  71. Robert says:

    6 May, 2009

    Thank you for the awesome script!

    Question:
    Is it possible to link to sections of the page without the panel eating the top portion of the page?

    Example:

    and then further down on the page…

    When I attempt this the panel remains at the top of my window, but the top portion of the page is gone and the is now at the top of the window with no way to scroll back up.

    Any help would be greatly appreciated!!

  72. Jeremie Tisseau says:

    7 May, 2009

    @Phil, I understand now. Read comment #36. If you want the tab to be on the right without a margin, set “right:0;” in the code I gave you above.

  73. Eve says:

    7 May, 2009

    I run into a little problem. I noticed that when I have other java scripts that require positioning those element are visible on the panel ! this happens with some input boxes, links with tool-tips, even paragraphs.

    This is really strange. I think that positioning of element in css is responsible for this because when I removed positioning from the element it disappeared from the panel.

    Can someone help to solve this?

  74. Mike says:

    8 May, 2009

    I was wondering, is there any way to use 2 of the sliding panels on the same page? What i’m trying to do is use one panel for a game site to hide the game server status and use the other panel to show admin functions only when logged in. I’m new to jQuery and I don’t know very much but i’m catching on. I have already tried to have two panels on one page and when clicking on panel 1, it opened panel 2 and so on.

  75. Robert says:

    8 May, 2009

    Ok, so clearly my question didn’t work as it ate the coding I inserted. How do you comment out your code on here to use examples?

    My problem is that when I create what is essentially a Table Of Contents for that page and each section has a link down to that section further down on the page, the links don’t work as they should. It scrolls down but anything above that section disappears into the top of the page and you’re unable to get back to it. Any ideas on how to stop that from happening?

  76. Thomas says:

    11 May, 2009

    Any chance this could be easily made into a Drupal module?

  77. piatrouc says:

    11 May, 2009

    I’m having major difficulties with flash in page witch should be slide over by login panel.

    Sliding panel goes under flash content no matter what – wmode is set up as transparent and z-index is higher for panel…

    any advices?

  78. Robbie says:

    11 May, 2009

    Hi, great script! I’m trying to setup the script as per my css and essentially have the entire panel go within a width restraint of 900px, center aligned to the browser window, right at the top of the page. Can somebody please tell how to achieve this? Thanks in advance

  79. Jeremie Tisseau says:

    12 May, 2009

    @piatrouc, this happens frequently with flash and I really don’t know how to fix it. Does anyone know?

    @Robbie, pls read comments.

  80. piatrouc says:

    12 May, 2009

    Actually just found the solution for Flash problem:

    wmode should be opaque (not transparent)

  81. Willem says:

    14 May, 2009

    I want to use the script the other way around: positioned at the bottom of a div and slide out to the top when I click the link. Is this possible?

  82. Adam says:

    14 May, 2009

    hello

    What about people who doesn’t have JavaScript enabled in the browsers? I think you should add some solution because now when I have disabled JavaScript I can’t login by your panel because I can’t open it without JavaScript. I think after clicking you should be run to any web page of the site where you can login in some standard login form. Is that possible? I can’t see such possibility into your demo.

  83. Robbie says:

    14 May, 2009

    Hi Jeremie Tisseau and all, I read and re-read the comments and finally figured it out with my files thanks! One final minor problem I have is that when I click on the open/close tab, the panel kind of stutters on the way down (opening) but is smooth closing back up. Do you know why this is happening and how to make it smooth upon opening and closing the tabs? I’m using php include statements and have a couple of other js scripts running on the page so I don’t know if that’s causing an issue or not.
    Thanks again!

  84. Jeremie Tisseau says:

    15 May, 2009

    @Willem, yes, everything is possible. Depends how much effort you want to put in. You will have to edit all the files and images to do so.

    @Robbie, Try to isolate the problem by deactivating other JS scripts.

  85. Willem says:

    15 May, 2009

    Maybe you can point me in to the right direction? I know how to change the images, but how to open the panel to the top instead of the bottom?

  86. Jeremie Tisseau says:

    15 May, 2009

    There’s too many things to change. That would be too long to explain it here. HTML, CSS, Javascript and images need to be edited.

    Maybe you can have a look at Mooslide. Panel can slide from bottom. It is the script I used for this sliding panel.

  87. Willem says:

    15 May, 2009

    I know I have to edit the images and CSS, but I don’t know how or what to edit in the Javascript files to make the the effect open from bottom to top of a div. In only need the setting that makes this happen.

  88. Robbie says:

    15 May, 2009

    @Jeremie Tisseau, Thanks for the tip Jeremie Tisseau however I tried deactivating the other js function which are basically called in through php include statements, but still no change in the effect. when I click on the open/close tab, the panel still stutters on the way down (opening) but is smooth closing back up. Is it something in the panel script that I need to look at?

  89. Robbie says:

    16 May, 2009

    On another note, I was reading Stephens comments #61, on a graceful degradation, but I don’t understand how when js is enabled, how will this panel work? Won’t it still just redirect the user to the HREF page specified instead of just opening the tab? Can you please clarify how to achieve this as I’ve already included the return false statements in the slide.js file.
    Thanks!

  90. Anthony says:

    16 May, 2009

    @John (Comment #29), I have been looking for a login script to accomodate this great panel and stumbled on the access_user script you’re using. I know this is a separate issue altogether, but can you please see my issues at http://www.finalwebsites.com/forums/topic/installation-help and if possible, tell me how to install the access_user script?
    Thanks!

  91. Robbie says:

    16 May, 2009

    @Jeremie Tisseau, would changing the size/width of the panel itself slow down the effect of the tabs slide function as I did change the overall width to 900px in the end?

  92. Jeremie Tisseau says:

    16 May, 2009

    Did you try to put the panel right after the Body tag and without resizing it. Try this and see if it fixes your problem. I don’t really know what to tell you if this doesn’t work.

    Won’t it still just redirect the user to the HREF page specified instead of just opening the tab?

    No, it will redirect to the HREF page specified only when javascript is disabled.

  93. Jon says:

    17 May, 2009

    My page is acting crazy with the login panel.
    When clicking on the button the action send the user to the bottom of the page. Making the user to scroll to the top of the page to view the panel.
    changing this doesn’t help.
    #content{position:relative;}

    Thanks in advanced.
    Jon.

  94. Mike says:

    17 May, 2009

    @Jon, First you have your position set to relative and in your css it seems you want the panel to overlap your content, not push it down. In the #toppanel css id set position to absolute. the #content div id is in your code, but has nothing to do with the panel itself. Its in a div under the panel just under your header.php include.

    Also why do you have multiple instances of jQuery running? I see at least 3 separate versions running within your WordPress code, 1.2.3, 1.2.6 and 1.3.2. Take the code off for the first 2 versions and then see what happens, might be a conflict.

  95. Jon says:

    17 May, 2009

    Thanks man.
    I tried that but no luck.
    I put back all the jquery scripts back in after i tried that,because it was giving me errors in other widgets.
    Yes. i wanted to push the content down.Im having no luck on it.
    still just sends me to the botom of the page.

    Any further help thanks in advanced.
    Jon.

  96. Amanda says:

    18 May, 2009

    How do I change the height of the panel?

  97. Marc says:

    19 May, 2009

    Hey guys i have a question that takes me the whole day!
    How can i open the sliding login panel out of the normal link in the main content?

    Greets

  98. Robbie says:

    19 May, 2009

    @Amanda, I believe its the slide.css file, #panel height attribute

  99. Robbie says:

    19 May, 2009

    @Jeremie Tisseau, thanks for the resizing tip, that’s what ruined the smooth transition. I specified height in pixels instead of 100% and that worked fine.

    As for the HREF issue, I have disable js and tried changing the Log In | Register to Log In | Register for example, but with/without js disabled, the tag redirects to the home.php page. Any ideas how I can fix this?

  100. Luicid says:

    22 May, 2009

    Hi !
    Thanks for this script but I saw an error :
    when we replace text “Log in | Register” By longer
    we notice that the text distorted the panel.
    So, I recommend changing


    .tab a.open, .tab a.close {
    height: 20px;
    line-height: 20px !important;
    padding-left: 30px !important;
    cursor: pointer;
    display: block;

    THIS —–> width: 100%; <——- THIS

    position: relative;

    top: 11px; ”

    By “width: auto;”

    :)

  101. Albi says:

    22 May, 2009

    Thank you for the information.
    great work

  102. Ericc says:

    28 May, 2009

    AWESOME job!
    Too bad for me that it doesn’t slide from the bottom, but great script !

  103. durand says:

    29 May, 2009

    thanks this has been a great help

  104. Simon says:

    1 Jun, 2009

    Hi, great script, but is there any way of opening the panel without using the href “#” tag because this obviously screws up the current url. For example I would love to implement it on oscommerce header file but if you try opening the panel on any page other than the homepage it simply redirects user to homepage due to the “#”?

  105. 贝库 says:

    2 Jun, 2009

    good

  106. gaurav says:

    3 Jun, 2009

    Nice script. Anyone figure out a way to have two of these on the same page?

  107. Luc says:

    4 Jun, 2009

    Great script!

    Small question though. Is it possible to submit the form when the users uses the -key on the keyboard? Now they have to use to go to the Login-button, after the Password-field is filled in. And on the Login-button they have to press to submit the form.

    Thx for a reply.

  108. Luc says:

    4 Jun, 2009

    I see that some tags were removed in my comment. Here is the complete version:

    Great script!

    Small question though. Is it possible to submit the form when the users uses the ENTER-key on the keyboard? Now they have to use TAB to go to the Login-button, after the Password-field is filled in. And on the Login-button they have to press ENTER to submit the form.

    Thx for a reply.

    • J3 says:

      31 Aug, 2012

      Did you ever figure this out? I’m having the same issue…

  109. Desmond Chee says:

    5 Jun, 2009

    hi,

    How can i change the slide down length ? Because if i put in more information, the extra info will not be show ( out of the slide down area)

    • Jeremie Tisseau says:

      5 Jun, 2009

      @Luc, WordPress removes html tags automatically. No idea about keys you talk about.
      @desmond, edit height for #panel in slide.css

  110. JJ says:

    13 Jun, 2009

    Jeremie Tisseau,

    First off, awesome work. This is hands down the best sliding panel implementation I found on the web. I found an article that covered 7, including yours and yours was the best.

    I do have one question. I had already implemented virtually the same think using jQuery, but I was having trouble getting the “tab” to over-lay the content below. In your solution it works, but when I try to replicate your solution and I set the “tab” to position: relative it displaces the content below it rather than over lay it. I cannot seem to find the difference between your example and my attempt to replicate your example.

    So, essentially, my question is what in your script causes the “tab” (ul, li, a) to overlay the content below it.

    Thanks for your help and for such a great plug-in!

  111. Jeremie Tisseau says:

    14 Jun, 2009

    If you open slide.css, you will notice the position property for #toppanel is set to absolute:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    #toppanel {
    margin-left:auto;
    margin-right:auto;
    position:absolute; /* This will cause the panel to overlay the content */
    /*position:relative;*/ /* This will push the content down */
    text-align:center;
    top:0;
    width:100%;
    z-index:999;
    }

    This causes the panel to overlay the content. But if you change it to “position:relative;” it will “push” the content down. I should add #toppanel works as a container for the panel content and tab.

    Does it help?

  112. JJ says:

    14 Jun, 2009

    I was trying to get my tabs to overlay the content below, but also to get my #toppanel to displace the content below. I achieved this by making the tab divs position: absolute. That seemed to work. Thanks again for the great post!

  113. gaurav says:

    15 Jun, 2009

    Hello,

    I am using your script on the website given above. Works great for people asking for help. Problem is, when users try to print the page, it first comes out with the Need help content, which I do not want to print. How can I fix that?

  114. Robin Henriksson says:

    16 Jun, 2009

    Hello!

    I have implemented your code and it worked fine in firefox,

    but when I check in IE (7), the panel margins left about 600-700 px and starts there?

    I cannot find the problem in my code, but when I delete the toppanel div, the whole panel go back to normal,
    besides the toggle button who doesn’t show and the background that isn’t transparent anymore.

    When I delete the div named “shadow” in my code the panel sets itself to my wrapper div, otherwise it is margined left 6-700 px like I said above.
    It’s so hard to explane, but I hope you understand.

    Otherwise I maybe can find some place to upload the whole homepage for some days and you can help me from there.

    Please Revert.

    Best Regards
    Robin Henriksson

  115. Nick says:

    16 Jun, 2009

    im wondering what login system you used for this…i tried access_user but kept coming up with errors when i tried to access its example page…

  116. Robin Henriksson says:

    16 Jun, 2009

    Hello Again!

    I haven’t found the solution yet so I post some images for the right and wrong looks.

    In Firefox, it look correctly like this:

    http://i43.tinypic.com/35baucm.jpg

    But in IE (I have IE7) it looks like this:

    http://i41.tinypic.com/2d8gnlx.jpg

    What can be the problem?

    Please help.

    Best Regards
    Robin Henriksson

  117. Andy says:

    17 Jun, 2009

    Hi

    Great script but I am trying to implement this on a site that HAS to load jquery.js?ver=1.2.6 on teh same page and unfortuntely this breaks this great script :(

    Any ideas why and might you be able to get it working with jquery.js?ver=1.2.6?

    Thanks

  118. Junaid says:

    20 Jun, 2009

    Hi,

    I have implement this on my page it’s work fine but i have some trouble kindly help me out.

    i have replaced login link with my image bar.

    After applying scripting on page when i scroll down my page the image also goes down.

    • Ben Lasfar RAMZI says:

      17 May, 2010

      Hallo,
      This espace is very good.
      Thank’s

  119. wolf says:

    22 Jun, 2009

    The script works great as long as I do not use prototype on the page ….
    Would it be fine if I used mootools instead of jquery here?
    Thanks!

  120. Robin Henriksson says:

    23 Jun, 2009

    Hello!

    I have now solved my problem with the IE center problem that I mentioned above. I had set text-align: center in Body.

    Hope this helps anybody else.

    Wolf! Try noConflict with jQuery like this after you have called jquery library:

    jQuery.noConflict();

    and you also need to change almost all $ to jQuery in your jQuery plugins. If you do not understand you can always google jquery noconflict. I use this together with prototype and it works great.

    Best Regards
    Robin Henriksson

  121. wolf says:

    24 Jun, 2009

    @Robin,

    funny -this is almost exactly the approach I took yesterday and everything works like a charm! I just replaced all instances of “$” with “jQuery” in “slide.js” and that was all that was necessary to make it work – not even calling jQuery.noConflict() anywhere at all and so far no problems with any of my plugins. If that was the case I would try”jQuery” for “$” in jQeury plugins that run into conflicts. All good so far! Thanks!

  122. Jeremie Tisseau says:

    24 Jun, 2009

    The jQuery noconflict script is really great and I wish Mootools and other AJAX libraries had something similar. That would save everyone countless hours of work.

  123. twincascos says:

    26 Jun, 2009

    I’ve turned this into a wordpress plugin.
    SuperSlider-Login http://wordpress.org/extend/plugins/superslider-login/
    It comes with an options panel, where you can place the tab at page top or side, define the animation type, speed etc. and it automatically changes language according to your site prefs.
    Includes the registration form if registration is active, etc.
    Great tutorial, thanx.

  124. Terry says:

    2 Jul, 2009

    I have installed this script on a site I’m developing. My client LOVES this! However, I just discovered a problem I don’t know how to remedy.

    In IE, I get bounced back to the home page of the site when I click on the link to slide down the panel. The panel begins to slide, then I get bounced to home. This is working beautifully in FF.

    Perhaps I have a conflict of some sort between this, mootools and Ajax search. I am running jQuery in no conflict mode. I’m not a programmer, I’ve cut and pasted each of these into the site so I don’t know how to approach this.

    Perhaps it has something to do with the #link?
    Log In | Register

    Anyone care to take a peek at this?

    http://www.reddogrun.com/index.php

    Thank you!

  125. Chris Beaman says:

    4 Jul, 2009

    Very cool. Thanks!

  126. Elvis says:

    6 Jul, 2009

    Wow, awesome. Any advice how to center the open/close tab below the panel?

  127. BinaryKitten says:

    6 Jul, 2009

    with the toggle on the link element, preference would dictate that it would be better to happen after the completion of the scroll.

  128. Shawn says:

    17 Jul, 2009

    Would someone please guide the Drupalers in the right direction for adding this to a Drupal site? I have come a long way since I first started on my site, but I still have much more to learn. If someone could at least point me in the right direction for hard coding this, and/or building a Drupal module that would be awesome.

    Thank you!

  129. kingsley says:

    18 Jul, 2009

    question

    script works but a few questions

    after a successful submit for login,
    It seems the slider still says hello guest,
    is there a way to have it say/do something else with a succesful registration or login?

  130. Mike says:

    18 Jul, 2009

    Has anyone figured out how to do 2 panels on one page?

  131. Jake Rocheleau says:

    20 Jul, 2009

    This is a great script, and thanks for posting up a demo too! I can’t stand seeing screens of a great-looking UI but having no demo to check out before following the tutorial

  132. Paul says:

    20 Jul, 2009

    Hello

    How can I set to auto focus on the username?

    Thanks!

  133. Joakim says:

    21 Jul, 2009

    Hi,

    Great script – but I am having problems with a flash that runs directly below the panel. Somehow the flash is displayed on top of the content when it slides down? Can I change the z-index or any other suggestions?

    regards, Joakim

  134. Jules says:

    23 Jul, 2009

    I love your script and got it to work without a hitch, Thank you for sharing!

    I was wondering if there was a way to for the panel to load open.

    I am hoping to be able to make it so a user won’t have to click to open the panel up again after hitting “reset pw” (you have a link I’m using a button) to gain access to the reset pw form. I would also like it to be open when the page loads after the user clicks on an email link to reset the password.

    Thanks for any insights!
    Jules

  135. Jules says:

    23 Jul, 2009

    Well Jeremie Tisseau… I finally found what was right in front of my nose the whole time!

    I just couldn’t figure out how you were hiding the panel. I kept looking for a display:none on the #panel or #toppanel and I even did a word search, though I think now for some reason I typed in hidden. My brain just wasn’t registering what was on the screen.

    Good lord, I think I’ve been sitting her too long, time for a break! LOL!

  136. Jasa Web Desain says:

    26 Jul, 2009

    it work on every browser…. very nice..

  137. Andrew says:

    27 Jul, 2009

    hey

    I trying to use this script with a tpl file, it dosent seem to work any idea?

    please help me.

  138. Shadi says:

    28 Jul, 2009

    Hello,
    I am trying to put adsense into the panel but its not appearing

  139. Andrew says:

    28 Jul, 2009

    hello in response to Joakim :

    Use the below flash code it will wk perfectly

    1.
    2.wmode=”opaque”

    Thanks.

  140. Andrew says:

    28 Jul, 2009

    1.
    2.wmode=”opaque”

    .
    .
    .
    .
    .
    .

  141. Shadi says:

    28 Jul, 2009

    Now the sliding panel when open comes over an adsense ad, all is good, except that adsense ad is not clickable anymore

  142. nuke says:

    2 Aug, 2009

    man, nice job! great!

  143. iHolyElement says:

    2 Aug, 2009

    Still cant fix it, Any help? Thanks!

  144. Oliver says:

    2 Aug, 2009

    Very Cool SCRIPT! Thank you!

  145. iHolyElement says:

    2 Aug, 2009

    Hello, I’m iHolyElement, At the moment im using this for my main page for my site. Witch you can view the Code here… http://iholyelement.org/js/jquery-latest.pack.js And it makes so those Dropdown menus/boxes on the main page to be expanded all of them without clicking on them, How do i fix this? Thanks. Not so good with Javascript/jQuery yet. If i dont reply within 30 minutes send the reply to my email… iHolyElement@live.com, Thanks!

  146. john says:

    5 Aug, 2009

    Hi nice work,

    It’s a shame that the close button doesn’t show on ie6 because of the png fix..

    if anyone knows how to combine the 24 ways png fix and the close panel button let me know…

  147. thomas says:

    6 Aug, 2009

    Yes , thanks

  148. jonners says:

    6 Aug, 2009

    This code is brilliant thanks for providing it.

  149. Ampped Aeon says:

    9 Aug, 2009

    How can i move the bar so it is at the far left and not the right? Im having a problem where internet explorer pushes it way far right out of the page?

  150. Robin Henriksson says:

    9 Aug, 2009

    Ampped Aeon,

    I do not know if it was the same problem I had, but if it is, set body text-align to left instead of center or right.

  151. 小T says:

    13 Aug, 2009

    nice work!做得真漂亮

  152. ThinkBohemian says:

    17 Aug, 2009

    There is a problem with the slide effect and jrails, did anyone else run into this, or figure out a solution?

  153. Maddin says:

    28 Aug, 2009

    Hi on my testwebsite I can see a problem with the graphics. They are not implemented correctly. Who can help me? I can give the test url!

  154. Igor Stepanov says:

    31 Aug, 2009

    I have modified this example to use in CMS ModX, which is actively used library Mootools v.1.11. Maybe someone else needs this update script. You can download this script here »

  155. Tangerois says:

    1 Sep, 2009

    This is brilliant thanks for providing it. Can i use it for wordpress?

    • Jeremie Tisseau says:

      2 Sep, 2009

      Did you read the article? This is in the last paragraph of this article.

  156. Josh says:

    3 Sep, 2009

    Hi,
    I want to write my code on LOGIN button ..dont know which LOGIN system of php/mysql u are talking about..can u please guide me to make it work?

    thanks

  157. bizamajig says:

    4 Sep, 2009

    Great work, we are excited to use your widget.

    We have a global top menu “bar” with height: 28px, and we want to add your slideDown login script to this bar.

    Our other links appearing on this menu bar are using HREF or AJAX to navigate.

    Can we alter your script/css to drop the “tab” aspect of your design, allowing us to add your Login / Register link to our menu “bar”?

    Any punchlist items (possible starting points) you might mention will be helpful for us to get started with our customization process.

    Thanks in advance ;)

  158. Ryan says:

    19 Sep, 2009

    Does anybody notice how the shadow for the tab and the background that is stretched are slightly different? Can anybody please help me fix that? I keep on seeing a darker shadow for the actual tab area compared to the line that is stretched across.

  159. Ravikumar V. says:

    22 Sep, 2009

    nice one thanks :)

  160. wxipn says:

    22 Sep, 2009

    Hello and thank you for plugin,
    A question, how is that possible as we confirm the form of connection (my form sending another page) so that the slider does not close?

  161. Luke Vear says:

    24 Sep, 2009

    Hey guys!

    If you want to center the tab change the following:

    .tab ul.login {
    display: block;
    position: relative;
    float: right;
    clear: right;
    height: 42px;
    width: auto;
    font-weight: bold;
    line-height: 42px;
    margin: 0;
    color: white;
    font-size: 80%;
    text-align: center;

    to

    .tab ul.login {
    display: block;
    position: relative;
    float: right;
    clear: right;
    height: 42px;
    width: auto;
    font-weight: bold;
    line-height: 42px;
    margin: 0;
    right: 42.5%; <——- Put this in!!!
    color: white;
    font-size: 80%;
    text-align: center;

  162. Chad says:

    26 Sep, 2009

    Can we please get the PSD for the images? Not every site has those colors :)

    • Jeremie Tisseau says:

      27 Sep, 2009

      I work with Fireworks, not photoshop. That’s why there’s no PSD is not included. I can send you the PNG though if you want to edit it in Fireworks.

  163. brierycredact says:

    28 Sep, 2009

    Thank you for great post!

  164. jerryi says:

    29 Sep, 2009

    This is brilliant thanks for providing it

  165. Kuba says:

    4 Oct, 2009

    Well,Nice job you did here with this.
    It Works gist grate,but i got a question….,im a newbie in this field and i would like to know or if someone can direct me somewere wrere i can learn. Ho to make the register and the login work.

    I have gist starded making my frist template,and ….i know only 10 % of what dreamwaver cs4 can do.

    I will apreciate if someone can direct me somewere were i can learn,or if someone can explain at least how…sould i start.
    Thank YOU.

    Im really sorry ,if i wasnt clear,my English is not so good.
    Thank You again.
    Alex

  166. PatelVadi says:

    6 Oct, 2009

    Hello,

    What code needs to change to get the sliding menu to work from left or right side of the screen. Right now it pulls down from top, but I’d like to have it pull from the left. How can I do that?

    Patel

  167. lavaper says:

    14 Oct, 2009

    I noticed that the mootools version slides the login box (and it’s contents – the login forms) from top pushing the content below down. In jquery version it just slides the tabs down and shows the login box (and it’s content – login forms).

    I’ve read about pushing solution but how to make panel contents to slide from top not just show up after tabs slide down?

  168. Ashwin Vijayakumar says:

    14 Oct, 2009

    The WP Sliding Login/Dashboard Panel is being displayed all the way at the bottom of my Wordpres 2.8.3 page (Just above the footer). Can you please help me debug this?

    I am using this theme with fixed width(690px):
    http://wpthemepark.com/themes/fallseason

  169. Diego says:

    15 Oct, 2009

    Great job! and works excellent!
    One questions, I pluged in my register/login logic, is there a way to show a “LOGGED” info onces logged in and remove the register option? or it should be redirected to an entirely different page?
    I wanted to add this in a php file as a header include for all pages, but if this logic isn’t possible it doesn’t make sense.

    Thanks!

  170. Steffen Schuler says:

    15 Oct, 2009

    Nice piece of work! Does it work with jquery 1.2.6, too? Currently, within some weframes like liferay, 1.3.x is not (yet) supported… argh!

    • Jeremie Tisseau says:

      15 Oct, 2009

      I am not sure. If you try it, let us know. Thanks

  171. lavaper says:

    16 Oct, 2009

    Jeremie Tisseau

    is there a way to make contents of the panel slide in from top like it does in mootools version?

  172. Actarus says:

    16 Oct, 2009

    Hi,

    First, what an awesome sliding panel !!!

    I have a big problem with my panel… in the content ;-)

    I try to add some styles to my form with jqTransform but nothing appears in the panel le is visible but there nothing is styled :-(

    I use this noConflict script to the slide.js:

    jQuery.noConflict();
    (function($){
    $(document).ready(function() {
    // Expand Panel
    $(“#open”).click(function(){
    $(“div#panel”).slideDown(“slow”);
    });
    // Collapse Panel
    $(“#close”).click(function(){
    $(“div#panel”).slideUp(“slow”);
    });
    // Switch buttons from “Log In | Register” to “Close Panel” on click
    $(“#toggle a”).click(function () {
    $(“#toggle a”).toggle();
    });
    })})(jQuery);

    But unfortunatelly it doesn’t work ????

    Someone could help me please ??

    Thx :-)

  173. Diego says:

    16 Oct, 2009

    Hello Jeremie Tisseau. Is this intented for only 1 page and once logged go to different sites or can I use it in an include and code it to show user information when already logged?

    thanks!

  174. Jeremie Tisseau says:

    16 Oct, 2009

    @lavaper, read comment 37 above.

    @diego, not sure to understand your question. Could you ask again?

  175. Diego says:

    17 Oct, 2009

    Hello Jeremie Tisseau,
    What I mean is, does the panel have a way or setting to recognize once your already logged.
    In that case I would add the panel as an include in all site pages.
    If not, I would add it only to the “main page” and after you login not show the panel anymore.
    Was that clearer?
    Thanks a lot!
    Diego

  176. Jeremie Tisseau says:

    17 Oct, 2009

    Yes it can. Check this article ». I explain how to implement this panel into WordPress. It will give you some clues

  177. Sarah Gooding says:

    24 Oct, 2009

    Thanks for this tutorial :) I’ve linked you from my blog at WPMU.org http://wpmu.org/7-ways-to-spice-up-your-wordpress-login/

  178. Scott says:

    27 Oct, 2009

    Thank you very much! I am going to try in implement this on http://www.proofofbrain.com, my wordpress blog. I have it working on my test setup, and hopefully can get it implemented alongside the wordpress user system and have it their in the end because i really like it.

    thanks again.

  179. Diego says:

    29 Oct, 2009

    thanks Jeremie Tisseau!
    I used that article as a guide and worked great!

  180. Pozycjonowanie Stron says:

    1 Nov, 2009

    Very nice tutorial :)

  181. Marc J says:

    3 Nov, 2009

    Is there any way this can use JQuery Easing? So that it can have a bounce or other effect as at http://nettuts.s3.amazonaws.com/041_TopPanelWithJquery/demo/index.html ?

  182. Michael says:

    3 Nov, 2009

    I know you have a lot of comments, but I wanted to give you yet another site that is using it. I’ve implemented it to work in http://www.hokietextbooks.com/ I’ve been able to implement an AJAX backend to it, which allows it to work quite flawlessly. Thanks for your work, and for building such a nice tool!

  183. matevzl says:

    5 Nov, 2009

    Simon use this for Oscommerce:

    $(document).ready(function() {

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

    });

    // Collapse Panel
    $(“#close”).click(function(){
    $(“div#panel”).slideUp(“slow”);
    });

    // Switch buttons from “Log In | Register” to “Close Panel” on click
    $(“#toggle p”).click(function () {
    $(“#toggle p”).toggle();
    });

    });

  184. dailce says:

    6 Nov, 2009

    Great work for making the mootools version Igor Stepanov :) Thanks.

  185. Marc J says:

    7 Nov, 2009

    Another quick question – is there any way the panel contents can be animated along with the tab?

    What I mean is – as it is the panel bottom / tab slides down, but the content of the panel is revealed, rather than sliding in along with the panel.

  186. Jeremie Tisseau says:

    9 Nov, 2009

    @Marc, you mean a fadeIn/Out effect for example? You can do anything you want with jQuery. Check this: API/1.3/Effects

  187. Marc J says:

    9 Nov, 2009

    No…well, kind of…I mean a slideDown along with the actual tab bottom / tabs. As it is the panel contents don’t move, they are revealed when the tab is pulled down. If the panel contents slid into view as if grouped with rest of the tab, it’d give more of a “window blind” style effect….

  188. Paul says:

    9 Nov, 2009

    I know that by now you might be familiar with this and/or this is not an option because of the drawbacks but to fix all IE6 transparency related bugs thus enabling hover effects for the close button simply use PNG8 with alpha transparency. You might get a slightly worse looking but transparent gradient or none at all but the overall transparency will be far better then in case of gifs or png8’s without alpha transparency. All other real browsers will not be affected the image will look exactly like a PNG24. The slightly worse gradient in IE6 is a minor drawback since most users of IE6 aren’t used to quality by definition. To achieve alpha transparency for PNG8 use Fireworks, Photoshop is not “familiar” with this technique.

  189. Marc J says:

    11 Nov, 2009

    Because I wasn’t explaining very well, see http://www.javascriptkit.com/script/script2/dropdownpanel.shtml – the way the content moves down along with the panel…any way to duplicate this?

  190. John Fox says:

    15 Nov, 2009

    @plisvb (#39) did you ever figure out how to keep from jumping to the top when sliding-login was called? For the life of me, I can’t figure it out.

    pls take a look at:
    http://www.marketing-playbook.com/entrepreneur-expert-series/index.php

    All the login links on this page call the script.

    • gary says:

      3 Jun, 2010

      John Fox,
      I see you have this sorted but I’m baffled, have checked you site and code but cant see how you reference the drop panel?

      From your page link –
      a style=”font-size:11px;” title=”Member login” rel=”nofollow” id=”open” class=”open” href=”#”>login

      When I put this in a standalone link on my page it simply goes to top of page I think? I am missing something quite basic here?

      Thanx

  191. Jules says:

    15 Nov, 2009

    @John Fox instead of using
    href=”#” try href=”javascript:void(0);”
    and the page shouldn’t jump.

    The # sign is used when calling a named anchor inside the HTML. ie: Useful Tips Section To link to the this area you would then use

    Jump to the Useful Tips Section

    If a the # sign is used without a name then it anchors to the top of the page.

    I also wanted to say thanks to Jeremie for a great tutorial! I used it on a site I recently launched. You can check it out at http://www.roysteinberg.com/

    ~Jules

  192. Jules says:

    15 Nov, 2009

    Sorry, I used the wrap code instructions, but it didn’t come through like I thought it would. Hopefully you will see what I was referring to below:

    The # sign is used when calling a named anchor inside the HTML. ie:

    a name=”tips”>Useful Tips SectionJump to the Useful Tips Section</a

  193. John Fox says:

    15 Nov, 2009

    Thanks! Completely spaced on using href=’javascript:void(0);’

  194. Mike says:

    15 Nov, 2009

    You don’t have to use javascript:void(0); in the href tag to keep it from jump to the top of the page. I took this panel code and use it for my own purpose of a sliding panel under the header and menu on a gaming site i’m developing. I left the href=”#” tag as is in the sample and added return false; inside the jquery code instead, look below.

    $(document).ready(function() {
    $(“#open”).click(function(){
    $(“div#panel-status”).slideDown({ duration: 800, easing: ‘easeOutQuad’});return false;
    });
    // Collapse Panel
    $(“#close”).click(function(){
    $(“div#panel-status”).slideUp({ duration: 800, easing: ‘easeOutQuad’});return false;
    });
    // Switch buttons from “Log In | Register” to “Close Panel” on click
    $(“#toggle a”).click(function () {
    $(“#toggle a”).toggle();return false;
    });
    });

    • Richard says:

      3 Nov, 2010

      Unfortunately, using return false stops it working at all in Chrome. You can use jQuery’s prevent default instead like this:

      $(document).ready(function() {

      // Expand Panel
      $(“#open”).click(function(e){
      $(“div#panel”).slideDown(“slow”);
      e.preventDefault();

      });

      // Collapse Panel
      $(“#close”).click(function(e){
      $(“div#panel”).slideUp(“slow”);
      e.preventDefault();
      });

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

      });

  195. Jeremie Tisseau says:

    16 Nov, 2009

    Yes, Mike is right. return false will prevent the browser jump to the link anchor.

  196. Steve says:

    16 Nov, 2009

    Thanks, this is great. Really like it!

  197. DiEg0 says:

    17 Nov, 2009

    Hi Jeremie Tisseau,

    Can I have your permission to implement this script as drupal module please?

    I have sent you a mail via contact form.

    Thanks

    • Jeremie Tisseau says:

      17 Nov, 2009

      Yes, as long as you give credits and a link back to the original code.

  198. Amin says:

    30 Dec, 2009

    Thank you for the very nice script and a good tutorial on how to use it .
    Here I have added a tutorial for those who are experiencing problem
    with flash files .. I have explained how to solve it …
    http://www.ipageonline.com/en/index.php/2009/12/display-flash-behind-javascript-menupanel/
    ——————————————-
    Just one thing I’m experiencing problem on IE 8.0 the panel is not 100% in width … you can see an example here :
    http://www.uaedalel.com/vb
    any idea how to solve it ??
    It works OK on FF , and Chrome ..

    • Cibulka says:

      31 Jan, 2011

      Amin, hi, the website you offered as a sollution to the Flash problem doesn’t seem to exist! I tried the wmode sollution but it didn’t really help, so I’m starting to be seriously desperate.

      Can you repost your sollution, please? Thank you MUCH! Petr from Prague

      // And thanks for wonderful bit of a code, Jeremie, of course. :)

  199. yan says:

    30 Dec, 2009

    i placed ur amazing slide login panel in a masterpage
    and the slide wont open, it just clickable like href=”#”
    my ? can it work in masterpage or i doing somthing wrong.
    thx
    great job mate

  200. Amin says:

    31 Dec, 2009

    I need to say that I tested the panel on IE6 and 7 also working perfect only it’s not working on IE 8 ….. :( does any one knows what should I do?

  201. yan says:

    31 Dec, 2009

    try using ie8.js for making ie8 more compitable and work like ie7 google it, hope it will help u

  202. yan says:

    31 Dec, 2009

    the porblem with masterpage is fixed my fault , he didnt reach the js i used ../ and not ./ lamo

  203. Nathan says:

    4 Jan, 2010

    Any ideas on howto slide down the panel when a page loads:

    eg.

    Plz… anyone ?

  204. Ian says:

    5 Jan, 2010

    Hi… Im using asp.net and put the code in my master page as a menu and then put in a few links. After I travel to the other page my content updates but the panel does not close again and the label says it is closed and the “open menu” appears. can anybody help me please

    Regards
    Ian

  205. Amin says:

    10 Jan, 2010

    Still couldn’t solve my problem in ie8 any ideas?
    has any one having the same problem?
    all other browsers are OK even older IE.

  206. Matbaa says:

    12 Jan, 2010

    Really good script. Still ie8 problem exists.

  207. Chris R says:

    16 Jan, 2010

    I have seen this on a joomla site and was wondering whether there is a joomla module/plugin for this sliding login panel. It is excellent!
    I am not joomla expert and have been struggling for the last couple of hours. If anyone can help that would be much appreciated.
    Many thanks!!!

  208. noob says:

    21 Jan, 2010

    Havent tried it yet, but: wonderful work!

    Thx!

  209. CMR says:

    21 Jan, 2010

    Nice. But how to implement with joomla? perhaps we can have a tutorial on this! :)

  210. Sedat Kumcu says:

    22 Jan, 2010

    Thanks for this article. Very beatifull. Best regards.

  211. Revast says:

    24 Jan, 2010

    Anyone have a tutorial on how to implement this into vBulletin (if possible)? Would be much appreciated!

  212. Karp13 says:

    27 Jan, 2010

    This may not be graceful but, another way to make it degrade and still show the layout.
    —————————————
    slide.js
    // close panel onload
    $(“div#panel”).addClass(“closepanel”);
    //Set the position of the panel
    $(“div#toppanel”).addClass(“positionpanel”);

    —————————————-
    slide.css

    line 107 comment out/delete — position: absolute;
    line 125 comment out /delete — display: none;

    Add the following lines

    .positionpanel {
    position: absolute;
    }
    .closepanel {
    display: none;
    }

    ————————————
    If JavaScript is disabled the panel will be displayed and it will push the rest of the content down. You could also then add a blurb about this is showing by default because you have JavaScript off.

    I know this is not the prettiest way to do it, but it works. My site requires JavaScript to be on for the online bidding functions to work correctly.

  213. Marc says:

    28 Jan, 2010

    Nice article. Easy to complete.

    Am sure it will help a lot of people.

  214. Kyle says:

    28 Jan, 2010

    Hey,
    I tried Karp13 method of degrading if javascript is disabled but now the login remains open no matter if javascript is on or off, any suggestions anyone on how I can fix this? Great script though, thanks loads!!

    Kyle

  215. Ravi Kumar Tamada says:

    2 Feb, 2010

    Nice a new implementation……

  216. Preisvergleich says:

    2 Feb, 2010

    Good post. Thank you for good great information.

  217. Lacey says:

    3 Feb, 2010

    Back again,
    I have put this on the most up to date WP and Thesis 1.6. Now her instructions should be followed with an eye on how Thesis works. 1) When you place the header.php code do as it says but move the you have in the original header.php to below the new head and next to the
    body but it should look like:

    1
    2
    
    <head/>
    <body <?php thesis_body_classes(); ?>>

    otherwise you will loose your header image.
    2) I put all the CSS code in the thesis custom.css
    3) As for the Java js flie I put it in Themes/thesis_16/
    a. The images go into the Themes/thesis_16/custom/images
    4. registration is explanatory.
    hope this helps, see it at http://www.policyintelligence.com/ contact me at lacey@policyintelligence.com


    Someone ask the same question I wanted answered. How to add the username to the Logout tab and I went back through your code to get the code that displayed my name or the user who logged in the drop down panel and I inserted it into the logout tab with a comma after hello (proper grammer). So here is what the code should look like: (insert <?php echo $user_identity ?> in code below).

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    
    <!-- The tab on top -->  
    <div class="tab">
        <ul class="login">
            <li class="left">&nbsp;</li>
            <!-- Logout -->
            <li>Hello, <?php echo $user_identity ?></li>
            <li><a href="<?php echo wp_logout_url(get_permalink()); ? rel="nofollow">" rel="nofollow" title="<?php _e('Log out'); ?>"><?php _e('Log out'); ?></a></li>
            <li class="sep">|</li>
     
            <li id="toggle">
            <a id="open" class="open" href="#" rel="nofollow">Show Dashboard</a>
            <a id="close" style="display: none;" class="close" href="#" rel="nofollow">Close Panel</a> 
            </li>
            <li class="right">&nbsp;</li>
        </ul>
    </div> <!-- / top -->

    Several people in the comments have been asking for this so hopefully this will help.

    Great work Jeremie, Thank you for the email and support as well!

    Lacey

  218. Varma says:

    6 Feb, 2010

    What type of license is this released under? Can I use it on a commercial site or is it limited to personal use?

  219. Lacey says:

    8 Feb, 2010

    Why am I getting the class=”custom home” in my page at the top of the browser? Can someone please advise me?

    Lace

  220. James says:

    9 Feb, 2010

    How do you float this panel to the right so that the panel does not take up the whole screen, I would want a set width for the panel ?

    Thanks

  221. natalie says:

    10 Feb, 2010

    Hello Jeremie Tisseau,
    I like you script…it´s the best I found.
    Now I have a question.
    I implemented it in my website and want to have some links in the top of my Website. In CSS the Div .tab and .tab ul.login are 42px high. The links have to be in my Content-Div padding-top:25px beside the Tab.It doesn´t work. I see the links but I cannot click the links, maybe becaue of the z-index? I tried a little, but it doesn´t works. Please, could you help me, Maybe you have a solution.

  222. jo says:

    13 Feb, 2010

    Good stuff! many thanks!

  223. r4ibOm says:

    14 Feb, 2010

    I installed the plugin and it works perfectly in Firefox, but in IE8 it is generating several errors on the site. Mainly conflicts with the star rating plugin GD and dynamic content gallery. Any ideas?

  224. Joo says:

    15 Feb, 2010

    Hi,
    Anyone worked out how to integrate this into joomla yet????? There must be amodule somewhere…. but cant find it!
    Someone help please!!!

  225. I am AWESOME says:

    18 Feb, 2010

    The plugin does not have a valid header.
    please help

  226. Rob says:

    18 Feb, 2010

    Hello!

    Was wondering if this supports multiple sliding panels on one page with the ability to reposition the open and close tab for each of the sliding panels so the open and close tabs are not on top of each other. Think index card divider tabs.

    Best Regards

    • Jeremie Tisseau says:

      19 Feb, 2010

      No it doesn’t support it out of the box. I had done something similar with mootools in the past. Have a look here and you can see a demo here.

  227. Rob says:

    19 Feb, 2010

    Thanks for the info. Nice work by the way.

    Wise-list for your Nice & Clean Sliding Panel:

    1. Cascading Tabbing.

    1 2 3 not 1 2 3 So not like your Mootools demo.
    –___–___–___– —____________—

    I guess I could try placing two of the N&CSLP
    on the window and then reposition the tab.?.?.?

    2. Slide Up Panel for placement on bottom of window.

    3 Slide Out Panel for placement on left or right side of window.

    4. You should add a sound option for when the panel slides open or closed. ; )

    Oh yea one more thing got any good recipes for vegan Thai food? : )

    Later….

  228. Kiova says:

    21 Feb, 2010

    Men i have a big Problem on my site…

    Today i took a footbar on my page and the sliding effect will not work yet – maybe you can look at my site and find the problem – i don’t find the problem. and i have no javscripts problems. i don’t find the problem…thanks at all please help me – google have not a answer…

  229. НИКОЛАЙ says:

    23 Feb, 2010

    LANGUAGE

  230. hanatwity says:

    23 Feb, 2010

    nice work,,thnx a lot
    but i cant use any sliding panels with this sliding login panel…
    plz,, i need some help here…..

  231. Garcya says:

    26 Feb, 2010

    Life saver, that’s what you are :)

  232. Manu says:

    26 Feb, 2010

    superb work!!
    i just need a simple user login system to use with your scripts.

    does any one knows?

  233. deepak menon says:

    27 Feb, 2010

    AWESOME WORK!!!

    ..but IE8 tends to slow down at toggle and goes off with an abrupt slidedown! not sure if any1 els facing similar problem!!
    ..n dats ok…it stil rocks..
    a smal tweak in code helped!
    slide.js
    $(document).ready(function() {
    // Expand Panel
    $(“#open”).click(function(){
    $(“div#panel”).slideToggle(“slow”);
    $(“#toggle a”).toggleClass(“close”);
    $(this).text($(this).text() == ‘Log In | Register’ ? ‘Close Panel’ : ‘Log In | Register’);
    return false;
    });
    });

    index.html

    Log In | Register

  234. Declan Lynch says:

    2 Mar, 2010

    Thanks for the tutorial and demo on creating this. I have used the logic to recreate it using a combination of Dojo and IBM Lotus Domino xPages and tied it into the IBM Lotus Domino authentication stack using AJAX.

    You can read about it here http://www.qtzar.com/blogs/qtzar.nsf/d6plinks/DSLH-835Q67 and there is a link to a demo as well as a link back here. Once I have all the registration features perfects I’ll write a tutorial on how I did it with full credit back to here, of course.

    Thanks again for the wonderful code.

  235. Kiel says:

    6 Mar, 2010

    Very cool. Tried to “flip” it upside down and have it slide upward. Was 99.99% successful. Everything works fine, but the first time you click “Log In | Register” it toggles text/images, but no sliding. Then, if you click “close”, it grows. After this point, everything works fine but backwards. Any ideas? Thank you.

  236. Bob says:

    6 Mar, 2010

    Thats really cool :) Hey, what license is this released under? Can I just use it on any site that I want to?

    B

  237. h-a-r-v says:

    10 Mar, 2010

    I have some thoughts:

    1) Why not doing it for mootools as well? I smiled when I saw ‘new version’ and then BAM.. jQuery.

    2) IMHO it’s lacking 2 useful options:

    a) choosing whether it ‘sticks’ to the top or not (like the old Facebook bar on the bottom, but here on top instead – remember it can be used for other user-oriented purposes then while logged in already and some might like it better if always visible)

    b) choosing the old “pushing” effect

    I would also recommend you and aesthetic fix: currently when the panel slides down its content is ‘revealed’ instead of sliding down with it, which would look much better.

    Cheers,
    Gonna implement the old moo version to my portal now..

  238. ulas aksan says:

    11 Mar, 2010

    Problem with Google Chrome, it works with ie8, but when using with chrome first time you can’t see, than close and open the button “sanal gezinti ac” “sanal gezinti kapat”

  239. ulas aksan says:

    11 Mar, 2010

    it has problem with google chrome

    can you look at this, it works with ie8 but in google chrome first click you can’t see after close and open then you can see the slidebar

    http://www.panoramicweb.net/test/slidebar

  240. kevin says:

    12 Mar, 2010

    Hello,

    The slider will dropdown on click, but I can’t close it.
    Any idea what’s going on?

    Thanks,

    Kevin

  241. Mega says:

    19 Mar, 2010

    really nice article but i have a problem about toogle effect code. Does it work?

  242. Aşık Etme Büyüsü says:

    19 Mar, 2010

    really nice article but i have a problem about toogle effect code. Does it work?

  243. status101 says:

    21 Mar, 2010

    First of all.. Great work! Thank you!

    Actually got this working in for Joomla.. a number of people have asked..

    Some brief steps. I don’t have time to write a full tutorial in detail, sorry… but it can be done, but I think needs to be done manually. I looked for pre-build modules etc. but could not find any decent ones, and the ones I found all seem pretty hard to implement or had problem. Manual was easier.

    1. Use the downloaded source to implement into your template manually ( usually index.php ). I just viewed the source to get the idea of structure.

    I would manually install jQuery into your template. Make sure you use no conflict mode – you will have to do some reading but basically load jQuery AFTER mootools is loaded with a special noconflct switch after it.. this is important )

    2. To make things easier on yourself, edit the slide.js and change all ref. to “$” to “jQuery” .. I am sure there is a way around this but I don’t have time at the moment to learn how.. it is to do with using jQuery and Mootools together, and there is LOTS of reading around if you have the time.

    3. Create extra module positions for your template.. I added two ( eg tpanel1 and tpanel2

    3. Where you inserted the panel display code in you template, remove the code displaying the login detail, and include the code to display your module position.

    I used:

    1
    2
    3
    4
    5
    
              <?php if($this->countModules('tpanel1')) : ?>
                       <div id="tpanel">
                                 <jdoc:include type="modules" name="tpanel1" />
                       </div>
              <?php endif; ?>

    4. Publish the login module ( and register or whatever else you want ) to the newly created module position.

    5. CSSeason to taste and Serve.

    Sorry if this is brief, but I am short on time.. I hope it helps someone.

    Just on some other comments:

    I’m not seeing any problems in IE8 or Chrome.. working fine.

    If you want the “push” effect, play with (remove) the absolute positioning of the panel container in the CSS

    Thanks again

  244. Jeremie Tisseau says:

    21 Mar, 2010

    @Aşık Etme Büyüsü: Yes, it does. Make sure it does not conflict with another Ajax framework with another jQuery script.

  245. Jay says:

    24 Mar, 2010

    hey Jeremie Tisseau,

    I tried inserting this on a concept site that i’m building for myself. Not even trying to hook the login script up yet which is fine i just want it to display properly. if you go look, http://lessonsforlovers.org/main_wtoppanel.html you’ll see that there are big gaps before and after the “hello guest” and just before “+ login register”. Can’t quite figure it out. The rest of the site is pretty simple being it’s just a mock up but everything below it is using the 960 grid system.

    Any ideas would be great, i keep thinking it’s a css thing.

    cheers!

    Jay

  246. Mike says:

    24 Mar, 2010

    Jeremie Tisseau,

    I have already used your code in a site and listed some code samples in the messages above to help others out. I just wanted to show you what I did with your panel code on a site I finished building. You won’t see the panel right away but click on “Server Status” to see it in action. This site is for a gaming clan that I used your code on, hope you like it.

    http://www.nitefallbrigade.com

  247. status101 says:

    24 Mar, 2010

    Hi Jay.. I just looked at your message.. I have nothing to do with this script, but thought I would off some advice since I was looking at the site at the time.

    The problem is in your text.css – You have a 30px margin on the li element. You will need to include an overriding margin for the li elements inside the panel.

    If you add: “margin-left:0;” to the class: “.tab ul.login li {}” in slide.css that should fix your problem.

    If you don’t use it already, have a look at FireBug, a tool/addon for Firefox to help with development. You can right click and choose “Inspect Element” and look at individual elements on any page, see how the CSS is working on that element, play with the CSS live without effecting the actual saved code, and work these sorts of things out really quickly :)

    Hope that helps.

  248. Joo says:

    24 Mar, 2010

    Status101 – thanks for your guidance… I will give it a go, but I am not expert so chances are probably quite slim! :)
    Thanks for your time though

  249. Adrian says:

    25 Mar, 2010

    Thanks so much for this, works beautifully! I especially love how you didn’t over-do anything and left enough space for the developers to work with. Barely have to take anything out. I’m now putting a bunch of logged-in-user-privileges into the same panel – it’s versatile, easy to build and beautiful to use! Just the way I like it. Thanks for sharing!

  250. Tom says:

    26 Mar, 2010

    What a great script! Absolutely beautiful and very efficient. I’m working on implementing it on my site now. Did you ever decide to make the original Fireworks PNGs available so we can change the colors a bit?

  251. Christlove says:

    26 Mar, 2010

    thanks this has been a great help

  252. Erick says:

    31 Mar, 2010

    The sliding panel works perfectly in all browsers that i have tried it on, i have also used it on a couple of projects for clients, including the wordpress plugin.

    I am trying to put this on the footer of one of my sites and make it slide upwards instead of down. Is there a way to do that or if anyone has done this please do let me know.

    Thnx
    Erick

  253. rruucckk says:

    1 Apr, 2010

    love the script!

    I saw your original login script that you made with mootools, where the WHOLE PAGE moved down when the login button was clicked. On this new one, the login bar covers the page content. I have an embedded movie on my page, and the movie covers the bar after the login is clicked.

    How can I push the entire page content down?

    I’m a noobie, thanks.

    • Jeremie says:

      1 Apr, 2010

      Yes, you can push the content down. Check comment 119 above. Hope this helps.

  254. Daniel Norton says:

    1 Apr, 2010

    If you release this under GPL v2, I’ll release a Drupal module for it.

  255. Daniel Norton says:

    1 Apr, 2010

    Or GPL V3.

    The module is ready to give away now.

  256. Ozan Kilic says:

    2 Apr, 2010

    hello there.
    first of all thank you for this beautiful script but i have a big issue. i want to create slide panel which is opening from bottom side (don’t have a question about for this, i’m ok with it).. but when i try to implement in inside of panel with easyslider 1.7 script, sliding panel is working but easyslider script can NOT show the contents, only slider buttons i can see. i am trying with same codes with different IDs in inside of the page and it is working. what should i do?

    if you would like to see what i am try to say, please click the link below:
    http://www.ozankilic.com/demo/sliderissue/index.html

    • Jeremie says:

      3 Apr, 2010

      Have you tried to move the line below up in your html file?

      1
      
      <script type="text/javascript" src="js/easySlider1.7.js"></script>

      You can also try to move the the easyslider script below my code in /js/slide.js.

      If it still doesn’t work, you might want to try jQuery noConflict(). Search on Google for it.

  257. Daniel Norton says:

    2 Apr, 2010

    With Jérémie’s cooperation, I have released a corresponding Drupal module:

    http://www.danielnorton.com/slpjq

  258. HaZard says:

    7 Apr, 2010

    Hi, can someone tell me how to implement this beautiful sliding panel in joomla, please …
    Is there any module od this panel ?

    Best Regards …

  259. Paul says:

    7 Apr, 2010

    Great work on this, really like it.

    Would it possible to create this, but have multiple tabs at the top, just changing their z-index?

    ie http://drp.ly/LHmaf

    Obviously the information would be different for each tab.

    Thanks again :D

  260. Rana says:

    8 Apr, 2010

    Can any 1 provide a easy and simple tutorial for me…Coz am new in this field…any video link will be of great help…
    Actually i am using phpbb3 forum and like to install this eye catcher…but i really could not figure what to download and what to edit..plz help me am a newbie. :(

  261. Chris says:

    9 Apr, 2010

    HaZard – I don’t think there is a Joomla module available yet – or at least I haven’t be able to find one. If you manage to track one down make sure to let everyone know!

  262. pg says:

    15 Apr, 2010

    Hi,

    very nice, really like this. Implemented with my site and all good with firefox and chrome. However IE7 doesn’t display slider properly.

    Here are the screenshots.

    Firefox : http://i44.tinypic.com/260cz6u.jpg

    IE7 : http://i43.tinypic.com/m29l5.jpg

    I see Robin had the same issue, however i tried his solution but didn’t work.

    Can someone help me out here? any help would be highly appreciated.

    Thanks.

  263. ToM says:

    15 Apr, 2010

    Hello Guys,

    is it possible to overlay a frameset with this nice login pane?

    If it’s possible, what do i have to do ?

  264. pg says:

    17 Apr, 2010

    Hi,

    #281, I was missing a closing tag, fixed my problem :).

    Thanks for this awesome login panel.

    Cheers.

  265. Dodo says:

    20 Apr, 2010

    Hi, i like this panel and build it into my new design for my cms. but after i built it in, my slider wont work anymore – i dont know why. http://gamersweb.info/neuestemplate/

    if i get my slider working – my panel wont work and the other way.
    sorry for my bad english :)

  266. Fernsehsessel Blog says:

    26 Apr, 2010

    Yes, this login panel is awesome. Great site and high quality info.

  267. pria says:

    27 Apr, 2010

    Hi,

    I am using a newer version of jquery on my site and when I implemented this overlay using jquery.query-2.1.7 the slide feature isn’t working and I wasn’t sure if this overlay can only use the version you reference in your code?

    Thanks,
    Pria

  268. Ruana says:

    4 May, 2010

    @Dodo: I just visited your site and the slider worked (as did the panel). You should code a ß if you use the german hard ss in the word schließen (schliessen).

    @Hazard: read post no. 259 maybe that would help.

    @Jeremie: I’d love to use your panel for a client’s site (gamer clan – forum login). And (the question has been asked before but not answered) I’m also wondering what login system you used for this? One user wrote that she already tried access_user but kept coming up with errors. It’s not a WP site but just plain xHTML/CSS coded pages with several scripts added for enhancement (no php so far since I’m a novice at it).

    Thanks.

    • Jeremie says:

      4 May, 2010

      @Ruana, I used the WordPress built-in login/register forms. In any case, you will not be able to create a login/register forms with a plain HTML/CSS site! You need a server-side scripting language (PHP, ASP…) and a database (MySQL…) or a text file to store the user datas. If you are new to PHP, I would recommend you to install an open source Forum system on your server (Vanilla, PHPBB, SimpleMachines…) and use the built-in login system with my script.

      Otherwise, if you want to build it from scratch, you can always refer to the article “Making A Cool Login System With PHP, MySQL & jQuery” by Tutorialzine.

      • Shawn says:

        6 Dec, 2010

        i have a site already setup and running SMF (simplemachinesforum) and have already gotten everything , except the login portion workin…

        how would i go about making this work with my smf login?

  269. Ruana says:

    4 May, 2010

    @Dodo: I meant a sharp s of course (time for a break, time for bed I guess). Coded like so: &szlig;
    Sorry for the double post…

  270. John B. says:

    15 May, 2010

    Hi all, take it from me a NOOB.. this is awesome and the fact that Jeremie takes the time to actually place code when answering everyone….is top makes from me!! I have found the answer to every question I had and there was a few of them :). Very well done script and PLEASE keep up the good work for my sake!

    Thanks,
    JB.

  271. Morten says:

    17 May, 2010

    I got this working with Joomla by using an overrride of mod_login and tried to make a small tutorial on how its done.

    Here are the files needed, I hope you get it to work: http://www.box.net/shared/d3j9fyyup5

  272. apasaja says:

    20 May, 2010

    I guess I am one of the ppl who need the slide to be at the bottom, here I share what I have modify which it works for me. You all can download here,

    http://www.ori-ori.org/download/jquery_bottom_slideup.rar

    • Jeeremie says:

      20 May, 2010

      I was planning to build a bottom and slides versions but you were faster than me. :) I tried it and it seems to work just fine. Thanks a lot for that. I will add your link at the bottom of the post.

      • Jeeremie says:

        20 May, 2010

        .. actually not. Footer does not stick to bottom of the page which is “normal”. I will try to see if this can be fixed with CSS only but most probably we will need to add some javascript since the panel needs to slide up.

  273. Krzysztof Pawliszak says:

    25 May, 2010

    To have the panel open on page load simply change few lines in the css:
    slide.css:
    #panel {

    display: ;} leave empty or delete

    And the html:

    Close
    Log in | Register

    That’s all :)

  274. diego says:

    26 May, 2010

    hello, i want to add it some values in mysql_query(” INSERT INTO tz_members(usr,pass,email,name,adress,cp,phone,age,regIP,dt)…i nedd to add more values in my DB.

    but when i add it, not work. any ideas?
    thank you

  275. AkoZ says:

    27 May, 2010

    ok there, it is ok for the overlaping .. not for OPERA browser, but then…
    i’ve added a submenu (presentat°)… and it doesn’t appear clickable ! i can see it but not use it.
    may you have an idea ? about the png perhaps ?

  276. milan prekop says:

    29 May, 2010

    iam bull shit i dont know how i can put java script in to my website… i use frontpage… buddy when ill give u cash can u doit for me ??? answer in my email please i prepare music website and i died…

  277. Andre says:

    29 May, 2010

    I’m having a hard time of making it work with IE 8. The funny thing when looking at your demo all is fine but once I use your script within my page the slider does not show up at all unless I change the position to relative. Can you have a look at my page perhaps there’s something in there that I just can’t see.

    http://www.shufflepath.net/index.html

  278. Andre says:

    29 May, 2010

    Sorry about that, the troublesome IE is not 8 but rather IE7. I was on my pc and thought it was running IE8 as well. It seems to be working fine on IE8 but has the not displaying problem when browsing with IE7.

    • Jeeremie says:

      29 May, 2010

      Yes, that’s weird. My script works just fine in IE7 but not on your site. That’s probably a conflict with another jsscript on your page. If I were you I would disable some js scripts and see if it fixes it. If not, you might want to remove other part of your code (HTML/CSS) until you identify which part of your code conflicts with the panel.

  279. gary says:

    2 Jun, 2010

    Brilliant work, very nice. Could I ask is it possible to have the slider drop by clicking links in the page too? If I had a simply link for register, clicking it would drop down the form? Also do I need to use PHP, my server only supports asp, been thinking of using http://www.ocean12scripts.com/products/membership/ but not sure if I could implement?

    Many thanx

    • Jeeremie says:

      3 Jun, 2010

      Yes, link could be anywhere on the page. It is up to you. Though, if you remove the tab from the panel, think to add a close button somewhere in there.

      • gary says:

        3 Jun, 2010

        Hi again, thanks for taking time to reply? I would leave your script intact, just thinking if I could use other links to drop panel down too? What would I use?

        Register / Logon

        On the other question would your script work with any asp logon/register system?

        Again thanks

        • gary says:

          3 Jun, 2010

          Hi, sorry I meant if I have a standalone link for example at bottom of page as follows
          a style=”font-size:11px;” title=”Member login” rel=”nofollow” id=”open” class=”open” href=”#”>login

          It just moves me to top of page. I would love it to slide the panel down?
          Any ideas?

        • Jeeremie says:

          3 Jun, 2010

          Basically, you can copy the link below anywhere on your page:

          ?View Code HTML4STRICT
          1
          
          <a id="open" class="open" href="#" rel="nofollow">Log In | Register</a>

          This script would work with any PHP or ASP login system, but you will need to implement it yourself. If you don’t use a custom ASp system, chances are there is some documentation about it from the developers or community. If not, then go to the system forum and ask the question there. I am sure someone will answer you shortly.

          • gary says:

            3 Jun, 2010

            Hmm, I must be so thick! Have tried the following?
            a id=”open” class=”open” href=”#” rel=”nofollow”>Log In | Register

            Just doesnt work for me? My demo site is here if it helps? http://ghlnetworkservices.co.uk/index_panel.htm

            Thanx again for your brilliant help.

          • Jeeremie says:

            4 Jun, 2010

            Yes, that’s because you can’t have twice the same instance in your page. You must give your ID a different name. Try this

            ?View Code HTML4STRICT
            1
            
            <a id="open2" href="#" rel="nofollow">Log In | Register</a>

            And replace the code in slide.js by this one.

            ?View Code JAVASCRIPT
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            16
            17
            18
            19
            20
            21
            
            $(document).ready(function() {
             
            	// Expand Panel
            	$("#open").click(function(){
            		$("div#panel").slideDown("slow");	
            	});	
            	$("#open2").click(function(){
            		$("div#panel").slideDown("slow");	
            	});	
             
            	// Collapse Panel
            	$("#close").click(function(){
            		$("div#panel").slideUp("slow");	
            	});		
             
            	// Switch buttons from "Log In | Register" to "Close Panel" on click
            	$("#toggle a").click(function () {
            		$("#toggle a").toggle();
            	});		
             
            });
          • gary says:

            4 Jun, 2010

            Morning, seems odd as that is identical to the code in slide.js anyway. I copied it in just in case but still no joy!

            Here’s my original slide.js that’s came from your download:

            $(document).ready(function() {

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

            });

            // Collapse Panel
            $(“#close”).click(function(){
            $(“div#panel”).slideUp(“slow”);
            });

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

            });

            Cant fathom this out at all?

            regards

          • gary says:

            4 Jun, 2010

            Me again, forget that last post, I have it working now. Brilliant piece of work thankyou very much for your time and effort. Also managed to get it working with asp so all good.

            regards

            Gary

          • Jeeremie says:

            4 Jun, 2010

            Hey, glad to hear that! Good luck with your site.

  280. Kadai says:

    3 Jun, 2010

    First of all, thank you very much for sharing this awesome thing. I’m just seeing on to implement this on one of my sites.

    Second, for anyone interested, there is a way to have this panel fixed on the top of the window and yet it having not force the browser go to the top of the whole page.

    My solution was the next:
    First, I changed in CSS #toppanel entry from “position: absolute;” to “position: fixed;”

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    #toppanel {
        position: fixed;   /*Panel will overlap  content */
        /*position: relative;*/   /*Panel will "push" the content down */
        top: 0;
        width: 100%;
        z-index: 999;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    Then, I took the script located here: http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/ and recycled it for this one, having it exactly like this:

    ?View Code JAVASCRIPT
    1
    2
    3
    4
    5
    6
    7
    
    $(document).ready(function(){
    	$("#open").click(function(){
    		$("div#panel").toggle("slow");
    		$(this).toggleClass("active");
    		return false;
    	});
    });

    That have made the trick for me and it works perfectly (except for that, if you look carefully, you see the elements arranging and taking the places, but is a minor issue… and that the toggle of the tab does not work anymore… but that is not so important by now)

    Also, I have made it to show a message whenever if the user is not logged in, and some possible actions (buttons) when the user is logged.

    You can see a demonstration here: http://sandbox.anime-age.com/

    If someone needs directions or either code released, I’ll be glad to provide it.

    • Ricardo says:

      7 Jun, 2010

      Kadai,

      I would appreciate a sample of how you accomplished these changes. Thank you.

      rwhiting-{at}-fedcap-{dot}-com

  281. Parth says:

    19 Jun, 2010

    checkout wordpress login/registration/password recovery all happening in sliding panel with complete Ajax validation

    (user will not be redirected to http://www.etestguru.com/wp-login.php if anything is wrong.)

    Everything happen in sliding panel :)

    Link is : http://www.etestguru.com

  282. Erik says:

    19 Jun, 2010

    Hi!

    There is a 5px padding in the top of the panel, before the white line.

    Is there any possibility to move up the div just show the white line?

    GREAT JOB by the way!!!

    I made a small register script and got everything working out nicely

    • Erik says:

      19 Jun, 2010

      Sorry for my reply. I managed myself =)

      Made the tab pictures 6 px smaller from the top. and put the height of the tab classes 6 px lower then reduced the top of .tab a.open, .tab a.close to 5px

      =)

  283. Matt says:

    20 Jun, 2010

    Panel overlaps content instead of “pushing” it. Does someone know how to keep the “PUSHING” with this jquery version ??

    Thanks.

    • Jeeremie says:

      20 Jun, 2010

      This has already been answer a couple of times. Please, read the comments. Thanks.

      • John says:

        17 Apr, 2012

        Jeeremie,

        Thanks for the great tutorial. I think this has not been addressed or I have not been able to find it after lots of searching.

        Can the login button be fixed at the top of the header but still push the content down, no matter where the user is on the screen?

        http://24.125.42.135/ for my example.

        John

  284. Ali says:

    24 Jun, 2010

    i really inspired with the popularity of this code and your support as well.

    Do you tell us the way to implement it on sharepoint 2007?

    very tough for me!

  285. imran14826 says:

    1 Jul, 2010

    Yes, that’s weird. My script works just fine in IE7 but not on your site. That’s probably a conflict with another jsscript on your page. If I were you I would disable some js scripts and see if it fixes it. If not, you might want to remove other part of your code (HTML/CSS) until you identify which part of your code conflicts with the panel.

    Imran14826
    http://www.livetv.pk

  286. Erik says:

    5 Jul, 2010

    This has been asked a few times (lavaper, Marc J), but NOT answered: Is there any way of implementing the Mootools fx.slider style of moving the CONTENT of the slider down (like a drawer) instead of just revealing it (like an image mask), in jQuery?

    • Jeeremie says:

      5 Jul, 2010

      Hello Erik. It has actually been ALREADY answered a couple of time actually but maybe only on this page. To push the content instead of overlapping it, just uncomment the css property in slide.css:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      
      #toppanel {
          position: absolute;   /*Panel will overlap  content */
          /*position: relative;*/   /*Panel will "push" the content down */
          top: 0;
          left: 0;
          width: 100%;
          z-index: 999;
          text-align: center;
          margin-left: auto;
          margin-right: auto;
          font-size: 130%; /* font-size set to 130% for the default Kubrick Wordpress theme */
      }
      • Erik says:

        5 Jul, 2010

        No, this is exactly the thing that hasn’t been answered. We are not talking about the content BELOW the slider, we are talking about the content WITHIN it.

        For some reason this is very hard to explain as this thread clearly illustrates:

        http://forum.jquery.com/topic/slide-down-like-mootools

  287. theomanus says:

    6 Jul, 2010

    Great stuff!
    I tried to install it on my joomla website. it works fine, BUT because of the JQuery it conflicts with Mootools in Joomla. I mean the toppanel slide works, but some stuff in the rest of side dont work anymore.
    For example: If a user wants to create a new article in the frontend. The Button for Uploading pictures doesnt work.

    Does anyone know how I can solve my issue?

  288. Darkflame says:

    13 Jul, 2010

    Hi,

    I know your jquery sliding panel isn’t designed to be a media centre, but i’m wondering if it could be made into one.

    I’ve already added youtube / radio stations to it, but they all stop playing when you close the panel.

    Anyway around this by adding / removing code?

    If so, that would be the best thing ever! :D

    Cheers

    Darkflame

  289. Jeff says:

    19 Jul, 2010

    hello,

    I have a problem with ie 7 with the toppanel wich is not centered. You may be help, you can have a look at hte following link :
    http://www.neteclair.re/indexV3.php
    Thank u

  290. Maria says:

    19 Jul, 2010

    Thank you for sharing such superior plugin!! I was able to install it in less than a minute. The only that I want to ask is, what I need to edit to show the tab on the left side? That’s because in my site http://www.microhellas.com on the top right side there are links that the tab is overlapping them. Also is there a way to avoid seeing the black line (over the tab) and show only the tab?

    Thank you
    Maria

    • Jeff says:

      19 Jul, 2010

      You just need to define your margin_left of your .tab to move it on the left side.

  291. adam says:

    20 Jul, 2010

    hi, im using your script on my site. I have installed wordpress in a sub folder, do i need to update the url paths?

    Regard
    Adam

  292. Who Say İn says:

    21 Jul, 2010

    I will using this our site.

  293. nikhil says:

    21 Jul, 2010

    thanks for sharing it. Nice effect.

  294. Consuelo says:

    23 Jul, 2010

    Hi,

    Has anyone tried implementing this in asp.net? I’m trying to add this panel to my website and then have a button on the page that will open the login panel when clicked. My problem is that I cannot make the button call the jQuery script to open the panel.

    Any ideas?

    Thanks

  295. Christopher says:

    27 Jul, 2010

    On my website, if I reveal the panel twice, the second time, the close link disappears. I need help. I followed the instructions exactly.

  296. Ali says:

    28 Jul, 2010

    Hi guys

    very nice post but if you add

    $(“div#panel”).hide();

    before the

    $(“#open”).click(function(){
    $(“div#panel”).slideDown(“slow”);
    });

    100% will work in all browsers
    without it does not work in ie 8

  297. Morten says:

    2 Aug, 2010

    For those having trouble with Joomla and Mootools conflict, edit slide.js to the following:

    var $j = jQuery.noConflict();

    $j(document).ready(function() {

    // Expand Panel
    $j(“#open”).click(function(){
    $j(“div#panel”).slideDown(“slow”);

    });

    // Collapse Panel
    $j(“#close”).click(function(){
    $j(“div#panel”).slideUp(“slow”);
    });

    // Switch buttons from “Log In | Register” to “Close Panel” on click
    $j(“#toggle a”).click(function () {
    $j(“#toggle a”).toggle();
    });

    });

  298. Dylan says:

    3 Aug, 2010

    Awesome, thanks!

  299. Pierre says:

    4 Aug, 2010

    Hi,
    Nice article!
    One question, pretty new in this game :)
    I have another function that requires jquery, so I downloaded a new version from the jquery site for that function.

    Can I use tha same file a refference for this function as well and just change the filename where yours call for the jquery file?

    to

    Or would I need both files?

    • Jeeremie says:

      6 Aug, 2010

      Yes, if you use jQuery v1.4.2 or earlier then you don’t need ‘jquery-1.3.2.min.js’ so you can remove this line from my script:

      ?View Code HTML4STRICT
      1
      
      <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
      • Pierre says:

        6 Aug, 2010

        thanks!

  300. png says:

    5 Aug, 2010

    Hi,

    Can this script be used on a portfolio website whereby when you click on about, portfolio, contact, the relevant section will slide down

    thanks

  301. Matteo says:

    14 Aug, 2010

    Hi, great work! This login is very nice, but I can give you advice?

    Why not put the psd files of the images for a better customizing?

    Thanks again! ;)

    • Jeeremie says:

      16 Aug, 2010

      … for the simple reason that I don’t use Photoshop but Fireworks CS4 :)

      • Matteo says:

        16 Aug, 2010

        Ok, I’m sorry, I didn’t know.

        Can I ask you something else?

        If I wanted to change the slide of this login with the slide of the login that you had created earlier, what should I do?

        • Jeeremie says:

          17 Aug, 2010

          You would have to copy the images from the Mootools panel and update the image URLs in slide.css. That’s all. Do not edit the HTML.

  302. Julien says:

    23 Aug, 2010

    Nice work!
    I made a minor update.

    I used CSS sprites to improve PageSpeed. Instead of six PNG (6.67 KB / 6 http requests), I now have a single PNG (5.03 KB / single http request).

    Please let me know if somebody is interested, I can share this update.

    • Eric says:

      23 Aug, 2010

      I’d be interested in that. :)

    • Rich says:

      24 Aug, 2010

      Julien —

      I would like to see your sprite improvement!

      TIA

  303. Julien says:

    25 Aug, 2010

    Demo and Download : http://publiclab.n2clic.com/sliding_login_panel_jquery_update/

    I forgot to mention that I replaced the current PNGFix with DD_belatedPNG.js, to allow CSS Sprites and Rollover effects in IE6.

  304. nico says:

    25 Aug, 2010

    Hello every body

    No images, no sliding effect, but all text, CSS and link and login/ register are OK!

    I’m on Joomla and I have follow this tuto:
    http://www.box.net/shared/d3j9fyyup5

    No one has an ideas please?

  305. nico says:

    26 Aug, 2010

    no it’s OK now, I have just created a Java Folder in the base of site and place the js into. Now it’s work perfectly.
    The only problem is the conflict with the GoToTop script!
    When enable GotoTop script, and ckick Open Panel, the effect is a GoToBottom!!!

  306. Cinsel Sohbet says:

    30 Aug, 2010

    Great Brilliant

  307. Tiago Ricciardi says:

    9 Sep, 2010

    Hi,

    Thanks for the inspiration and the script.

    I’ve made it into a Joomla module (1.5)
    for anyone interested, here’s the link
    http://projectos.browserbox.pt/joomla/mod_loginslide.zip

    • mki says:

      23 Nov, 2010

      when i installed and activated it i have blank white page …

  308. Dave says:

    19 Sep, 2010

    I am using this as a menu system for a backend to one of our sites. I wanted the panel to drop with a mouseover (not a click). Adjusted slide.js code is below. Hope it helps someone!

    [code]
    $(document).ready(function() {

    // Expand Panel
    $("ul.login").mouseenter(function(){
    // if statement prevents trigger on panel mouseout
    if($('#panel').css('display')=='none') {
    $("div#panel").slideDown("slow");
    }
    });

    $('#panel').mouseleave(function(){
    $("div#panel").slideUp("slow");
    })

    });
    [/code]

  309. Nico says:

    20 Sep, 2010

    Hello!
    I have sucessfully installed your Sliding Panel on my joomla web site and it work perfectly, but afer a login or logout now the redirect page isn’t good.
    My question is:
    How to redirect user in a wanted page after Login/Logout ?
    Thanks in advance
    Bye!

  310. Steve says:

    30 Sep, 2010

    Hi all!
    Omg this is a awesome panel!! Great! :)

    I found a way to not automatically close the panel when you click on login/register button :) (ASP/Visual Basic)

    I have used part of solution of Karp13:

    “line 107 comment out/delete — position: absolute;
    line 125 comment out /delete — display: none;”
    Ok you need to comment this part of css in slide.css

    First you need to use ‘Literal’ element and insert it in this part of HTML:


     

    |

      ”
    Replace so the code “<a id='open' class='open'…"
    Ok?
    After in the behind code you need to create this type of code:

    Public sub PanelCloseOpen()
    Dim MyHTML As String = ""
    Try
    If Session("Panel") = "close" Or Session("Panel") Is Nothing Then
    MyHTML = "Login | Register
    MyHTML &= “Close Panel
    panel.Attributes(“Style”) = “display: none;”
    Else
    MyHTML = “Login | Register
    MyHTML &= “Close panel
    panel.Attributes(“Style”) = “”
    End If
    Catch ex As Exception

    End Try

    ltrPanel.Text = MyHTML
    end sub

    Create another sub:
    Private Sub panelPostBack(ByVal PostB As Boolean)
    If Session(“Panel”) = “close” Then
    Session(“Panel”) = “open”
    Else
    Session(“Panel”) = “close”
    End If
    End Sub

    This functions will be called in the page load (first panelpostback, after PanelCloseOpen)

    Finally when you click the button (register/login) you need to implement session(“panel”)=”close”

    Session(“panel”) contain the state of the panel…

    :) :)

  311. nmark says:

    5 Oct, 2010

    Nice plugin, does not work in IE8. Any plans on migrating it to work with Jquery v1.4.2

    • chamba says:

      13 Oct, 2010

      same here, I need on Jquery 1.4.2 plz It have conflict with jquery roundcorners

  312. napalm says:

    7 Oct, 2010

    good job nice script, but I have a problem.
    the panel in IE6 stays aligned to right.
    look:
    http://img214.imageshack.us/img214/9660/savu.jpg

    How can I resolve that problem?

  313. Tor says:

    11 Oct, 2010

    hi
    how do i stop it for closing after i has Clik the login/reg ??

    ps: i am a php guy so the .net solution dose not work help plzz

  314. Paul says:

    16 Oct, 2010

    Hello Jeremie, I have the same question as the one above. I have everything implemented and submitting to my database successfully. The only problem is the panel closes after clicking on a submit button. I would like to stay open and serve a Thank you message. Do have a solution for this? I appreciate any help you can provide. Thanks, Paul

  315. John says:

    20 Oct, 2010

    Would there be a way to keep the panel on the top of the page no matter how far down you scroll?

    That would be GREAT!

  316. vol7ron says:

    20 Oct, 2010

    Paul/Tor: instead of the form’s href=”#” could you just href=”javascript:void(0)”

    Jeremie,
    I’ve tried the script in IE7. It works on your website correctly, but the file in the zip/download is not being displayed right.

    I haven’t looked into it too much, but the “| Register” is being pushed to the next line, beyond the tab image and also causing the “(+)” image to repeat.

    I know ActiveX is turned off, I’ll look into this more, but curious if you’ve come across this.

    Thanks,
    vol7ron

    • Tor says:

      22 Oct, 2010

      vol7ron

      has tryed that and then i do that my php dose not work

      <?php
      if (isset($_POST['submit']))
      {
      echo 'knappen virker :=D';
      }
      ?>

      and if that if isset doesnot working then i cant do what i wanna do

      • vol7ron says:

        24 Oct, 2010

        I’m more of a perl than php guy, but you’d have to use Ajax to actually login. If isset is not being triggered then make sure the query string is not null and you should not be using $_GET

  317. vol7ron says:

    20 Oct, 2010

    Jeremie,

    Another thing I noticed in IE7 is a flicker after the close animation ends.

    It does the animation, then right before it disappears it expands full size and then closes.

    My guess is that this may be an issue with jQuery, since, again, this problem doesn’t occur with your webpage, only the downloaded example. — I’ll start debugging.

    vol7ron

  318. vol7ron says:

    20 Oct, 2010

    So the issue was not jQuery.

    The problem was caused because you had a copyright comment before the doctype in the download example – probably causing IE to quirkout.

    This may be prime placement, but it almost deterred me from testing your script entirely.

    I initially fixed the multi-line Login/Register problem by forcing IE not to break on space.

    Besides a few comments that exists in your online example, the only other difference is that your html includes a “padlock” class on the Member Login H1 heeader.

    Again: removing the comment before the doctype fixed both of my IE7 problems (1: forcing “| Register” to the next line, 2: animation flicker on close)

  319. vol7ron says:

    21 Oct, 2010

    Final update.

    I think the comments caused a different font to be used. If a user wants to use a different font on the site they should amend the slide.css so that .tab a.open, .tab a.close { } has a larger width, or add “white-space:nowrap.”

    In my case, upon implementation for testing, I’m using a Tahoma font and the multi-line and screen flicker came back. Not wrapping the whitespace fixes this in IE; however, the screen flicker is back upon close, which means there is a problem somewhere else (possibly with the font set in the html).

  320. rali madhu says:

    21 Oct, 2010

    Nice script, superb

  321. vol7ron says:

    21 Oct, 2010

    Just kidding about the final update.

    The screen flicker came back because emacs decided to add it’s own default comments (again) above the doctype. The nowrap may not be needed, but should keep in mind.

    One thing that does need to change is the z-index value. If you’re using a sortable tab plugin, jQueryUI sets the z-index to 1000. That means, once you move a ui-tab, if the slide menu extends far enough to go over it, the ui-tab won’t be hidden. So the z-index values in slide.css need to be changed to something above 1000.

    — I realize this example is over a year and a half old, but ppl are still using it today.

  322. Dan says:

    23 Oct, 2010

    Hey,

    Awesome tool but I have a problem that might prevent me from using it. I get that it is java and the form controls used are also coded in java. I replaced those controls with asp.net checkbox controls, but they were not visible. I tried making individuals forms in the panel, update panels, and everything in between. When that didnt work I just used your “rememberme” java checkbox control, but it wont communicate with the rest of the controls on the page which are all asp.net. I guess my question is…Does your panel allow the user to implement asp.net controls in a way that they are both visible and functional, or should I just give up? lol any help would be greatly appreciated

    • vol7ron says:

      25 Oct, 2010

      It uses JavaScript, not Java.

  323. Vidhyatharan Kumaravelu says:

    30 Oct, 2010

    so cool .. love it!!

  324. Tor says:

    4 Nov, 2010

    hi
    1 of the sulotion to php is:

    e = document.getElementById(“panel”);
    e.style.display = “block”;

    $(“#toggle a”).toggle();

    <?php
    echo ''; print_r($_POST); echo ”;
    }

    ?>

  325. Tor says:

    4 Nov, 2010

    faill submit in last post^^

    if (isset($_POST['submit']))
    {
    ?>

    e = document.getElementById(“panel”);
    e.style.display = “block”;

    $(“#toggle a”).toggle();

    <?php
    echo ''; print_r($_POST); echo ”;
    }

  326. Hustle247 says:

    14 Nov, 2010

    IE9 beta issues? I’m having an issue on first pageload only, when the slider drops, it shows all div’s as transparent, and if you move the cursor, sometimes they show up, then disappear again. If you open a new tab, it usually works correctly, but there is definitely some sort of render/code issue. Any help would be appreciate. Thanks for this great jquery dropdown, we are using it as a user control panel! Page link http://itsmyurls.com/rebuild/bookmarks.php?username=sample#

  327. Darren says:

    20 Nov, 2010

    @Jeremie

    Everything works except there is space between the images on the login tab. It shows the corner image and then a space and then hello guest and then a space | and then space then login text. How do I remove those white spaces?

    Thanks

  328. Freshfroot says:

    23 Nov, 2010

    Just an request.

    Is it possible to add more than one tab?

    Right now there is a Login Tab.
    And it looks odd with just one.

    Is there a way to have say 4-5. So one opens for login, another opens for say viewing top x members, another for twitter etc.. Just having more than 1 tab, and being able to place our own data into it.

  329. vol7ron says:

    23 Nov, 2010

    Another Update:

    slide.js; all the ‘$’ should be changed to ‘jQuery’

    This allows you to use the jQuery.noConflict() mode, in case you are using another framework (like Prototype), or anything that might use the ‘$’ variable.

  330. Freshfroot says:

    24 Nov, 2010

    Don’t know if my question went through.

    But what if we wanted to have say more than one tab?

    How would we implement that? Right now it displays one for logging in. What If we wanted a few tabs eg. Log In, Recent Posts etc.. etc..

    • Raj says:

      24 Nov, 2010

      Freshfroot, in index.html you see under this add another item with and you can get second tab effect.
       

      Log In | Register
      Close Panel

       

      HTH
      Raj

  331. akira_lee says:

    25 Nov, 2010

    Hello

    I just love this script but it have a error :( when you resize the browser window, and is smaller than 900, the right side stays with white spaces. This white space stays bigger each time you put the browser window smaller.. can anybody help me out?

    thanks in advance

  332. akira_lee says:

    26 Nov, 2010

    Hello

    I love your script but it have an error :( could you please help me out?

    When i resize the browser window to less than 900px the content moves and appear a space with nothing in the right side.. could you please try in http://web-kreation.com/demos/Sliding_login_panel_jquery/

    please help me out in this..
    thanks in advance

  333. Clay says:

    28 Nov, 2010

    Is there a way to keep the tab aligned at a specific location. I have a page that is 970px wide, centered in the middle of the page, and I would like the right side of the tab to line up with the right side of the page. Kind of like this:
    Tab -> |tab|
    Page -> | |

    • Clay says:

      28 Nov, 2010

      Hmm… The alignment I was trying to show didn’t show up well. Let’s try this:

      Tab -> …..|tab|
      Page -> |…….|

  334. Krish says:

    28 Nov, 2010

    Hi sorry for being so random :/
    but how do i setup or make the log-in and register button work im so lost any help will do :)

  335. Clay says:

    29 Nov, 2010

    Sorry again, I’m somewhat new to some of these more advanced CSS topics. In IE7 the bar is aligning with the left side of my page’s content container. The content of my page is in a center aligned 970px container. The sliding panel is starting on the left hand side of the container not at the screen edge. Anyone know how to fix this?

    Picture here: http://yfrog.com/6bdemonstrationj

    Website: http://clay.limbsrus.com/fbla

  336. MikeP says:

    30 Nov, 2010

    Hello,

    I’m trying to get this to work. The bar and everything shows up but when I click the button to lower the panel, nothing happens. It’s the same as yans problem above, just a href link, however, my JS and everything is all pointing correctly.

    Any ideas?

    Thanks.

    • vol7ron says:

      1 Dec, 2010

      Mike,

      You should post a link to your site. I bet you there is an error in your JavaScript somewhere that is preventing the slide menu to load/run.

      Perhaps you are not using jQuery in noConflict mode and are using another JS framework?

      vol7ron

      • MikeP says:

        1 Dec, 2010

        Look here;

        I don’t have it setup any more as I decided not to use it. I have other JavaScript objects on my site that work fine, just that didn’t.

        Thanks anyway.

        • vol7ron says:

          2 Dec, 2010

          Your link wasn’t posted.

          If you included the slide at the end of your scripts on load, then the other objects would still work, but the slide would fail if there was a conflict.

          JS (and jQuery) are, for the most part, universal between browsers, but what browser are you using? A working link would help.

          vol7ron

  337. Nico says:

    3 Dec, 2010

    Great plugin very simple to use, and you did a great job with the CSS.

    One thing I have looked at adding was closing the window by clicking anywhere outside the panel.. Anyone see any issues with this?

    $(document).ready(function () {

    var tabOpen = false;

    //Close the panel when you click anywhere else on the page
    $(document).click(function (event) {
    if (tabOpen) {
    //$(“#close”).click();
    var cID = null;
    var p = $(event.target);
    while (cID != ‘toppanel’ && cID !== undefined) {
    p = p.parent();
    cID = $(p).attr(‘id’);
    }
    if ( cID === undefined) {
    tabOpen = false;
    $(“#close”).click();
    }
    }
    });

    // Expand Panel
    $(“#open”).click(function () {
    $(“div#panel”).slideDown(“slow”);
    tabOpen = true;
    });

    // Collapse Panel
    $(“#close”).click(function () {
    $(“div#panel”).slideUp(“slow”);
    tabOpen = false;
    });

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

  338. Juergen says:

    6 Dec, 2010

    will have this nice one inside phpwcms !

    Thanks a lot !

  339. Shawn says:

    6 Dec, 2010

    i have a site already setup and running SMF (simplemachinesforum) and have already gotten everything , except the login portion working…

    how would i go about making this work with my smf login?

  340. Thomas Burleson says:

    9 Dec, 2010

    If you want the panel to “stick” to the top or the bottom of the page REGARDLESS of page scrolling, simply change:

    /* sliding panel */
    #toppanel {
    position: fixed; /* page scroll bug */
    bottom: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    }

    Also I have the modified PNGs and modified CSS needed to show a “slide from bottom” effect with the tabs showing on the Bottom of the page; if anyone is interested.

  341. Catalin says:

    9 Dec, 2010

    Hi! How can I open this top panel with a link somewhere in the middle of my page?

    THANKS!

    • TJ says:

      23 Dec, 2010

      Yes. I also want to know how to have a separate link (picture) result in login panel opening. Any ideas?

  342. Unihost Brasil Servidores says:

    11 Dec, 2010

    Amazing login panel!! Nice job. Thanks!

    Michael K.
    Dev. @ Unihost Brasil

  343. Uriel Albarran Oropeza says:

    12 Dec, 2010

    i love this tutorial, but i have a question, why if i can see all the images of the sliding panel i can see the back ground of the buttons online? i test the script locally on my mac, but when i upload the files i can see the background

  344. eric says:

    18 Dec, 2010

    Is it possible to change the name from Member Login to Customer Login?

    Is it possible to allow member to view only certain pages.

    I’m trying to have a shopping cart and would like customer to login, so it can keep their information. Is this possible?

    I also plan on having affiliates, who will send people to my site and want a login for affiliates. Can you have multiple logins? or is there another alternative.

    Thanks for any information…

  345. Seb says:

    23 Dec, 2010

    Hello there,
    I am using –
    WordPress 3.0.3.
    Executive Child Theme 1.0 by StudioPress
    AJAX Login Widget++
    Login With Ajax

    However your great slider is not working.
    I tried uploading the zip file for default-theme-modified.

    Can you help?

  346. Daksh Shah says:

    25 Dec, 2010

    Please help me ! I want to implement this in my wordpress blog i.e. http://www.techiecrunch.com
    Is there a plugin or something for this ? If yes, where and if no, how to put this script without a plugin on a specific page.

    • Jeeremie says:

      29 Dec, 2010

      If you read the article til the bottom, you would see there is a list of plugins based on this script :)

  347. Thomas Burleson says:

    30 Dec, 2010

    @Jeeremie,

    Love you blog article and the code. But I wanted more flexibility about how the slide effect was attached to ANY target area. So I used your code as a part basis for a better solution.

    I improved the slideBox.js to actually dynamically inject the HTML required to wrap and animate the slide “drawer”.

    This slideBox.js javascript will also preload a SWF into the hidden draw if desired; default will load the SWF only when the SWF is opened. It uses either .animate() or .slideDown() jQuery calls; dependent upon the preload setting.

    Check out http://www.insertables.com for usage and code. Thanks again.

  348. Giorgos says:

    5 Jan, 2011

    Hi,

    Perfect Slide Panel, i try to useit to my vBulletin forum.

    i have one proble with the Open/Close Panel.

    you can see here http://www.sorento-ultimateclub.com/forum/index.php the Hello Guest ! and the Open/ Close Panel are not in the same line.

    Can you help me with that?

  349. Peter says:

    11 Jan, 2011

    Hi There
    how would i go about getting more information from users i.e. title, address, age, postcode, phone etc.
    in the login section ??

  350. Graphic Design Kent says:

    12 Jan, 2011

    This is plain awesome!

  351. Colin Shinkin says:

    17 Jan, 2011

    Hi – I got it working great very nice application. The only problem I am having is it wont stay open after Registration and I want it to close when someone clicks a link in the panel? How do I adjust the toggle javascript code to achieve that without affecting the basic open/close tab?

  352. deathtoIE says:

    19 Jan, 2011

    If you’re having issues viewing the demo or running your own version of this in ie (panel opens but won’t close… error message “null or not an object”), try cleaning out your temp internet files, cookies, history, etc. Not sure which specifically led to my own browser rendering problem, but once I cleared all that out, everything worked in ie7 and ie8.

    Thanks for this one.

  353. Paul says:

    22 Jan, 2011

    Hi,

    I am having problems getting the panel to go right across the page, when i view the code, it seems as though the plugin is placing the panel still within the wrapper of my theme, hence it only displaying the width of my site and not repeating? How can i get it to place outside of the wrapper?

    www. myweddingreview.co.uk

    Hope someone can help :-)

    AMAZING PLUGIN!!!!

  354. mizikci says:

    22 Jan, 2011

    hi. i have a question and a problem. How can I send with smtp typed?

  355. patty says:

    25 Jan, 2011

    hello! this is an awesome script.. fitted perfectly to my blog.. however i have a question.. how would i display my login validations(suppose user enters info in the login textboxes) without the panel closing down while generating the messages inline? help s’il vous plait!!

  356. Noddy says:

    29 Jan, 2011

    Hi,

    I am trying this script on my Joomla site, i downloaded the module and applied on my user1. I played with css and some how fix it on the top of my header.
    Now when I am clicking on the login nothing is working I saw in the Error Consol as well but there is no js related error as well.
    Please help me out guys !!
    following is the site where I am using it.
    pm1000.tridecimal.com

    thanks in advance
    Noddy

  357. eddie says:

    1 Feb, 2011

    how would I make it so it the panel appears on ever page of my website, so say for instance on the registered.php I have only the message and the panel is gone.

  358. Chris says:

    8 Feb, 2011

    Hey, I was wondering if instead of logging in I want users to post anonymously and if I could place this sliding panel in the menu bar so when clciked in the menu bar it slides down.
    Thanks in advance.

    • Chris says:

      8 Feb, 2011

      Similar to fmylife.com for the submit option.
      Thanks again

  359. web design kalinga says:

    12 Feb, 2011

    WOW this is nice.My users are exciting of this feature.

  360. electric motor scooter says:

    13 Feb, 2011

    Appreciate another wonderful article. Wherever else could anyone get that type of info on this kind of an ideal way with words? I have a presentation next week, and Im round the search for these info.

  361. cgrclk says:

    13 Feb, 2011

    Hey. I have some issues. When i use this plugin it distort my template in all ie versions. what i must to do??? please help me.

  362. JP Greeff says:

    15 Feb, 2011

    Hi

    AWESOME script… I have a small problem with IE8 though, and was wondering if you could have a look and tell me what the problem could be..? The address is http://www.jpgdesign.co.za/tph2011/index.html

    You help would be greatly appreciated!

  363. mark says:

    23 Feb, 2011

    hi.. im new in this jquery.. can anyone teach me where i can inject my databse?

  364. Daniel says:

    24 Feb, 2011

    Great sliding login, using it on my next website. Thanks a lot!!

  365. Kyle says:

    2 Mar, 2011

    Hey Jeremie, great script! I do have a question though. I am trying to switch the close tab with another login tab. I know its a renaming thing, but I can’t figure it out. Thanks!

  366. Fphil says:

    2 Mar, 2011

    anyone can help me? I want to use my own mysql database to login and took me hours for the trial and error and it’s not working.

  367. tony says:

    2 Mar, 2011

    As I’m a newbie to wordpress, I’d love to download this file, unfortunately the download link appears to be broken :( Any chance of fixing that. I found the sliding panel link in the wordpress plug-ins directory but I’m not sure if its compatible with WP 3.0+ or if this particular version is written using mootools which seems to happily anger the rest of my theme ;) Be greatful if the link could be restored, thanks.

  368. Mark says:

    6 Mar, 2011

    Really grate stuff and so easy to use. Is there away for the menu to hide again when the user moves there mouse off the menu bar instead of using the button?

  369. aaron says:

    6 Mar, 2011

    Hello, can anyone help me with this ie issue. http://www.designersites.org/login/

    If you look you will see the login tab is displayed incorrectly. The register link is dropping below instead of being displayed inline. I see this is not an issue on the demo but do not know why. thanks

    • Jeeremie says:

      7 Mar, 2011

      I do not see this issue on the page you shared. If you are using this script somewhere else on your website, it could be because of a conflict with another CSS class or the input selector. Check your main website stylesheet and search for “input”. You might have different properties for this selector.

  370. aaron says:

    7 Mar, 2011

    Hello Jeeremie, thanks. i actually resolved the issue by extending the width on the .tab a.open, .tab a.close descendent. But I do have a problem I cannot seem to resolve. I have the slider opening over a flash banner that I have created and the banner seems to show through the slider when it is opened. Is there a way to allow the slider to open over the flash movie? thanks.

  371. aaron says:

    8 Mar, 2011

    Hello, can anyone tell me how to make it so I can open this slider over a flash movie. When I attempt to do this the flash movie becomes superimposed in front of the slider. Thanks.

  372. aaron says:

    8 Mar, 2011

    This is an addition to the above comments. This problem seems to be in Chrome and IE. Here is the link. http://www.designersites.org/login/ Also Im just learning flash and I think this swf file requires the flash player 10.

  373. Dan says:

    8 Mar, 2011

    This is such a great looking script, Thank you, I was just wondering if you would be able to add a map to the bar like google or bing and have it load correctly. I have tried but it only seems to want to load one tile to the upper left. Thanks

  374. aaron says:

    8 Mar, 2011

    Jeeremie, I was able to resolve the flash problem by embedding the setting ‘wmode’ to transparent in the flash object tag. Now your slider can be opened right over the flash movie and the movie does not superimpose itself over the slider. This is a really nice slider that you developed. Thank you.

  375. Tommy says:

    10 Mar, 2011

    This is great jquery panel!

    Any one know how to fix this sliding panel to make it working on IE6 & IE7 ?

    Please HELP! :))

    • Jeeremie says:

      10 Mar, 2011

      It should work in IE6 and IE7. Make sure it is not some other CSS code that conflicts with my panel.

      • John says:

        19 Mar, 2011

        I had to covert to a coldfusion file since I want to put in a form. When I named it to index.cfm, it stopped working in IE8 but works in all other browsers. Sure is pretty.

  376. Marco says:

    14 Mar, 2011

    to implement this tool in typo3 you just have to change the link to open the panel to javascript: void(0);

  377. Johny says:

    14 Mar, 2011

    Hello,
    You can insert your login panel to the CMS Php-Fusion.
    I would be very grateful if someone found it and sent an email link to the file.
    stixii@centrum.cz

    Thank you very much for your reply.

    • Jeeremie says:

      14 Mar, 2011

      Is that a question?

  378. Fabio says:

    15 Mar, 2011

    Hi! Great project!

    I’m trying to use this slider as a WebPart in Sharepoint.
    Everything is working nice, but the slider does not rewinds or reverses at the end.
    Also, after sliding all images, the browser displays “Done, but with errors”…
    Can anyone help with this issue?

    Thanks in advance!

  379. Fabio says:

    16 Mar, 2011

    Sorry, the last post was a mistake.
    The correct comment is:

    Hi! Great project!

    I’m trying to use this sliding menu as a WebPart or inside a Masterpage in Sharepoint.
    The bar appears for only 1 second and disappears. Also, the browser displays “Error on page”…
    Can anyone help with this issue?

    Thanks in advance!

  380. david says:

    18 Mar, 2011

    hello, i am trying to implement this into joomla, i have made it for html and it works perfectly, however i am trying to make it work for a joomla template i am custom creating and it is not working.

    the css is functioning, i believe the problem is in the jquery. i do not think it is being read in the code.

    also is there a way of making the code do a “double drop” i want it to drop once to show the login and custom page tools.

    but then i want another button to make the drop down drop again so the client can make a reservation or even start a chat.

    thank you for your attention.

  381. wayne says:

    23 Mar, 2011

    Hi, is there a way to add and additional link that will open the panel and change the image.

    Thanks

    Wayne.

  382. Márcio says:

    25 Mar, 2011

    First, congratulations! very good!
    I would like to include a menu button on the side of the page to access the login panel. Is it possible?

  383. kumbi says:

    1 Apr, 2011

    just what i’m looking for! how do get it to revert to pushing instead of over-lapping?

    • Jeeremie says:

      1 Apr, 2011

      I just answered your comment in the post.

      • kumbi says:

        1 Apr, 2011

        great! thanks a lot.

  384. peet says:

    2 Apr, 2011

    hi
    thank you for this tut..
    i have just the one and maybe stupid question

    if i want to open the slider from outside the panel,.. like anywhere on the page what link do i use?
    i tried
    sign up now!
    but that wont work

    • Jeeremie says:

      6 Apr, 2011

      The code to toggle the panel is this one:

      ?View Code HTML4STRICT
      1
      2
      
      	<a id="open" class="open" href="#" rel="nofollow">Log In | Register</a>
      	<a id="close" class="close" style="display: none;" href="#" rel="nofollow">Close Panel</a>

      Move these links anywhere on your page

  385. Mark says:

    3 Apr, 2011

    this is simply an amazing script, it plugged in really nicely and simply, i had a slight problem with my menu tabs being overlapped at first but a bit of add/remove Class magic and it’s working great

  386. Jai says:

    3 Apr, 2011

    For me, Demo is not working in IE8 (Vista O/s).
    What’s wrong in my browser?

    In chorme, FF it’s working perfectly…

  387. Ray says:

    8 Apr, 2011

    Hi,

    I know I might get booed for using it but I use DNN for my CMS and was wondering if there was an example of this implementation for it.

    Thanks,
    Ray

  388. aakash says:

    19 Apr, 2011

    when i click on register button it says “username already taken” i have corrected the database name but still same problem.
    demo of this problem is on jahfo.free4sure.com

  389. Diego says:

    19 Apr, 2011

    Jeeremie,

    I need to put de login tab (.tab ul.login) floating right the wrapper (959px) but i need all the panel to slide (width 100% of the site). I can make it whith a right: 120px; but if i see in another resolution that no will be floating right. Any solution?

    Regards,
    Diego.

  390. Renzo Reinoso Alcas says:

    21 Apr, 2011

    Excelente efecto Carnal¡¡¡¡¡
    muy bueno mi hermano

  391. Donnyp02 says:

    23 Apr, 2011

    I’ve got the script working on my main page, but when I added it to a page that is using Sexyforms, the sliding action does not work. Any ideas what would cause that?

    Thanks!

    • Donnyp02 says:

      23 Apr, 2011

      I figured it out. Great script by the way!

  392. hitesh says:

    29 Apr, 2011

    hi…i not able to download this demo by clicking on download link and gives 404 file not found..can you please give me demo files..

    Thanks in Advanced…

  393. Schrottpreise says:

    29 Apr, 2011

    Hey nice script, ran into an issue though.

  394. jatinder says:

    30 Apr, 2011

    Download link broken. from where to download?

  395. Ahmad says:

    30 Apr, 2011

    Download link does not work.

    • Jeeremie says:

      4 May, 2011

      It has been fixed. It was a problem with the latest WordPress upgrade. Thanks for reporting

  396. mert says:

    1 May, 2011

    Thanks ,It’s Crazy

  397. LM says:

    1 May, 2011

    Download 404 :(

    Please fix!

  398. Jeremy says:

    8 May, 2011

    Nicely done! There is a slight issue with shadow overlap on either side of the tab due to the shadows on the tab_l and tab_r images, which is noticeable on a light-colored solid background. I’m not a designer so my attempted fixes aren’t perfect, but here they are: http://state.tc/save/tab_l.png and http://state.tc/save/tab_r.png. Anyway, thanks for the excellent and highly-compatible code!

    • Jeeremie says:

      12 May, 2011

      Yes, I am aware of this. This is because I use background repeat which does not work really well with transparent backgrounds. There’s nothing you can do about this, not that I know.

  399. markco101 says:

    11 May, 2011

    Looks amazing. Any chance you can help me out though. I downloaded the file but cant find the code to copy to place into my own website.
    Where is the coding located?
    Thanks

    • markco101 says:

      11 May, 2011

      You might find it useful that im working in HTML format.

    • Jeeremie says:

      12 May, 2011

      You must paste the html code right after the <body> tag in your html page and link to the css and javascript in the HEAD of your html document.

  400. bluelikethecolor says:

    12 May, 2011

    i have been trying to implement this in joomla everything is working except the jquery, i have made it noconflict – but still no go what am i doing wrong?

    here is some code i am using:

    <html xmlns="http://www.w3.org/1999/xhtml&quot; xml:lang="language; ?>” lang=”language; ?>” >

    <link rel="stylesheet" href="baseurl ;?>/templates/system/css/system.css” type=”text/css” />
    <link rel="stylesheet" href="baseurl ;?>/templates/system/css/general.css” type=”text/css” />
    <link rel="stylesheet" href="baseurl ;?>/templates/template ;?>/css/template.css” type=”text/css” />
    direction == ‘rtl’) : ?>
    <link href="baseurl ;?>/templates/template ;?>/css/template_rtl.css” rel=”stylesheet” type=”text/css” />


     
    Contact Us
    |

    tool Panel
    Close Panel

     


    <img src="templates/template ?>/images/cc_logo.png” width=”331″ height=”103″ />

    <!–

    –>

    Charlie or Katie, Please decide what ads you want to place here. I think that your packages images would look best

    Charlie or Katie, Please decide what ads you want to place here. I think that your packages images would look best

    Charlie or Katie, Please decide what ads you want to place here. I think that your packages images would look best

    Charlie or Katie, Please decide what ads you want to place here. I think that your packages images would look best

    This is the Footer

    and the jquery:

    $j(document).ready(function() {
    var $j = jQuery.noConflict();

    // Expand Panel
    $j(“#open”).click(function(){
    $j(“div#panel”).slideDown(“slow”);

    });

    // Collapse Panel
    $j(“#close”).click(function(){
    $j(“div#panel”).slideUp(“slow”);
    });

    // Switch buttons from “Log In | Register” to “Close Panel” on click
    $j(“#toggle a”).click(function () {
    $j(“#toggle a”).toggle();
    });

    });

    PLEASE I BEG YOU HELP ME!!!

  401. Eloktavian says:

    16 May, 2011

    Very-Very Nice One… Thx for share :D

  402. Jeff says:

    19 May, 2011

    Would it be possible to implement this in such a way that it slides up from the bottom, instead of down from the top?

    • Jeeremie says:

      19 May, 2011

      Sure, but you will need to edit the css, images and Javascript. It should be fairly easy if you know html.

      • Filippo says:

        25 May, 2011

        Hi Jeeremie, I am also interested in this panel that slides up from the bottom, instead of down from the top.
        I know html and css.
        Do you know if there are some particular points where I can work to let the panel slides up from bottom? I want to place it into the footer.
        Thanks in advance!
        Filippo

  403. art says:

    21 May, 2011

    Hello Jeremie,

    I’m triying to put the MooTools MooEditable WYSIWYG Editor in your panel.

    when I include the editor after the panel in the code, it looks right. but in the panel itself the editor looks pritty weird. please, see the exapmle: http://www.kazun.eu/admin/ajax/MooEditable/Demos/MooEditable/mootools_jquery.htm
    any idea, why is it so?
    It would be great, if you could give me some advice.

    regards

  404. Jeeremie says:

    23 May, 2011

    No idea. My first assumptions is that some of my css conflicts with your editor but I had a look but I don’t see where it comes from. The best way to debug it is to use the code inspector in Google Chrome or Firebug in Firefox.

  405. Prose says:

    4 Jun, 2011

    Hi Jeeremie. Is this just for logging into the wordpress panel/admin area? Can this sliding panel be used to login to a password protected page?

    Thanks much!

  406. Mario says:

    5 Jun, 2011

    Hi Jeeremie, thank you that you have created this panel. :)

    I found a problem with Internet Explorer 8 and Windows XP by clicking on “Login / Register”, shows a Javascript error “‘tagName’ is null or not an object. ”

    It works fine with Firefox 4.01. The fact is that if you refresh the page the error disappears and works properly. I debugged the code and which gives the error is in this part:

    / / HACK: override appendChild, replaceChild, insertBefore for IE, since it’s does not support DOM events
    if (isInternetExplorer)
    {
    var appendChildOriginal = doc.body.appendChild;
    doc.body.appendChild = function (element)
    {
    appendChildOriginal (element);
    var tag = element.tagName.toLowerCase ();

    if (“video” == tag)
    {
    ProcessVideoElement (element);
    }
    }

    In particular this line: var tag = element.tagName.toLowerCase ();

    Thank you very much for everything, a greeting :)

    P.D.: Sorry for my english, i use a online translator…

  407. Andrew says:

    6 Jun, 2011

    Hi Jeremie,Great script wow must of taken a lot of hours well done…I don’t have any problems save one all my links at the top of my page wont work with the overlap I would deeply appreciate any help.Thank you.

  408. Giorgos says:

    10 Jun, 2011

    Hi Jeeremie,

    thanks for Wonderfull Slide login, i use your code and i make one for my new vbulletin site. I only have one problem, the slide login don’t start at the left corner of the browser window, can you help me fix that ?

    you can check it here http://www.vbulletin-greece.gr/forum/forum.php

    Thanks In Advance
    Giorgos

  409. ernesto says:

    18 Jun, 2011

    Hola amigo, e implementado tu bonito desplegable en mi web, me parece extraordinario, quería pregunte si sería posible que el desplegable se pudiera abrir de forma automática pasados unos segundo, y también como se puede conseguir que permanezca abierto al carga la web, si es posible cualquiera de estas opciones seguro me puedes indicar como conseguirlo, si me contestas te estaré muy agradecido, un saludo. Ernesto.

  410. Ero says:

    20 Jun, 2011

    does anyone know how to implement this in wbb “woltlab burning board 3.1.x”?

  411. dialydeals says:

    24 Jun, 2011

    Nice article!!!
    Cheer!

    Thanks.

  412. tspot says:

    25 Jun, 2011

    I try to implement similar script like this in Django… Thank you very much for this tutorial

  413. Len says:

    27 Jun, 2011

    amazing script! it’s what I needed for my new website!
    just one question.. what about if I want the tab already open?

    please tell me qhat to do!

  414. Marty says:

    6 Jul, 2011

    Is it possible to run this with another script that uses a different version of jquery?

    I am trying to do just this. It seems that it runs but the Login | Register text is a bit messed up.

  415. r0z0r says:

    7 Jul, 2011

    the download link doesn’t work :|| please help mee

    • Jeeremie says:

      7 Jul, 2011

      Yes, sorry about that. I upgraded this site to the latest WordPress version and permalinks did not work correctly anymore for the downloads. Everything should be back to normal now. Please let me know if it still does not work. Thanks

  416. r0z0r says:

    7 Jul, 2011

    ohh I found

  417. James K says:

    12 Jul, 2011

    FYI, posting is broken. :(

  418. James K says:

    12 Jul, 2011

    Scratch my previous post. Posting in Firefox doesn’t work for me. I posted this in Chrome and it seems to work! Anyway, on to my question.

    The one activating link that comes with the script is attached to the panel and moves with the panel. Is it possible to get the drop down panel to activate from multiple links? For example, could I also have extra text links in the copy on the page that open the panel?

  419. Igor says:

    14 Jul, 2011

    Hi, great stuff, but it doesn’t work in IE9/win7, it opens, but it wont close, though the link changes to close, but it wont slide back, would be really nice to update :)

  420. saucer says:

    14 Jul, 2011

    heya! I absolute LOVE your script, but I want to combine it with a sliding-menu like this one: http://demo.rockettheme.com/jun11/

    Any tutorial on this one? :(

    Thanks in advantage!

  421. Zeth says:

    15 Jul, 2011

    This looks really good. Smooth and cool! Cool effect! I wish I knew how to make logins to my website. Is it hard to make it so you can login to WordPress with it?

  422. Zeth says:

    15 Jul, 2011

    Well done! This looks cool! Now I just need to learn how to make a login-function to a site!

  423. ikeyaro says:

    19 Jul, 2011

    Is it possible to make it available for Joomla too?

    There is actually a dude who stole the idea from you and made it for Joomla, but its 15$ :)

    Check it: http://joomla.cyphertextsolutions.com/all-joomla-extensions/bottom-panel-slider

  424. ali says:

    20 Jul, 2011

    hi my friend ,
    tnx for sharing ur code with us ,
    i have a question :
    how can i close slider automatically when i`m clicking on a link inside slider ?

  425. Mohammed says:

    22 Jul, 2011

    thank you from bottom of my heart.

  426. Andrew Jones says:

    27 Jul, 2011

    Hi, been looking for a nice one of these and am going to implement it on a new Drupal 6.22 site. Probably a simple question but what CSS do I need to make it stay visible at the top of the screen if a user scrolls down the page? Would that be the position: fixed attribute?

    Sorry, I’m new to CSS and scripting. Brilliant script and site btw.

  427. Andrew Jones says:

    27 Jul, 2011

    Found my answer, just change position: absolute; to position: fixed; for the toppanel div. Works beautifully, thanks for the script.

    • Patrik says:

      1 Oct, 2011

      when i change position to fixed it is fixed only until i open it. By opening the panel, the webpage scolls up. how can i fix it.

  428. sekhar says:

    2 Aug, 2011

    Thanks .. i am newbie to jquery and finally i found answer for my doubt…

  429. jebaj says:

    3 Aug, 2011

    Ur link

    its with this part ali :P class close display none :P

  430. Sushant says:

    5 Aug, 2011

    Thanks for providing this code..it is really amazing..

  431. Dan says:

    7 Aug, 2011

    i wanted to ask if its possible to keep the panel open on page refresh?
    thx!

  432. Jack says:

    19 Aug, 2011

    Hello, I know this is a bit of an old topic but hope its still active!

    I’ve implemented this login script and I am using it with WHMCS at herald.zagira.com .

    I am wondering if anyone could help me integrate it a bit more so it detects the usernames first name from WHMCS to update the “Hello Guest”?

    Any help would be great thanks

    Cheers

    Jack

  433. alexis says:

    21 Aug, 2011

    Hello.
    This script (Slide Panel) can run on platforms uCoz?

    • Jeeremie says:

      30 Aug, 2011

      I don’t know uCoz. I can’t answer this. If this platform has an editor which let’s you add any kind of code (html, css, javascript, php…), it should work. Ask their support if you don’t know.

  434. cid mykiel says:

    21 Aug, 2011

    can someone help me plss, i need this, it didnt work to me , can someone make it work? ill give you access to my panel

  435. tash says:

    25 Aug, 2011

    plis tell me how i can create my frist website

    • Jeeremie says:

      30 Aug, 2011

      huh… Your request is like asking me to make you be a millionaire in just one day. I can’t :) You should be more specific if you want to get some help.

  436. Jonathan says:

    25 Aug, 2011

    Hi, first off all thanks for the slick look off the panel. I think I will use it on one of the sites I maintain.

    While testing the implementation though I found out that:

    1. The CSS of your style.css leaks out into the main page when copy and pasting. I noticed this mainly because the offset of my list items was ripping apart the tab.
    I solved this by prefixing everything in style.css with the following:

    #toppanel >

    And added the li item specifically like this:

    #toppanel > .tab > ul > li{
    margin: 0;
    }

    2. You seem to not use jQuery in no-conflict mode which made the script fail on my test site at first. I solved this by adding the following line to the top off slide.js:

    jQuery.noConflict();

    After doing that all occureces of $ will have to be replaced with jQuery to make the script work again.

    I think it would be nice to the visitors off your site and future downloaders to provide a new and updated version implementing these changes. It would save them some hassle when loading the script into their pages.

  437. Cliff Ocampo says:

    26 Aug, 2011

    How can i change the background color?
    I want to change the background color
    I’m using gradient effect here’s the code

    I try it many times, i deleted all the background, but white color remains as a background.help me please :)

  438. Cliff Ocampo says:

    26 Aug, 2011

    here’s the code of gradient, try it if you can change it. thanks. :)

  439. Cliff Ocampo says:

    26 Aug, 2011

    lol no codes appear =\

  440. ziros says:

    4 Sep, 2011

    Great Work
    Joining to dan’s question
    how to keep the panel open after refresh

    for example if login not success and we want to show error messgae panel is closed after refresh…

    hope for help

  441. Theo says:

    6 Sep, 2011

    Great, great code. Superb.

    Quick question: I want the panel to stay open after user login. How do I accomplish this?

  442. SEO In Kent says:

    6 Sep, 2011

    I have only ever used WordPress before so I am going to put this tutorial to good use, I want one of these panels for my site.

  443. Kaki Bakar says:

    7 Sep, 2011

    Great code…

    I want to using 1024px width. How do I?

    Hope could hear from you soon… ;-)

  444. Beta says:

    12 Sep, 2011

    Hi!
    I was looking for something similar to this, and i had found a mooTools event that would do it… i love jquery and would like to stick w it… then i found this! very happy.
    What im trying to achieve is a pull out bar that would happen horizontally throught the entire screen… automatically when the page opens, so the user is aware of the “menu” when the page loads… then retracts it…. with a button that would toggle back.

    my question is… how can i make the automatic slide in/out happen?
    thank you very much for your time.

  445. Nicklas Sky says:

    13 Sep, 2011

    hello, anyone know hot to implement this in a e107 theme?

  446. Muslim says:

    17 Sep, 2011

    Тhis script is perfect !!!
    Jeeremie may I ask you?
    Whot problem in my cod

    <?php

    if(!defined('INCLUDE_CHECK')) die('У вас не прав запускать файл на выполнение');

    function checkEmail($str)
    {
    return preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $str);
    }

    function send_mail($from,$to,$subject,$body)
    {
    $charset = 'cp1251';
    mb_language('ru');
    $headers = 'MIME-Version: 1.0 \n' ;
    $headers .= 'From: \n';
    $headers .= ‘Reply-To: \n';
    $headers .= ‘Content-Type: text/html; charset=$charset \n';

    $body = mb_convert_encoding($body, $charset,’auto’);

    $subject = mb_convert_encoding($subject, $charset, ‘auto’);
    $subject = ‘=?’.$charset.’?B?’.base64_encode($subject).’?=';

    mail($to,$subject,$body,$headers);
    }
    ?>

  447. maviajansmatbaa says:

    17 Sep, 2011

    here’s the code of gradient, try it if you can change it. thanks.

  448. Lawrence says:

    21 Sep, 2011

    does not seem to work for me in IE8 or FF6.02. toggle to close doesn’t appear.

  449. Lawrence says:

    21 Sep, 2011

    sorry, I meant IE9

  450. Chris says:

    25 Sep, 2011

    Hello Jeeremie,
    i love your script. is it possible to use it without registration? only as a login. so I have to register users on a separate admin panel page or something like that. and i need, that ervery single user has a diferent login website.

    • Jeeremie says:

      27 Sep, 2011

      definitely

  451. Tim says:

    26 Sep, 2011

    Is there a way to create multiple buttons and then each brings up a different page like login and register seperatly

  452. Nirav Mehta says:

    27 Sep, 2011

    Guys We running online gaming server MMORPG
    name is Indiansilkroad
    i m making account control panel
    this style is gr8
    now my question is we using mssql 2005
    can u please tell me code where i have to replace mysql to mssql,
    thanks

  453. kurnia1 says:

    28 Sep, 2011

    Nice, maybe soon i will integrate to my website or other website. thanks..

  454. Hamza says:

    29 Sep, 2011

    @Jeeremie: hey jeeremie does the text “Hello guest” changes when the user logs on…i just want to check it before using it on my website..:)

    • Jeeremie says:

      4 Oct, 2011

      Yes, it replaces it with the username.

  455. crassmedia says:

    1 Oct, 2011

    Hello,

    thanks for this tutorial and yes it works on IE8. Thank you from Berlin

    Thomas

  456. heather says:

    10 Oct, 2011

    awesome work, thanks so much! i actually found this via a WP plugin someone built from it. I saw you had 2 MooTools versions listed under plugins. Here’s the link to the jQuery version I found:
    http://wordpress.org/extend/plugins/wp-sliding-logindashboard-panel/faq/

  457. John says:

    14 Oct, 2011

    Hi

    Beautiful script thanks.
    I wanted to have the slider say welcome username when the user was logged in and also change the login link to say logout and activate my logout script.
    I made the following changes to the tab div and it works well.
    Might be useful to someone.
    note I have a function username() which returns the users name and another one loggedin() which returns true if the user is logged in.

     
    <?php if (loggedin()) echo "Hello ” . username() . “” ;
    else echo “Hello Guest!”; ?>
    |

    Log In | Register

    Logout | Register

    Close Panel

     

  458. John says:

    14 Oct, 2011

    This adds a profile link when logged in ( see my previous comment)

     
    <?php if (loggedin()) echo "Hello ” . ucfirst(username()) . “” ;
    else echo “Hello Guest!”; ?>
    |

    Log In | Register

    Profile
    |
    Log out

    Close Panel

     

  459. John says:

    14 Oct, 2011

    Hopefully the code should show up now.

    I wanted to have the slider say welcome username when the user was logged in and also change the login link to say logout and activate my logout script. It also adds a profile link when logged in.
    I made the following changes to the tab div and it works well.
    Might be useful to someone.
    note I have a function loggedin() which returns true if the user is logged in and another one username() which returns the users name.

     
    <?php if (loggedin()) echo "Hello ” . ucfirst(username()) . “” ;
    else echo “Hello Guest!”; ?>
    |

    Log In | Register

    Profile
    |
    Log out

    Close Panel

     

  460. John says:

    14 Oct, 2011

     
    <?php if (loggedin()) echo "Hello " . ucfirst(username()) . "" ;
    else echo "Hello Guest!"; ?>
    |

    Log In | Register

    Profile
    |
    Log out

    Close Panel

     

    • Jeeremie says:

      19 Oct, 2011

      I don’t know why, my commenters are not allowed to post code since a WordPress update. Does anyone know how to allow it?

  461. Nirav says:

    19 Oct, 2011

    Dear Jeeremie ,

    Please See My Previous Comment ,

    We are waiting for This Login Panel for MSSQL+
    PHP
    MicrosoftSql+ PHP

    Please Help me iN Out Guys Thanks

    • Jeeremie says:

      19 Oct, 2011

      Sorry, i can’t help you with this. I have no experience with MSSQL or MicrosoftSQL for instance

  462. Lewis says:

    22 Oct, 2011

    I really love this but ran into an issue I can’t seem to figure out how to work around.

    I want to have another button next to the tab. When the tab is clicked the top panel animates over the new button. However, in their default state the new button is not clickable.

    I tried this with your demo file. If you remove all space prior to the first link in your text it will not be clickable when it’s directly to the left of the tab. Any idea on how to make the button AND the tab individually clickable?

  463. Jeff says:

    26 Oct, 2011

    Can I use this to set it to the left of my monitor instead of the top?

    I would love to use this for a side tree panel container.

  464. Eddie says:

    27 Oct, 2011

    Was wondering how to make the tab wider.
    I want to change Register to Create Account and that makes the text wrap and fall below the tab.

    I have looked at the CSS and can’t figure it out.

    • Eddie says:

      27 Oct, 2011

      Well, nevermind, I figured it out, finally.
      Set width: auto; for .tab ul.login

  465. Eddie says:

    27 Oct, 2011

    I will say, though, that for some reason, my panel won’t drop down. Sometimes when I look at the javascript in Firebug, the code in the functions are disabled. I can’t set breakpoints. If I reload, they become enabled but it never breaks when I click on the LI.

    Any ideas? I do not have anything else with an id of open or close.

  466. nikah şekeri says:

    29 Oct, 2011

    Demo link does not work

  467. cris says:

    2 Nov, 2011

    Very pretty and useful script. Thanks so much.

    Did anyone else notice the blink in IE8 once you hit close? I don’t see it on this website but it is there when trying out the downloaded code. I don’t get the blink when trying it in Firefox.

  468. cohen says:

    7 Nov, 2011

    Hey, how exactly do I use this? I havnt learnt JS yet so im not sure.

    • cohen says:

      7 Nov, 2011

      Ok I got it all worked out. How would I go about making another link people can click to make the window slide open?

  469. Vijay says:

    12 Nov, 2011

    Why can’t you provide this under some permissive free software license such as BSD, Apache ? I always think GPL license helps the rich.. (Look who got more money through GPL – Redhat, Oracle, etc)

  470. Gökay says:

    27 Nov, 2011

    Jeremie, panel and you are perfect :) I would use a plugin that inspired of your script. But it doesnt’t work. Your script works but I even log in, panel in your script doesn’t save or see my login. However thank you so much.

  471. Tomas says:

    11 Dec, 2011

    could i use this panel with changed html and css in my commercial project?

  472. Ailton says:

    19 Dec, 2011

    Didn’t work more in my website: http://ailton.pro.br
    I can not find the error
    Can you help me? thanks

  473. Flipse says:

    24 Dec, 2011

    The download seems to be dead… Does anybody know of a mirror?

    • Jeeremie says:

      28 Dec, 2011

      Yes, indeed. Thanks for reporting. I have updated some plugins last week and guess something went wrong. I will try to update this asap!

  474. Piufan says:

    29 Dec, 2011

    Hello, I installed the script on a site with another js script with a different version. The menu bar that loads js 1.6.2 does not work anymore. How can I do there is the js for the sliding (1.3.2) than that for the menu (1.6.2)? Thank you.

  475. Indonesian says:

    3 Jan, 2012

    very nice …thank’s

  476. McLovin says:

    7 Jan, 2012

    The panel works great. Is there anyway where I can lock the tab so that it aligns to the right of a table? I have a table that is 900px wide and its centered on a page. when the browser window is adjusted i want the tab to align right of the table. And since the table is centered the tab should only move with the table and not the width of the window.

    -thanks

    • McLovin says:

      10 Jan, 2012

      can this be fixed or am I just stuck?

  477. IanDMac says:

    11 Jan, 2012

    Hi Jeeremie,

    Firstly, considering how long ago your login slider was first released, after many many days of searching the net, this still looks like the easiest to implement and use amongst a page filled with jQuery add-ons, so great job, well done.

    I have one question which I have seen asked a few times before, but no answer as such. Can more than one tab and toppanel exist on the same page, i.e. is it possible to have 2 or more tabs that calls down separate panels? Maybe some one has extended yours to achieve this that you might be able to direct us onto or advise.

    Again, its great and I got it working in 10 mins – well done. Ian

  478. Craig says:

    11 Jan, 2012

    Hi Jeeremie,

    I am using this to display the excerpt within a post in WP (to keep things looking tidy). I was wondering if you knew how I could start with the div being open say 30px, then opening fully upon clicking of the open link?

    Many thanks!

  479. Thomas says:

    15 Jan, 2012

    Hi,

    I’m including the slider thru the ‘include’ php function. Is there a way that I can externally open de slider by a link somewhere on the index.php (which includes the slider by an include php function)?

    Something like an “Open Slider” link somewhere in the middle of my page?

    Merci in advance!

    Thomas

  480. Abhishek says:

    15 Jan, 2012

    What to do if i want this panel on right side of the page instead of top??

  481. jcdus2024 says:

    16 Jan, 2012

    Salut Jeremie.

    Tout d’abord mes félicitations;l’espace membres que tu as crée est vraiment bien fait.
    De plus assez simple à integrer. :)
    Pour l’instant je test mes conditions d’inscription,à savoir un nombre minimum de caractères pour le prénom et une adresse email valide en php.

    J’utilise pour l’instant un renvoi automatique sur la page d’acceuil où se situe le login panel(je n’ai pas encore crée de page personnelle pour les membres).
    .

    Toutefois, je rencontre un petit soucis et ceci dans un cas particulier c’est à dire:
    Un membre décide de s’inscrire et ne respecte pas mes conditons,il clique sur enregistrer:
    La page “pageacceuil.php” est donc réactualisée le seul soucis c’est que le panel est de nouveau refermé donc il ne voit pas mes indiquations en php.

    Ma questoin est donc:

    Serait t’il possible de garder ouvert le pannel lors d’une erreur de ce genre(idem lors de l’accés à son compte lorsque un membres rentre un mauvais mot de passe ou identifiant)?

    J’espere avoir été clair dans mes requètes en espérant que cela puisse être réalisable..

    Merci encore pour ton travail,je te souhaite beaucoup de réussite pour tes futurs projets.

    Cordialement

  482. Chris says:

    20 Jan, 2012

    The slider seems to work as it should, but…when i click inside one of the field to fill in information, it slides further down the site. And when im clicking inside another field, it slides up again. How come? Any solution.

  483. Ali says:

    21 Jan, 2012

    amazing !!!! thanks

  484. kurai says:

    23 Jan, 2012

    I’m not good on english, I don’t understand much the “license” stuffs.. :( cuz I used your scripts and I modified some of it like I remove the registration part and added more buttons.. I am get jailed for that? :( huhu

    • Jeeremie says:

      6 Feb, 2012

      No :) You will not get to jail. Just give me credit for it, that’s all. Don’t try to sell it to anyone saying you created it.

  485. Darren says:

    23 Jan, 2012

    Hi, this is great plugin.

    I have a question though. When changing to push down the content, im IE6 the tab doesn’t appear to have the right z-index and it pushes the height of the tab into the content.

    Any ideas?

    Thanks

    • Darren says:

      23 Jan, 2012

      Found a fix for this…

      added this to an ie6 only stylesheet:

      #wrapper { /*your main container*/
      position: relative;
      top: -60px; /*height of your tab */
      }

  486. heohni says:

    26 Jan, 2012

    GREAT SCRIPT!! THANKS!!

  487. Phil says:

    26 Jan, 2012

    Is it possible to have this on the same page twice? Split in half at the top so I could display some different content in the other half but controlled seperately.

  488. gurudas says:

    29 Jan, 2012

    Used on my website. Looks cool. Thank you very much for the code.

  489. Reverend says:

    1 Feb, 2012

    Hi thanks 4 sharing this.
    Maybe it is possible to slide the Panel in from the bottom? I am a Noobie and need to know what i have to change to realise the Login comming from Bottom…

  490. Ashish says:

    6 Feb, 2012

    wow, this one seems to be lighter and better than the previous version.. thanks again..

  491. Luk Fur says:

    6 Feb, 2012

    Nice idea.. And I have seen your this script used on many webs..
    Awesome !

  492. Jan says:

    8 Feb, 2012

    I’m trying to use this with jquery mobile, but my footer just flickers. has anyone had success with this? I have my footer always visible.

  493. Gilbert says:

    10 Feb, 2012

    Hello Jeremie,

    Ce jquery script est vraiment bien, cependant j’ai un petit probleme avec IE8 concernant cette application. Si le #toppanel div position est “relative” et le div n’est pas tout en haut de la page (mon cas entraine que le “#toppanel” soie dans un div plus bas dans ma page) le “#panel” div “height” est double lorsqu’il est ouvert. resultant a une enorme partie du panel vide, ET, pousse le contenu encore plus bas. Je ne suis pas en mesure de monter la page publiquement, mais elle est disponible pour plus de details si besoin est.

    Apart pour IE 8 tout fonctionne! comme prevu.

    Meilleures salutations.

    P.S. pardon pour le manque d’accents, mon clavier est GB ;-P, contactez moi si possible!

  494. Elevatelocal says:

    17 Feb, 2012

    The slider seems to work as it should, but…when i click inside one of the field to fill in information, it slides further down the site. And when im clicking inside another field, it slides up again. How come? Any solution.

  495. Prodyot says:

    21 Feb, 2012

    Excellent script and very useful too.
    Can’t stop admiring it.
    Thanks.

  496. PixelRelish says:

    26 Feb, 2012

    For my main site (http://pixel-relish.com/new/index_combo.html) I edited your CSS to lock the slider to the bottom margin. Then, for iPad/iPhone I created an alternate location (with alternate graphics) because one cannot lock anything to the bottom of the view pane in iPad/iPod. I can get each slider working as designed so long as I keep them on separate pages EVEN when each references the same combo CSS file (one that comments out the regular for iPad and the iPad for regular) and combo slide.js file. But when I try to paste the iPad version’s html into the normal version’s html to create a combo page, the slide no longer works on the iPad (still works in a computer browser). I am trying to NOT have to maintain two sites (one regular, one iPad). I assume I am missing a clearing element or something that I need to add to the combo document, but none of the ones I have tried have had a useful effect, and I admittedly am NOT a developer (merely a designer who has learned basic coding to better design for what is possible + reasonably safe). Could I possibly get your help on the combo document? I am happy to give you credit for input :-) Once I can solve the problem on the new home page, I can figure out how to create similar CSS for the interior pages, where I plan to use graphics specific to each page (to match the center color of that page). In other words, lots of not too complicated derivations from your basic script that perhaps will help people see how flexible what you’ve developed is :-) Standard page is pixel-relish.com/new/; iPad-functional one is pixel-relish.com/index_ipad.html; combo nonfunctional one is pixel-relish.com/new/index_combo.html. Thanks!

  497. PixelRelish says:

    27 Feb, 2012

    Never mind: Figured something out :-)

  498. mike says:

    28 Feb, 2012

    Question about the license, is it allowed to use this in WordPress themes for sale? Full credit and link would be back to you of course, it wouldn’t be sold as is, but built into a theme. Just wanted to check..thanks!

  499. chad says:

    4 Mar, 2012

    hey.. i cannot see my whole webste when i used the panel>>
    is there any way i can scroll down my website without affecting the panel query?

  500. Jerry R. says:

    6 Mar, 2012

    Wonderful work!

    I would like to use it as a drop-down menu. How can I get the panel to close after someone clicks on an <a link?

    Thank you very much!

  501. Zeth says:

    14 Mar, 2012

    I think I’ll try this! The sliding effect always come in handy!

  502. david says:

    14 Mar, 2012

    hello, great script!

    i’ve got it working from the bottom and starting expanded.

    the only problem is that the toggle links aren’t working as expected.

    when i click on the “close” link (which is first since it starts expanded) it toggles from “close” to “open” yet doesn’t collapse. if i click it again it’ll collapse but it also toggles from “open” to “close” and be backwards all the time so that it says “close” but it’s really expanding and visa versa.

    any idea on why this is happening?

    thanks!

  503. Psychosis says:

    2 Apr, 2012

    Works in IE9 too

    • Ernest says:

      5 May, 2012

      No, not working on IE9.

  504. carshowtime says:

    7 Apr, 2012

    i love the sliding register like this. this a good idea using the jquery

  505. Eva says:

    24 Apr, 2012

    Hi, thanks for your wonderful work!!!! It’s amazing!! Still I have a question, how can I put it in the horizontal?

  506. Osama says:

    28 Apr, 2012

    very nice work, but have some problems when implementing it.

    For example: there are more than form tag, and input with name =submit, class names are so common which leads to conflict with other class …etc
    I am talking from developer point of view (I am using dot net)

    but I really appreciate your good design.

    Regards,
    Osama

  507. firestorm says:

    2 May, 2012

    Is this possible to see the gravatar in the bar?
    thanx

  508. hectorcyprus says:

    8 May, 2012

    The slider seems to work as it should, but. when i click inside one of the field to fill in information. it slides further down the site

  509. Jay says:

    14 May, 2012

    Good Stuff,
    Please solve my query. when i click on Log In – i want to set focus on text box. i tried a lot for this help required.

  510. venkat says:

    17 May, 2012

    great work buddy… was looking for such an easy one long time and finally got it.. thanks a lot.. keep up the good work.

  511. Michael says:

    27 May, 2012

    Hi I love this login/register panel its by far the nicest ive seen around. Just one question, I was under the understanding that the registered page would not be viewable to people who are not logged in but when I add content to it with Dreamweaver then go to view it I can see the content without having to log in?

    Im sure its probably something simple but any help before my brain explodes would be great, thanks.

  512. Peugeot says:

    27 May, 2012

    I like this modification.
    Has someone a tutorial on how to integrate this in vbulletin 4?

  513. Michael says:

    30 May, 2012

    Hi does anyone look at this anymore?

  514. Bgates says:

    18 Jun, 2012

    the download links to the zip file all “404”

    • Jeeremie says:

      19 Jun, 2012

      Sorry, upgraded WordPress yesterday and forgot to regenerate permalinks for the downloads. It should work just fine now. If not, let me know.

  515. sven says:

    28 Jun, 2012

    Hello,
    thanks for all these code an tutorials,
    but i have 2 questions.
    1 is it possible to activate the script with one button, first click , slide open, next click slide close?
    2. are there any examples with 2 panels, first panel opens with click on the tab, second panel opens with click on an button in panel 1.
    so create some cascading

    with regards en greetings from Belgium

  516. Freddy Mcdary says:

    30 Jun, 2012

    IS there a way to the login bar at the top static, like so it stays there when you scroll down the page?

  517. JoAnne says:

    3 Jul, 2012

    Hi, I am using this on my site, and initially it works ok, but then it goes away. I have another js feature on my site, but the two should not affect each other. Not sure why its working one minute and not the next. Any previous issues like this?

    • JoAnne says:

      3 Jul, 2012

      Never mind I fixed it. Thanks. Works great.

  518. Spor Ayakkabı says:

    9 Jul, 2012

    Thank You Very Nice Work..

  519. rsingh says:

    11 Jul, 2012

    Great work.
    Is it possible to have panel slide from the bottom of the page instead of the top.

    If yes, can you provide code/css.

    I am guessing it is relatively easy, I just cant seem to figure it out.

    Thanks

  520. Ahmed says:

    13 Jul, 2012

    Hello Jeeremie

    very Nice & Clean Sliding Login Panel i like it really.

    Jeeremie i create language table in my database this table call language and i used it with function call lang($id,lang);

    i create this function to switch between two languages Arabic and English in your sliding login

    And here is the Example :

    if(!$_POST['username'] || !$_POST['password'])

    ================

    $err[] = ‘All the fields must be filled in!';
    ===============

    i replaced the error text to be like this

    $err[] = lang(1,”arabic”);

    where 1 is Language id and arabic is the error message (All the fields must be filled in!)

    it’s work perfect stand alone but when i use it with $err[] array this error message appear in the top of page :

    Warning: Cannot modify header information – headers already sent by (output started at C:\AppServ\www\functions.php:36) in C:\AppServ\www\demo.php on line 144

    where the problem ?! is it session!

    Thank you

    • Ahmed says:

      17 Jul, 2012

      I solve the problem … Thank you

  521. ABID KHAN says:

    2 Sep, 2012

    Hi, What will be the code to have panel exactly show in demo? I want the code which should be pasted in Panel html content in wp sliding panel setting. Please help me. I am a newbie.

  522. adanaemlak says:

    4 Oct, 2012

    here’s the code of gradient, try it if you can change it. thanks.

  523. Emlakbuluyoruz says:

    6 Oct, 2012

    really it does. make sure it does not conflict with another Ajax framework with another jQuery script.

  524. Matthew says:

    12 Dec, 2012

    Got this login up and running but cant get ketchup validation plugin to work on it.

    Any help please

    Matthew :)

  525. ibrahim says:

    18 Dec, 2012

    hi .. nice panel

    I’m panel setup work..

    Register user not send password help !!! ??

Leave a Reply

Sorry, comments are closed