Accordion not working Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

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.
2 posters

    Accordion not working

    RPM
    RPM
    Forumember


    Posts : 375
    Reputation : 7
    Language : EN

    Solved Accordion not working

    Post by RPM February 21st 2013, 3:15 pm

    Sorry to bother you guys for like the 1000th time today.

    Anyway, the slides on the accordion only go half way.

    like so: {lll l }

    { = accordion body
    | = slide


    EDIT: It also messed up the topics. Now they have a green title floating above them.
    Sanket
    Sanket
    ForumGuru


    Male Posts : 48766
    Reputation : 2830
    Language : English
    Location : Mumbai

    Solved Re: Accordion not working

    Post by Sanket February 21st 2013, 3:21 pm

    Try adding the images inside the sliders.
    RPM
    RPM
    Forumember


    Posts : 375
    Reputation : 7
    Language : EN

    Solved Re: Accordion not working

    Post by RPM February 21st 2013, 3:26 pm

    Sanket wrote:Try adding the images inside the sliders.

    I don`t have images yet. I requested one a bit ago, but that will be done a lot later.
    Sanket
    Sanket
    ForumGuru


    Male Posts : 48766
    Reputation : 2830
    Language : English
    Location : Mumbai

    Solved Re: Accordion not working

    Post by Sanket February 21st 2013, 3:27 pm

    Just add some random images of the specific sizes.
    RPM
    RPM
    Forumember


    Posts : 375
    Reputation : 7
    Language : EN

    Solved Re: Accordion not working

    Post by RPM February 21st 2013, 3:46 pm

    God. I added the picture. It only works on the 2-5 slide. And it still doesn`t go more than 1/2 way.
    Sanket
    Sanket
    ForumGuru


    Male Posts : 48766
    Reputation : 2830
    Language : English
    Location : Mumbai

    Solved Re: Accordion not working

    Post by Sanket February 21st 2013, 3:51 pm

    Have you followed this tutorial correctly?
    https://help.forumotion.com/t105962-index-in-accordion

    If yes, then please add all the codes that you added on your forum here.
    RPM
    RPM
    Forumember


    Posts : 375
    Reputation : 7
    Language : EN

    Solved Re: Accordion not working

    Post by RPM February 21st 2013, 4:06 pm

    Sanket wrote:Have you followed this tutorial correctly?
    https://help.forumotion.com/t105962-index-in-accordion

    If yes, then please add all the codes that you added on your forum here.

    god... this is gona be annoying...


    CSS:
    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://i73.servimg.com/u/f73/18/05/57/14/la11.jpg") no-repeat #030303;
    }
    #s2 {
     background:url("http://i73.servimg.com/u/f73/18/05/57/14/la11.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;
    }


    Homepage message:

    Code:
    <div align="center"><div id="one" class="accordion">
        <ol>
            <li>
                <h2><span>Welcome!</span></h2>
                <div id=""></div>
            </li>
            <li>
                <h2><span>Advertize Here</span></h2>
                <div id="s2"></div>
            </li>
            <li>
                <h2><span>Advertize Here</span></h2>
                <div id="s3"></div>
            </li>
            <li>
                <h2><span>Advertize Here</span></h2>
                <div id="s4"></div>
            </li>
            <li>
                <h2><span>Advertize Here</span></h2>
                <div id="s5"></div>
            </li>
        </ol>
        <noscript>
            <p>Please enable JavaScript to get the full experience.</p>
        </noscript><div id="one" class="accordion">
        <ol>
            <li>
                <h2><span>Welcome!</span></h2>
                <div id=""></div>
            </li>
            <li>
                <h2><span>Advertize Here</span></h2>
                <div id="s2"></div>
            </li>
            <li>
                <h2><span>Advertize Here</span></h2>
                <div id="s3"></div>
            </li>
            <li>
                <h2><span>Advertize Here</span></h2>
                <div id="s4"></div>
            </li>
            <li>
                <h2><span>Advertize Here</span></h2>
                <div id="s5"></div>
            </li>
        </ol>
        <noscript>
            <p>Please enable JavaScript to get the full experience.</p>
        </noscript><div id="one" class="accordion">
        <ol>
            <li>
                <h2><span>Welcome!</span></h2>
                <div id=""></div>
            </li>
            <li>
                <h2><span>Advertize Here</span></h2>
                <div id="s2"></div>
            </li>
            <li>
                <h2><span>Advertize Here</span></h2>
                <div id="s3"></div>
            </li>
            <li>
                <h2><span>Advertize Here</span></h2>
                <div id="s4"></div>
            </li>
            <li>
                <h2><span>Advertize Here</span></h2>
                <div id="s5"></div>
            </li>
        </ol>
        <noscript>
            <p>Please enable JavaScript to get the full experience.</p>
        </noscript></div></div>

    Java 1
    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 : 775,
                containerHeight : 200,
                headerWidth : 48,
               
                firstSlide : 1,
                onActivate : function() {},
                slideSpeed : 800,
                slideCallback : function() {},       
               
                autoPlay : false,
                pauseOnHover : false,
                cycleSpeed : 10000,

                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);

    2nd Java 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();
        });
    Sanket
    Sanket
    ForumGuru


    Male Posts : 48766
    Reputation : 2830
    Language : English
    Location : Mumbai

    Solved Re: Accordion not working

    Post by Sanket February 21st 2013, 4:18 pm

    Its working fine on my test forum
    http://testing.4rumer.com/forum

    Check if you added some css which is causing this problem.
    RPM
    RPM
    Forumember


    Posts : 375
    Reputation : 7
    Language : EN

    Solved Re: Accordion not working

    Post by RPM February 21st 2013, 4:22 pm

    Can you check it? If i looked at it, i wouldn`t know what the hell was wrong with it. I stink at CSS 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://i73.servimg.com/u/f73/18/05/57/14/la11.jpg") no-repeat #030303;
    }
    #s2 {
     background:url("http://i73.servimg.com/u/f73/18/05/57/14/la11.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;
    }




    #color, #wcolor {overflow: visible;}
    #colorpicker {position: absolute; top: 20px; left: -225px;}
    #grid {border: 1px solid #808080;}
    #grid td {padding: 0px;}
    #grid td button {height: 12px; width: 12px; padding: 0px; border: 1px solid #808080;}
    #grid td button:hover {border: 1px solid #ffffff;}

    .rainbowize {
      background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ) !important;
      color:transparent !important;
      -webkit-background-clip: text !important;
    }
     
    a[href^="/u2"] span {
    display: inline !important;
    }


    .cpinfo {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 0px center;
    }
    .cpinfo {
    color: #00529B;
    background-color: #BDE5F8;

     
    }
     
    1..rainbowize {2.  background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ) !important;3.  color:transparent !important;4.  -webkit-background-clip: text !important;5.}6. 7.a[href^="/u2"] span {8.display: inline !important;9.}
    /*BEGIN FMChat Design*/
    #fmchat_button {
     /*FMChat Button*/
        width: auto;
        height: auto;
        position: fixed;
        right: 10px;
        bottom: 2px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        -moz-box-shadow: inset 0px 1px 0px 0px #54a3f7;
        -webkit-box-shadow: inset 0px 1px 0px 0px #54a3f7;
        box-shadow: inset 0px 1px 0px 0px #54a3f7;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
        background: -moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
        background: -webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
        background: -o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
        background: -ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
        background: linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
        background-color: #007dc1;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        border: 1px solid #124d77;
        display: inline-block;
        color: #ffffff;
        font-weight: bold;
        padding: 6px 24px;
        text-decoration: none;
        text-shadow: 0px 1px 0px #154682;
        cursor: pointer;
        z-index: 999;
    }

    #fmchat_button:hover {
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
        background: -moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
        background: -webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
        background: -o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
        background: -ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
        background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
        background-color: #0061a7;
    }

    #fmchat_wrap {
     /*Box surrounding FMChat iFrame*/
        width: 70%;
        height: 60%;
        position: fixed;
        right: 10px;
        bottom: 40px;
        z-index: 999;
        border: 2px solid #bababa;
        -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5),
          inset 0px 0px 1px rgba(255,255,255,0.7);
        -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5),
          inset 0px 0px 1px rgba(255,255,255,0.7);
        box-shadow: 0px 1px 3px rgba(000,000,000,0.5),
          inset 0px 0px 1px rgba(255,255,255,0.7);
    }

    #fmchat_frame {
     /*FMChat iFrame of Chatbox*/
        width: 100%;
        height: 100%;
        border: medium none;
        z-index: 999;
    }

    .chatbox #submit_button, .chatbox .fmcbutton {
     /*Chatbox "Send" Button*/
        background-color: #EEE;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEE), color-stop(100%, #CCC));
        background-image: -webkit-linear-gradient(top, #EEE, #CCC);
        background-image: -moz-linear-gradient(top, #EEE, #CCC);
        background-image: -ms-linear-gradient(top, #EEE, #CCC);
        background-image: -o-linear-gradient(top, #EEE, #CCC);
        background-image: linear-gradient(top, #EEE, #CCC);
        border: 1px solid #CCC;
        border-bottom: 1px solid #BBB;
        border-radius: 3px;
        color: #333;
        font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
        padding: 8px 0;
        text-align: center;
        text-shadow: 0 1px 0 #EEE;
        width: auto;
        padding: 5px;
        height: auto !important;
    }

    .chatbox #message {
      /*Chatbox message box*/
        border: none;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 0 5px #666 inset;
        -moz-box-shadow: 0 0 5px #666 inset;
        box-shadow: 0 0 5px #666 inset;
        height: 25px;
        line-height: 25px;
        width: 200px;
        text-indent: 5px;
        margin-bottom: 1px;
        cursor: text;
        width: 500px;
    }

    #fmchat_sticky {
      /*FMChat Sticky Message*/
        background-color: #C9341C;
        border-bottom: 1px solid #C43D3D;
        color: #FFFFFF;
        padding: 5px;
        font-weight: bold;
        z-index: 999;
        height: 2%;
    }

    #fmchat_sticky.phpbb2_sticky {
            /*FMChat Sticky Message Patch For phpBB2*/
        padding-bottom: 12px !important;
    }

    .chatbox .right-box.style-buttons {
      /*Remove default buttons - DO NOT EDIT!*/
        display: block !important;
        float: left;
    }

    .fmchat_pm {
      /*FMChat PM Design*/
        border: 1px solid #CCC;
        color: #666;
        background-color: #E8E8E8;
        background-image: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#F4F4F4),color-stop(100%,#E0E0E0));
        background-image: -webkit-linear-gradient(#F4F4F4,#E0E0E0);
        background-image: -moz-linear-gradient(#F4F4F4,#E0E0E0);
        background-image: -o-linear-gradient(#F4F4F4,#E0E0E0);
        background-image: linear-gradient(#F4F4F4,#E0E0E0);
        -moz-text-shadow: 0px 1px rgba(255,255,255,0.2);
        text-shadow: 0px 1px rgba(255, 255, 255, 0.2);
        padding: 5px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .chatbox.punbb .right {
          /*PunBB Design Patch*/
        float: left !important;
    }

    .chatbox.invision .right {
          /*Invision Patch: Hiding Default Buttons - DO NOT REMOVE*/
        display: none;
    }

    .chatbox.invision .right.style-buttons {
          /*Invision Patch: Showing Custom Buttons - DO NOT REMOVE*/
        display: block !important;
        float: left !important;
    }
    /*END FMChat Design*/




    #fa_toolbar, #fa_toolbar_hidden {background-color: #0048FF !important;}

    #fa_toolbar, #fa_toolbar_hidden {background: url('http://t3.gstatic.com/images?q=tbn:ANd9GcQ1mKgJ2PfLkM_643GcxNsa2BSpCXMDPw84KzddcPr5sZFm0JO-RA' );}


    Sanket
    Sanket
    ForumGuru


    Male Posts : 48766
    Reputation : 2830
    Language : English
    Location : Mumbai

    Solved Re: Accordion not working

    Post by Sanket February 21st 2013, 4:24 pm

    Remove the FM Chat codes completely & check.
    RPM
    RPM
    Forumember


    Posts : 375
    Reputation : 7
    Language : EN

    Solved Re: Accordion not working

    Post by RPM February 21st 2013, 4:27 pm

    Sanket wrote:Remove the FM Chat codes completely & check.

    KK. I was actually about to remove it, b/c it doesn`t work on IE9


    Mad Dumb CSS code. I removed the fm chat code, but it still doesn`t work. ugh.


    Last edited by RPM on February 21st 2013, 4:37 pm; edited 2 times in total
    Sanket
    Sanket
    ForumGuru


    Male Posts : 48766
    Reputation : 2830
    Language : English
    Location : Mumbai

    Solved Re: Accordion not working

    Post by Sanket February 21st 2013, 4:28 pm

    Okay, let me know if it works.
    RPM
    RPM
    Forumember


    Posts : 375
    Reputation : 7
    Language : EN

    Solved Re: Accordion not working

    Post by RPM February 22nd 2013, 3:23 pm

    bump.....
    Sanket
    Sanket
    ForumGuru


    Male Posts : 48766
    Reputation : 2830
    Language : English
    Location : Mumbai

    Solved Re: Accordion not working

    Post by Sanket February 22nd 2013, 3:37 pm

    Seems the image is there in the slideshow now.
    RPM
    RPM
    Forumember


    Posts : 375
    Reputation : 7
    Language : EN

    Solved Re: Accordion not working

    Post by RPM February 22nd 2013, 3:48 pm

    Sanket wrote:Seems the image is there in the slideshow now.


    Yeah. I removed the homepage message and replaced it with the original 1 from the tut. I think the centering messed it, and my forum, up. Yet my forum is still messed up.
    Sanket
    Sanket
    ForumGuru


    Male Posts : 48766
    Reputation : 2830
    Language : English
    Location : Mumbai

    Solved Re: Accordion not working

    Post by Sanket February 22nd 2013, 3:49 pm

    Just try the centering once again.
    RPM
    RPM
    Forumember


    Posts : 375
    Reputation : 7
    Language : EN

    Solved Re: Accordion not working

    Post by RPM February 22nd 2013, 3:54 pm

    Done. But now it won`t go more than 1/2...... again.....
    Sanket
    Sanket
    ForumGuru


    Male Posts : 48766
    Reputation : 2830
    Language : English
    Location : Mumbai

    Solved Re: Accordion not working

    Post by Sanket February 22nd 2013, 3:57 pm

    Okay try adding this instead of the one I gave.
    Code:
    <center>Your Accordion Code</center>
    RPM
    RPM
    Forumember


    Posts : 375
    Reputation : 7
    Language : EN

    Solved Re: Accordion not working

    Post by RPM February 22nd 2013, 4:04 pm

    Sanket wrote:Okay try adding this instead of the one I gave.
    Code:
    <center>Your Accordion Code</center>

    God, Sanket, you`re a genius. My accordion is now centered, AND the forum isn`t weird. :wouhou: thumleft Very good Very Happy Mr. Green
    Sanket
    Sanket
    ForumGuru


    Male Posts : 48766
    Reputation : 2830
    Language : English
    Location : Mumbai

    Solved Re: Accordion not working

    Post by Sanket February 22nd 2013, 4:51 pm

    Topic Solved & Locked