26
Mar
2009
Nice & Clean Sliding Login Panel built with jQuery
By jeeremie. Posted in AJAX / Javascript, Tutorials, WordpressRemember 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.
See the demo here »
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:
<li id="toggle"> <a id="open" class="open" href="#">Log In | Register</a> <a id="close" style="display: none;" class="close" href="#">Close Panel</a> </li> |
… and the javascript to expand/collapse panel and switch the buttons on click:
$(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.
Download
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)!
Download (55.5 KiB, 35,878 hits)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.
How to implement this sliding panel into Wordpress
Next week, I will explain you how to implement this script into Wordpress. Make sure to come back or subscribe to RSS feed. If you can’t wait until next week, check this article to get started: Add a show/hide login panel to your Wordpress theme using Mootools »
View article: Implement a Nice & Clean jQuery Sliding Panel in Wordpress 2.7+
- Sliding Panel: WordPress Plugin by Justin Tadlock.
- SuperSlider-Login by Twincascos.
Enjoy!
Popularity: 90% [?]
March 26th, 2009 at 1:38 pm
[...] new version of this script is available here. This new version works with [...]
March 26th, 2009 at 8:11 pm
Works perfectly in IE 8 for me. Tried it on Windows 7.
March 27th, 2009 at 12:57 am
Looking forward for the tutorial on how to implement this into wordpress.
March 27th, 2009 at 5:54 am
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!
March 27th, 2009 at 11:14 am
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.
March 27th, 2009 at 11:18 pm
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!
March 28th, 2009 at 1:43 am
Excellent! Waiting for the WP implementation. this deserves a donation
..
March 28th, 2009 at 8:12 pm
[...] Panneau de connexion en jQuery [...]
March 29th, 2009 at 10:47 am
Thanks for the script. I got it implemented today into wordpress.
Works like a charm.
March 30th, 2009 at 10:41 am
@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?
March 30th, 2009 at 1:13 pm
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?
March 30th, 2009 at 4:02 pm
where is your code ???
This is just 10 lines of basic jquery’script ….
a big buzz for nothing…
BUT , the css is beautifull .
March 30th, 2009 at 4:26 pm
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.
March 30th, 2009 at 7:52 pm
Hi.How can convert button to Turkish.Thanks
March 31st, 2009 at 12:21 pm
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)
April 2nd, 2009 at 7:52 pm
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
April 3rd, 2009 at 5:42 pm
What about browsers with javascript not enabled? Your script doesn’t degrade gracefully
April 3rd, 2009 at 5:48 pm
Tu peux voir les détails de cette license ici.
April 3rd, 2009 at 8:41 pm
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.
April 3rd, 2009 at 11:41 pm
very nice…
April 4th, 2009 at 2:58 am
Love it!! Thanks so much. Works great in IE8/Vista.
April 4th, 2009 at 11:04 am
[...] Sliding Login Panel – learn how to show/hide a nice login panel using jQuery. [...]
April 4th, 2009 at 8:24 pm
thats great! thx as much!
April 6th, 2009 at 12:36 am
[...] создатели Sliding Login Panel для MooTools, выпустили версию Sliding Login Panel для jQuery. И еще у них на сайте можно скачать приятную тему для [...]
April 6th, 2009 at 7:13 pm
We are waiting the tutorial too, but please, instructions for noobs
April 7th, 2009 at 1:22 am
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
April 7th, 2009 at 4:24 am
Great Brilliant
April 7th, 2009 at 7:29 am
thinks for share
April 7th, 2009 at 9:43 am
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.
April 7th, 2009 at 10:56 am
@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.
April 7th, 2009 at 7:09 pm
[...] one week ago, I introduced the Nice & Clean Sliding Login Panel built with jQuery which was a redesigned of my popular Mootools sliding panel. Today, we will see how to implement it [...]
April 7th, 2009 at 7:49 pm
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.
April 7th, 2009 at 9:09 pm
Yes, thanks for lesson.
April 7th, 2009 at 10:00 pm
[...] Download Read More [...]
April 8th, 2009 at 12:17 am
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
April 8th, 2009 at 3:49 am
[...] Web: web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery [...]
April 8th, 2009 at 10:23 am
@JN0117, To “push” the content down, change the position property to “relative” for the toppanel ID:
April 8th, 2009 at 3:45 pm
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
April 8th, 2009 at 9:21 pm
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
April 9th, 2009 at 10:21 am
@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.
April 9th, 2009 at 12:06 pm
@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.
April 9th, 2009 at 1:51 pm
Great stuff. However, it’s not working in IE8/Windows 2003.
Has anyone tried it if it’s working on IE8/XP?
Thanks.
April 9th, 2009 at 1:53 pm
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
April 9th, 2009 at 1:54 pm
Wow! Still some people use Windows 2003?
It works perfectly in IE8/XP.
April 9th, 2009 at 3:52 pm
I wonder how hard would this be to put it into Doku or Mediawiki.
April 9th, 2009 at 11:03 pm
Great script… thanks.
Check out: jQueryBasics.com
http://www.jquerybasics.com
April 10th, 2009 at 5:49 am
Thank you for this Jeeremie
April 12th, 2009 at 5:43 pm
I tried to make it stick to the head even when i scroll but couldn’t manage. anyone, help please
April 13th, 2009 at 9:11 am
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.
April 13th, 2009 at 9:19 am
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.
April 14th, 2009 at 7:20 am
Very nice article!
April 14th, 2009 at 10:25 am
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!
April 14th, 2009 at 5:55 pm
How difficult would this be to make using the prototype framework?
April 15th, 2009 at 5:37 am
Thanks a ton, i was waiting for this for a long time
April 15th, 2009 at 12:53 pm
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.
April 16th, 2009 at 5:17 am
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.
April 16th, 2009 at 5:19 am
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.”
April 16th, 2009 at 9:41 am
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:
April 16th, 2009 at 5:40 pm
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();
});
April 16th, 2009 at 11:26 pm
@Jeeremie,
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.
April 17th, 2009 at 12:30 pm
You might find the information here:
jQueryBasics.com
http://www.jquerybasics.com
April 18th, 2009 at 1:40 am
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
April 19th, 2009 at 11:34 am
[...] LOGIN PAGE http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/ [...]
April 19th, 2009 at 10:32 pm
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
April 20th, 2009 at 11:32 am
@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!
April 20th, 2009 at 10:28 pm
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
April 22nd, 2009 at 1:04 am
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;
});
April 22nd, 2009 at 9:52 am
Thanks Stephens for the info.
April 22nd, 2009 at 4:56 pm
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
April 22nd, 2009 at 11:26 pm
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
April 23rd, 2009 at 9:44 am
Glad to know you could fix it.
April 24th, 2009 at 1:54 am
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?
April 24th, 2009 at 5:46 am
[...] more information: http://www.web-kreation.com General, [...]
April 27th, 2009 at 3:46 pm
Man this sucks ! It’s overlapping all over the place, i can make that in five seconds. Lame, really lame. Bagingo !
April 27th, 2009 at 6:21 pm
How do I make it so when someone submits the form, it doesn’t automatically close the panel?
April 28th, 2009 at 3:11 am
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.
April 29th, 2009 at 4:05 am
que bonito
y es gratis 
nice i love you xD
April 29th, 2009 at 7:44 pm
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.
April 30th, 2009 at 11:26 am
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?
April 30th, 2009 at 2:10 pm
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.
May 2nd, 2009 at 6:21 pm
Amazing !!!!!!!!!!!!!!!!!!
May 4th, 2009 at 9:57 am
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.
May 5th, 2009 at 3:41 am
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!
May 6th, 2009 at 2:03 am
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.
May 6th, 2009 at 2:19 pm
An easy way would is to change the right value for .tab ul.login in slide.css:
May 6th, 2009 at 10:45 pm
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?
May 6th, 2009 at 11:20 pm
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!!
May 7th, 2009 at 12:18 pm
@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.
May 7th, 2009 at 12:34 pm
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?
May 8th, 2009 at 8:20 am
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.
May 8th, 2009 at 10:01 pm
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?
May 11th, 2009 at 5:24 pm
Any chance this could be easily made into a Drupal module?
May 11th, 2009 at 10:06 pm
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?
May 11th, 2009 at 11:19 pm
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
May 12th, 2009 at 10:11 am
@piatrouc, this happens frequently with flash and I really don’t know how to fix it. Does anyone know?
@Robbie, pls read comments.
May 12th, 2009 at 2:46 pm
Actually just found the solution for Flash problem:
wmode should be opaque (not transparent)
May 14th, 2009 at 3:46 pm
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?
May 14th, 2009 at 9:41 pm
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.
May 14th, 2009 at 11:02 pm
Hi Jeeremie 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!
May 15th, 2009 at 12:29 pm
@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.
May 15th, 2009 at 1:19 pm
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?
May 15th, 2009 at 2:50 pm
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.
May 15th, 2009 at 3:45 pm
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.
May 15th, 2009 at 11:48 pm
@Jeeremie, Thanks for the tip Jeeremie 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?
May 16th, 2009 at 1:25 am
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!
May 16th, 2009 at 1:54 am
@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!
May 16th, 2009 at 1:57 am
@Jeeremie, 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?
May 16th, 2009 at 7:46 am
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.
May 17th, 2009 at 2:43 am
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.
May 17th, 2009 at 3:13 am
@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.
May 17th, 2009 at 6:33 am
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.
May 18th, 2009 at 7:26 pm
How do I change the height of the panel?
May 19th, 2009 at 2:10 am
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
May 19th, 2009 at 10:01 am
@Amanda, I believe its the slide.css file, #panel height attribute
May 19th, 2009 at 10:12 am
@Jeeremie, 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?
May 22nd, 2009 at 2:57 am
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;”
May 22nd, 2009 at 3:22 pm
Thank you for the information.
great work
May 26th, 2009 at 1:22 pm
[...] 7. Nice & Clean Sliding Login Panel [...]
May 27th, 2009 at 3:40 am
[...] Site: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/ [...]
May 28th, 2009 at 12:09 am
AWESOME job!
Too bad for me that it doesn’t slide from the bottom, but great script !
May 29th, 2009 at 4:40 am
thanks this has been a great help
June 1st, 2009 at 12:21 am
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 “#”?
June 2nd, 2009 at 12:03 pm
good
June 3rd, 2009 at 3:44 am
Nice script. Anyone figure out a way to have two of these on the same page?
June 4th, 2009 at 9:24 pm
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.
June 4th, 2009 at 9:26 pm
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.
June 5th, 2009 at 2:31 pm
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)
June 5th, 2009 at 4:48 pm
@Luc, Wordpress removes html tags automatically. No idea about keys you talk about.
@desmond, edit height for #panel in slide.css
June 10th, 2009 at 7:38 pm
[...] a list of 7 sliding panel effects at http://www.balkhis.com/. Of particular note is the one found here which has the most polished appearance of the [...]
June 13th, 2009 at 8:46 pm
Jeeremie,
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!
June 14th, 2009 at 11:30 am
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?
June 14th, 2009 at 2:07 pm
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!
June 15th, 2009 at 9:05 pm
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?
June 16th, 2009 at 12:12 am
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
June 16th, 2009 at 9:50 am
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…
June 16th, 2009 at 9:10 pm
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
June 17th, 2009 at 9:56 pm
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
June 20th, 2009 at 6:50 pm
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.
June 22nd, 2009 at 10:38 pm
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!
June 23rd, 2009 at 11:43 pm
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
June 24th, 2009 at 1:56 am
@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!
June 24th, 2009 at 10:31 am
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.
June 26th, 2009 at 9:51 pm
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.
June 28th, 2009 at 1:13 am
[...] you follow on this link it will guide you through a very clean tutorial on how to implement it, I don’t want to copy [...]
July 2nd, 2009 at 6:49 am
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!
July 4th, 2009 at 9:14 am
Very cool. Thanks!
July 6th, 2009 at 3:29 pm
Wow, awesome. Any advice how to center the open/close tab below the panel?
July 6th, 2009 at 10:41 pm
with the toggle on the link element, preference would dictate that it would be better to happen after the completion of the scroll.
July 7th, 2009 at 10:40 am
[...] Script Adı : Sliding Login Panel with jQuery Dil : Ajax Açıklama : WordPress ile de uyumlu hale getirilmiş açılır kapanır giriş paneli uygulaması. Örnek : Buradan Türü : Free İndir : Buradan [...]
July 17th, 2009 at 9:49 pm
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!
July 18th, 2009 at 12:00 am
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?
July 18th, 2009 at 12:46 am
Has anyone figured out how to do 2 panels on one page?
July 20th, 2009 at 2:47 am
[...] Nice & Clean Sliding Login Panel built with jQuery ↓ [...]
July 20th, 2009 at 9:14 am
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
July 20th, 2009 at 3:47 pm
[...] Nice & Clean Sliding Login Panel built with jQuery ? [...]
July 20th, 2009 at 10:13 pm
Hello
How can I set to auto focus on the username?
Thanks!
July 21st, 2009 at 8:10 pm
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
July 21st, 2009 at 11:45 pm
[...] using jQuery CSS Dock Menu jQuery Virtual Tour How to Load In and Animate Content with jQuery Nice & Clean Sliding Login Panel built with jQuery jQuery Dropdown Search Panel Dynamic Drag’n Drop With jQuery And PHP How To Build A Personal [...]
July 22nd, 2009 at 11:33 pm
[...] using jQuery CSS Dock Menu jQuery Virtual Tour How to Load In and Animate Content with jQuery Nice & Clean Sliding Login Panel built with jQuery jQuery Dropdown Search Panel Dynamic Drag’n Drop With jQuery And PHP How To Build A Personal [...]
July 23rd, 2009 at 1:23 am
[...] using jQuery CSS Dock Menu jQuery Virtual Tour How to Load In and Animate Content with jQuery Nice & Clean Sliding Login Panel built with jQuery jQuery Dropdown Search Panel Dynamic Drag’n Drop With jQuery And PHP How To Build A Personal [...]
July 23rd, 2009 at 8:25 am
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
July 23rd, 2009 at 1:07 pm
Well Jeeremie… 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!
July 24th, 2009 at 12:00 pm
[...] Nice & Clean Sliding Login Panel built with jQuery ↓ [...]
July 26th, 2009 at 12:19 am
it work on every browser…. very nice..
July 27th, 2009 at 2:06 am
hey
I trying to use this script with a tpl file, it dosent seem to work any idea?
please help me.
July 28th, 2009 at 8:49 am
Hello,
I am trying to put adsense into the panel but its not appearing
July 28th, 2009 at 9:02 pm
hello in response to Joakim :
Use the below flash code it will wk perfectly
1.
2.wmode=”opaque”
Thanks.
July 28th, 2009 at 9:03 pm
1.
2.wmode=”opaque”
.
.
.
.
.
.
July 28th, 2009 at 9:07 pm
Now the sliding panel when open comes over an adsense ad, all is good, except that adsense ad is not clickable anymore
July 29th, 2009 at 12:30 am
[...] 1. Sliding login panel – link [...]
August 1st, 2009 at 2:10 pm
[...] Sliding panels for login screens etc by web-kreation.com [...]
August 2nd, 2009 at 12:50 am
man, nice job! great!
August 2nd, 2009 at 3:34 am
Still cant fix it, Any help? Thanks!
August 2nd, 2009 at 3:10 pm
Very Cool SCRIPT! Thank you!
August 2nd, 2009 at 5:48 pm
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!
August 5th, 2009 at 9:22 pm
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…
August 6th, 2009 at 1:04 am
Yes , thanks
August 6th, 2009 at 5:37 pm
This code is brilliant thanks for providing it.
August 9th, 2009 at 3:05 am
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?
August 9th, 2009 at 6:25 pm
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.
August 10th, 2009 at 10:10 pm
[...] using jQuery CSS Dock Menu jQuery Virtual Tour How to Load In and Animate Content with jQuery Nice & Clean Sliding Login Panel built with jQuery jQuery Dropdown Search Panel Dynamic Drag’n Drop With jQuery And PHP How To Build A Personal [...]
August 11th, 2009 at 10:06 pm
[...] Sliding Login Panel – learn how to show/hide a nice login panel using jQuery. [...]
August 12th, 2009 at 5:38 am
[...] Sliding Login Panel built with jQuery- [...]
August 12th, 2009 at 6:20 am
[...] Sliding Login Panel built with jQuery- [...]
August 12th, 2009 at 8:31 am
[...] Sliding Login Panel built with jQuery- [...]
August 13th, 2009 at 9:24 am
nice work！做得真漂亮
August 13th, 2009 at 2:22 pm
[...] Sliding Login Panel built with jQuery- [...]
August 14th, 2009 at 5:08 am
[...] Sliding Login Panel built with jQuery [...]
August 14th, 2009 at 11:12 pm
[...] Sliding Login Panel built with jQuery- [...]
August 17th, 2009 at 9:39 am
There is a problem with the slide effect and jrails, did anyone else run into this, or figure out a solution?
August 18th, 2009 at 12:50 am
[...] Sliding Login Panel eklentisi ise bu yetenekli çatılardan biri olan jQuery ile hazırlanmış oldukça kullanışlı bir eklenti. [...]
August 18th, 2009 at 8:46 am
[...] Sliding Login Panel built with jQuery- [...]
August 19th, 2009 at 1:00 am
[...] Size: 1 KB License: CC Homepage / Demo: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/ [...]
August 19th, 2009 at 2:01 pm
[...] How to implement a Post-to-Wall Facebook-like using PHP and jQuery [...]
August 20th, 2009 at 2:44 pm
[...] Sliding Login Panel built with jQuery [...]
August 22nd, 2009 at 8:46 pm
[...] theme features a nice clean look and includes a jQuery slider for login and [...]
August 23rd, 2009 at 1:43 am
[...] Nice & Clean Sliding Login Panel built with jQuery ↓ [...]
August 25th, 2009 at 7:57 am
[...] Read Article… [...]
August 27th, 2009 at 12:01 am
[...] Sample| Tutorial Share and [...]
August 28th, 2009 at 2:50 am
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!
August 31st, 2009 at 9:24 pm
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 »
September 1st, 2009 at 10:26 pm
This is brilliant thanks for providing it. Can i use it for wordpress?
September 2nd, 2009 at 1:58 am
[...] Sliding Login Panel built with jQuery [...]
September 2nd, 2009 at 10:45 am
Did you read the article? This is in the last paragraph of this article.
September 3rd, 2009 at 1:49 pm
[...] Demo Visit Website Tags: AJAX / Javascript, Tutorials, Wordpress You can follow any responses to this entry [...]
September 3rd, 2009 at 3:06 pm
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
September 4th, 2009 at 12:46 am
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
September 9th, 2009 at 6:49 pm
[...] nu munom RSS padevem, kur par sekseigū paneļi ari uzzynōju. Pateik! Poša ideja ir apraksteita web-kreation blogā. Pats pajiemu vīnu nu Wordpress spraudņim, kas realizej ideju. Saite. Tagad maņ žurnala [...]
September 19th, 2009 at 10:17 pm
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.
September 22nd, 2009 at 4:33 am
[...] script example here ajax script demo here ajax script download here Posted in ajax « Image zoom popup [...]
September 22nd, 2009 at 5:53 pm
nice one thanks
September 22nd, 2009 at 10:48 pm
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?
September 24th, 2009 at 7:52 am
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;
September 25th, 2009 at 4:02 am
[...] bazując na module Moo Login stworzonym przez Yankidank’a, a także rozwiązaniu Jeeremie, który stworzył całość; ja jedynie utworzyłem z tego moduł do Pligg’a. Oczywiście [...]
September 25th, 2009 at 2:22 pm
[...] 23. Nice & Clean Sliding Login Panel built with jQuery [...]
September 26th, 2009 at 10:50 pm
Can we please get the PSD for the images? Not every site has those colors
September 27th, 2009 at 10:23 am
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.
September 28th, 2009 at 2:58 am
Thank you for great post!
September 29th, 2009 at 5:52 am
This is brilliant thanks for providing it
September 30th, 2009 at 12:17 am
[...] 23. Nice & Clean Sliding Login Panel built with jQuery [...]
October 2nd, 2009 at 4:01 pm
[...] Web-kreation has shared sliding login panel that show/hides the login panel on top of page. The panel works by overlapping the content rather than pushing it. [...]
October 2nd, 2009 at 7:25 pm
[...] is sharing a beautifully-crafted sliding login panel that is very handy to be used in websites with limited [...]
October 2nd, 2009 at 8:14 pm
[...] sharing abeautifully-crafted sliding login panelthat is very handy to be used in websites with limited [...]
October 2nd, 2009 at 10:42 pm
[...] John on Oct.02, 2009, under Web Resources Web-kreation is pity a beautifully-crafted shifting login panel which is really accessible to be used in websites with singular [...]
October 3rd, 2009 at 1:06 am
[...] See the article here: Web-kreation – Nice & Clean Sliding Login Panel built with jQuery [...]
October 4th, 2009 at 9:40 pm
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
October 6th, 2009 at 12:04 am
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
October 6th, 2009 at 12:57 am
[...] Login Panel With MooTools/jQuery Website: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/ Demo: http://web-kreation.com/demos/Sliding_login_panel_jquery/ 0 people like this post. [...]
October 6th, 2009 at 1:11 am
[...] 13:02 Posted in category Development, Joomla, Jquery No Comments Web-kreation is sharing a beautifully-crafted sliding login panel that is very handy to be used in websites with limited [...]
October 7th, 2009 at 1:36 pm
[...] Sliding Panel | Demo | Descarga [...]
October 9th, 2009 at 4:07 pm
[...] Sliding Login Panel built with jQuery [...]
October 14th, 2009 at 2:02 am
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?
October 14th, 2009 at 10:05 am
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
October 15th, 2009 at 11:26 am
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!
October 15th, 2009 at 5:38 pm
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!
October 15th, 2009 at 5:45 pm
I am not sure. If you try it, let us know. Thanks
October 16th, 2009 at 4:09 am
Jeeremie
is there a way to make contents of the panel slide in from top like it does in mootools version?
October 16th, 2009 at 5:54 am
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
October 16th, 2009 at 6:36 am
Hello jeeremie. 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!
October 16th, 2009 at 10:10 am
@lavaper, read comment 37 above.
@diego, not sure to understand your question. Could you ask again?
October 17th, 2009 at 12:19 am
Hello jeeremie,
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
October 17th, 2009 at 11:41 am
Yes it can. Check this article ». I explain how to implement this panel into Wordpress. It will give you some clues
October 18th, 2009 at 6:51 pm
[...] add the needed flair, we are using the amazing sliding jQuery panel, developed by [...]
October 19th, 2009 at 9:18 pm
[...] If your website allow user registration, it should definitely a good idea to implement this very nice sliding login form. Of course, it can be used for many other things, as such as a contact form. » View tutorial [...]
October 24th, 2009 at 12:13 am
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/
October 24th, 2009 at 4:20 am
[...] » Find the demo/tutorial here. [...]
October 27th, 2009 at 8:49 pm
[...] Ajax script aici demo Ajax script aici script-ul Ajax download aici 0 Posted by admin @ 27 [...]
October 27th, 2009 at 9:49 pm
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.
October 29th, 2009 at 3:31 am
[...] More Info [...]
October 29th, 2009 at 9:58 am
thanks jeeremie!
I used that article as a guide and worked great!
October 29th, 2009 at 2:11 pm
[...] If your website allow user registration, it should definitely a good idea to implement this very nice sliding login form. Of course, it can be used for many other things, as such as a contact form. » View tutorial [...]
October 30th, 2009 at 3:58 pm
[...] add the needed flair, we are using the amazing sliding jQuery panel, developed by [...]
November 1st, 2009 at 4:51 am
Very nice tutorial
November 3rd, 2009 at 12:33 am
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 ?
November 3rd, 2009 at 10:46 am
Yes, sure. Nettuts uses the “animate” effect. Check the docs or read Nettuts article for explanation (step 15).
November 3rd, 2009 at 11:17 am
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!
November 3rd, 2009 at 2:32 pm
[...] login form. Of course, it can be used for many other things, as such as a contact form. » View tutorial Share and Enjoy: These icons link to social bookmarking sites where readers can share and [...]
November 5th, 2009 at 8:42 pm
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();
});
});
November 6th, 2009 at 12:37 am
[...] View Demo | Go to Tutorial [...]
November 6th, 2009 at 7:45 am
Great work for making the mootools version Igor Stepanov
Thanks.
November 6th, 2009 at 1:02 pm
[...] http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/ Demo: http://web-kreation.com/demos/Sliding_login_panel_jquery/ Share and [...]
November 7th, 2009 at 5:58 am
[...] Link: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/ [...]
November 7th, 2009 at 5:10 pm
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.
November 9th, 2009 at 6:38 am
[...] and stores all the registrations into a MySQL database. This tutorial is an addon to the original sliding jQuery panel developer by [...]
November 9th, 2009 at 12:21 pm
@Marc, you mean a fadeIn/Out effect for example? You can do anything you want with jQuery. Check this: API/1.3/Effects
November 9th, 2009 at 2:26 pm
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….
November 9th, 2009 at 6:29 pm
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.
November 11th, 2009 at 2:44 pm
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?
November 13th, 2009 at 4:19 am
[...] Add a sliding login/dashboard panel to Wordpress Theme. This awesome panel is based on Nice clean sliding login panel built with jquery [...]
November 15th, 2009 at 2:49 am
@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.
November 15th, 2009 at 3:40 pm
@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
November 15th, 2009 at 3:44 pm
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
November 15th, 2009 at 9:23 pm
Thanks! Completely spaced on using href=’javascript:void(0);’
November 15th, 2009 at 11:34 pm
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;
});
});
November 16th, 2009 at 3:14 am
[...] weekend fun was adding to my website the cool sliding control from Jérémie Tisseau website. As pretty it was, I imediately started thinking it as a container to my BNR exchange rate page. [...]
November 16th, 2009 at 11:06 am
Yes, Mike is right. return false will prevent the browser jump to the link anchor.
November 16th, 2009 at 8:18 pm
Thanks, this is great. Really like it!
November 17th, 2009 at 12:28 am
Hi Jeeremie,
Can I have your permission to implement this script as drupal module please?
I have sent you a mail via contact form.
Thanks
November 17th, 2009 at 6:32 am
[...] » Demo y tutorial aquí. [...]
November 17th, 2009 at 3:42 pm
Yes, as long as you give credits and a link back to the original code.
December 30th, 2009 at 4:16 pm
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 ..
December 30th, 2009 at 10:19 pm
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
December 31st, 2009 at 12:41 pm
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?
December 31st, 2009 at 2:05 pm
try using ie8.js for making ie8 more compitable and work like ie7 google it, hope it will help u
December 31st, 2009 at 2:22 pm
the porblem with masterpage is fixed my fault , he didnt reach the js i used ../ and not ./ lamo
January 4th, 2010 at 5:14 pm
[...] Panel Add a sliding login/dashboard panel to Wordpress Theme. This awesome panel is based on Nice clean sliding login panel built with jquery Download: WP Sliding Login/Dashboard [...]
January 4th, 2010 at 9:22 pm
Implement it in Drupal 6 block
January 4th, 2010 at 11:46 pm
Any ideas on howto slide down the panel when a page loads:
eg.
Plz… anyone ?
January 5th, 2010 at 4:54 pm
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
January 6th, 2010 at 7:09 am
[...] Sliding Login Panel built with jQuery [...]
January 7th, 2010 at 8:25 pm
[...] çeşitli içerikler sunabileceğiniz, Internet Explorer 6 için .PNG destekli jQuery eklentisi. WEB SİTESİ – DEMO – [...]
January 10th, 2010 at 12:18 pm
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.
January 12th, 2010 at 4:38 pm
Really good script. Still ie8 problem exists.
January 14th, 2010 at 10:57 am
[...] http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/ 10月 20th, 2009 管理人 No comments [...]
January 14th, 2010 at 5:18 pm
[...] new template got some jQuery love. I’m using a script found in a tutorial at web-kreation.com, which gives really exceptional results. I’m working on a theme for 3mension that will [...]
January 16th, 2010 at 10:26 pm
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!!!
January 19th, 2010 at 10:25 pm
[...] Download | Demo [...]
January 21st, 2010 at 5:19 am
Havent tried it yet, but: wonderful work!
Thx!
January 21st, 2010 at 3:56 pm
Nice. But how to implement with joomla? perhaps we can have a tutorial on this!
January 22nd, 2010 at 7:32 am
Thanks for this article. Very beatifull. Best regards.
January 24th, 2010 at 10:37 pm
Anyone have a tutorial on how to implement this into vBulletin (if possible)? Would be much appreciated!
January 26th, 2010 at 5:17 pm
[...] add the needed flair, we are using the amazing sliding jQuery panel, developed by [...]
January 27th, 2010 at 2:10 am
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.
January 28th, 2010 at 8:06 am
Nice article. Easy to complete.
Am sure it will help a lot of people.
January 28th, 2010 at 9:15 pm
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
January 31st, 2010 at 9:19 pm
[...] Tutorial Tutorial Page [...]
February 1st, 2010 at 1:20 am
[...] 23. Nice & Clean Sliding Login Panel built with jQuery [...]
February 2nd, 2010 at 12:31 am
Nice a new implementation……
February 2nd, 2010 at 5:08 am
Good post. Thank you for good great information.
February 3rd, 2010 at 11:38 am
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
February 4th, 2010 at 4:08 pm
[...] 23. Nice & Clean Sliding Login Panel built with jQuery [...]
February 6th, 2010 at 2:48 pm
What type of license is this released under? Can I use it on a commercial site or is it limited to personal use?
February 8th, 2010 at 4:14 am
Why am I getting the class=”custom home” in my page at the top of the browser? Can someone please advise me?
Lace