PA en accordéon

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu PA en accordéon

Message par Ayael le Lun 26 Sep 2011 - 20:42

Bonjour, en fait, il se trouve que j'ai un problème avec la PA en accordéon que je veux installer.

Il se trouve que cela s'affiche comme ça :

Je sais ce que vous allez dire: ce problème à déjà était résolu : http://forum.forumactif.com/t311741-pour-avoir-une-pa-accordeon
Sauf que j'ai suivis toutes les étapes (poster les deux scripts, placer le même code dans le CSS et dans généralité)
Donc je ne sais vraiment pas quoi faire...
J'utilise PHBB2

merci d'avance

[Je viens de m'apercevoir qu'il y avait une section "CSS et template" je m'excuse donc si j'ai posté ce message dans la mauvaise section]


Dernière édition par Ayael le Mar 27 Sep 2011 - 13:03, édité 1 fois

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA en accordéon

Message par Ayael le Mar 27 Sep 2011 - 8:27

merci d'avance à ce qui prendront le temps de venir voir mon problème^^

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA en accordéon

Message par Ayael le Mer 28 Sep 2011 - 14:17

Mon problème est toujours d'actualité ♥

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA en accordéon

Message par Ayael le Mer 28 Sep 2011 - 17:35

alors, j'ai collé le code CSS, présent dans le fichier à télécharger, et mon problème à changer
Code:
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif; }
.accordion ol { position: relative; overflow: hidden; height: 100%; margin-left: 50; 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\9; 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\9; }
.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 */

/***********************************************************/


Il n'y a rien qui apparait MAIS si on passe la souris dessus on voit ça :

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA en accordéon

Message par Ayael le Jeu 29 Sep 2011 - 18:24

merci encore à ceux qui m'aideront

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA en accordéon

Message par Ayael le Ven 30 Sep 2011 - 18:06

Bon je crois que je vais essayer autre chose...

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: PA en accordéon

Message par tupac le Sam 1 Oct 2011 - 4:23

Bonjour

Reprenons les explications du sujet.
Pour commencer placer le code css suivant dans votre feuille de style donc panneau d'administration => affichage => couleurs => feuille de style css placer le code et valider.

Code css
Spoiler:
Code:
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif; }
.accordion ul { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none; }
.accordion li > h2 {color: #fff; 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; }

/****************************************** Base */
.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; }

/****************************************** foncé */
.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\9; 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\9; }
.dark li > div { background: #030303; margin-left: 5px; }

/*************************************** Arrondis */
.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; }

Maintenant passons a la partie HTML.
Panneau d'administration => affichage => page d'accueil => généralités => Contenu du message et placer le code suivant a l'intérieur et valider.

Code HTML
Code:
    <div id="one" class="accordion">
        <ul>
            <li>
                <h2><span>Onglet 1</span></h2>
                <div>Votre contenu ici</div>
            </li>
            <li>
                <h2><span>Onglet 2</span></h2>
                <div>Votre contenu ici</div>
            </li>
            <li>
                <h2><span>Onglet 3</span></h2>
                <div>Votre contenu ici</div>
            </li>
            <li>
                <h2><span>Onglet 4</span></h2>
                <div>Votre contenu ici</div>
            </li>
            <li>
                <h2><span>Onglet 5</span></h2>
                <div>Votre contenu ici</div>
            </li>
        </ul>
    </div>

Pour finir la partie JavaScript.
Panneau d'administration => modules => gestion des codes JavaScript => créer un nouveau JavaScript => mettre un titre puis cocher (sur l'index) ensuite placer le code suivant a l'intérieur et valider.

Spoiler:
Code:
/*************************************************
            *
            *  project:    liteAccordion - horizontal accordion plugin for jQuery
            *  author:    Nicola Hibbert
            *  url:        http://nicolahibbert.com/horizontal-accordion-jquery-plugin
            *  demo:        http://www.nicolahibbert.com/demo/liteAccordion
            *
            *  Version:    1.1.3
            *  Copyright:    (c) 2010-2011 Nicola Hibbert
            *
            /*************************************************/
            ;(function($) {
           
              $.fn.liteAccordion = function(options) {
                     
                  // defaults
                  var defaults = {
                    containerWidth : 960,
                    containerHeight : 320,
                    headerWidth : 48,
                 
                    firstSlide : 1,
                    onActivate : function() {},
                    slideSpeed : 800,
                    slideCallback : function() {},     
                 
                    autoPlay : false,
                    pauseOnHover : false,
                    cycleSpeed : 6000,
       
                    theme : 'basic', // basic, light*, dark, stitch*
                    rounded : false,
                    enumerateSlides : false
                  },
               
                  // merge defaults with options in new settings object         
                    settings = $.extend({}, defaults, options),
           
                  // define key variables
                    $accordion = this,
                    $slides = $accordion.find('li'),
                    slideLen = $slides.length,
                    slideWidth = settings.containerWidth - (slideLen * settings.headerWidth),
                    $header = $slides.children('h2'),
                 
                  // core utility and animation methods
                    utils = {
                        getGroup : function(pos, index) {   
                          if (this.offsetLeft === pos.left) {
                              return $header.slice(index + 1, slideLen).filter(function() { return this.offsetLeft === $header.index(this) * settings.headerWidth });
                          } else if (this.offsetLeft === pos.right) {
                              return $header.slice(0, index + 1).filter(function() { return this.offsetLeft === slideWidth + ($header.index(this) * settings.headerWidth) });
                          }             
                        },
                        nextSlide : function(slideIndex) {
                          var slide = slideIndex + 1 || settings.firstSlide;
       
                          // get index of next slide
                          return function() {
                              return slide++ % slideLen;
                          }
                        },
                        play : function(slideIndex) {
                          var getNext = utils.nextSlide((slideIndex) ? slideIndex : ''), // create closure
                              start = function() {
                                $header.eq(getNext()).click();
                              };
                       
                          utils.playing = setInterval(start, settings.cycleSpeed);     
                        },
                        pause : function() {
                          clearInterval(utils.playing);
                        },
                        playing : 0,
                        sentinel : false
                    };   
               
                  // set container heights, widths, theme & corner style
                  $accordion
                    .height(settings.containerHeight)
                    .width(settings.containerWidth)
                    .addClass(settings.theme)
                    .addClass(settings.rounded && 'rounded');
               
                  // set tab width, height and selected class
                  $header
                    .width(settings.containerHeight)
                    .height(settings.headerWidth)
                    .eq(settings.firstSlide - 1).addClass('selected');
               
                  // ie :(
                  if ($.browser.msie) {
                    if ($.browser.version.substr(0,1) > 8) {
                        $header.css('filter', 'none');
                    } else if ($.browser.version.substr(0,1) < 7) {
                        return false;
                    }
                  }
               
                  // set initial positions for each slide
                  $header.each(function(index) {
                    var $this = $(this),
                        left = index * settings.headerWidth;
                     
                    if (index >= settings.firstSlide) left += slideWidth;
                 
                    $this
                        .css('left', left)
                        .next()
                          .width(slideWidth)
                          .css({ left : left, paddingLeft : settings.headerWidth });
                 
                    // add number to bottom of tab
                    settings.enumerateSlides && $this.append('<b>' + (index + 1) + '</b>');     
       
                  });
                     
                  // bind event handler for activating slides
                  $header.click(function(e) {
                    var $this = $(this),
                        index = $header.index($this),
                        $next = $this.next(),
                        pos = {
                          left : index * settings.headerWidth,
                          right : index * settings.headerWidth + slideWidth,
                          newPos : 0
                        },
                        $group = utils.getGroup.call(this, pos, index);
                                 
                    // set animation direction
                    if (this.offsetLeft === pos.left) {
                        pos.newPos = slideWidth;
                    } else if (this.offsetLeft === pos.right) {
                        pos.newPos = -slideWidth;
                    }
                 
                    // check if animation in progress
                    if (!$header.is(':animated')) {
       
                        // activate onclick callback with slide div as context   
                        if (e.originalEvent) {
                          if (utils.sentinel === this) return false;
                          settings.onActivate.call($next);
                          utils.sentinel = this;
                        } else {
                          settings.onActivate.call($next);
                          utils.sentinel = false;
                        }
       
                        // remove, then add selected class
                        $header.removeClass('selected').filter($this).addClass('selected');
                 
                        // get group of tabs & animate     
                        $group
                          .animate({ left : '+=' + pos.newPos }, settings.slideSpeed, function() { settings.slideCallback.call($next) })
                          .next()
                          .animate({ left : '+=' + pos.newPos }, settings.slideSpeed);
                           
                    }
                  });
                 
                  // pause on hover     
                  if (settings.pauseOnHover) {
                    $accordion.hover(function() {
                        utils.pause();
                    }, function() {
                        utils.play($header.index($header.filter('.selected')));
                    });
                  }
                     
                  // start autoplay, call utils with no args = start from firstSlide
                  settings.autoPlay && utils.play();
               
                  return $accordion;
               
              };
           
            })(jQuery);
Créer une deuxième page pour ce code.

Spoiler:
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();
            });
Si vous avez bien suivi toutes les inscructions l'accordéon devrait fonctionner.

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA en accordéon

Message par Invité le Dim 9 Oct 2011 - 10:04

Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton

A bientôt sur ForumActif Smile

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum