apparence accueil accordeon

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

Résolu apparence accueil accordeon

Message par emc2 le Jeu 12 Avr 2012 - 20:11

Bonsoir,

Je rencontre un gros soucis de format actuellement. Sur un forum de test que j'utilise pour faire des essais, j'ai créé un accueil avec un panneau en accordéon. Il fonctionne parfaitement bien. Malheureusement, quand je veux l'appliquer sur le forum auquel il est destiné, ce même panneau prend des dimensions démesurées. Apparemment, il deux fois plus grand que prévu. Je ne comprends pas d'ou cela peut venir.

ici l'accordeon avec ses dimensions voulues: http://vote-archives.forumgratuit.org/

et là le forum sur lequel je dois le poser, mais il est beaucoup trop grand ! http://politique.forum-actif.net/

Si vous pouviez m'aider à résoudre ce poblème d'apparence, merci beaucoup.
le html que mis dans: affichage, généralité, message sur la page d'accueil
Code:
<div id="accordeon-pa" class="accordion">
    <ol>
        <li>
            <h2><font size="6"><span>La commune</span></font></h2>
            <div>
              <figure>
                <a href="http://politique.forum-actif.net/f132-commune-du-forum"><img class="full" src="http://i49.servimg.com/u/f49/17/19/42/30/accord16.jpg" alt="image" /></a>
              </figure>
            </div>
        </li>
        <li>
            <h2><font size="6"><span>L' U.H.P.</span></font></h2>
            <div>
              <figure>
              <a href="http://politique.forum-actif.net/f22-l-union-pour-l-humanite-et-pour-la-paix"><img class="full" src="http://i49.servimg.com/u/f49/17/19/42/30/accord19.jpg" alt="image" /></a>
              </figure>
            </div>
        </li>
        <li>
            <h2><font size="6"><span>L' A.F.N.</span></font></h2>
            <div>
              <figure>
              <a href="http://politique.forum-actif.net/f23-alliance-francaise-nationaliste"><img class="full" src="http://i49.servimg.com/u/f49/17/19/42/30/accord17.jpg" alt="image" /></a>
              </figure>
            </div>
        </li>
        <li>
            <h2><font size="6"><span>Le P.A.N.</span></font></h2>
            <div>
              <figure>
              <a href="http://politique.forum-actif.net/f21-peuples-avenir-nation"><img class="full" src="http://i49.servimg.com/u/f49/17/19/42/30/accord18.jpg" alt="image" /></a>
              </figure>
            </div>
        </li>
        <li>
            <h2><font size="6"><span>Maison Royale</span></font></h2>
            <div>
              <figure>
                <a href="http://politique.forum-actif.net/f5-la-maison-royale"><img class="full" src="http://i49.servimg.com/u/f49/17/19/42/30/accord20.jpg" alt="image" /></a>
              </figure>
            </div>
        </li>
        <li>
            <h2><font size="6"><span>Le M.E.I.S.</span></font></h2>
            <div>
              <figure>
                <a href="http://politique.forum-actif.net/f66-mouvement-europeen-imperial-et-social"><img class="full" src="http://i49.servimg.com/u/f49/17/19/42/30/accord21.jpg" alt="image" /></a>
              </figure>
            </div>
        </li>
    </ol>
</div>

là, c'est mon script que j'ai placé dans mes javascript
Code:
$(document).ready(function() {
  $("#accordeon-pa").each(function(){
    $(this).liteAccordion({
      autoPlay:true,
      pauseOnHover:true,
      rounded:true,
      enumerateSlides:true,
      containerWidth: 1300,
      containerHeight: 350
    })
  });
});
/*************************************************!
*
*  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:"click",firstSlide:1,slideSpeed:1200,onTriggerSlide:function(){},onSlideAnimComplete:function(){},autoPlay:false,pauseOnHover:false,cycleSpeed:9000,easing:"swing",theme:"basic",rounded:false,enumerateSlides:false,linkable:false},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);

ici mon css
Code:
@charset 'utf-8';
/*************************************************!
*
*  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
*
**************************************************/
/****************************************** 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 .slide > h2 {
  color: black;
    font-size: 16px;
  font-weight: normal;
  margin: 0;
  z-index: 100;
  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;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right top;
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
    display: block;
    padding-right: 8%;
    text-align: right;
    height: 90%;
    margin-top: 5px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.accordion .slide > h2 b {
    display: inline-block;
    position: absolute;
    top: 13%;
    left: 10%;
    text-align: center;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 40; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }
 
/***************************************** Light */
.accordion {
    border: 9px solid #cadceb;
    border-bottom-width: 8px;
    padding: 5px 5px 6px 0;
    background: #030303;
    -webkit-box-shadow: -1px -1px 0 #CADCEB, 1px 1px 0 #CADCEB, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: -1px -1px 0 #CADCEB, 1px 1px 0 #CADCEB, 0 5px 15px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: -1px -1px 0 #CADCEB, 1px 1px 0 #CADCEB, 0 5px 15px rgba(0, 0, 0, 0.4);
    -o-box-shadow: -1px -1px 0 #CADCEB, 1px 1px 0 #CADCEB, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: -1px -1px 0 #CADCEB, 1px 1px 0 #CADCEB, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background: #030303; text-shadow: 0 -1px 0 white; line-height: 265% }
.accordion .slide > h2 span {
    background: #cadceb;
    background: -moz-linear-gradient(left,  #cadceb 0%, #cadceb 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#cadceb), color-stop(100%,#cadceb));
    background: -webkit-linear-gradient(left,  #cadceb 0%,#cadceb 100%);
    background: -o-linear-gradient(left,  #cadceb 0%,#cadceb 100%);
    background: -ms-linear-gradient(left,  #cadceb 0%,#cadceb 100%);
    background: linear-gradient(left,  #cadceb 0%,#cadceb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=1 );
    -webkit-box-shadow: -1px -1px 0 #030303 inset, 1px 1px 0 #030303 inset;
    -moz-box-shadow: -1px -1px 0 #030303 inset, 1px 1px 0 #030303 inset;
    -o-box-shadow: -1px -1px 0 #030303 inset, 1px 1px 0 #030303 inset;
  box-shadow: -1px -1px 0 #030303 inset, 1px 1px 0 #030303 inset;
    color: #030303;
}
.accordion .slide > h2 b { background: #cadceb; color: #cadceb; text-shadow: -1px 1px 0 white }
.accordion .slide > h2.selected span, .accordion .slide h2.selected span:hover, .accordion .slide > h2.selected b { background: #ffffff }
.accordion .slide > div { background: #cadceb; margin-left: 5px }
 
/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }
 
/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.accordion .slide > h2 b { top: 44% }
.accordion .slide > h2 span { filter: none }
 
/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }
/* .systab .tab => les onglet */
.systab .tab {
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #fff;
  border: 1px solid #000;
  cursor: pointer;
}


Dernière édition par emc2 le Dim 15 Avr 2012 - 1:23, édité 1 fois

emc2
*****

Messages : 518
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: apparence accueil accordeon

Message par mimi-76- le Jeu 12 Avr 2012 - 20:27

Bonjour, votre accordéon, change sa taille car, votre forum n'est pas de la même taille.

mimi-76-
****

Messages : 279
Inscrit(e) le : 14/03/2012

http://lord-of-cubs.jeun.fr
mimi-76- a été remercié(e) par l'auteur de ce sujet.

Résolu Re: apparence accueil accordeon

Message par emc2 le Jeu 12 Avr 2012 - 22:36

ok, et comment puis-je réduire la taille de mon accordéon afin de l'adapter au second forum ?

emc2
*****

Messages : 518
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: apparence accueil accordeon

Message par emc2 le Jeu 12 Avr 2012 - 23:28

ok, et comment puis-je réduire la taille de mon accordéon afin de l'adapter au second forum ?

................. en fait, je viens de voir que dans le script je pouvais réduire les dimensions du tableau,
Code:
containerWidth: 1300,
      containerHeight: 350
sur ces deux lignes. Chose étrange, cela réduit bien mon accordéon sur mon forum de test, mais sur le forum de destination, même avec les nouvelles dimensions revue à la baisse, ça ne change rien, mon accordéon est toujours aussi démesuré. De plus les images hébergées sont beaucoup plus trouble. je suppose que c'est le résultat de l'agrandissement non désiré qui provoque cela.
Donc si quelqu'un peut me donner une indication pour ajuster ces dimensions, je lui en serais reconnaissant.

emc2
*****

Messages : 518
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: apparence accueil accordeon

Message par mimi-76- le Ven 13 Avr 2012 - 17:00

containerWidth: 1300,
containerHeight: 350

Bonjour, il est déconseiller de toucher au code javascript.

Et de plus, un administrateur vas vous dire qu'il est interdit up avant 24h, qu'il faut faire edit .

mimi-76-
****

Messages : 279
Inscrit(e) le : 14/03/2012

http://lord-of-cubs.jeun.fr
mimi-76- a été remercié(e) par l'auteur de ce sujet.

Résolu Re: apparence accueil accordeon

Message par Manumanu le Ven 13 Avr 2012 - 17:09

@mimi-76: Il n'y a pas grand mal à toucher à une fonction javascript ; du reste, il ne fait là que renseigner des paramètres de la fonction, ce qui est tout à fait normal et prévu Wink

@emc2: Je ne vois pas l'accordéon sur le forum en question ? Il faudrait que je puisse le regarder pour chercher ce qui ne va pas.

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: apparence accueil accordeon

Message par Ea le Ven 13 Avr 2012 - 17:39

Bonjour,


On peut toucher au javascript, et surtout les paramètres dont le changement sont le plus utile ont été mis en haut exprès :

( ce qu'il y a en bas il ne devrait pas y avoir besoin d'y toucher )

Code:
$(document).ready(function() {
  $("#accordeon-pa").each(function(){
    $(this).liteAccordion({
      autoPlay:true, /* passer d'un slide à l'autre automatiquement */
      pauseOnHover:true, /* arrêter le défilement si on survole avec la souris */
      rounded:true, /* arrondis */
      enumerateSlides:true, /* numéroter les slides */
      containerWidth: 1300, /* largeur en pixels */
      containerHeight: 350 /* hauteur en pixels */
    })
  });
});
On peut également le personnaliser par d'autres options indiquées là :
http://nicolahibbert.com/demo/liteAccordion/

Chose étrange, cela réduit bien mon accordéon sur mon forum de test, mais sur le forum de destination, même avec les nouvelles dimensions revue à la baisse, ça ne change rien, mon accordéon est toujours aussi démesuré. De plus les images hébergées sont beaucoup plus trouble. je suppose que c'est le résultat de l'agrandissement non désiré qui provoque cela.
Donc si quelqu'un peut me donner une indication pour ajuster ces dimensions, je lui en serais reconnaissant.
Le script est peut-être deux fois sur le forum ( et il y a l'autre version avec les mauvaises dimensions ).

Cordialement.

Ea
Aidactif
Aidactif

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

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

Résolu Re: apparence accueil accordeon

Message par emc2 le Ven 13 Avr 2012 - 22:20

J'ai vérifié, et le script ne s'y trouve pas deux fois. Quand au fait que l'on ne voit pas l'accordeon sur le forum qui doit l'accueillir, je ne l'y met pas car il prend les deux tiers de l'écran, c'est très gênant pour les membres du forum.
J'ai remarqué une différence entre les deux forum. Le forum de test est un phpBB2, le forum de destination est un phpBB3. Ensuite dans le forum de destination, dans le PA, général, configuration, structure des pages, j'ai deux paramètres: "hauteur de la cellule image catégoie/forum" et idem pour la largeur, il sont rensignés à 40px, alors que sur mon forum de test, je n'ai pas des paramètres.
Je n'ai toujours pas trouvé la solution pour mettre cet accordéon de manière acceptable.

emc2
*****

Messages : 518
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: apparence accueil accordeon

Message par Ea le Ven 13 Avr 2012 - 22:40

Si je test sur le forum avec ce que vous avez mis dans :
http://vote-archives.forumgratuit.org/

=> http://i.imgur.com/3uvZD.png

J'ai exactement les mêmes dimensions sur l'autre forum :

=> http://i.imgur.com/oEDqX.png

( et ce sont bien les dimensions mentionnées dans le script )


Cordialement.

Ea
Aidactif
Aidactif

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

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

Résolu Re: apparence accueil accordeon

Message par emc2 le Dim 15 Avr 2012 - 0:50

Même en diminuant la taille des mes images pour chaque panneaux, j'obtiens invariablement ceci sur le forum:

Spoiler:

Alors que l'accordeon devrait se présenter comme ceci:

Spoiler:


EDIT ...

C'est ok, j'ai trouvé l'erreur ! je n'avais pas sélectionné "sur le portail" au dessus, l'on doit choisir ou cela doit apparaître, je n'avais rien sélectionné. C'est ok, cela marche à présent !

emc2
*****

Messages : 518
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 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