Accordion Style Menu Block

heru28 · October 27, 2007, 03:43:27 AM

Hi, I newbie in this forum but I've already use SMF for 2 years, and TP for almost 1 year. Firstly I use standart setting for TP but I relize the powerfull of Tiny portal and my member forum very like my forum.

http://mxrider.or.id/portal/ (Motorcycle forum in indonesia)

I'm interested in multi bloc use accordion style which dragooon explain here, and all those script already running now and very nice indeed, but I need more help according to call some Tiny portal bloc, for eg. User box, stats, recent topic, etc. but when I call those things, It's not happened at all. Only show text "TPortal_userbox();" without contain any information inside that.

Any suggestion for fixed that?? here's my code I use bellow:

Code Select


global $context, $settings, $options, $scripturl, $txt, $user_info, $modSettings;

// The Style.css and the Javascripts.
echo '
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">


.toggler {
	color: #222;
	margin: 0;
	padding: 2px 5px;
	background: #eee;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-top: 1px solid #f5f5f5;
	border-left: 1px solid #f5f5f5;
	font-size: 11px;
	font-weight: normal;
	font-family: \'Andale Mono\', sans-serif;
}
 
.element {
 
}
 
.element p {
	margin: 0;
	padding: 4px;
}
 
.float-right {
	padding:10px 20px;
	float:right;
}
 
blockquote {
	text-style:italic;
	padding:5px 0 5px 30px;
}


</style>
<script type="text/javascript" src="mootools-accordion.js"></script>

<script type="text/javascript">
window.onload = function() {
var accordion = new Accordion(\'h3.atStart\', \'div.atStart\', {
	opacity: false,
	onActive: function(toggler, element){
		toggler.setStyle(\'color\', \'#ff3300\');
	},
 
	onBackground: function(toggler, element){
		toggler.setStyle(\'color\', \'#222\');
	}
}, $(\'accordion\'));

}
</script>
</head>
<body>';
//Now the actual Blocks begain
echo ' 
<div id="accordion">
<h3 class="toggler atStart">Example 1</h3>
 <div class="element atStart">';
	echo'
               test
 </div>';
echo '
<h3 class="toggler atStart">Example 1</h3>
 <div class="element atStart">';
	echo'
               TPortal_userbox();
 </div>
</div>
</body>
</html>';

please your advise here, and I do appologise if my english tereble.
thks
Best regard,
Heru herlambang.

Hairy · October 27, 2007, 04:14:26 AM

Quote from: iGate on October 27, 2007, 02:52:31 AM
thank u hairy

if i am to understand correctly, in this version all styles and looks are edited in style.css?

unlike before when they could be edited through the actual block code.
__________

one last thing.

if u look at my menu (left blocks) http://test.ihf.lp.pl/forums/

u will see that the
tag is longer under the headings: "forms, links, downloads and admin"
how can i make it shorter like the other menu headings.

Ooops, that problem does not show on my forum but I eventually found what was causing it, was all the way to the right (and off my screen)

I had left in an extra

Code Select

</div> here:

Code Select

				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=18"> Other</a><br /> </div>

I must of missed it when I combined my previous menu with this one

I have updated the previous posts so just re-copy

Cheers mate

heru28 · October 27, 2007, 04:17:41 AM

Sorry, I've found my fault. here the code sould be changed to call TPortal block

Code Select


echo '
<h3 class="toggler atStart">Example 1</h3>
 <div class="element atStart">';
	echo'
               TPortal_userbox();
 </div>

I change it to be:

Code Select


echo '
<h3 class="toggler atStart">Example 1</h3>
 <div class="element atStart">';
	      TPortal_userbox();
echo'
</div>';

I forgot that TPortal block should not use echo to call this, because it's already in phpbox.

thks anyway for share this great block.

best regard
heru herlambang

Dragooon · October 27, 2007, 04:23:26 AM

@Hairy I am not sure how to separate the styles. I'll try to do this.
@heru Great!

iGate · October 27, 2007, 11:33:05 AM

thx hairy.

im not sure about this:

in order to get a second accordion menu, u would need to change the div id, so that u have the flexibility of styling each one individually.

CAN WE GET THIS CODE ADDED TO THE "BLOCK CODE SNIPPETS INDEX"

Dragooon · October 27, 2007, 11:39:28 AM

I don't believe so it will work that smoothly.

IchBin · October 27, 2007, 06:51:16 PM

Quote from: iGate on October 27, 2007, 11:33:05 AM

CAN WE GET THIS CODE ADDED TO THE BLOCK CODE SNIPPETS INDEX

Actually, we've kind of stopped doing this because of the plans we have for TP 1.0.

We plan on making Block code snippets a package system so to speak. If it works out like we hope it will be much more organized.

iGate · October 29, 2007, 08:33:20 AM

Quote from: Hairy on October 27, 2007, 03:20:44 AM
Ok I have a question...

If I want a second menu block but I want the accordion effect to work independently to the first menu block (I don't want one to close up when the other is used) what editing is needed?

My only guess is a 2nd copy renamed "mootools-accordion2.js" and some code change probably also in "mootools-accordion2.js"

My brain is starting to smoke right now

any ideas?

IchBin · October 29, 2007, 02:26:16 PM

Yeah, you need to go through the javascript and rename all the functions. Then in your HTML call the id with the new naming scheme. Sounds easy right?

Hairy · October 29, 2007, 02:37:24 PM

:buck2: I think I can live without it, Thanks for the explanation though

Recent

User

Stats

Members

Stats

Users Online

Accordion Style Menu Block

heru28

Hairy

heru28

Dragooon

iGate

Dragooon

IchBin

iGate

IchBin

Hairy

This website is proudly hosted on Crocweb Cloud Website Hosting.