Tuesday Tip : Index in accordion !
+3
psjamie
SplashOfDevotion
thames 300e
7 posters
Page 1 of 1
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
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
Re: Tuesday Tip : Index in accordion !
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
Re: Tuesday Tip : Index in accordion !
It work on all forum versions.
Have you does this:
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
Guest- Guest
Re: Tuesday Tip : Index in accordion !
Once the CSS code is added then nothing appears
I have tried all ways to make it work But nothing happens
I have tried all ways to make it work But nothing happens
Re: Tuesday Tip : Index in accordion !
Can you post a screenshot so I see what's the certain problem, or provide your forum url? Thank you.
Guest- Guest
Re: Tuesday Tip : Index in accordion !
Hah, can you post the link to the accordion HTML page?
Guest- Guest
Re: Tuesday Tip : Index in accordion !
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
Re: Tuesday Tip : Index in accordion !
I have spent the day trying to get this to work and nothing seems to happen
Re: Tuesday Tip : Index in accordion !
Hmm. Have you tried adding on the last part of the code/tutorial with the links to photos?
Re: Tuesday Tip : Index in accordion !
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.
Re: Tuesday Tip : Index in accordion !
In your CSS stylesheet where did you place the code from tutorial ?thames 300e wrote:So nobody can help with this??
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.
Re: Tuesday Tip : Index in accordion !
Vito-UFA wrote:In your CSS stylesheet where did you place the code from tutorial ?thames 300e wrote:So nobody can help with this??
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
Re: Tuesday Tip : Index in accordion !
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
Re: Tuesday Tip : Index in accordion !
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! |
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Tuesday Tip : Index in accordion !
can i please get some help from technical team at Forumotion ???
Re: Tuesday Tip : Index in accordion !
Can you please post here the CSS you used.
I'll just check. Trust meeh
I'll just check. Trust meeh
Re: Tuesday Tip : Index in accordion !
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;
}
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;
}
Re: Tuesday Tip : Index in accordion !
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>
Re: Tuesday Tip : Index in accordion !
What part in the CSS you posted it? In the Top or Bottom part?
And, how many JS you have in the JS Management?
And, how many JS you have in the JS Management?
Re: Tuesday Tip : Index in accordion !
@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
- Posts : 17922
Reputation : 836
Language : English
Location : Somewhere
Similar topics
» Index in accordion !
» moving index accordion
» My slideshow has disappeared. (Index in accordion)
» Center my accordion
» Accordion not working
» moving index accordion
» My slideshow has disappeared. (Index in accordion)
» Center my accordion
» Accordion not working
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum