MyBB Community Forums

Full Version: Sliding Jquery with existing sidebar
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi guys,

my website www.slaveryreport.com. I had this function on a website I owned about five or six years ago that's now long gone. I want to add a button to click on my sidebar that will cause the sidebar to slide out of the way and expand the forums to fill the void while using cookies to remember the settings, but I don't want to replace the sidebars, I just want to wrap the jquery function around my existing sidebar code:

current index template:
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<style type="text/css">
.newsbar {
	background: #81AFFF;
	border-top: 2px solid #2603E9;
	border-bottom: 2px solid #2603E9;
	text-align: center;
	margin: 10px auto;
	padding: 5px 20px;
	font-weight: bold;
}
.newsbar2 {
	background: #FFFFFF;
	border-top: 2px solid #FFFFFF;
	border-bottom: 2px solid #FFFFFF;
	border-right: 2px solid #FFFFFF;
	border-left: 2px solid ##FFFFFF;
	text-align: left;
	margin: 10px auto;
	padding: 5px 20px;
	font-weight: bold;
}
.holiday {
	background: #008F32;
	border-top: 4px solid #FF0000;
	border-bottom: 4px solid #FF0000;
	text-align: center;
	margin: 10px auto;
	padding: 5px 20px;
	font-weight: bold;
}
.appbanner {
	background: #FFFFFFF;
	border-top: 2px solid #000000;
	border-bottom: 2px solid #000000;
        border-right: 2px solid #000000;
        border-left: 2px solid #000000;
	text-align: center;
	margin: 10px auto;
	padding: 5px 20px;
	font-weight: bold;
}
</style>
</head>
<body>
{$header}
<center>
<div style="display:inline-block;width:768"><a href="http://f02880c2-e512-455e-b827-f36c61f76dae.mobapp.at?src=banners&amp;p={t:768x66@64}"><img src="http://storage.conduit.com/Mobile/e4/2a/e49b547d-f02a-4387-8080-17b2791419e4/Images/f4fcffb1-4a58-4c44-92e1-bb95822124a7.png" alt="Slavery Report" style="border:0;"></a></div></br></br>
</center>
<p class="newsbar">
<u><b>Emergency</u></b><br/> <a href="tel:911">Dial 911 (USA)</a> | <a href="tel:1-800-225-5324">Federal Bureau of Investigation</a> | <a href="tel:7034655495">Intl Justice Mission</a> | <a href="tel:330149745137">French Foreign Legion</a>
</p>
<div class="sidebar" style="float: right; width: 20%;">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
   <td class="thead">
      <strong>Social Media</strong>
   </td>
</tr>
<tr>
   <td class="trow1">
       <div class="center"><a href="http://www.facebook.com/SlaveReport"><img src="images/qws-tech/facebook.png" alt="Like our Facebook Page"></img></a> <a href="https://twitter.com/FreeWorldSlaves"><img src="images/qws-tech/twitter.png" alt="Follow us on Twitter"/></a> <a href="http://www.slaveryreport.tumblr.com"><img src="images/qws-tech/tumblr.jpg" alt="Follow Us on Tumblr"></img></a> <a href="https://play.google.com/store/apps/details?id=com.conduit.app_f02880c2e512455eb827f36c61f76dae.app"><img src="images/qws-tech/android.jpg" alt="Add our Android App"></img></a> <a href="http://www.reddit.com/user/SlaveryReport/"><img src="images/qws-tech/reddit.jpg" alt="Read Us On Reddit"></img></a></div></td>
</tr>
</table>
<br />
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
   <td class="thead">
      <strong>Help Support Our Cause</strong>
   </td>
</tr>
<tr>
   <td class="trow1">
<!-- Go Fundme Donation Box -->
<div class="center">
<a target="_top" style="border: 0 none;" href="http://www.gofundme.com/5h5ykk?utm_medium=wdgt" title="Donate via GoFundMe."><img style="border: 0 none;" src="http://funds.gofundme.com/css/3.0_donate/navy/widget.png"></a>

<!-- Bitcoin Donation Box -->
<a href="bitcoin:1BGnCKbgq2YaXhLdCLEMyvFthyNRQ1Tnik" title="Donate Via Bitcoins."><img src="http://i42.tinypic.com/2m67ar4.png" alt="Donate Via Bitcoin"></img></a>

</div>
</td>
</tr>
</table><br/>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
   <td class="thead">
      <strong>Forum Statistics</strong>
   </td>
</tr>
<tr>
   <td class="trow1">
       <span class="smalltext">
<strong>Members &raquo; </strong>{$lang->num_members} {$stats['numusers']}<br />
<strong>Newest Member &raquo; </strong>{$lang->latest_member} {$newestmember}<br />
<strong>Threads &raquo; </strong>{$lang->num_threads} {$stats['numthreads']}<br />
<strong>Posts &raquo; </strong>{$lang->num_posts} {$stats['numposts']}
<br />
</span>
   </td>
</tr>
</table>
<br />
</div>
<div class="forums" style="float: left; width: 79%;">
{$forums}
</div>
{$boardstats}
<dl class="forum_legend smalltext">
	<dt><img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}" title="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
	<dd>{$lang->new_posts}</dd>
	<dt><img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}" title="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
	<dd>{$lang->no_new_posts}</dd>
	<dt><img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}" title="{$lang->forum_locked}" style="vertical-align: middle;" /></dt>
	<dd>{$lang->forum_locked}</dd>
</dl>
<br style="clear: both" />
{$footer}
</body>
</html>

Any help would be greatly appreciated Smile Thanks!!!

-ZuFu

Bump for help please.
This is what you need to do exactly:
http://community.mybb.com/thread-73062.html
No, that doesn't work for me. I don't want to replace my entire index template with something else. I already have other code I've manually entered into my index page and just need to put the required code in here. That's why I quoted my index page code.

Alright, I figured it out. I took the two codes and put them side by side and went line by line putting the code where it should be. It works now Smile

Btw, I have a few others threads open that I need help with, any chance anyone can check those out too? Smile thanks!!!!