Modifier accordéon horizontal

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

Résolu Modifier accordéon horizontal

Message par Matthieu A. le Jeu 21 Mar - 16:47

Bonsoir,

Ce sujet est en quelque sorte la suite de celui ci: http://forum.forumactif.com/t347900-creer-un-menu-horizontal-en-accordeon

j'ai une petite question: le site http://nicolahibbert.com/demo/liteAccordion/demo-suite.html (d'où provient l'accordéon) propose des scripts (cf en bas de page) pour modifier les caractéristiques des accordéons: où placer ces scripts: dans le CSS, le javascript ? a quel endroit ?

cc
avatar

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Modifier accordéon horizontal

Message par Matthieu A. le Ven 22 Mar - 16:56

up
avatar

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Modifier accordéon horizontal

Message par Matthieu A. le Dim 24 Mar - 10:11

up
avatar

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Modifier accordéon horizontal

Message par Matthieu A. le Mer 27 Mar - 20:54

up
avatar

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Modifier accordéon horizontal

Message par Kaff le Mer 27 Mar - 22:24

Pour moi c'est du javascript.

Kaff
*

Messages : 30
Inscrit(e) le : 19/03/2013

http://les-wazmoket.forumperso.com/
Kaff a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier accordéon horizontal

Message par Hemoglobine le Mer 27 Mar - 22:32

C'est du Javascript, donc:

=> Panneau d'administration => Module => Tout en bas Gestion des codes Javascript => Créer un Nouveau Javascript => Coller => Enregistrer, normalement, cela sera bon.
avatar

Hemoglobine
****

Messages : 266
Inscrit(e) le : 16/02/2013

http://meonga.forumactif.com/
Hemoglobine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier accordéon horizontal

Message par Matthieu A. le Jeu 28 Mar - 16:20

merci de vos réponses, mais cela ne fonctionne pas

cc
avatar

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Modifier accordéon horizontal

Message par Hemoglobine le Jeu 28 Mar - 16:23

Bonjour,
Peux-tu montrer ton script modifié ici ?

Cordialement.
avatar

Hemoglobine
****

Messages : 266
Inscrit(e) le : 16/02/2013

http://meonga.forumactif.com/
Hemoglobine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier accordéon horizontal

Message par Matthieu A. le Jeu 28 Mar - 16:28

voilà le code javascript de l'accordéon:
Code:
$(document).ready(function() {
  $("#accordeon-pa").each(function(){
    $(this).liteAccordion({
      autoPlay:true,
      pauseOnHover:true,
      rounded:true,
      enumerateSlides:false,
      containerWidth: 605,
      containerHeight: 205
    })
  });
});
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.2
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
(function(b){var a=function(g,l){var i={headerWidth:48,activateOn:"mouseover",firstSlide:1,slideSpeed:800,onTriggerSlide:function(){},onSlideAnimComplete:function(){},autoPlay:false,pauseOnHover:false,cycleSpeed:6000,easing:"swing",theme:"light",rounded:true,enumerateSlides:false,linkable:true},h=b.extend({},i,l),c=g.children("ol").children("li"),j=c.children(":first-child"),k=c.length,f=h.containerWidth-k*h.headerWidth,e={play:function(m){var n=d.nextSlide(m&&m);if(d.playing){return}d.playing=setInterval(function(){j.eq(n()).trigger("click.liteAccordion")},h.cycleSpeed)},stop:function(){clearInterval(d.playing);d.playing=0},next:function(){e.stop();j.eq(d.currentSlide===k-1?0:d.currentSlide+1).trigger("click.liteAccordion")},prev:function(){e.stop();j.eq(d.currentSlide-1).trigger("click.liteAccordion")},destroy:function(){e.stop();b(window).unbind(".liteAccordion");g.attr("style","").removeClass("accordion basic dark light stitch").removeData("liteAccordion").unbind(".liteAccordion").find("li > :first-child").unbind(".liteAccordion").filter(".selected").removeClass("selected").end().find("b").remove();c.removeClass("slide").children().attr("style","")},debug:function(){return{elem:g,defaults:i,settings:h,methods:e,core:d}}},d={setStyles:function(){g.width(h.containerWidth).height(h.containerHeight).addClass("accordion").addClass(h.rounded&&"rounded").addClass(h.theme);c.addClass("slide").children(":first-child").width(h.containerHeight).height(h.headerWidth).eq(h.firstSlide-1).addClass("selected");j.each(function(m){var p=b(this),o=m*h.headerWidth,n=j.first().next(),q=parseInt(n.css("marginLeft"),10)||parseInt(n.css("marginRight"),10)||0;if(m>=h.firstSlide){o+=f}p.css("left",o).next().width(f-q).css({left:o,paddingLeft:h.headerWidth});h.enumerateSlides&&p.append("<b>"+(m+1)+"</b>")})},bindEvents:function(){if(h.activateOn==="click"){j.bind("click.liteAccordion",d.triggerSlide)}else{if(h.activateOn==="mouseover"){j.bind({"mouseover.liteAccordion":d.triggerSlide,"click.liteAccordion":d.triggerSlide})}}if(h.pauseOnHover&&h.autoPlay){g.bind("mouseover.liteAccordion",function(){d.playing&&e.stop()}).bind("mouseout.liteAccordion",function(){!d.playing&&e.play(d.currentSlide)})}},linkable:function(){var m=(function(){var o=[];c.each(function(){if(b(this).attr("name")){o.push((b(this).attr("name")).toLowerCase())}});return m=o})();var n=function(p){var o;if(p.type==="load"&&!window.location.hash){return}if(p.type==="hashchange"&&d.playing){return}o=b.inArray((window.location.hash.slice(1)).toLowerCase(),m);if(o>-1&&o<m.length){j.eq(o).trigger("click.liteAccordion")}};b(window).bind({"hashchange.liteAccordion":n,"load.liteAccordion":n})},currentSlide:h.firstSlide-1,nextSlide:function(m){var n=m+1||d.currentSlide+1;return function(){return n++%k}},playing:0,animSlideGroup:function(m,o,n){var p=n?":lt("+(m+1)+")":":gt("+m+")";c.filter(p).each(function(){var r=b(this),q=c.index(r);r.children().stop(true).animate({left:(n?0:f)+q*h.headerWidth},h.slideSpeed,h.easing,function(){if(!d.slideAnimCompleteFlag){h.onSlideAnimComplete.call(o);d.slideAnimCompleteFlag=true}})})},slideAnimCompleteFlag:false,triggerSlide:function(p){var o=b(this),m=j.index(o),n=o.next();d.currentSlide=m;d.slideAnimCompleteFlag=false;j.removeClass("selected").filter(o).addClass("selected");if(p.originalEvent&&h.autoPlay){e.stop();e.play(m)}if(h.linkable&&!d.playing){window.location.hash=o.parent().attr("name")}h.onTriggerSlide.call(n);d.animSlideGroup(m,n,true);d.animSlideGroup(m,n)},ieClass:function(){var m=+(b.browser.version).charAt(0);if(m<7){e.destroy()}if(m===7||m===8){c.each(function(n){b(this).addClass("slide-"+n)})}g.addClass("ie ie"+m)},init:function(){if(b.browser.msie){d.ieClass()}d.setStyles();d.bindEvents();if(h.cycleSpeed<h.slideSpeed){h.cycleSpeed=h.slideSpeed}if(h.linkable&&"onhashchange" in window){d.linkable()}h.autoPlay&&e.play()}};d.init();return e};b.fn.liteAccordion=function(e){var d=this,c=d.data("liteAccordion");if(typeof e==="object"||!e){return d.each(function(){var f;if(c){return}f=new a(d,e);d.data("liteAccordion",f)})}else{if(typeof e==="string"&&c[e]){if(e==="debug"){return c[e].call(d)}else{c[e].call(d);return d}}}}})(jQuery);

il y a aussi un CSS mais comme http://nicolahibbert.com/demo/liteAccordion/demo-suite.html fournit des javascripts, la modification est dans le javascript.

En fait j'ai un accordéon qui fonctionne parfaitement mais j'aimerais en changer le theme ou certains comportements. Le site ci dessus permet de faire ces modifs avec un code, mais je ne sais pas quoi en faire

cc
avatar

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Modifier accordéon horizontal

Message par Hemoglobine le Jeu 28 Mar - 16:39

Ce code est a mettre dans Javascript, et normalement si vous avez le CSS, cela devrait marcher ?
Avez vous essayer de vider le cache + Ctrl F5 ?
Cordialement.
avatar

Hemoglobine
****

Messages : 266
Inscrit(e) le : 16/02/2013

http://meonga.forumactif.com/
Hemoglobine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier accordéon horizontal

Message par Matthieu A. le Jeu 28 Mar - 16:41

le code fournit sur le site est à mettre à la fin du code donné précédement ?

cc
avatar

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Modifier accordéon horizontal

Message par Hemoglobine le Jeu 28 Mar - 16:54

C'est plutôt le code entier je pense, a tester !
avatar

Hemoglobine
****

Messages : 266
Inscrit(e) le : 16/02/2013

http://meonga.forumactif.com/
Hemoglobine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier accordéon horizontal

Message par Matthieu A. le Jeu 28 Mar - 17:12

j'ai remplacé le code précédent par celui donné sur le site => cela ne fonctionne pas

cc
avatar

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Modifier accordéon horizontal

Message par Hemoglobine le Jeu 28 Mar - 17:16

Je passe ma main, je ne trouve aucune réponse à ton problème ...
Désolé ...

Amicalement.
avatar

Hemoglobine
****

Messages : 266
Inscrit(e) le : 16/02/2013

http://meonga.forumactif.com/
Hemoglobine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier accordéon horizontal

Message par Matthieu A. le Sam 30 Mar - 21:08

up
avatar

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Modifier accordéon horizontal

Message par Ea le Mer 3 Avr - 14:54

Bonjour,


Où en est votre problème ?

Cordialement.
avatar

Ea
Aidactif
Aidactif

Messages : 23485
Inscrit(e) le : 04/04/2008

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

Résolu Re: Modifier accordéon horizontal

Message par Matthieu A. le Mer 3 Avr - 16:42

toujours en attente .....

cc
avatar

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Modifier accordéon horizontal

Message par Ea le Mer 3 Avr - 17:34

Il faut transformer le code qu'ils donnent, par exemple :

Code:
$("#yourAccordion").liteAccordion({"autoPlay":true});

en :

Code:
$(document).ready(function() {
  $("#accordeon-pa").each(function(){
    $(this).liteAccordion({
      autoPlay:true,
      pauseOnHover:true,
      rounded:true,
      enumerateSlides:false,
      containerWidth: 605,
      containerHeight: 205
    })
  });
});
Pour ce faire, pour l'exemple il faut par exemple remplacer :

Code:
{
      autoPlay:true,
      pauseOnHover:true,
      rounded:true,
      enumerateSlides:false,
      containerWidth: 605,
      containerHeight: 205
    }
Par :

Code:
{"autoPlay":true}
Le paramètre "theme" ne fonctionnera à mon avis pas, dans l'astuce ( lien ) on utilise simplement un code css différent pour changer de thème.

Cordialement.
avatar

Ea
Aidactif
Aidactif

Messages : 23485
Inscrit(e) le : 04/04/2008

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

Résolu Re: Modifier accordéon horizontal

Message par Matthieu A. le Mer 3 Avr - 18:36

ok, merci beaucoup

cc
avatar

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

Matthieu A. 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