The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Tuesday Tip : Index in accordion !

+3
psjamie
SplashOfDevotion
thames 300e
7 posters

Go down

Solved Tuesday Tip : Index in accordion !

Post by thames 300e 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
thames 300e
Forumember

Male Posts : 239
Reputation : 2
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 March 17th 2012, 8:57 pm

Done as it says to but it won't show up on the site
thames 300e
thames 300e
Forumember

Male Posts : 239
Reputation : 2
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 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
thames 300e
Forumember

Male Posts : 239
Reputation : 2
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 March 18th 2012, 8:39 am

does this even work in phpbb3 ???
thames 300e
thames 300e
Forumember

Male Posts : 239
Reputation : 2
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 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
avatar
Guest
Guest


Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e 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
thames 300e
Forumember

Male Posts : 239
Reputation : 2
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 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.
avatar
Guest
Guest


Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

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

thames 300e
thames 300e
Forumember

Male Posts : 239
Reputation : 2
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 March 18th 2012, 9:48 am

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


Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e 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

Tuesday Tip : Index in accordion !  Untitl10
thames 300e
thames 300e
Forumember

Male Posts : 239
Reputation : 2
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 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
thames 300e
Forumember

Male Posts : 239
Reputation : 2
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 March 19th 2012, 8:16 pm

So nobody can help with this??
thames 300e
thames 300e
Forumember

Male Posts : 239
Reputation : 2
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 March 21st 2012, 9:26 pm

Hmm. Have you tried adding on the last part of the code/tutorial with the links to photos?
avatar
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 March 21st 2012, 9:28 pm

Yep sure have
thames 300e
thames 300e
Forumember

Male Posts : 239
Reputation : 2
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 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

Tuesday Tip : Index in accordion !  Untitl10

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
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 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
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 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
thames 300e
Forumember

Male Posts : 239
Reputation : 2
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 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

Tuesday Tip : Index in accordion !  Untitl10

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
thames 300e
Forumember

Male Posts : 239
Reputation : 2
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 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!





Tuesday Tip : Index in accordion !  Slgray10

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

Male Posts : 51572
Reputation : 3525
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

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

I still haven't been able to do this

Can anyone help?
thames 300e
thames 300e
Forumember

Male Posts : 239
Reputation : 2
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 April 1st 2012, 12:25 pm

can i please get some help from technical team at Forumotion ???
thames 300e
thames 300e
Forumember

Male Posts : 239
Reputation : 2
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 April 1st 2012, 1:47 pm

Can you please post here the CSS you used.
I'll just check. Trust meeh Smile
E-Mark
E-Mark
Active Poster

Male Posts : 1411
Reputation : 169
Language : English
Location : Bitcoin

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

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

Post by thames 300e 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("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;
}
thames 300e
thames 300e
Forumember

Male Posts : 239
Reputation : 2
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 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
E-Mark
Active Poster

Male Posts : 1411
Reputation : 169
Language : English
Location : Bitcoin

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

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

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

Just done and it still don't show up
thames 300e
thames 300e
Forumember

Male Posts : 239
Reputation : 2
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 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
E-Mark
Active Poster

Male Posts : 1411
Reputation : 169
Language : English
Location : Bitcoin

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

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

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

top part

2 and they are switched on
thames 300e
thames 300e
Forumember

Male Posts : 239
Reputation : 2
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 April 1st 2012, 3:38 pm

*Fixed via PM.
There's just something wrong in the JS Wink.
E-Mark
E-Mark
Active Poster

Male Posts : 1411
Reputation : 169
Language : English
Location : Bitcoin

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

Back to top Go down

Solved Re: Tuesday Tip : Index in accordion !

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

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

Thanks
thames 300e
thames 300e
Forumember

Male Posts : 239
Reputation : 2
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 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
Jophy
ForumGuru

Male Posts : 17922
Reputation : 836
Language : English
Location : Somewhere

Back to top Go down

Back to top

- Similar topics

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