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.

Index in accordion !

View previous topic View next topic Go down

Index in accordion !

Post by Leviosa on March 13th 2012, 12:13 pm

How to create an index in accordion

1.TUTORIAL:

How to create that kind of index :





Example : click Here

This tutorial is available for all the versions !

Attention : you have to follow this tutorial step by step ! Mr. Green


2. First step : Create 2 javascript pages:

To create the 2 javascript pages :

Administration Panel Modules HTML & Javascript Javascript codes management

Click on "create a new javascript"

  • First page :

    - Chose a title

    - Chose the position : in the index

    - Paste this code :

    Code:

    /*************************************************
        *
        *  project:    liteAccordion - horizontal accordion plugin for jQuery
        *  author:    Nicola Hibbert
        *  url:        http://nicolahibbert.com/horizontal-accordion-jquery-plugin
        *  demo:        http://www.nicolahibbert.com/demo/liteAccordion
        *
        *  Version:    1.1.3
        *  Copyright:    (c) 2010-2011 Nicola Hibbert
        *
        /*************************************************/
        (function($) {
         
          $.fn.liteAccordion = function(options) {
                   
              // defaults
              var defaults = {
                containerWidth : 960,
                containerHeight : 320,
                headerWidth : 48,
               
                firstSlide : 1,
                onActivate : function() {},
                slideSpeed : 800,
                slideCallback : function() {},       
               
                autoPlay : false,
                pauseOnHover : false,
                cycleSpeed : 6000,

                theme : 'basic', // basic, light*, dark, stitch*
                rounded : false,
                enumerateSlides : false
              },
             
              // merge defaults with options in new settings object           
                settings = $.extend({}, defaults, options),
         
              // define key variables
                $accordion = this,
                $slides = $accordion.find('li'),
                slideLen = $slides.length,
                slideWidth = settings.containerWidth - (slideLen * settings.headerWidth),
                $header = $slides.children('h2'),
               
              // core utility and animation methods
                utils = {
                    getGroup : function(pos, index) {     
                      if (this.offsetLeft === pos.left) {
                          return $header.slice(index + 1, slideLen).filter(function() { return this.offsetLeft === $header.index(this) * settings.headerWidth });
                      } else if (this.offsetLeft === pos.right) {
                          return $header.slice(0, index + 1).filter(function() { return this.offsetLeft === slideWidth + ($header.index(this) * settings.headerWidth) }); 
                      }               
                    },
                    nextSlide : function(slideIndex) {
                      var slide = slideIndex + 1 || settings.firstSlide;

                      // get index of next slide
                      return function() {
                          return slide++ % slideLen;
                      }
                    },
                    play : function(slideIndex) {
                      var getNext = utils.nextSlide((slideIndex) ? slideIndex : ''), // create closure
                          start = function() {
                            $header.eq(getNext()).click();
                          };
                     
                      utils.playing = setInterval(start, settings.cycleSpeed);       
                    },
                    pause : function() {
                      clearInterval(utils.playing);
                    },
                    playing : 0,
                    sentinel : false
                };     
             
              // set container heights, widths, theme & corner style
              $accordion
                .height(settings.containerHeight)
                .width(settings.containerWidth)
                .addClass(settings.theme)
                .addClass(settings.rounded && 'rounded');
             
              // set tab width, height and selected class
              $header
                .width(settings.containerHeight)
                .height(settings.headerWidth)
                .eq(settings.firstSlide - 1).addClass('selected');
             
              // ie :(
              if ($.browser.msie) {
                if ($.browser.version.substr(0,1) > 8) {
                    $header.css('filter', 'none');
                } else if ($.browser.version.substr(0,1) < 7) {
                    return false;
                }
              }
             
              // set initial positions for each slide
              $header.each(function(index) {
                var $this = $(this),
                    left = index * settings.headerWidth;
                   
                if (index >= settings.firstSlide) left += slideWidth;
               
                $this
                    .css('left', left)
                    .next()
                      .width(slideWidth)
                      .css({ left : left, paddingLeft : settings.headerWidth });
               
                // add number to bottom of tab
                settings.enumerateSlides && $this.append('<b>' + (index + 1) + '</b>');       

              }); 
                   
              // bind event handler for activating slides
              $header.click(function(e) {
                var $this = $(this),
                    index = $header.index($this),
                    $next = $this.next(),
                    pos = {
                      left : index * settings.headerWidth,
                      right : index * settings.headerWidth + slideWidth,
                      newPos : 0
                    },
                    $group = utils.getGroup.call(this, pos, index);
                               
                // set animation direction
                if (this.offsetLeft === pos.left) {
                    pos.newPos = slideWidth;
                } else if (this.offsetLeft === pos.right) {
                    pos.newPos = -slideWidth;
                }
               
                // check if animation in progress
                if (!$header.is(':animated')) {

                    // activate onclick callback with slide div as context     
                    if (e.originalEvent) {
                      if (utils.sentinel === this) return false;
                      settings.onActivate.call($next);
                      utils.sentinel = this;
                    } else {
                      settings.onActivate.call($next);
                      utils.sentinel = false;
                    }

                    // remove, then add selected class
                    $header.removeClass('selected').filter($this).addClass('selected');
               
                    // get group of tabs & animate       
                    $group
                      .animate({ left : '+=' + pos.newPos }, settings.slideSpeed, function() { settings.slideCallback.call($next) })
                      .next()
                      .animate({ left : '+=' + pos.newPos }, settings.slideSpeed);
                         
                }
              });
               
              // pause on hover       
              if (settings.pauseOnHover) {
                $accordion.hover(function() {
                    utils.pause();
                }, function() {
                    utils.play($header.index($header.filter('.selected')));
                });
              }
                   
              // start autoplay, call utils with no args = start from firstSlide
              settings.autoPlay && utils.play();
             
              return $accordion;
             
          };
         
        })(jQuery);

    And save !
    Arrow


  • Second page :

    - Chose the title

    - Chose the position : in the index

    - Paste this code :

    Code:
    $(document).ready(function(){
        $('#one').liteAccordion({
                      onActivate : function() {
                          this.find('figcaption').fadeOut();
                      },
                      slideCallback : function() {
                          this.find('figcaption').fadeIn();
                      },
                      autoPlay : true,
                      pauseOnHover : true,
                      theme : 'dark',
                      rounded : true,
                      enumerateSlides : true           
                }).find('figcaption:first').show();
        });

    And save !
    Arrow

    By the way, remember to enable the javascript management Wink


    3. Enter the HTML code in the homepage of the forum :

    Go to :

    Administration Panel Display Homepage Generalities Homepage message

    Paste this code :

    Code:
    <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>


And now you can change the slides and add as many div as you want ! You can also add HTML codes as you want (with links for example) Wink


4. Add the CSS code :

Go to :

Administration Panel Display Pictures and colors Colors CSS Stylesheet

Paste this code :

Code:
.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: #353535; 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: #434343; }
.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://url de l'image.jpg") no-repeat #030303;
}
#s2 {
 background:url("http://url de l'image.jpg") no-repeat #030303;
}
#s3 {
 background:url("http://url de l'image.jpg") no-repeat #030303;
}

#s4 {
 background:url("http://url de l'image.jpg") no-repeat #030303;
}

#s5 {
 background:url("http://url de l'image.jpg") no-repeat #030303;
}

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


... And congratulations, you've made your own personnalized index !
cheers


Translated and updated by the Forumotion Staff

Tutorial created by : Celina - 14.02.12, from the Spanish Support Forum (based on this tutorial)
Copyright© FORUMOTION.COM




Last edited by Leeloo on March 30th 2012, 10:30 am; edited 1 time in total

Leviosa
Administrator
Administrator

Female Posts : 15587
Reputation : 1589
Language : French, English

http://help.forumotion.com

Back to top Go down

not find css box

Post by amay on March 13th 2012, 1:59 pm

i cant find where the css stylesheet

amay
Guest


Back to top Go down

Re: Index in accordion !

Post by Guest on March 13th 2012, 2:51 pm

Make sure you are in Advanced mode. You can verify this on the home page of your admin panel.

About the tutorial, very nice tip. Wink

Guest
Guest


Back to top Go down

Re: Index in accordion !

Post by Niko on March 13th 2012, 7:16 pm

Really nice Lol
Thanks....

Niko
Hyperactive

Male Posts : 2298
Reputation : 97
Language : English, French, Italian, Spanish, Latin

https://www.translationscloud.com/?utm_source=forumotion&utm

Back to top Go down

Re: Index in accordion !

Post by !_NICK_! on March 13th 2012, 10:58 pm

Nice one!

!_NICK_!
Active Poster

Male Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.

Back to top Go down

Re: Index in accordion !

Post by amay on March 14th 2012, 1:00 am

nice but the slide to slow and what saiz is recommended for this slide

amay
Guest


Back to top Go down

Re: Index in accordion !

Post by J_K on March 14th 2012, 1:22 am

I really can not make it ...

J_K
Guest


Back to top Go down

Re: Index in accordion !

Post by tpt8899 on March 14th 2012, 2:06 am

same

tpt8899
Forumember

Posts : 43
Reputation : 2
Language : English

Back to top Go down

Re: Index in accordion !

Post by tpt8899 on March 14th 2012, 2:07 am

when I post on the css stylesheet, it dosent show (the banner) on my homepage. Why is that?

tpt8899
Forumember

Posts : 43
Reputation : 2
Language : English

Back to top Go down

Re: Index in accordion !

Post by !_NICK_! on March 14th 2012, 3:39 am

How do we get our slides looking like this? http://nicolahibbert.com/demo/liteAccordion/

There's looks way better than the one above.

!_NICK_!
Active Poster

Male Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.

Back to top Go down

Re: Index in accordion !

Post by Richsballpythons on March 14th 2012, 4:54 am

Copied and pasted everything, And NOTHING shows.

Richsballpythons
Forumember

Posts : 314
Reputation : 0
Language : English

Back to top Go down

Re: Index in accordion !

Post by Sir Chivas™ on March 14th 2012, 4:58 am

@ Richsballpythons, did you.follow every step?



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Re: Index in accordion !

Post by Richsballpythons on March 14th 2012, 4:59 am

Yes, Creaded both JS pages and enabled it, Then copied the CSS to style sheet, and then Homepage Message code was pasted there as well. Saved everything nothing shows.

Added in image links in the CSS style sheet code in the DIV codes at s1 s2 and so on, notta

Richsballpythons
Forumember

Posts : 314
Reputation : 0
Language : English

Back to top Go down

Re: Index in accordion !

Post by tpt8899 on March 14th 2012, 5:00 am

Same thing happened to me.

tpt8899
Forumember

Posts : 43
Reputation : 2
Language : English

Back to top Go down

Re: Index in accordion !

Post by Sir Chivas™ on March 14th 2012, 5:04 am

Did you enable Javascript code managment?



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Re: Index in accordion !

Post by Richsballpythons on March 14th 2012, 5:05 am

Yes everything was done one at a time as above.

Richsballpythons
Forumember

Posts : 314
Reputation : 0
Language : English

Back to top Go down

Re: Index in accordion !

Post by tpt8899 on March 14th 2012, 5:06 am

yeah. same with me

tpt8899
Forumember

Posts : 43
Reputation : 2
Language : English

Back to top Go down

Re: Index in accordion !

Post by Richsballpythons on March 14th 2012, 5:11 am

I get this Before I add in the CSS code. Once its added in the text in image disappear.


Richsballpythons
Forumember

Posts : 314
Reputation : 0
Language : English

Back to top Go down

Re: Index in accordion !

Post by Richsballpythons on March 14th 2012, 5:22 am

It would be a nice option if it worked for Banner Advertisements on forums..

Richsballpythons
Forumember

Posts : 314
Reputation : 0
Language : English

Back to top Go down

Re: Index in accordion !

Post by meghraj_baria on March 14th 2012, 7:54 am

For what we can use this? I don't understand.. pleas PM me ..

meghraj_baria
Forumember

Male Posts : 43
Reputation : 1
Language : English
Location : India

http://www.gamingdebates.forumotion.com

Back to top Go down

Re: Index in accordion !

Post by Darkel on March 14th 2012, 10:06 am

Really nice Smile

Darkel
Hyperactive

Male Posts : 2186
Reputation : 272
Language : English, Tagalog
Location : Philippines

Back to top Go down

Re: Index in accordion !

Post by Omu on March 14th 2012, 10:48 am

Very nice tutorial, thanks Smile

Omu
Active Poster

Male Posts : 1019
Reputation : 86
Language : Romanian, English, French
Location : Romania

http://supportdrops.com/

Back to top Go down

Re: Index in accordion !

Post by amay on March 14th 2012, 10:53 am

i done it already ... but the slide to slow ... any way to make it fast ?

amay
Guest


Back to top Go down

Re: Index in accordion !

Post by APE on July 15th 2015, 12:39 pm

amay wrote:i done it already ... but the slide to slow ... any way to make it fast ?
To make the slide faster find this in the JavaScript
Code:
slideSpeed : 800,
Change it to what ever you like and then save Wink





APE
Manager
Manager

Male Posts : 8631
Reputation : 756
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

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