The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Tuesday Tip : Index in accordion !

View previous topic View next topic Go down

Solved Tuesday Tip : Index in accordion !

Post by thames 300e on March 17th 2012, 8:21 pm

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



Last edited by thames 300e on March 17th 2012, 9:04 pm; edited 1 time in total

thames 300e
Forumember

Male Posts : 233
Reputation : 0
Language : England
Location : ford100e.org

http://ford100e.forumakers.com/portal.htm

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e on March 17th 2012, 8:57 pm

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

thames 300e
Forumember

Male Posts : 233
Reputation : 0
Language : England
Location : ford100e.org

http://ford100e.forumakers.com/portal.htm

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e on March 17th 2012, 9:08 pm

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

thames 300e
Forumember

Male Posts : 233
Reputation : 0
Language : England
Location : ford100e.org

http://ford100e.forumakers.com/portal.htm

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e on March 18th 2012, 8:39 am

does this even work in phpbb3 ???

thames 300e
Forumember

Male Posts : 233
Reputation : 0
Language : England
Location : ford100e.org

http://ford100e.forumakers.com/portal.htm

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by Guest on March 18th 2012, 9:20 am

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 ! Very Happy
You can change the aspect of the slides by using the CSS Wink

Guest
Guest


Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e on March 18th 2012, 9:38 am

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

thames 300e
Forumember

Male Posts : 233
Reputation : 0
Language : England
Location : ford100e.org

http://ford100e.forumakers.com/portal.htm

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by Guest on March 18th 2012, 9:42 am

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

Guest
Guest


Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e on March 18th 2012, 9:47 am


thames 300e
Forumember

Male Posts : 233
Reputation : 0
Language : England
Location : ford100e.org

http://ford100e.forumakers.com/portal.htm

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by Guest on March 18th 2012, 9:48 am

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

Guest
Guest


Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e on March 18th 2012, 9:58 am

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

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


thames 300e
Forumember

Male Posts : 233
Reputation : 0
Language : England
Location : ford100e.org

http://ford100e.forumakers.com/portal.htm

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e on March 18th 2012, 5:18 pm

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

thames 300e
Forumember

Male Posts : 233
Reputation : 0
Language : England
Location : ford100e.org

http://ford100e.forumakers.com/portal.htm

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e on March 19th 2012, 8:16 pm

So nobody can help with this??

thames 300e
Forumember

Male Posts : 233
Reputation : 0
Language : England
Location : ford100e.org

http://ford100e.forumakers.com/portal.htm

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by SplashOfDevotion on March 21st 2012, 9:26 pm

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

SplashOfDevotion
Forumember

Female Posts : 46
Reputation : 1
Language : English | Spanish (Learning) | HTML | CSS (Learning)
Location : Missouri, USA

http://denalifallspack.board-directory.net/forum

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e on March 21st 2012, 9:28 pm

Yep sure have

thames 300e
Forumember

Male Posts : 233
Reputation : 0
Language : England
Location : ford100e.org

http://ford100e.forumakers.com/portal.htm

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by psjamie on March 22nd 2012, 8:47 pm

@thames 300e wrote:
Coddy wrote:Hah, can you post the link to the accordion HTML page? Very Happy

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.

psjamie
Forumember

Male Posts : 52
Reputation : 1
Language : English

http://www.poetshare.forumotion.com

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by Vito-UFA on March 22nd 2012, 9:01 pm

@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
Forumember

Male Posts : 118
Reputation : 6
Language : polish/english
Location : Lodz

http://www.ufa-league.net/forum

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e on March 22nd 2012, 9:22 pm

@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

thames 300e
Forumember

Male Posts : 233
Reputation : 0
Language : England
Location : ford100e.org

http://ford100e.forumakers.com/portal.htm

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e on March 22nd 2012, 9:23 pm

@psjamie wrote:
@thames 300e wrote:
Coddy wrote:Hah, can you post the link to the accordion HTML page? Very Happy

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

thames 300e
Forumember

Male Posts : 233
Reputation : 0
Language : England
Location : ford100e.org

http://ford100e.forumakers.com/portal.htm

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by SLGray on March 22nd 2012, 9:24 pm

Please don't double/triple post. Your post need to be separated by 24 hours before bumping, replying or adding more information. Please use the edit button instead!





When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e on March 26th 2012, 6:28 pm

I still haven't been able to do this

Can anyone help?

thames 300e
Forumember

Male Posts : 233
Reputation : 0
Language : England
Location : ford100e.org

http://ford100e.forumakers.com/portal.htm

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e on April 1st 2012, 12:25 pm

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

thames 300e
Forumember

Male Posts : 233
Reputation : 0
Language : England
Location : ford100e.org

http://ford100e.forumakers.com/portal.htm

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by E-Mark on April 1st 2012, 1:47 pm

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

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e on April 1st 2012, 2:11 pm

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;
}

thames 300e
Forumember

Male Posts : 233
Reputation : 0
Language : England
Location : ford100e.org

http://ford100e.forumakers.com/portal.htm

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by E-Mark on April 1st 2012, 2:22 pm

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>

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e on April 1st 2012, 2:26 pm

Just done and it still don't show up

thames 300e
Forumember

Male Posts : 233
Reputation : 0
Language : England
Location : ford100e.org

http://ford100e.forumakers.com/portal.htm

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by E-Mark on April 1st 2012, 2:37 pm

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

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e on April 1st 2012, 3:04 pm

top part

2 and they are switched on

thames 300e
Forumember

Male Posts : 233
Reputation : 0
Language : England
Location : ford100e.org

http://ford100e.forumakers.com/portal.htm

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by E-Mark on April 1st 2012, 3:38 pm

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

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e on April 1st 2012, 3:50 pm

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

Thanks

thames 300e
Forumember

Male Posts : 233
Reputation : 0
Language : England
Location : ford100e.org

http://ford100e.forumakers.com/portal.htm

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by Jophy on April 2nd 2012, 3:57 am

@E-mark, Support via PM is not allowed, it could have helped other users too if you have posted the solution here. Please be reminded about this.

Since this thread appears to be solved, I will mark this thread as Solved and move it now.

Note: You can also help the staff member's work by EDITING your topic and marking it as Solved.

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum