[SMF Trick] Creating a jQuery Sliding Login Panel

[ascaland]

Hello, today im going to show you how to add a simple jQuery-powered sliding login panel into your SMF 2 forum. For simplicity of this tutorial, the default (Curve) theme is used. The resources used for this trick is from this site here,
http://web-kreation.com/tutorials/nice-clean-sliding-login-panel-built-with-jquery/

Frst off, begin by downloading the package provided on their website and unpackaging the contents. Next, upload the images from the package's image folder into the default theme's image directory. A modified slider.css is attached below, which will go into the default theme's css directory. The jquery file is only required if you dont already have it uploaded (or you can just use what's hosted on Google, your choice), make sure its in the default theme's scripts directory. Simply leave the slide.js file as it was needed to be modified and will be put to use next.

Once everything is uploaded, its time to make some modifications. In the index.template.php file, look for any Javascript code in the template_html_above() function, and add this code below,

Code Select Expand

// The below JS interferes with some HTML in the messages area of members, so just disable this for logged in members (wont hurt anyways)
if ($context['user']['is_guest'])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/slide.css" />
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/slide.js"></script>
<script type="text/javascript"><!-- // --><![CDATA[
$(document).ready(function() {

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

// Collapse Panel
$("#closepanel").click(function(){
$("div#panel").slideUp("slow");
});

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

});
// ]]></script>';

This allows the panel to dynamically interact on the page. The slider CSS is also included in the template or use. Next is to create the actual slider. Above,

Code Select Expand

echo !empty($settings['forum_width']) ? '
in the template_body_above() function, add,

Code Select Expand

if ($context['user']['is_guest']) {
echo '
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h1>Welcome to Web-Kreation</h1>
<h2>Sliding login panel Demo with jQuery</h2>
<p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>
<h2>Download</h2>
<p class="grey">To download this script go back to <a href="http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Download">article &raquo;</a></p>
</div>
<div class="left">
<p>Whatever the heck you want.</p>
</div>
<div class="left right">
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
<form id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
<label class="grey" for="user">' . $txt['username'] . ':</label>
<input type="text" name="user" size="10" class="field" />
<label class="grey" for="passwrd">' . $txt['password'] . ':</label>
<input type="password" name="passwrd" size="10" class="field" />
<label class="grey" for="cookielength" class="field">' . $txt['set_session_length'] . '</label>
<select name="cookielength" id="rememberme">
<option value="60">', $txt['one_hour'], '</option>
<option value="1440">', $txt['one_day'], '</option>
<option value="10080">', $txt['one_week'], '</option>
<option value="43200">', $txt['one_month'], '</option>
<option value="-1" selected="selected">', $txt['forever'], '</option>
</select>
<div class="clear"></div>
<input type="submit" value="', $txt['login'], '" class="bt_login" /><br />';

if (!empty($modSettings['enableOpenID']))
echo '<br /><input type="text" name="openid_identifier" id="openid_url" size="25" class="input_text openid_login" />';

echo ' <input type="hidden" name="hash_passwrd" value="" />
</form>
</div>
</div>
</div>

<div class="tab">
<ul class="login">
<li class="left">&nbsp;</li>
<li>' . $txt['hello_guest'] . ' ' . $txt['guest'] . '!</li>
<li class="sep">|</li>
<li id="togglepanel">
<a id="open" class="open" href="#">' . $txt['login'] . '</a>
<a id="close" style="display: none;" class="close" href="#">' . $txt['close_panel'] . '</a>
</li>
<li class="right">&nbsp;</li>
</ul>
</div>
</div>';
}

The above code creates the actual panel for guests viewing the page. Already embedded with SMF's login system. Feel free to edit how you would like, questions on customizing this panel can be asked.

Lastly, in the language file index.english.php, add these language strings,

Code Select Expand

$txt['close_panel'] = 'Close Panel';
$txt['set_session_length'] = 'Set session length:';

All that is left is to download and upload the below CSS script. Enjoy!

Quick Tip

For those wishing to have the forum moved down slightly to make room for the bar, we need to make a quick edit to the forum wrapper so we can move everything down slightly. In index.css search for,

Code Select Expand

/* This division wraps the entire forum when a forum width is set. */
div#wrapper
And within the curly braces add,

Code Select Expand

padding-top: 75px;

[desibees]

Awesome! Thank you mate

[Ricky.]

Nice work. Desibees you got nice friends

[Alpay]

Good work

[desibees]

Nice work. Desibees you got nice friends

hehe yea. He's awesome 
I'm testing it right now so i'll let you guys know how it goes.

Edit: This works like a charm. Also a tip from me, you could use "Whatever the heck you want." part for Guest notification saying "You must register to do this and so on".

[ascaland]

Hey guys, I fixed something with the tutorial that messed up the private messages area for logged in members. Change,

Code Select Expand

echo '
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/slide.css" />
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/slide.js"></script>
<script type="text/javascript"><!-- // --><![CDATA[
$(document).ready(function() {

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

// Collapse Panel
$("#closepanel").click(function(){
$("div#panel").slideUp("slow");
});

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

});
// ]]></script>';

To (its a simple if statement at the top),

Code Select Expand

// The below JS interferes with some HTML in the messages area of members, so just disable this for logged in members (wont hurt anyways)
if ($context['user']['is_guest'])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/slide.css" />
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/slide.js"></script>
<script type="text/javascript"><!-- // --><![CDATA[
$(document).ready(function() {

// Expand Panel
$("#openpanel").click(function(){
$("div#panel").slideDown("slow");
});
 
// Collapse Panel
$("#closepanel").click(function(){
$("div#panel").slideUp("slow");
});
 
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#togglepanel a").click(function () {
$("#togglepanel a").toggle();
});
 
});
// ]]></script>';

Thanks for using!

[desibees]

Thank you. 

[Dzonny]

Can we see a demo please?

[Deaks]

interesting trick

[Alpay]

Can we see a demo please?

http://web-kreation.com/demos/Sliding_login_panel_jquery/

[kenet]

good job, although I long ago that I use

mine is a bit modified

http://www.skinmod.eu/create/rc4/index.php

sorry for my English

[ascaland]

Can we see a demo please?

http://web-kreation.com/demos/Sliding_login_panel_jquery/

Yes, that is the demo however the one I posted is slightly modified to disclude the register part since that would require some modifications to the registration system. But thats easy enough to just add in again if you want it.

[desibees]

Could someone guide me so I can add the register one in this and completely integrate it in my site?

[xFDragon]

Forgive if this is a simple question.

But is it possible to add a X or some sort of button to press to close the box? Should say a user click on it too see what it's about, they then have to refresh the page to close it again. Not sure if I did something wrong but I have checked it over a few times and it all seems to add up.

[ascaland]

Forgive if this is a simple question.

But is it possible to add a X or some sort of button to press to close the box? Should say a user click on it too see what it's about, they then have to refresh the page to close it again. Not sure if I did something wrong but I have checked it over a few times and it all seems to add up.

They shouldnt have to reload the page to close the panel. Something is obviously wrong. Link to forum?

[darren1981]

Thanks for this looks great... I am having trouble making it work tho not 100% sure i am following your instruction correctly or if because i have modified my header a little in which it may be why it is not working for me as of yet...

Any chance i can attach my "index.template.php" file and has someone place the code above where it needs to be ?? i am getting a lot of "Template Parse Error!" issues when i try adding the code as you have described above.

A huge thanks in advance to anyone who can help get this working for me.

Regards, Darren

EDIT!!!

OK seems to be working... it's because i was logged in i could not see it :S so i guess it's only for non-logged in people / guests ??

Also it opens fine'ish lol but shuts by it's self almost straight away ?? anyone got any ideas ??

Thanks again would really love to see this working. Here is a screenshot:  http://i56.tinypic.com/2nvv22e.png [nofollow]

not sure if it's normal or ive screwed something up..

Cheers again for any help on this matter.

[ascaland]

Can I have a link to your forum?

[darren1981]

Thanks for your reply / help... my forum is currently password protected... i actually removed the jquery login panel for now but would really love to get it working tho... i am implementing a few other jquery scripts into the site right now but at the time of writing my above posts / having issues with the login panel i was not using any other jquery scripts so not sure why it was acting up... i got it working well kinda.. once clicking it to open it was refreshing the page which closes the panel...

Anyways if it's ok i will pm you my forum addy and password in the next day or two..

Again thanks for your help with this, if there is any way i can help you in return just yell out.

Regards, Darren

[sos99sos]

Very nice!

But (with me being lazy and all that), did you encounter a lot of headache when trying to incorporate when in a logged in state as well? Did anyone add this as the main login/logout functionality for the forum (webpage)

/S-O

[((Kakashi))]

I gotta tell you, PE, I'm a bit lost...I'm actually using this very jQuery Slider on my site as a login for both my client's CP and as a way for them to log into my SMF community via SSI (Once logged in I'm calling the ssi_welcome and ssi_news functions in that panel). I've incorporated the slider into my WHMCS (billing package) control panel and was just today starting to dig into integrating it into my SMF when I ran across your post.

"Man..." I though, " somebody has already figured this out. That ought to save me some effort!"

The problem is...I'm not following your tutorial.

"...look for any Javascript code in the template_html_above() function, and add this code below" - OK...did that (I'm actually using a customized Curve theme)

"Next is to create the actual slider. Above,"

Code Select Expand

echo !empty($settings['forum_width']) ? '

huh...where does this line go? Above...what? I'm totally lost on this one.

I've completed the remainder of your tutorial (and thanks for the contribution ), but obviously the "echo !empty($settings['forum_width']) ? '" needs to be in there....somewhere (especially seeing as it's not working  . )

[((Kakashi))]

Disregard my confusion. I had an older version of this slide java. The file names I had were different from what you referenced in your code and I did figure out where to place code (maybe I should actually read entire sentences for a change  ).

Thanks again for your contribution 

[enik]

Exelent nice tutorial 

[~Dragon~]

that is interesting!

[Upakul]

I gotta tell you, PE, I'm a bit lost...I'm actually using this very jQuery Slider on my site as a login for both my client's CP and as a way for them to log into my SMF community via SSI (Once logged in I'm calling the ssi_welcome and ssi_news functions in that panel). I've incorporated the slider into my WHMCS (billing package) control panel and was just today starting to dig into integrating it into my SMF when I ran across your post.

"Man..." I though, " somebody has already figured this out. That ought to save me some effort!"

The problem is...I'm not following your tutorial.

"...look for any Javascript code in the template_html_above() function, and add this code below" - OK...did that (I'm actually using a customized Curve theme)

"Next is to create the actual slider. Above,"

Code Select Expand

echo !empty($settings['forum_width']) ? '

huh...where does this line go? Above...what? I'm totally lost on this one.

I've completed the remainder of your tutorial (and thanks for the contribution ), but obviously the "echo !empty($settings['forum_width']) ? '" needs to be in there....somewhere (especially seeing as it's not working  . )

anyone help me with this?
I have same problem

[ascaland]

I gotta tell you, PE, I'm a bit lost...I'm actually using this very jQuery Slider on my site as a login for both my client's CP and as a way for them to log into my SMF community via SSI (Once logged in I'm calling the ssi_welcome and ssi_news functions in that panel). I've incorporated the slider into my WHMCS (billing package) control panel and was just today starting to dig into integrating it into my SMF when I ran across your post.

"Man..." I though, " somebody has already figured this out. That ought to save me some effort!"

The problem is...I'm not following your tutorial.

"...look for any Javascript code in the template_html_above() function, and add this code below" - OK...did that (I'm actually using a customized Curve theme)

"Next is to create the actual slider. Above,"

Code Select Expand

echo !empty($settings['forum_width']) ? '

huh...where does this line go? Above...what? I'm totally lost on this one.

I've completed the remainder of your tutorial (and thanks for the contribution ), but obviously the "echo !empty($settings['forum_width']) ? '" needs to be in there....somewhere (especially seeing as it's not working  . )

anyone help me with this?
I have same problem

Are you sure you dont have an older version like he had?

[mrw1986]

Hello, I have this running on my site www.techfuzion.net [nofollow] and when I hit the "Login" link it pulls down but the Menu bar from my forum still appears through the slider. Is there a way to fix this?

Thanks!

[mashby]

http://techfuzion.net/Themes/GrayStyle2/css/index.css?fin20
BEFORE:

Code Select Expand

#topnav {
position: relative;
height: 32px;
z-index: 1000;
padding: 0;
margin: 0;
}
AFTER:

Code Select Expand

#topnav {
position: relative;
height: 32px;
z-index: 998;
padding: 0;
margin: 0;
}

[mrw1986]

Thank you very much, worked a treat!

[loplo]

I can't make it work. I think I misunderstand something.
Here are the steps I made:
1 copied style.css from the package and the attached file into "Themes\default\css\"
2 edit index.template.php and insert the first code after "template_html_above()"
3 insert the second code above "echo !empty($settings['forum_width']) ? '"
4 close and save index.template.php
5 edit index.english.php and insert the third code
6 copied the content of the js folder into scripts

Nothing appears. I was expecting, if I'm doing something wrong to get some errors, but no error and no bar
I've tried this on a clean install, locally.

I'd really appreciate if anyone could help me out.

SMF 2.0.2

[Bigguy]

I just finished this on www.smfhelper.info and it works great. From what you post that is how I did it and it works fine. Mine is on the default theme.

[loplo]

I'm trying also on the default, but no joy.

LE
It works only if I'm not logged in. After login the info panel is not showing.

[Bigguy]

Is that not the way it is supposed to work. If your a guest it shows the login panel and if your logged in then the whole thing does not show. It's only for guests and non-logged in members. If I'm not mistaken.

[loplo]

OK, thanks.
I thought it could be showed also after login for some customization. The logooff team made some themes and they did a pretty nice job.

[ascaland]

OK, thanks.
I thought it could be showed also after login for some customization. The logooff team made some themes and they did a pretty nice job.

This was initally designed to display only for guests, however you are obviously free to customize this to your needs.

[Inti31]

thanks for that tip - because of testing purposes I decided to make my own mod which have also some little changes integrated
- the avatar is linked to the forum profile (screenshot 1)
- own posts is reachable at the top (next of avatar - screenshot 1)
- an impressum-link ist placed at the bottom next to wap-link (screenshot 2)
- a colored sperator line between each posts (screenshot 5)

it needs just the regbar mod, which have to be installed first
and looks like this, when not logged in... (screenshot 3 + 4)

So it is more flexible for me and saves much time instead of always looking to this thread...

cheers Inti31


cheers inti31

[Founder 2008]

Very nice!!

[MoinFaraz]

I have installed it and it doesn't seems to be working for me...

I am not sure what's causing it not to work... may be an older version of JQuery?

Edit ::: i am using custom theme and was uploading style sheets, images, JavaScript files etc to it... tried placing them in "default" and it worked! looks great and will now alter some portions of text to make it fit my forum...

Cheers

[Aportadordelmix]

When I logout larger are the lyrics  my theme. Why?

[ascaland]

When I logout larger are the lyrics  my theme. Why?

Sorry, I don't understand what you're saying.

[Aportadordelmix]

What I mean is...

The modification I Go perfect ..
The only problem is that when I close session. the letters are big in my theme.

[ascaland]

What I mean is...

The modification I Go perfect ..
The only problem is that when I close session. the letters are big in my theme.

Can you be more specific with what you mean by a session? I'm assuming when you close the panel, it (for some reason) makes the font on your theme larger. Can I have a link to the site with this issue please?

[Aportadordelmix]

My Url http://www.aportesydescargas.com.ar/index.php?action=forum#

[john256]

Little bit confusing not getting exactly 

[nominasi.com]

Thank you, very helpful information

[ascaland]

My URL http://www.aportesydescargas.com.ar/index.php?action=forum#

I was unable to find this panel viewing the site as a guest. Do I need to be registered, is it on a different theme? If it requires me to be logged in, can you please create a test account for me to use?

Little bit confusing not getting exactly 

If you have any issues please let me know so I can address them here.

[pixeleyes]

Login Sliding bar is working perfect just got a problem in board fonts.

All fonts changed into large size?

[ascaland]

Login Sliding bar is working perfect just got a problem in board fonts.

All fonts changed into large size?

Can I have a link to the site with the issue please.

[MoinFaraz]

I am pretty much impressed with this mod, except a minor error...

Its adding some extra space and due to that i have a horizontal scroll bar... here is an screen shot of the same
http://screencast.com/t/j9sv1R427la

While i am logged in (and mod is hidden), i see no scroll bar ... screen shot while i am logged in
http://screencast.com/t/I02WA59Dq

Any help would be greatly appreciated

[-=[Vyorel]=-]

Beautiful script. I have added to my forum

My Url http://www.aportesydescargas.com.ar/index.php?action=forum#

Open index.template.php file, search this code:

Code Select Expand

echo $context['html_headers'];
and add after:

Code Select Expand

// The below JS interferes with some HTML in the messages area of members, so just disable this for logged in members (wont hurt anyways)
if ($context['user']['is_guest'])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/slide.css" />
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/slide.js"></script>
<script type="text/javascript"><!-- // --><![CDATA[
$(document).ready(function() {

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

// Collapse Panel
$("#closepanel").click(function(){
$("div#panel").slideUp("slow");
});

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

});
// ]]></script>';

[savita009]

you have to download first javascript libray and then use slide toggle

[Principiante1]

Project Evolution Very nice work  !

One question ...

Code Select Expand

if ($context['user']['is_guest']) {
echo '
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h1>Welcome to Web-Kreation</h1>
<h2>Sliding login panel Demo with jQuery</h2>
<p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>
<h2>Download</h2>
<p class="grey">To download this script go back to <a href="http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Download">article &raquo;</a></p>
</div>
<div class="left">
<p>Whatever the heck you want.</p>
</div>
<div class="left right">
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
<form id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
<label class="grey" for="user">' . $txt['username'] . ':</label>
<input type="text" name="user" size="10" class="field" />
<label class="grey" for="passwrd">' . $txt['password'] . ':</label>
<input type="password" name="passwrd" size="10" class="field" />
<label class="grey" for="cookielength" class="field">' . $txt['set_session_length'] . '</label>
<select name="cookielength" id="rememberme">
<option value="60">', $txt['one_hour'], '</option>
<option value="1440">', $txt['one_day'], '</option>
<option value="10080">', $txt['one_week'], '</option>
<option value="43200">', $txt['one_month'], '</option>
<option value="-1" selected="selected">', $txt['forever'], '</option>
</select>
<div class="clear"></div>
<input type="submit" value="', $txt['login'], '" class="bt_login" /><br />';

if (!empty($modSettings['enableOpenID']))
echo '<br /><input type="text" name="openid_identifier" id="openid_url" size="25" class="input_text openid_login" />';

echo ' <input type="hidden" name="hash_passwrd" value="" />
</form>
</div>
</div>
</div>

<div class="tab">
<ul class="login">
<li class="left">&nbsp;</li>
<li>' . $txt['hello_guest'] . ' ' . $txt['guest'] . '!</li>
<li class="sep">|</li>
<li id="togglepanel">
<a id="open" class="open" href="#">' . $txt['login'] . '</a>
<a id="close" style="display: none;" class="close" href="#">' . $txt['close_panel'] . '</a>
</li>
<li class="right">&nbsp;</li>
</ul>
</div>
</div>';
}



I have to change so that after logging in, still appear that bar Sliding and indoor user codes:

Code Select Expand

// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{
if (!empty($context['user']['avatar']))
echo '
<p class="avatar">', $context['user']['avatar']['image'], '</p>';
echo '
<ul class="reset">
<li class="greeting">', $txt['hello_member_ndt'], ' <span>', $context['user']['name'], '</span></li>
<li><a href="', $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a></li>
<li><a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a></li>';



echo '
<li>', $context['current_time'], '</li>
</ul>';
}

sorry for my English, Best regards 

[ascaland]

Sorry, I don't understand what you're asking!

[ProtoGT]

I tried to add this a custom theme and on boardindex everything just jumbled together, something with the slide.css file. Any ideas?

[DMR123]

Great.. however, can this not be created and uploaded as a modification?