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.

Index in accordion !

+6
Sir Chivas™
Richsballpythons
tpt8899
!_NICK_!
Niko
Shadow
10 posters

Go down

Index in accordion ! Empty Index in accordion !

Post by Shadow March 13th 2012, 12:13 pm

How to create an index in accordion

1.TUTORIAL:

How to create that kind of index :

Index in accordion ! Cap110

Index in accordion ! Capt210

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 Index in accordion ! Arrow10 Modules Index in accordion ! Arrow10 HTML & Javascript Index in accordion ! Arrow10 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 Index in accordion ! Arrow10 DisplayIndex in accordion ! Arrow10 Homepage Index in accordion ! Arrow10Generalities Index in accordion ! Arrow10 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 Index in accordion ! Arrow10 DisplayIndex in accordion ! Arrow10 Pictures and colors Index in accordion ! Arrow10ColorsIndex in accordion ! Arrow10 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
Shadow
Shadow
Manager
Manager

Male Posts : 16217
Reputation : 1831
Language : French, English

Back to top Go down

Index in accordion ! Empty not find css box

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

i cant find where the css stylesheet
avatar
amay
Guest


Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

Post by Guest 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
avatar
Guest
Guest


Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

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

Really nice Lol
Thanks....
Niko
Niko
Helper
Helper

Male Posts : 3100
Reputation : 244
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

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

Nice one!
!_NICK_!
!_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

Index in accordion ! Empty Re: Index in accordion !

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

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


Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

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

I really can not make it ...
avatar
J_K
Guest


Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

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

same
avatar
tpt8899
Forumember

Posts : 43
Reputation : 2
Language : English

Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

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

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

Posts : 43
Reputation : 2
Language : English

Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

Post by !_NICK_! 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_!
!_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

Index in accordion ! Empty Re: Index in accordion !

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

Copied and pasted everything, And NOTHING shows.
avatar
Richsballpythons
Forumember

Posts : 314
Reputation : 0
Language : English

Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

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

@ Richsballpythons, did you.follow every step?
Sir Chivas™
Sir Chivas™
Helper
Helper

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

Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

Post by Richsballpythons 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
avatar
Richsballpythons
Forumember

Posts : 314
Reputation : 0
Language : English

Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

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

Same thing happened to me.
avatar
tpt8899
Forumember

Posts : 43
Reputation : 2
Language : English

Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

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

Did you enable Javascript code managment?
Sir Chivas™
Sir Chivas™
Helper
Helper

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

Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

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

Yes everything was done one at a time as above.
avatar
Richsballpythons
Forumember

Posts : 314
Reputation : 0
Language : English

Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

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

yeah. same with me
avatar
tpt8899
Forumember

Posts : 43
Reputation : 2
Language : English

Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

Post by Richsballpythons 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.

Index in accordion ! 5z13pg
avatar
Richsballpythons
Forumember

Posts : 314
Reputation : 0
Language : English

Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

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

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

Posts : 314
Reputation : 0
Language : English

Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

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

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

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

http://www.gamingdebates.forumotion.com

Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

Post by Stephen- March 14th 2012, 10:06 am

Really nice Smile
Stephen-
Stephen-
Hyperactive

Male Posts : 2542
Reputation : 326
Language :

Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

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

Very nice tutorial, thanks Smile
Omu
Omu
Active Poster

Male Posts : 1021
Reputation : 87
Language : Romanian, English

http://techtitans.forumer.ro/

Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

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

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


Back to top Go down

Index in accordion ! Empty Re: Index in accordion !

Post by Ape 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


Index in accordion ! Left1212Index in accordion ! Center11Index in accordion ! Right112
Index in accordion ! Ape_b110
Index in accordion ! Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

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

Back to top Go down

Back to top

- Similar topics

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