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.

moving index accordion

4 posters

Go down

Solved moving index accordion

Post by REDDWOLF22 September 17th 2013, 4:49 am

just wondering if its possible to move the accordion index to a html page?

if possible i would like to have 2 of them stacked on top of each other on the page.

forum is phpbb3


Last edited by REDDWOLF22 on September 21st 2013, 7:44 pm; edited 1 time in total
REDDWOLF22
REDDWOLF22
Forumember

Male Posts : 160
Reputation : 9
Language : english
Location : Frozen Ice Plains of HOTH

http://joinotw.enjin.com/forum

Back to top Go down

Solved Re: moving index accordion

Post by REDDWOLF22 September 18th 2013, 6:33 pm

BUMP
REDDWOLF22
REDDWOLF22
Forumember

Male Posts : 160
Reputation : 9
Language : english
Location : Frozen Ice Plains of HOTH

http://joinotw.enjin.com/forum

Back to top Go down

Solved Re: moving index accordion

Post by REDDWOLF22 September 19th 2013, 7:57 pm

ANYONE HERE. THIS IS STARTING TO FEEL LIKE A moving index accordion  Nutshot
REDDWOLF22
REDDWOLF22
Forumember

Male Posts : 160
Reputation : 9
Language : english
Location : Frozen Ice Plains of HOTH

http://joinotw.enjin.com/forum

Back to top Go down

Solved Re: moving index accordion

Post by Ape September 20th 2013, 7:08 pm

Not sure it can be done without templates  but maybe some one can do it with java I'm Not sure sorry.


moving index accordion  Left1212moving index accordion  Center11moving index accordion  Right112
moving index accordion  Ape_b110
moving index accordion  Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19452
Reputation : 2012
Language : fluent in dork / mumbojumbo & English haha

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

Back to top Go down

Solved Re: moving index accordion

Post by Sr.Smith September 20th 2013, 7:52 pm

I don't know what index accordion is. Could you explain it or post a picture?
My english with the forum elements isn't good enought.
I can try to help you but I have to be sure what's element you want to move.
Sr.Smith
Sr.Smith
Forumember

Posts : 94
Reputation : 11
Language : Spanish

Back to top Go down

Solved Re: moving index accordion

Post by REDDWOLF22 September 20th 2013, 8:27 pm

here is the link to what im talking about. i would like to move it to an html page or even its own forum if i could as i want to use it for something else



Last edited by REDDWOLF22 on September 20th 2013, 11:42 pm; edited 2 times in total
REDDWOLF22
REDDWOLF22
Forumember

Male Posts : 160
Reputation : 9
Language : english
Location : Frozen Ice Plains of HOTH

http://joinotw.enjin.com/forum

Back to top Go down

Solved Re: moving index accordion

Post by Sr.Smith September 20th 2013, 11:32 pm

REDDWOLF22 wrote:here is the link to what im talking about
Where is...?
Sr.Smith
Sr.Smith
Forumember

Posts : 94
Reputation : 11
Language : Spanish

Back to top Go down

Solved Re: moving index accordion

Post by REDDWOLF22 September 20th 2013, 11:43 pm

REDDWOLF22
REDDWOLF22
Forumember

Male Posts : 160
Reputation : 9
Language : english
Location : Frozen Ice Plains of HOTH

http://joinotw.enjin.com/forum

Back to top Go down

Solved Re: moving index accordion

Post by Sr.Smith September 21st 2013, 12:44 am

Try this to use the accordion in a HTML page.

Administration Panel > Modules > HTML & Javascript > HTML pages management >  Add a HTML page

Do you wish to use your forum header and footer ? NO
Use this page as homepage ?  NO

HTML source :
Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<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: #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://2img.net/i/bl/logo.png") no-repeat #030303;
         background-position: center;
    }
    #s2 {
     background:url("http://2img.net/i/fa/fdf_en3/logo.jpg") no-repeat #030303;
    }
    #s3 {
     background:url("http://hitskin.com/themes/20/06/61/i_logo.jpg") no-repeat #030303;
    }

    #s4 {
     background:url("http://4.bp.blogspot.com/-5BU3ueInchc/UVmT6QVm60I/AAAAAAAAA2g/fhiGxsVpF6U/s1600/IMG_7047.jpg") no-repeat #030303;
    }

    #s5 {
     background:url("http://hitskin.com/themes/20/06/61/i_logo.jpg") no-repeat #030303;
    }
</style>
<script>



    /*************************************************
        *
        *  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($) {
          
          jQuery.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 = jQuery.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 (jQuery.browser.msie) {
                if (jQuery.browser.version.substr(0,1) > {
                    $header.css('filter', 'none');
                } else if (jQuery.browser.version.substr(0,1) < 7) {
                    return false;
                }
              }
              
              // set initial positions for each slide
              $header.each(function(index) {
                var $this = jQuery(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 = jQuery(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);


    jQuery(document).ready(function(){
        jQuery('#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();
        });

</script>

    <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>
Submit the code and preview o view your new page with only one element, your accordion.

I hope this help you.
Sr.Smith
Sr.Smith
Forumember

Posts : 94
Reputation : 11
Language : Spanish

Back to top Go down

Solved Re: moving index accordion

Post by REDDWOLF22 September 21st 2013, 2:49 am

nope didnt work it just displayed the SLIDEONE,SLIDE 2 ETC. words all bunched up in the corner on top of each other
REDDWOLF22
REDDWOLF22
Forumember

Male Posts : 160
Reputation : 9
Language : english
Location : Frozen Ice Plains of HOTH

http://joinotw.enjin.com/forum

Back to top Go down

Solved Re: moving index accordion

Post by Sr.Smith September 21st 2013, 1:34 pm

Are you sure that you copied all the code?

Did you include this sentence?
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
This is the code of my html page and I see the accordion perfectly.

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<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: #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://2img.net/i/bl/logo.png") no-repeat #030303;
         background-position: center;
    }
    #s2 {
     background:url("http://2img.net/i/fa/fdf_en3/logo.jpg") no-repeat #030303;
    }
    #s3 {
     background:url("http://hitskin.com/themes/20/06/61/i_logo.jpg") no-repeat #030303;
    }

    #s4 {
     background:url("http://4.bp.blogspot.com/-5BU3ueInchc/UVmT6QVm60I/AAAAAAAAA2g/fhiGxsVpF6U/s1600/IMG_7047.jpg") no-repeat #030303;
    }

    #s5 {
     background:url("http://hitskin.com/themes/20/06/61/i_logo.jpg") no-repeat #030303;
    }
</style>
<script>



    /*************************************************
        *
        *  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($) {
          
          jQuery.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 = jQuery.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 (jQuery.browser.msie) {
                if (jQuery.browser.version.substr(0,1) > {
                    $header.css('filter', 'none');
                } else if (jQuery.browser.version.substr(0,1) < 7) {
                    return false;
                }
              }
              
              // set initial positions for each slide
              $header.each(function(index) {
                var $this = jQuery(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 = jQuery(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);


    jQuery(document).ready(function(){
        jQuery('#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();
        });

</script>

    <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>
You can check my html page
Sr.Smith
Sr.Smith
Forumember

Posts : 94
Reputation : 11
Language : Spanish

Back to top Go down

Solved Re: moving index accordion

Post by REDDWOLF22 September 21st 2013, 7:12 pm

yes im sure i copied all of itand i tried several times however i still end up getting this

moving index accordion  Http--10

is there something else you did also cause the code works fine when i put it in the hompage message but not on the html page
REDDWOLF22
REDDWOLF22
Forumember

Male Posts : 160
Reputation : 9
Language : english
Location : Frozen Ice Plains of HOTH

http://joinotw.enjin.com/forum

Back to top Go down

Solved Re: moving index accordion

Post by Sr.Smith September 21st 2013, 7:17 pm

No, I passed you all the code of my HTML page.
You can see in the page.

Give me the URL of your HTML page and I try to see what happend.
Sr.Smith
Sr.Smith
Forumember

Posts : 94
Reputation : 11
Language : Spanish

Back to top Go down

Solved Re: moving index accordion

Post by REDDWOLF22 September 21st 2013, 7:22 pm

REDDWOLF22
REDDWOLF22
Forumember

Male Posts : 160
Reputation : 9
Language : english
Location : Frozen Ice Plains of HOTH

http://joinotw.enjin.com/forum

Back to top Go down

Solved Re: moving index accordion

Post by Sr.Smith September 21st 2013, 7:40 pm

I see the problem, the HTLM tags.

In my forum version they appeared automatically but In your forum no.

Try the code in this way

Code:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<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: #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://2img.net/i/bl/logo.png") no-repeat #030303;
        background-position: center;
    }
    #s2 {
    background:url("http://2img.net/i/fa/fdf_en3/logo.jpg") no-repeat #030303;
    }
    #s3 {
    background:url("http://hitskin.com/themes/20/06/61/i_logo.jpg") no-repeat #030303;
    }

    #s4 {
    background:url("http://4.bp.blogspot.com/-5BU3ueInchc/UVmT6QVm60I/AAAAAAAAA2g/fhiGxsVpF6U/s1600/IMG_7047.jpg") no-repeat #030303;
    }

    #s5 {
    background:url("http://hitskin.com/themes/20/06/61/i_logo.jpg") no-repeat #030303;
    }
</style>
<script>



    /*************************************************
        *
        *  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($) {
         
          jQuery.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 = jQuery.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 (jQuery.browser.msie) {
                if (jQuery.browser.version.substr(0,1) > 8) {
                    $header.css('filter', 'none');
                } else if (jQuery.browser.version.substr(0,1) < 7) {
                    return false;
                }
              }
             
              // set initial positions for each slide
              $header.each(function(index) {
                var $this = jQuery(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 = jQuery(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);


    jQuery(document).ready(function(){
        jQuery('#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();
        });

</script>

</head>
<body>
    <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>
</body>
Sr.Smith
Sr.Smith
Forumember

Posts : 94
Reputation : 11
Language : Spanish

Back to top Go down

Solved Re: moving index accordion

Post by REDDWOLF22 September 21st 2013, 7:43 pm

that was the problem, it works now

thanx for the help
REDDWOLF22
REDDWOLF22
Forumember

Male Posts : 160
Reputation : 9
Language : english
Location : Frozen Ice Plains of HOTH

http://joinotw.enjin.com/forum

Back to top Go down

Solved Re: moving index accordion

Post by SLGray September 21st 2013, 9:34 pm

Topic Solved & Locked


moving index 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

Back to top

- Similar topics

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