Pour avoir une P.A Accordéon

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

Résolu Pour avoir une P.A Accordéon

Message par Symphony Lips le Mer 10 Aoû 2011 - 23:48

Bonjour! Je remercie la personne d'avance qui viendra m'aider. =)

Alors, J'ai essayé de mettre les code de ce tutoriel qui est en anglais, ici, comme je comprends rien, j'ai trouvé divers sujet...Comme celui-ci, ici. Mais sans succès, j'ai pas réussi à le mettre. Est-ce que quelqu'un pourrait me dire comment le mettre (réussir) du premier coup ? >.<'

J'ai crée les deux fiches séparés dans le Javascript... Mais il m'affiche cela quand je le mets sur la p.a.
Spoiler:

Merci d'avance. *O*


Dernière édition par Symphony Lips le Sam 13 Aoû 2011 - 0:56, édité 1 fois

Symphony Lips
**

Messages : 85
Inscrit(e) le : 13/06/2010

http://vamp-city.forum2ouf.com/
Symphony Lips a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Pour avoir une P.A Accordéon

Message par Lixyr le Ven 12 Aoû 2011 - 0:35

Bonsoir.


Pour ce code, il faut faire ainsi :

Like a Star @ heaven Dans la gestion des pages javascripts, mettre ce code, en index :

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

Like a Star @ heaven puis, dans une autre page, toujours en index, ceci :

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


Like a Star @ heaven et ensuite, dans votre PA, mettre ceci :

Code:
<div class="accordion">
    <ol>
        <li>
            <h2><span>Slide One</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Two</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Three</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Four</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Five</span></h2>
            <div></div>
        </li>
    </ol>
    <noscript>
        <p>Please enable JavaScript to get the full experience.</p>
    </noscript>
</div>



Like a Star @ heaven et dans votre css, mettre ceci :

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\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 */



(les codes se trouvant sur ce lien : https://github.com/nikki/liteAccordion/archives/master => choisir au mieux de télécharger en zip. On y trouve code js et css
et ici : http://nicolahibbert.com/demo/liteAccordion/ on a le code html de la PA )


Ainsi, tout devrait fonctionner.

Cordialement.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pour avoir une P.A Accordéon

Message par Symphony Lips le Ven 12 Aoû 2011 - 21:44

C'est bon, ça a marché ! J'ai oublié de le mettre dans le CSS. XDD
Je suis vraiment blonde et j'ai mis le mauvais code dans la P.A.
Merci beaucoup. Je trouve cette explication très claire! *O*.
Thanks you very much!

J'ai envie de dire +1000! xD

Symphony Lips
**

Messages : 85
Inscrit(e) le : 13/06/2010

http://vamp-city.forum2ouf.com/
Symphony Lips a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pour avoir une P.A Accordéon

Message par Puissantninja le Ven 12 Aoû 2011 - 22:30

Je pourrai savoir c'est quoi le P.A ? >< Panneau d'admin ? Ouais mais faut la mettre ou ça:

Code:
<div class="accordion">
    <ol>
        <li>
            <h2><span>Slide One</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Two</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Three</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Four</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Five</span></h2>
            <div></div>
        </li>
    </ol>
    <noscript>
        <p>Please enable JavaScript to get the full experience.</p>
    </noscript>
</div>

Puissantninja
Nouveau membre

Messages : 16
Inscrit(e) le : 28/12/2010

http://ombrack.forumpro.fr/forum
Puissantninja a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Pour avoir une P.A Accordéon

Message par Symphony Lips le Ven 12 Aoû 2011 - 22:33

Alors P.A = Page d'accueil. =)



Dernière édition par Symphony Lips le Ven 12 Aoû 2011 - 22:34, édité 1 fois

Symphony Lips
**

Messages : 85
Inscrit(e) le : 13/06/2010

http://vamp-city.forum2ouf.com/
Symphony Lips a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pour avoir une P.A Accordéon

Message par Puissantninja le Ven 12 Aoû 2011 - 22:34

On doit trouver ça dans les Template non ?

Puissantninja
Nouveau membre

Messages : 16
Inscrit(e) le : 28/12/2010

http://ombrack.forumpro.fr/forum
Puissantninja a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Pour avoir une P.A Accordéon

Message par Symphony Lips le Ven 12 Aoû 2011 - 22:35

Non, tu le trouves dans panneau d'administration -> Affichage -> Généralités
Tu marques dans le bloc. =)

Symphony Lips
**

Messages : 85
Inscrit(e) le : 13/06/2010

http://vamp-city.forum2ouf.com/
Symphony Lips a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pour avoir une P.A Accordéon

Message par Puissantninja le Ven 12 Aoû 2011 - 22:38

Ah ok merci. Tu es doué, tu pourrai aller voir le topic que j'ai créer s'il te plaît ? C'est dans les Problèmes script aussi. Merci. Smile

Puissantninja
Nouveau membre

Messages : 16
Inscrit(e) le : 28/12/2010

http://ombrack.forumpro.fr/forum
Puissantninja a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pour avoir une P.A Accordéon

Message par Lixyr le Ven 12 Aoû 2011 - 22:40

Et bien, si vous voulez remercier, cliquez sur le bouton merci de mon poste. Il sera ainsi sous fond vert, et ça me rajoutera des points de réputation. Mr. Green

Et si le sujet est résolu, n'oubliez pas d'éditer votre premier message et de cocher le bouton résolu pour que le sujet soit rangé dans les sujets archivés.

::fleur::



@Puissantninja => Merci de ne pas flooder, et faire de la pub pour ses propres sujets.

Cordialement.

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pour avoir une P.A Accordéon

Message par Puissantninja le Ven 12 Aoû 2011 - 22:41

Ah ok désolé je savais pas. XD

Puissantninja
Nouveau membre

Messages : 16
Inscrit(e) le : 28/12/2010

http://ombrack.forumpro.fr/forum
Puissantninja a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Pour avoir une P.A Accordéon

Message par Lixyr le Ven 12 Aoû 2011 - 23:02

^^
Et bien, étant donné que vous venez de vous inscrire, voici quelques liens importants à retenir :

Like a Star @ heaven Règles du forum
Like a Star @ heaven Questions/Réponses fréquentes
Like a Star @ heaven Listing des questions et réponses fréquentes
Like a Star @ heaven Listing des Trucs & astuces
Like a Star @ heaven La fonction rechercher
Like a Star @ heaven La FAQ de forumactif.com

Prenez le temps de tout lire.

Cordialement. ::fleur::






Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pour avoir une P.A Accordéon

Message par Little-princess le Sam 13 Aoû 2011 - 0:07

J'ai fait ce que vous avez dit sauf que rien ne s'affiche ! ( A cause des templates ??)

J'ai pas compris le
(les codes se trouvant sur ce lien : https://github.com/nikki/liteAccordion/archives/master => choisir au mieux de télécharger en zip. On y trouve code js et css
et ici : http://nicolahibbert.com/demo/liteAccordion/ on a le code html de la PA )


Ainsi, tout devrait fonctionner.

Cordialement.

Little-princess
*

Messages : 44
Inscrit(e) le : 08/08/2011

http://rayonxclusif.forumgratuit.org/
Little-princess a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pour avoir une P.A Accordéon

Message par Symphony Lips le Sam 13 Aoû 2011 - 0:56

Je trouve que son explication est suffisamment claire....

Pour la partie Javascript: Vous postez les deux messages.
Le javascript vous le trouvez dans panneau d'administration -> Modules -> Html et Javascript. Deux pages différentes...

Après vous postez le code dans le CSS, qui est la feuille CSS (dans Affichage -> Images et couleurs -> Couleurs -> Feuille CSS)

Après vous postez dans la P.A, le code pour mettre les informations que vous voulez.

Si vous voulez faire du réglage. Il faut voir dans le CSS ou encore le javascript tout dépend. Enfin bref... J'ai fini mon sujet, en tout cas. =)

Merci encore de ton aide précieuse, Lixyr Yrna
Je suis pas tellement nouvelle, je viens seulement quand je rencontre principalement un problème que j'ai besoin de conseil et trouvez des réponses sur divers bugs.

J'édite pour mettre sur résolu. *O*.

Symphony Lips
**

Messages : 85
Inscrit(e) le : 13/06/2010

http://vamp-city.forum2ouf.com/
Symphony Lips 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