Liteaccordion - Problèmes

3 participants

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

Résolu Liteaccordion - Problèmes

Message par diedblack Jeu 6 Oct 2011 - 3:49

Bonjours, je veux installer ceci sur mon forum : http://nicolahibbert.com/demo/liteAccordion/

J'ai downloader sont truc et j'ai full de code, mais j'ai essayer de le placer un peu mais sa ne me donne pas le CSS et sa ne me le donne pas en horizontale... Donc, il y as quelque chose que j'ai mal fait.
J'ai mis:
Sa dans le Javascript : Index.
Code:
<script>
    $('#yourdiv').liteAccordion();
</script>
<head>
@charset 'utf-8';
/*************************************************
*
*   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
*
/*************************************************/
/****************************************** Core */
.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 */

</head>
<body>
    ... <!-- Before the closing body tag -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="liteaccordion.jquery.js"></script>
</body>
/*************************************************
*
*   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);

Sa dans mon CSS:
Code:
@charset 'utf-8';
/*************************************************
*
*   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
*
/*************************************************/
/****************************************** Core */
.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 */

Si quelqu'un pourrait m'aider ^^

Jusqu'à maintenant j'ai pu obtenir ce que vous pouvez voir, la grosse image de pokemon, firefox, google chrome avec les mots slide one slide two : http://www.frsociety.com/

Puis sa dans la description de mon forum:
Code:
<head>
    <link rel="stylesheet" href="liteAccordion.css">
</head>
<body>
    ... <!-- Before the closing body tag -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="liteaccordion.jquery.js"></script>
</body><div class="accordion">
    <ol>
        <li>
            <h2><span><img src="http://www.canailleblog.com/photos/blogs/quesque-google-chrome-67806.jpg"></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>
<script>
    $('#yourdiv').liteAccordion();
</script>


Dernière édition par diedblack le Ven 14 Oct 2011 - 4:34, édité 2 fois
diedblack

diedblack
****

Masculin
Messages : 206
Inscrit(e) le : 09/04/2011

http://www.frsociety.com
diedblack a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Liteaccordion - Problèmes

Message par SoraNoHime Jeu 6 Oct 2011 - 7:56

Bonjour

quel est celui que vous avez utilisé sur les trois exemple ?

Cordialement.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

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

Résolu Re: Liteaccordion - Problèmes

Message par diedblack Jeu 6 Oct 2011 - 15:59

J'ai TOUT utilisé.

J'ai mis le tout dans différentes sections... Comme expliquer ci-haut.

Edit: Je vient de rajouter le mes mots ''J'ai mis'' c'était pas précisez.
diedblack

diedblack
****

Masculin
Messages : 206
Inscrit(e) le : 09/04/2011

http://www.frsociety.com
diedblack a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Liteaccordion - Problèmes

Message par SoraNoHime Jeu 6 Oct 2011 - 22:32

En fait dans votre css,essayez en enlevant ceci :
Code:
@charset 'utf-8';

Cela marche-t-il mieux ?
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

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

Résolu Re: Liteaccordion - Problèmes

Message par Snape Jeu 6 Oct 2011 - 23:49

La partie que vous avez mise dans description du forum est bien trop volumineuse, vous êtes certain que tout le code entre dans la description ?
Snape

Snape
***

Messages : 157
Inscrit(e) le : 24/01/2011

http://blackhill.forumactif.name/
Snape a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Liteaccordion - Problèmes

Message par diedblack Sam 8 Oct 2011 - 3:11

Cela ne fonctionne toujours pas.
Néanmoins, je crois que le problème réside dans ''caller'' le CSS et le Javascript, bref, les faire fonctionner à partir des pages Javascript et CSS jusqu'à la description.

Je vais vous fournir les codes originelles si vous souhaiter faire des tests.
Une chose est sur, il est possible d'adapter ceci aux forums car j'ai vue plusieurs forum avec ce système.

Voici le Javascript:
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);

Le CSS:
Code:
@charset 'utf-8';
/*************************************************
*
*   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
*
/*************************************************/
/****************************************** Core */
.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 */

Sur le site du liteaccordion, il s'y trouve ces instructions suivante:

1. Include jQuery, the liteAccordion CSS and the liteAccordion JavaScript files in your page:

Code:

<head>
    <link rel="stylesheet" href="liteAccordion.css">
</head>
<body>
    ... <!-- Before the closing body tag -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="liteaccordion.jquery.js"></script>
</body>
2. Insert the basic liteAccordion markup into your page:

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>
3. Call the plugin
Code:

<script>
    $('#yourdiv').liteAccordion();
</script>

Mon problème, je crois, est de faire venir le Javascript et le CSS vers la description.
J'ai essayer de mélanger le CSS et le Javascript de cette façon :
Code:

<script>
<style type="text/css">
<head>
@charset 'utf-8';
/*************************************************
*
*   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
*
/*************************************************/
/****************************************** Core */
.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 */
</head>
</style>
<body>
/*************************************************
*
*   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);
</body>
</script>
Puis de le mettre comme ceci dans ma description:
Code:

<head>
    <link rel="stylesheet" href="adresse de ma page javascript (il y avais ici une adresse de page .CSS mais cela ne fonctionnais pas)">
</head>
<body>
    ... <!-- Before the closing body tag -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <script src="adresse de ma page javascript"></script>
</body><div class="accordion">
    <ol>
        <li>
            <h2><span>Slide One</span></h2>
            <div><script src="adresse de ma page javascript"></script></div>
          <img src="http://i46.servimg.com/u/f46/16/36/44/84/dfinit10.jpg">
        </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>
<script>
    $('#yourdiv').liteAccordion();
</script>

Mais rien ne fonctionne.
diedblack

diedblack
****

Masculin
Messages : 206
Inscrit(e) le : 09/04/2011

http://www.frsociety.com
diedblack a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Liteaccordion - Problèmes

Message par SoraNoHime Mer 12 Oct 2011 - 4:43

Déjà vous ne pouvez tout mettre dans votre description les codes de head et de body étant déjà présents dans le header par exemple

votre html sera donc toujours :
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>

il vous faut mettre ce code dans la css :
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
*
/*************************************************/
/****************************************** Core */
.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 */

ensuite dans Gestion des pages javascript, vous devez avoir un code à mettre sur votre index :
Code:
            $('#yourdiv').liteAccordion();
/*************************************************
        *
        *  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);

PS : pour le moment je fais à partir des instructions que vous m'avez données, mon forum test étant actuellement bloqué. Je testerai plus tard si ceci ne fonctionne pas

Cordialement.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime 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