The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Center my accordion

View previous topic View next topic Go down

Solved Center my accordion

Post by RPM on February 20th 2013, 9:00 pm

How do i center my accordion? Its ssiting on my index, but it looks messy b/c its not centered. Any help? Thanks.

RPM
Forumember

Posts : 375
Reputation : 7
Language : EN

http://roleplaymachugas.forumotion.com/

Back to top Go down

Solved Re: Center my accordion

Post by RPM on February 21st 2013, 1:09 am

roleplaymachugas.forumotion.com


RPM
Forumember

Posts : 375
Reputation : 7
Language : EN

http://roleplaymachugas.forumotion.com/

Back to top Go down

Solved Re: Center my accordion

Post by RPM on February 21st 2013, 3:04 am

Lol. ; ) You were on when i was trying to center it. I added
and
the the 2nd java code, so it dissapeared. Its back up now. On the index (forums)

RPM
Forumember

Posts : 375
Reputation : 7
Language : EN

http://roleplaymachugas.forumotion.com/

Back to top Go down

Solved Re: Center my accordion

Post by RPM on February 21st 2013, 1:22 pm

Rideem3 wrote:Wrap the accordion HTML in this:
Code:
<div style="margin: 0 auto;">
<!-- Accordion code here -->


Both side?


EDIT: I added it to the top of all the codes (besides CSS) one code at a time, and nothing worked. I put
Code:
<div style="margin: 0 auto;">
<!-- Accordion code here -->
CODE HERE
Am i supposed to place it differently?

RPM
Forumember

Posts : 375
Reputation : 7
Language : EN

http://roleplaymachugas.forumotion.com/

Back to top Go down

Solved Re: Center my accordion

Post by Sanket on February 21st 2013, 1:44 pm

I think he meant adding just this code in Display>Generalities
Homepage message
Message Content:
Add just this code.
Code:
<div style="margin: 0 auto;">
After that add all your accordion code.

Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Re: Center my accordion

Post by runawayhorses on February 21st 2013, 2:09 pm

I think hes going to need to add another ending div tag after he adds the div to close it out, by placing this at the end of all the accordion code:

Code:
</div>

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Center my accordion

Post by Sanket on February 21st 2013, 2:11 pm

@runawayhorses wrote:I think hes going to need to add another ending div tag after he adds the div to close it out, by placing this at the end of all the accordion code:

Code:
</div>
Yes, that would be correct I believe.

Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Re: Center my accordion

Post by RPM on February 21st 2013, 2:21 pm

Oh poop. still doesn`t work. Here are my codes (so you can tell me if i need to fix em or whatnot)

HP Message:
Code:
<div style="margin: 0 auto;"><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>
</div>

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://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;
}

First Java/HTML 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 : 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);

SecondJava/HTML 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();
    });

RPM
Forumember

Posts : 375
Reputation : 7
Language : EN

http://roleplaymachugas.forumotion.com/

Back to top Go down

Solved Re: Center my accordion

Post by Sanket on February 21st 2013, 2:32 pm

Add this in the homepage instead & check.
Code:
<div style="margin: 0 auto;"><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>

Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Re: Center my accordion

Post by RPM on February 21st 2013, 2:39 pm

Nope. I replace the other code, but its still towards the left. scratch

RPM
Forumember

Posts : 375
Reputation : 7
Language : EN

http://roleplaymachugas.forumotion.com/

Back to top Go down

Solved Re: Center my accordion

Post by Sanket on February 21st 2013, 2:43 pm

Try this one. If it doesn't work, can you provide me with the original code you used.
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>

Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Re: Center my accordion

Post by RPM on February 21st 2013, 2:51 pm

Thankees! It works. Thanks, Sanket, Rideem3 and Runawayhorses! :wouhou:

RPM
Forumember

Posts : 375
Reputation : 7
Language : EN

http://roleplaymachugas.forumotion.com/

Back to top Go down

Solved Re: Center my accordion

Post by Sanket on February 21st 2013, 2:53 pm

Topic Solved & Locked

Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


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