News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

[SMF Trick] Creating a jQuery Sliding Login Panel

Started by ascaland, August 06, 2011, 03:28:18 PM

Previous topic - Next topic

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,
// 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,
echo !empty($settings['forum_width']) ? '
in the template_body_above() function, add,
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,
$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,
/* This division wraps the entire forum when a forum width is set. */
div#wrapper

And within the curly braces add,
padding-top: 75px;

desibees



I'm the.. Help abuser


Ricky.



desibees

#4
Quote from: Ricky. on August 06, 2011, 03:33:25 PM
Nice work. Desibees you got nice friends ;)

hehe yea. He's awesome  ;D
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".


I'm the.. Help abuser


ascaland

Hey guys, I fixed something with the tutorial that messed up the private messages area for logged in members. Change,
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),
// 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



I'm the.. Help abuser


Dzonny


Deaks

~~~~
Former SMF Project Manager
Former SMF Customizer

"For as lang as hunner o us is in life, in nae wey
will we thole the Soothron tae owergang us. In truth it isna for glory, or wealth, or
honours that we fecht, but for freedom alane, that nae honest cheil gies up but wi life
itsel."


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


Thomas Alva Edison dijo:

    "No fracasé, sólo descubrí 999 maneras de como no hacer una bombilla."


ascaland

Quote from: Alpay on August 07, 2011, 07:24:33 AM
Quote from: Dzonny on August 07, 2011, 06:35:29 AM
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. :P

desibees

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


I'm the.. Help abuser


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

Quote from: xFDragon on August 08, 2011, 01:50:44 PM
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

#15
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.
CSS3 Forum [nofollow] | HTML5 Forum [nofollow]

ascaland


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
CSS3 Forum [nofollow] | HTML5 Forum [nofollow]

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,"

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  :P. )




Advertisement: