TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

User

Welcome to TinyPortal. Please login or sign up.

Stats

Members
  • Total Members: 3,963
  • Latest: BiZaJe
Stats
  • Total Posts: 195,917
  • Total Topics: 21,308
  • Online today: 728
  • Online ever: 8,223 (February 19, 2025, 04:35:35 AM)
Users Online
  • Users: 0
  • Guests: 378
  • Total: 378

Accordion Style Menu Block

Started by Megaforum, October 20, 2007, 05:23:32 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages 1 2 3 4 ... 7
User actions

iGate

#20
October 25, 2007, 02:49:10 PM
i cant get this to work.

i am using the theme OverView from DzinerStudios, i have made the necessary edits to index.template and the style.css.

yet when i create the block it doesn't work. look here http://test.ihf.lp.pl/forums/

i am running a script box from the original post

any ideas?

Dragooon

#21
October 25, 2007, 02:52:23 PM
You forgot to upload mootools-accordion.js to your forum root.

lebisol

#22
October 25, 2007, 04:50:21 PM
Looking good Mr. Dragoon  ;)

iGate

#23
October 25, 2007, 11:17:32 PM Last Edit: October 25, 2007, 11:19:51 PM by iGate
i still cant get it to work.

i have followed all the instructions on post number 1. this is the code i have in the scriptbox:

Code Select

<div class="accordion">
<h3 class="toggler atStart">IHF 1</h3>
<div class="element atStart">
This is the description for IHF 1
</div>
</div>
<div class="accordion">
<h3 class="toggler atStart">IHF 2</h3>
<div class="element atStart">
This is the description jfdjhfor IHF 1
</div>
</div>


any ideas?

lebisol

#24
October 25, 2007, 11:26:56 PM
is there anything being displayed?at least the layer? try html box
You Have to follow the instructions to the dot...especially when it comes to importing the JavaScript into your template and uploading the file itself.

Zetan

#25
October 25, 2007, 11:27:27 PM
Quote from: Dragooon on October 25, 2007, 02:52:23 PM
You forgot to upload mootools-accordion.js to your forum root.

Have you done this part that Dragooon suggested?

iGate

#26
October 26, 2007, 12:03:35 AM
Quote from: Zetan on October 25, 2007, 11:27:27 PM
Quote from: Dragooon on October 25, 2007, 02:52:23 PM
You forgot to upload mootools-accordion.js to your forum root.
Have you done this part that Dragooon suggested?


yep.

its here: http://test.ihf.lp.pl/forums/mootools-accordion.js

Hairy

#27
October 26, 2007, 04:46:12 AM
I'm using the PHP block version and it is working perfectly, how do I change the background of each menu item (and menu title) to be "windowbg"

Thanks
Hairy

Original post for code being used:
Quote from: Dragooon on October 23, 2007, 10:52:08 AM
If you want PHP there is A small difference, And Yes it is very possible.
Here is an example
Put this in a PHP Block add
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>
</div>
</body>
</html>';
Please note: This won't work on a Script Box, It MUST be a PHP Block as it is modified to be in PHP.
The code on first post is ONLY for a Script box.

Dragooon

#28
October 26, 2007, 05:55:25 AM
Quote from: iGate on October 25, 2007, 11:17:32 PM
i still cant get it to work.

i have followed all the instructions on post number 1. this is the code i have in the scriptbox:

Code Select

<div class="accordion">
<h3 class="toggler atStart">IHF 1</h3>
<div class="element atStart">
This is the description for IHF 1
</div>
</div>
<div class="accordion">
<h3 class="toggler atStart">IHF 2</h3>
<div class="element atStart">
This is the description jfdjhfor IHF 1
</div>
</div>


any ideas?
Its not working because, you closed the <div id="accordion"> before you started it again.
It should be
Code Select

<div class="accordion">
<h3 class="toggler atStart">IHF 1</h3>
<div class="element atStart">
This is the description for IHF 1
</div>

<h3 class="toggler atStart">IHF 2</h3>
<div class="element atStart">
This is the description jfdjhfor IHF 1
</div>
</div>

The <div id="accordion"> should be only 1, and it should close at very end.

Dragooon

#29
October 26, 2007, 05:59:13 AM
Quote from: Hairy on October 26, 2007, 04:46:12 AM
I'm using the PHP block version and it is working perfectly, how do I change the background of each menu item (and menu title) to be "windowbg"

Thanks
Hairy

Original post for code being used:
Quote from: Dragooon on October 23, 2007, 10:52:08 AM
If you want PHP there is A small difference, And Yes it is very possible.
Here is an example
Put this in a PHP Block add
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>
</div>
</body>
</html>';
Please note: This won't work on a Script Box, It MUST be a PHP Block as it is modified to be in PHP.
The code on first post is ONLY for a Script box.
Please use the new method, If you use this method it will break XHTML Validation.
Now for the new PHP method, Do the edits said in the 1st post.
Then in a PHP Block add :
Code Select
echo '
<div id="accordion">
<h3 class="toggler atStart">Example 1</h3>
<div class="element atStart">';
echo'
               test
</div>
</div>';
Now for the color thingy :
For text or for The Area around text?
For the area around the text see
Code Select
.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;
}
In Style.css and see the background attribute
For the text Open Index.template and see
Code Select

<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>
See the 2 Hexadecimal attributes, #ff33000 and #222.
The first one is for when it is active and the second one is when it is deactivated.
Print
Go Up Pages 1 2 3 4 ... 7
User actions

This website is proudly hosted on Crocweb Cloud Website Hosting.