Tuesday Tip : Index in accordion !

won't work

Tuesday Tip : Index in accordion !

I can't seem to get this to work on my site what am i doing wrong

please help

Done as it says to but it won't show up on the site

Rideem3 wrote:Also:

Please change the title of your topic, that is related to your question/issue, so that other users will be able to find their question/issue using the search engine.

---

Is JavaScript turned on?

yes mate its turned On

does this even work in phpbb3 ???

It work on all forum versions.

Have you does this:

You just have to put the URL of the images in each div :

Code:

#s1 {
 background:url("http://url de l'image.jpg")
}

You can add as many div as you want !
You can change the aspect of the slides by using the CSS

Once the CSS code is added then nothing appears
I have tried all ways to make it work But nothing happens

Can you post a screenshot so I see what's the certain problem, or provide your forum url? Thank you.

thanks

http://www.ford100e.org/

Hah, can you post the link to the accordion HTML page?

Coddy wrote:Hah, can you post the link to the accordion HTML page?

But thats part of my admin panel ??

I have added the code like this to Homepage message like it says to do

<div id="one" class="accordion"> <ol> <li> <h2><span>Slide One</span></h2> <div id="s1"></div> </li> <li> <h2><span>Slide Two</span></h2> <div id="s2"></div> </li> <li> <h2><span>Slide Three</span></h2> <div id="s3"></div> </li> <li> <h2><span>Slide Four</span></h2> <div id="s4"></div> </li> <li> <h2><span>Slide Five</span></h2> <div id="s5"></div> </li> </ol> <noscript> <p>Please enable JavaScript to get the full experience.</p> </noscript></div>


if i takeout the CSS code this appears

I have spent the day trying to get this to work and nothing seems to happen

So nobody can help with this??

Hmm. Have you tried adding on the last part of the code/tutorial with the links to photos?

Yep sure have

thames 300e wrote:

Coddy wrote:Hah, can you post the link to the accordion HTML page?

But thats part of my admin panel ??

I have added the code like this to Homepage message like it says to do

<div id="one" class="accordion"> <ol> <li> <h2><span>Slide One</span></h2> <div id="s1"></div> </li> <li> <h2><span>Slide Two</span></h2> <div id="s2"></div> </li> <li> <h2><span>Slide Three</span></h2> <div id="s3"></div> </li> <li> <h2><span>Slide Four</span></h2> <div id="s4"></div> </li> <li> <h2><span>Slide Five</span></h2> <div id="s5"></div> </li> </ol> <noscript> <p>Please enable JavaScript to get the full experience.</p> </noscript></div>


if i takeout the CSS code this appears

Do you have other information in your Homepage message besides the code? I had to remove everything else and have only the code in there to get it to work properly.

thames 300e wrote:So nobody can help with this??

In your CSS stylesheet where did you place the code from tutorial ?
It's making difference on my forums if i place the code on the top, above all my CSS codes, forum doesnt work properly, but if i place the CSS at the botton under my CSS code everything is fine, maybe you do it try this way.

Vito-UFA wrote:

thames 300e wrote:So nobody can help with this??

In your CSS stylesheet where did you place the code from tutorial ?
It's making difference on my forums if i place the code on the top, above all my CSS codes, forum doesnt work properly, but if i place the CSS at the botton under my CSS code everything is fine, maybe you do it try this way.

Thanks its at the top as its the only thing in the CSS stylesheet

psjamie wrote:

thames 300e wrote:

Coddy wrote:Hah, can you post the link to the accordion HTML page?

But thats part of my admin panel ??

I have added the code like this to Homepage message like it says to do

<div id="one" class="accordion"> <ol> <li> <h2><span>Slide One</span></h2> <div id="s1"></div> </li> <li> <h2><span>Slide Two</span></h2> <div id="s2"></div> </li> <li> <h2><span>Slide Three</span></h2> <div id="s3"></div> </li> <li> <h2><span>Slide Four</span></h2> <div id="s4"></div> </li> <li> <h2><span>Slide Five</span></h2> <div id="s5"></div> </li> </ol> <noscript> <p>Please enable JavaScript to get the full experience.</p> </noscript></div>


if i takeout the CSS code this appears

Do you have other information in your Homepage message besides the code? I had to remove everything else and have only the code in there to get it to work properly.

Nothing else in there

I still haven't been able to do this

Can anyone help?

can i please get some help from technical team at Forumotion ???

Can you please post here the CSS you used.
I'll just check. Trust meeh

accordion {
text-align:left;
font:'Helvetica Neue', Verdana, Arial, sans-serif;
}
.accordion ol {
position: relative;
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
.accordion li > h2 {
color: black;
font-weight: normal;
margin: 0;
z-index: 2;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
-ms-transform: translateX(-100%) rotate(-90deg);
-ms-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-
top: 5px; }
.accordion li > h2 b { display: inline-block; position: absolute; top: 10%; top: 42%9; left: 10%; left:
5%9; text-align: center; -webkit-transform:
rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage
(rotation=1); }
.accordion li > h2:hover { cursor: pointer; }
.accordion li > div { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden;
background: white; }
.accordion noscript p { padding: 10px; margin: 0; background: white; }

/****************************************** Basic */
.basic li > h2 { background: #333; color: white; line-height: 1.8em; }
.basic li > div h3 { margin: 15px 10px; }
.basic li > div p { margin: 10px; font-size: 14px; }

/****************************************** Dark */
.dark { border: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background:
#030303; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0
-1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px
rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); }
.dark li > h2 { background: #030303; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0
#030303; }
.dark li > h2 span { background: #353535; color: white; }
.dark li > h2 b { background: #3535359; color: #030303; font-size: 20px; text-shadow: -1px 1px 0
#5b5b5b; }
.dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-
gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555)); background: -moz
-linear-gradient(top left, #353535 0%, #555555 100%); }
.dark h2.selected b { background: #4343439; }
.dark li > div { background: #030303; margin-left: 5px; }

/*************************************** Rounded */
.rounded { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.rounded li > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

/***************************************** Light */
/**************************************** Stitch */

#s1 {
background:url("https://2img.net/h/i638.photobucket.com/albums/uu104/salesmansmanual/thames_ford.png") no-repeat #030303;
}
#s2 {
background:url("https://2img.net/h/i638.photobucket.com/albums/uu104/salesmansmanual/thames_ford.png") no-repeat #030303;
}
#s3 {
background:url("https://2img.net/h/i638.photobucket.com/albums/uu104/salesmansmanual/thames_ford.png") no-repeat #030303;

}
#s4 {
background:url("https://2img.net/h/i638.photobucket.com/albums/uu104/salesmansmanual/thames_ford.png") no-repeat #030303;
}

#s5 {
background:url("https://2img.net/h/i638.photobucket.com/albums/uu104/salesmansmanual/thames_ford.png") no-repeat #030303;
}

Try posting this on your Homepage Message, where you put the HTML of the Index in accordion:

Code:

<style>
.accordion {
text-align:left;
font:'Helvetica Neue', Verdana, Arial, sans-serif;
}
.accordion ol {
position: relative;
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
.accordion li > h2 {
color: black;
font-weight: normal;
margin: 0;
z-index: 2;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
-ms-transform: translateX(-100%) rotate(-90deg);
-ms-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-
top: 5px; }
.accordion li > h2 b { display: inline-block; position: absolute; top: 10%; top: 42%9; left: 10%; left:
5%9; text-align: center; -webkit-transform:
rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage
(rotation=1); }
.accordion li > h2:hover { cursor: pointer; }
.accordion li > div { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden;
background: white; }
.accordion noscript p { padding: 10px; margin: 0; background: white; }

/****************************************** Basic */
.basic li > h2 { background: #333; color: white; line-height: 1.8em; }
.basic li > div h3 { margin: 15px 10px; }
.basic li > div p { margin: 10px; font-size: 14px; }

/****************************************** Dark */
.dark { border: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background:
#030303; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0
-1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px
rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); }
.dark li > h2 { background: #030303; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0
#030303; }
.dark li > h2 span { background: #353535; color: white; }
.dark li > h2 b { background: #3535359; color: #030303; font-size: 20px; text-shadow: -1px 1px 0
#5b5b5b; }
.dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-
gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555)); background: -moz
-linear-gradient(top left, #353535 0%, #555555 100%); }
.dark h2.selected b { background: #4343439; }
.dark li > div { background: #030303; margin-left: 5px; }

/*************************************** Rounded */
.rounded { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.rounded li > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

/***************************************** Light */
/**************************************** Stitch */

#s1 {
background:url("http://i638.photobucket.com/albums/uu104/salesmansmanual/thames_ford.png") no-repeat #030303;
}
#s2 {
background:url("http://i638.photobucket.com/albums/uu104/salesmansmanual/thames_ford.png") no-repeat #030303;
}
#s3 {
background:url("http://i638.photobucket.com/albums/uu104/salesmansmanual/thames_ford.png") no-repeat #030303;

}
#s4 {
background:url("http://i638.photobucket.com/albums/uu104/salesmansmanual/thames_ford.png") no-repeat #030303;
}

#s5 {
background:url("http://i638.photobucket.com/albums/uu104/salesmansmanual/thames_ford.png") no-repeat #030303;
}
</style>

Just done and it still don't show up

What part in the CSS you posted it? In the Top or Bottom part?
And, how many JS you have in the JS Management?

top part

2 and they are switched on

*Fixed via PM.
There's just something wrong in the JS .

Can't thank Mark enough for stepping up to the job

Thanks