Nice & Clean Sliding Login Panel built with jQuery
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.
Preview/Download
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:
Close button when panel in 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:
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:
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
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, Tutorials…
- Sliding Panel: WordPress Plugin by Justin Tadlock.
- SuperSlider-Login by Twincascos.
- Making A Cool Login System With PHP, MySQL & jQuery by Tutorialzine.com.
- SlipJaq – A Drupal module for a sliding login panel by Daniel Norton
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
Want to become a guest author on this blog?
Benjamin says:
26 Mar, 2009
Works perfectly in IE 8 for me. Tried it on Windows 7.
alex says:
27 Mar, 2009
Looking forward for the tutorial on how to implement this into wordpress.
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!
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.
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!
dewey says:
28 Mar, 2009
Excellent! Waiting for the WP implementation. this deserves a donation
..
Jon says:
29 Mar, 2009
Thanks for the script. I got it implemented today into wordpress.
Works like a charm.
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:
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?
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?
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.
Berke says:
30 Mar, 2009
Hi.How can convert button to Turkish.Thanks
Jeremie Tisseau says:
31 Mar, 2009
Open index.html, and replace “Login” in the Value attribute by your own turkish text:
<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:
<meta http-equiv="content-type" content="text/html; charset=utf-8" />Turkish alphabet: charset=windows-1254 (see reference)
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
Jeremie Tisseau says:
3 Apr, 2009
Tu peux voir les détails de cette license ici.
taewoo says:
3 Apr, 2009
What about browsers with javascript not enabled? Your script doesn’t degrade gracefully
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.
awake says:
3 Apr, 2009
very nice…
Jon Berry says:
4 Apr, 2009
Love it!! Thanks so much. Works great in IE8/Vista.
thom says:
4 Apr, 2009
thats great! thx as much!
antonio says:
6 Apr, 2009
We are waiting the tutorial too, but please, instructions for noobs
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
Ayham Alsuleman says:
7 Apr, 2009
Great Brilliant
anyup says:
7 Apr, 2009
thinks for share
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.
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.
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.
Gençay says:
7 Apr, 2009
Yes, thanks for lesson.
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:
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
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:
Browser jump to top because we set the link location to href=”#”:
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…
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.
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.
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
ChevronX says:
9 Apr, 2009
I wonder how hard would this be to put it into Doku or Mediawiki.
Linda Kelson says:
9 Apr, 2009
Great script… thanks.
Check out: jQueryBasics.com
http://www.jquerybasics.com
plisvb says:
10 Apr, 2009
Thank you for this Jeremie Tisseau
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
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.
Johnny5 says:
14 Apr, 2009
Very nice article!
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!
Graeme says:
14 Apr, 2009
How difficult would this be to make using the prototype framework?
S. Muralikrishna says:
15 Apr, 2009
Thanks a ton, i was waiting for this for a long time
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.
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.
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.”
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:
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();
});
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.
Jax Newton says:
17 Apr, 2009
You might find the information here:
jQueryBasics.com
http://www.jquerybasics.com
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
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
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:
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!
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
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;
});
Jeremie Tisseau says:
22 Apr, 2009
Thanks Stephens for the info.
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
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
Jeremie Tisseau says:
23 Apr, 2009
Glad to know you could fix it.
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?
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 !
Cody says:
27 Apr, 2009
How do I make it so when someone submits the form, it doesn’t automatically close the panel?
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.
Derleth says:
29 Apr, 2009
que bonito
y es gratis 
nice i love you xD
Mark says:
29 Apr, 2009
Hi jeeremi,
Thanks for a GREAT SCRIPT!!!
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.
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?
mubarak says:
2 May, 2009
Amazing !!!!!!!!!!!!!!!!!!
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.
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!
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.
Jeremie Tisseau says:
6 May, 2009
An easy way would is to change the right value for .tab ul.login in slide.css:
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?
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!!
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.
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?
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.
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?
Thomas says:
11 May, 2009
Any chance this could be easily made into a Drupal module?
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?
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
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.
piatrouc says:
12 May, 2009
Actually just found the solution for Flash problem:
wmode should be opaque (not transparent)
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?
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.
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!
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.
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?
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.
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.
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?
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!
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!
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?
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.
No, it will redirect to the HREF page specified only when javascript is disabled.
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.
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.
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.
Amanda says:
18 May, 2009
How do I change the height of the panel?
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
Robbie says:
19 May, 2009
@Amanda, I believe its the slide.css file, #panel height attribute
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?
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;”
Albi says:
22 May, 2009
Thank you for the information.
great work
Ericc says:
28 May, 2009
AWESOME job!
Too bad for me that it doesn’t slide from the bottom, but great script !
durand says:
29 May, 2009
thanks this has been a great help
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 “#”?
贝库 says:
2 Jun, 2009
good
gaurav says:
3 Jun, 2009
Nice script. Anyone figure out a way to have two of these on the same page?
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.
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.
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
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!
Jeremie Tisseau says:
14 Jun, 2009
If you open slide.css, you will notice the position property for #toppanel is set to absolute:
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?
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!
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?
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
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…
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
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
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
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!
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
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!
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.
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.
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!
Chris Beaman says:
4 Jul, 2009
Very cool. Thanks!
Elvis says:
6 Jul, 2009
Wow, awesome. Any advice how to center the open/close tab below the panel?
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.
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!
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?
Mike says:
18 Jul, 2009
Has anyone figured out how to do 2 panels on one page?
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
Paul says:
20 Jul, 2009
Hello
How can I set to auto focus on the username?
Thanks!
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
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
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!
Jasa Web Desain says:
26 Jul, 2009
it work on every browser…. very nice..
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.
Shadi says:
28 Jul, 2009
Hello,
I am trying to put adsense into the panel but its not appearing
Andrew says:
28 Jul, 2009
hello in response to Joakim :
Use the below flash code it will wk perfectly
1.
2.wmode=”opaque”
Thanks.
Andrew says:
28 Jul, 2009
1.
2.wmode=”opaque”
.
.
.
.
.
.
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
nuke says:
2 Aug, 2009
man, nice job! great!
iHolyElement says:
2 Aug, 2009
Still cant fix it, Any help? Thanks!
Oliver says:
2 Aug, 2009
Very Cool SCRIPT! Thank you!
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!
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…
thomas says:
6 Aug, 2009
Yes , thanks
jonners says:
6 Aug, 2009
This code is brilliant thanks for providing it.
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?
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.
小T says:
13 Aug, 2009
nice work！做得真漂亮
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?
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!
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 »
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.
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
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
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.
Ravikumar V. says:
22 Sep, 2009
nice one thanks
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?
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;
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.
brierycredact says:
28 Sep, 2009
Thank you for great post!
jerryi says:
29 Sep, 2009
This is brilliant thanks for providing it
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
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
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?
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
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!
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
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?
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
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!
Jeremie Tisseau says:
16 Oct, 2009
@lavaper, read comment 37 above.
@diego, not sure to understand your question. Could you ask again?
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
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
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/
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.
Diego says:
29 Oct, 2009
thanks Jeremie Tisseau!
I used that article as a guide and worked great!
Pozycjonowanie Stron says:
1 Nov, 2009
Very nice tutorial
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 ?
Jeremie Tisseau says:
3 Nov, 2009
Yes, sure. Nettuts uses the “animate” effect. Check the docs or read Nettuts article for explanation (step 15).
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!
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();
});
});
dailce says:
6 Nov, 2009
Great work for making the mootools version Igor Stepanov
Thanks.
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.
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
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….
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.
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?
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
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
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
John Fox says:
15 Nov, 2009
Thanks! Completely spaced on using href=’javascript:void(0);’
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();
});
});
Jeremie Tisseau says:
16 Nov, 2009
Yes, Mike is right. return false will prevent the browser jump to the link anchor.
Steve says:
16 Nov, 2009
Thanks, this is great. Really like it!
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.
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.
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
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?
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
yan says:
31 Dec, 2009
the porblem with masterpage is fixed my fault , he didnt reach the js i used ../ and not ./ lamo
http://yesayahandoyo.blogspot.com/2010/01/how-to-implement-nice-clean-sliding.html says:
4 Jan, 2010
Implement it in Drupal 6 block
Nathan says:
4 Jan, 2010
Any ideas on howto slide down the panel when a page loads:
eg.
Plz… anyone ?
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
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.
Matbaa says:
12 Jan, 2010
Really good script. Still ie8 problem exists.
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!!!
noob says:
21 Jan, 2010
Havent tried it yet, but: wonderful work!
Thx!
CMR says:
21 Jan, 2010
Nice. But how to implement with joomla? perhaps we can have a tutorial on this!
Sedat Kumcu says:
22 Jan, 2010
Thanks for this article. Very beatifull. Best regards.
Revast says:
24 Jan, 2010
Anyone have a tutorial on how to implement this into vBulletin (if possible)? Would be much appreciated!
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.
Marc says:
28 Jan, 2010
Nice article. Easy to complete.
Am sure it will help a lot of people.
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
Ravi Kumar Tamada says:
2 Feb, 2010
Nice a new implementation……
Preisvergleich says:
2 Feb, 2010
Good post. Thank you for good great information.
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:
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).
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
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?
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
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
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.
jo says:
13 Feb, 2010
Good stuff! many thanks!
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?
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!!!
I am AWESOME says:
18 Feb, 2010
The plugin does not have a valid header.
please help
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.
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….
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…
НИКОЛАЙ says:
23 Feb, 2010
LANGUAGE
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…..
Garcya says:
26 Feb, 2010
Life saver, that’s what you are
Manu says:
26 Feb, 2010
superb work!!
i just need a simple user login system to use with your scripts.
does any one knows?
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
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.
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.
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
Jeremie Tisseau says:
6 Mar, 2010
Yes, you can. It is released under a Creative Common License 2.5.
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..
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”
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
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
Mega says:
19 Mar, 2010
really nice article but i have a problem about toogle effect code. Does it work?
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?
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:
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
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.
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
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
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.
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
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!
Jeremie Tisseau says:
25 Mar, 2010
@adrian, thanks for the kind words
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?
Christlove says:
26 Mar, 2010
thanks this has been a great help
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
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.
Daniel Norton says:
1 Apr, 2010
If you release this under GPL v2, I’ll release a Drupal module for it.
Daniel Norton says:
1 Apr, 2010
Or GPL V3.
The module is ready to give away now.
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?
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.
Daniel Norton says:
2 Apr, 2010
With Jérémie’s cooperation, I have released a corresponding Drupal module:
http://www.danielnorton.com/slpjq
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 …
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
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.
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!
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.
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 ?
pg says:
17 Apr, 2010
Hi,
#281, I was missing a closing tag, fixed my problem
.
Thanks for this awesome login panel.
Cheers.
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
Fernsehsessel Blog says:
26 Apr, 2010
Yes, this login panel is awesome. Great site and high quality info.
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
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?
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: ß
Sorry for the double post…
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.
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
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.
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
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
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 ?
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…
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
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.
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:
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
And replace the code in slide.js by this one.
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.
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;”
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:
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
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
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
=)
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.
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!
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
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:
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
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?
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!
Cheers
Darkflame
Darkflame says:
22 Jul, 2010
Managed to get around my problem by using lightboxes launched from the drop down
It’s set up very sweet, thanks for your most excellent work!
http://i27.tinypic.com/29bzfb7.png
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
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.
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
Who Say İn says:
21 Jul, 2010
I will using this our site.
nikhil says:
21 Jul, 2010
thanks for sharing it. Nice effect.
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