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 2013 - 17: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

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 2013 - 17:56

up

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 2013 - 11:11

up

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 2013 - 21:54

up

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 2013 - 23: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 2013 - 23: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.

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 2013 - 17:20

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

cc

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 2013 - 17:23

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

Cordialement.

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 2013 - 17: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

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 2013 - 17: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.

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 2013 - 17:41

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

cc

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 2013 - 17:54

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

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 2013 - 18:12

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

cc

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 2013 - 18:16

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

Amicalement.

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 2013 - 22:08

up

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 2013 - 16:54

Bonjour,


Où en est votre problème ?

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23442
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 2013 - 18:42

toujours en attente .....

cc

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 2013 - 19: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.

Ea
Aidactif
Aidactif

Messages : 23442
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 2013 - 20:36

ok, merci beaucoup

cc

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