MyBB Community Forums
[Tutorial] jQuery collapsible sidebar - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: [Tutorial] jQuery collapsible sidebar (/thread-73062.html)

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13


RE: [Tutorial] jQuery collapsible sidebar - Emperor - 2012-08-31

How can we put this in all pages rather than just index ?


RE: [Tutorial] jQuery collapsible sidebar - Eric - 2012-08-31

(2012-08-31, 03:15 PM)Emperor Wrote: How can we put this in all pages rather than just index ?

Add this to the end of your header template:
<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%;">

And this to the beginning of your footer template:

</div>

Then add this to your global.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;
}

That should work, I haven't tested it.


RE: [Tutorial] jQuery collapsible sidebar - Scois0n - 2012-09-05

Wonderful! Tried to adapt this script for hiding tbody too, but that didn't work out so well Toungue


RE: [Tutorial] jQuery collapsible sidebar - HardHarry - 2013-01-21

(2012-01-14, 02:04 AM)martec Wrote:
(2012-01-13, 11:08 PM)TheNova Wrote: I added this sidebar, but I'm struggling to find what I can put in it. Can anyone tell me exactly how to add latest threads or posts to this sidebar?

Regards.

open index.php

find

// Build the birthdays for to show on the index page.

add above

//begin
// Latest forum discussions
if($mybb->settings['portal_showdiscussions'] != 0 && $mybb->settings['portal_showdiscussionsnum'])
{
	$altbg = alt_trow();
	$threadlist = '';
	$query = $db->query("
		SELECT t.*, u.username
		FROM ".TABLE_PREFIX."threads t
		LEFT JOIN ".TABLE_PREFIX."users u ON (u.uid=t.uid)
		WHERE 1=1 $unviewwhere AND t.visible='1' AND t.closed NOT LIKE 'moved|%'
		ORDER BY t.lastpost DESC 
		LIMIT 0, ".$mybb->settings['portal_showdiscussionsnum']
	);
	while($thread = $db->fetch_array($query))
	{
		$lastpostdate = my_date($mybb->settings['dateformat'], $thread['lastpost']);
		$lastposttime = my_date($mybb->settings['timeformat'], $thread['lastpost']);
		// Don't link to guest's profiles (they have no profile).
		if($thread['lastposteruid'] == 0)
		{
			$lastposterlink = $thread['lastposter'];
		}
		else
		{
			$lastposterlink = build_profile_link($thread['lastposter'], $thread['lastposteruid']);
		}
		if(my_strlen($thread['subject']) > 25)
		{
			$thread['subject'] = my_substr($thread['subject'], 0, 25) . "...";
		}
		$thread['subject'] = htmlspecialchars_uni($parser->parse_badwords($thread['subject']));
		$thread['threadlink'] = get_thread_link($thread['tid'], 0, "lastpost");
		$thread['lastpostlink'] = get_thread_link($thread['tid'], 0, "lastpost");
		eval("\$threadlist .= \"".$templates->get("portal_latestthreads_thread")."\";");
		$altbg = alt_trow();
	}
	if($threadlist)
	{ 
		// Show the table only if there are threads
		eval("\$elatestthreads = \"".$templates->get("portal_latestthreads")."\";");
	}
}
//end

in Index Templates --> index

find

<div class="sidebar" style="float: right;width: 19%;">

add after

{$elatestthreads}


Pls give code for adding newest post also...

Or how to put these section in sidebar,...

Thanks..


RE: [Tutorial] jQuery collapsible sidebar - AJ! - 2013-01-27

(2012-08-31, 11:20 PM)Eric J. Wrote:
(2012-08-31, 03:15 PM)Emperor Wrote: How can we put this in all pages rather than just index ?

Add this to the end of your header template:
<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%;">

And this to the beginning of your footer template:

</div>

Then add this to your global.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;
}

That should work, I haven't tested it.

Ok...I tried this...and on all my other pages my tabbed forums are all over to the side....so I'm not sure if I am doing something wrong.


RE: [Tutorial] jQuery collapsible sidebar - Goblin Market - 2013-02-03

(2012-08-31, 11:20 PM)Eric J. Wrote:
(2012-08-31, 03:15 PM)Emperor Wrote: How can we put this in all pages rather than just index ?

Add this to the end of your header template:
<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%;">

And this to the beginning of your footer template:

</div>

Then add this to your global.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;
}

That should work, I haven't tested it.

On the main index page, it puts a second arrow under the first and opens up two sidebars right next to each other. Works fine in threadbody though.



Also the next question is a general question to the thread.

I've a sidemenu bar with a relative/absolute (not sure which..) position that exists on all pages of the forum like this:
[Image: tumblr_mhms035lzS1s34e9do1_500.png]

The sidemenu bar plugin comes from here: http://mods.mybb.com/view/sidemenu-user-admin

I was wondering if it's possible to move the sidebar from the wrap/body to the sidemenu bar. And it would sort of open up a pull-out tab layer

[Image: tumblr_mhms035lzS1s34e9do4_r1_500.png]

I fully understand if I'm asking too much, the sidebar's pretty nifty as it is, but just thought I'd put this question/request here if anyone could help me.

Cheers.


RE: [Tutorial] jQuery collapsible sidebar - Cancer9003 - 2013-02-26

great tutorial ♥
i've test it and works very good but i have a major problem. when i put the following code, BBCodes of Editor got disappear

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>



RE: [Tutorial] jQuery collapsible sidebar - feastboy - 2013-04-25

how to add 160 x 600 size banner in sidebar..?

Thanks


RE: [Tutorial] jQuery collapsible sidebar - Maj - 2013-05-02

Is there any way to make sidebar width fixed (for example 300px)?


RE: [Tutorial] jQuery collapsible sidebar - jaa09 - 2013-05-02

wow works fine on my forum here: http://www.camotesislandforum.com/

Thank you for this, finally i found this..