Customizing SMF > Tips and Tricks

[SMF Trick] Creating a jQuery Sliding Login Panel

<< < (2/11) > >>

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

--- Code: --- 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 ---

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

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

Thanks for using!

desibees:
Thank you.  ;D

Dzonny:
Can we see a demo please?

Runic:
interesting trick :)

Alpay:

--- Quote from: Dzonny on August 07, 2011, 06:35:29 AM ---Can we see a demo please?

--- End quote ---

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

Navigation

[0] Message Index

[#] Next page

[*] Previous page