Advertisement:

Author Topic: [SMF Trick] Creating a jQuery Sliding Login Panel  (Read 65346 times)

Offline Anthony`

  • Sophist Member
  • *****
  • Posts: 1,347
  • Gender: Male
  • Formerly Project Evolution
    • AnthonyCalandra on GitHub
Re: [SMF Trick] Creating a jQuery Sliding Login Panel
« Reply #40 on: May 07, 2012, 10:57:53 PM »
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?

Offline .ABM.

  • SMF Hero
  • ******
  • Posts: 1,950
  • Gender: Male
  • C.A.B.J

Offline john256

  • Newbie
  • *
  • Posts: 7
Re: [SMF Trick] Creating a jQuery Sliding Login Panel
« Reply #42 on: May 08, 2012, 07:03:55 AM »
Little bit confusing not getting exactly  :(

Offline nominasi.com

  • Semi-Newbie
  • *
  • Posts: 39
    • Nominasi
Re: [SMF Trick] Creating a jQuery Sliding Login Panel
« Reply #43 on: May 08, 2012, 11:24:09 AM »
Thank you, very helpful information

Offline Anthony`

  • Sophist Member
  • *****
  • Posts: 1,347
  • Gender: Male
  • Formerly Project Evolution
    • AnthonyCalandra on GitHub
Re: [SMF Trick] Creating a jQuery Sliding Login Panel
« Reply #44 on: May 08, 2012, 04:48:24 PM »
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.

Offline pixeleyes

  • Jr. Member
  • **
  • Posts: 302
Re: [SMF Trick] Creating a jQuery Sliding Login Panel
« Reply #45 on: June 13, 2012, 02:41:41 AM »
Login Sliding bar is working perfect just got a problem in board fonts.

All fonts changed into large size?

« Last Edit: June 13, 2012, 12:45:17 PM by pixeleyes »

Offline Anthony`

  • Sophist Member
  • *****
  • Posts: 1,347
  • Gender: Male
  • Formerly Project Evolution
    • AnthonyCalandra on GitHub
Re: [SMF Trick] Creating a jQuery Sliding Login Panel
« Reply #46 on: June 13, 2012, 04:47:10 PM »
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.

Offline MoinFaraz

  • Jr. Member
  • **
  • Posts: 118
  • Gender: Male
    • Internet Marketing Forums
Re: [SMF Trick] Creating a jQuery Sliding Login Panel
« Reply #47 on: June 14, 2012, 10:28:04 AM »
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 :)

Offline -=[Vyorel]=-

  • Sr. Member
  • ****
  • Posts: 743
  • Gender: Male
  • Web Hoster
    • RomanianPowerHosting on Facebook
    • Romanian Power Hosting
Re: [SMF Trick] Creating a jQuery Sliding Login Panel
« Reply #48 on: June 18, 2012, 10:50:12 PM »
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]
echo $context['html_headers'];and add after:
Code: [Select]
// 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>';
My mods for SMF - [6].

Offline savita009

  • Newbie
  • *
  • Posts: 1
Re: [SMF Trick] Creating a jQuery Sliding Login Panel
« Reply #49 on: June 25, 2012, 08:37:44 AM »
you have to download first javascript libray and then use slide toggle



Offline Principiante1

  • Jr. Member
  • **
  • Posts: 286
  • Gender: Male
  • Accion = reaccion!
    • pages/Portal-Xtremo/187585781330429 on Facebook
    • SIMPLE MACHINES
Re: [SMF Trick] Creating a jQuery Sliding Login Panel
« Reply #50 on: October 20, 2012, 11:55:30 AM »
Project Evolution Very nice work  :D !

One question ...

Code: [Select]
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]
// 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  :)
« Last Edit: October 20, 2012, 12:05:57 PM by Principiante1 »

Offline Anthony`

  • Sophist Member
  • *****
  • Posts: 1,347
  • Gender: Male
  • Formerly Project Evolution
    • AnthonyCalandra on GitHub
Re: [SMF Trick] Creating a jQuery Sliding Login Panel
« Reply #51 on: October 20, 2012, 12:06:21 PM »
Sorry, I don't understand what you're asking!

Offline ProtoGT

  • Semi-Newbie
  • *
  • Posts: 54
Re: [SMF Trick] Creating a jQuery Sliding Login Panel
« Reply #52 on: November 12, 2012, 03:39:34 PM »
I tried to add this a custom theme and on boardindex everything just jumbled together, something with the slide.css file. Any ideas?

Offline DMR123

  • Full Member
  • ***
  • Posts: 487
    • Photography Forum
Re: [SMF Trick] Creating a jQuery Sliding Login Panel
« Reply #53 on: November 18, 2012, 10:41:39 AM »
Great.. however, can this not be created and uploaded as a modification?