[SMF Trick] Creating a jQuery Sliding Login Panel

[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?