Thread Rating:
  • 15 Vote(s) - 3.93 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Tutorial] jQuery collapsible sidebar
#31
Thank you Joshee!Big Grin
Reply
#32
I have been using this and getting some issues with FOUC (flash of unstyled content). I sort of fixed it by putting this code in the header of my portal (which is where I have this bar)

<script>if (document.getElementById) {
document.write('
<style type="text/css" media="screen">
#buttons {display:none;}
</style>
');
}</script>

The downside is it slows page loading times. If anyone has some better ideas it would be good Smile
Random Fish and Sims Maniac
MY PLUGINS
Help MyBBSupport help you - remember to mark your threads as solved


Reply
#33
(07-07-2010, 11:04 PM)Joshee Wrote: There was another thread for something like this, but it wasn't very smooth, and didn't save cookies. So they told me they wanted to see my way. So I threw it together on localhost and now I'm posting it! Smile

It takes one extra edit, and two more files to save to your forum, but I would say it's worth it.

First off, you need to download the attached files and upload them to your forum. The two image go in your forum's images folder. The two javascript files go in your jscripts folder.

After you have downloaded and uploaded those files, you must go to your Admin CP, click the Templates & Style tab, then on the left click Templates, select your theme, expand the Index Templates, and finally, open up index. Replace it all with this.
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
    lang.no_new_posts = "{$lang->no_new_posts}";
    lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
<style type="text/css">
.buttons {
    background: url(images/arrowright.png) no-repeat;
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;
}

.clickedbuttons {
    background: url(images/arrowleft.png) no-repeat;
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;
}
</style>
</head>
<body>
{$header}
<a class="buttons" style="float: right;"></a>
<a class="clickedbuttons" style="float: right;"></a>
<br class="clear" />
<div class="sidebar" style="float: right;width: 19%;">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead"><strong>
Latest News
</strong></td>
</tr>
<tr>
<td class="trow1">
You can put some news stuff here
</td>
</tr>
</table>
</div>
<div class="forums" style="float: left;width: 80%;">
{$forums}
</div>
<br class="clear" />
{$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>

Save and close.

Now expand the Ungrouped Templates, and open headerinclude.

Find:
{$stylesheets}

Add before:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.cookie.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/sidebar.js"></script>

I'm pretty sure that's all you will need. If you have any problems let me know!

Demos:
http://dark-design.tk
http://petforums.biz/index.php

Hello, I apologize for my bad English!
What be the code to add the news (Latest news) in the sidebar? Thk!
Reply
#34
(01-15-2011, 10:12 AM)consolgame Wrote:
(07-07-2010, 11:04 PM)Joshee Wrote: ..

Hello, I apologize for my bad English!
What be the code to add the news (Latest news) in the sidebar? Thk!

Find this in the code in your index template:

<td class="trow1">
You can put some news stuff here
</td>
And edit that.
Jessie S. Wrote:7:34 PM - Jessie S.: I woke up this morning and there was some random guy in the trunk of my car
First plugin: UInfo 2.5
Reply
#35
any idea how to get a last post box up and working, or search box, link box etc, etc?

any help would be welcome (i will link to your site once i get it right. )

thanks

heres the poetry forum so you can see how far i got Sad


it'd done thanks.
Reply
#36
Same question, anyway to put some of the portal boxes there?
[Image: 40DS6Te.png]

Reply
#37
It’s weird that jquery.cookie.js file is already uploaded to the server, and I just could not retrieve it, but got 406 Error. The following is the message I got:

    Not Acceptable
    An appropriate representation of the requested resource /wocai/jquery.cookie.js could not be found on this server.
    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Reply
#38
(01-30-2011, 06:07 PM)alv4 Wrote: Same question, anyway to put some of the portal boxes there?

That would require some other core file edits.

(02-02-2011, 05:14 PM)ecanikajo Wrote: It’s weird that jquery.cookie.js file is already uploaded to the server, and I just could not retrieve it, but got 406 Error. The following is the message I got:

    Not Acceptable
    An appropriate representation of the requested resource /wocai/jquery.cookie.js could not be found on this server.
    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

I'm not sure what could be causing this error.
Reply
#39
Thanks for the reply, what files have I to edit? (If you wanna answer and not are lazy xd) Big Grin
[Image: 40DS6Te.png]

Reply
#40
It is necessary to edit index.php. I would like someone to explain what is required to add.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)