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.

moving index accordion

View previous topic View next topic Go down

Solved moving index accordion

Post by REDDWOLF22 on September 16th 2013, 7:49 pm

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, 10:44 am; edited 1 time in total

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 on September 18th 2013, 9:33 am

BUMP

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 on September 19th 2013, 10:57 am

ANYONE HERE. THIS IS STARTING TO FEEL LIKE A

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 on September 20th 2013, 10:08 am

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





APE
Manager
Manager

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

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

Back to top Go down

Solved Re: moving index accordion

Post by Sr.Smith on September 20th 2013, 10:52 am

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
Forumember

Posts : 90
Reputation : 11
Language : Spanish

Back to top Go down

Solved Re: moving index accordion

Post by REDDWOLF22 on September 20th 2013, 11:27 am

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, 2:42 pm; edited 2 times in total

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 on September 20th 2013, 2:32 pm

@REDDWOLF22 wrote:here is the link to what im talking about
Where is...?

Sr.Smith
Forumember

Posts : 90
Reputation : 11
Language : Spanish

Back to top Go down

Solved Re: moving index accordion

Post by REDDWOLF22 on September 20th 2013, 2:43 pm


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 on September 20th 2013, 3:44 pm

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://illiweb.com/bl/logo.png") no-repeat #030303;
  background-position: center;
  }
  #s2 {
  background:url("http://illiweb.com/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
Forumember

Posts : 90
Reputation : 11
Language : Spanish

Back to top Go down

Solved Re: moving index accordion

Post by REDDWOLF22 on September 20th 2013, 5:49 pm

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

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 on September 21st 2013, 4:34 am

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://illiweb.com/bl/logo.png") no-repeat #030303;
  background-position: center;
  }
  #s2 {
  background:url("http://illiweb.com/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
Forumember

Posts : 90
Reputation : 11
Language : Spanish

Back to top Go down

Solved Re: moving index accordion

Post by REDDWOLF22 on September 21st 2013, 10:12 am

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



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
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 on September 21st 2013, 10:17 am

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
Forumember

Posts : 90
Reputation : 11
Language : Spanish

Back to top Go down

Solved Re: moving index accordion

Post by REDDWOLF22 on September 21st 2013, 10:22 am


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 on September 21st 2013, 10:40 am

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://illiweb.com/bl/logo.png") no-repeat #030303;
        background-position: center;
    }
    #s2 {
    background:url("http://illiweb.com/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
Forumember

Posts : 90
Reputation : 11
Language : Spanish

Back to top Go down

Solved Re: moving index accordion

Post by REDDWOLF22 on September 21st 2013, 10:43 am

that was the problem, it works now

thanx for the help

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 on September 21st 2013, 12:34 pm

Topic Solved & Locked


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36701
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.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