Customizing SMF > Tips and Tricks

[SMF Trick] Creating a jQuery Sliding Login Panel

(1/11) > >>

Anthony`:
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: --- // 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>';
--- End code ---

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: --- echo !empty($settings['forum_width']) ? '
--- End code ---
in the template_body_above() function, add,

--- Code: --- 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>';
}
--- End code ---

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: ---$txt['close_panel'] = 'Close Panel';
$txt['set_session_length'] = 'Set session length:';
--- End code ---

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: ---/* This division wraps the entire forum when a forum width is set. */
div#wrapper
--- End code ---
And within the curly braces add,

--- Code: ---padding-top: 75px;
--- End code ---

desibees:
Awesome! Thank you mate

Ricky.:
Nice work. Desibees you got nice friends ;)

Alpay:
Good work ;)

desibees:

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

--- End quote ---

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

Navigation

[0] Message Index

[#] Next page

Go to full version