Problème PA en accordéon
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Problème PA en accordéon
Bonjour,
voilà le lien du forum ou se pose mon soucis: http://gaddict.forumactif.org/
j'ai obté pour la PA en accordéon et j'ai un petit soucis à savoir j'aimerais ralentir le défilement des page car elle slide d'elle même mais je voudrais que ça prenne un peu plus de temps es-ce possible si oui comment procéder s'il vous plait?
Et au niveau de mon premier onglet j'ai fait un tableau à l'intérieur mais je n'arrive pas à remonter la vidéo, comment faire s'il vous plait, j'ai essayer margin-top en mettant une class au span de la vidéo mais ça n'a pas fonctionné.
Voici le javascript de l'accordéon:
voilà le lien du forum ou se pose mon soucis: http://gaddict.forumactif.org/
j'ai obté pour la PA en accordéon et j'ai un petit soucis à savoir j'aimerais ralentir le défilement des page car elle slide d'elle même mais je voudrais que ça prenne un peu plus de temps es-ce possible si oui comment procéder s'il vous plait?
Et au niveau de mon premier onglet j'ai fait un tableau à l'intérieur mais je n'arrive pas à remonter la vidéo, comment faire s'il vous plait, j'ai essayer margin-top en mettant une class au span de la vidéo mais ça n'a pas fonctionné.
Voici le javascript de l'accordéon:
- Code:
$(document).ready(function() {
$("#accordeon-pa").each(function(){
$(this).liteAccordion({
autoPlay:true,
pauseOnHover:true,
rounded:true,
enumerateSlides:true,
containerWidth: 960,
containerHeight: 320
})
});
});
/*************************************************!
*
* 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:800,onTriggerSlide:function(){},onSlideAnimComplete:function(){},autoPlay:false,pauseOnHover:false,cycleSpeed:6000,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);
- Code:
<div id="accordeon-pa" class="accordion">
<ol>
<li>
<h2><span class="accordeon1">A Propos</span></h2>
<div>
<table cellpadding="3"><tr><td width="117" valign="top" rowspan="2" bgcolor="#4d8ffc"><div style="height: 20px; background: #4d8ffc; border-bottom: 1px dashed #000000; font-family: impact; color:#000000; font-size:15px;"><center>A Propos</center></div><marquee height="130" direction="up" scrollamount="1"><span style="color: black;">GA est un forum de Graphisme basé en premier lieu sur la convivialité et l'entraide!<br /> <br />
Il n'a pas pour vocation d'être un forum comme les autres, étant donné qu'il est entièrement tourné vers un système de teams.
Pour pouvoir profiter pleinement des concours, défis, duels il vous faudra appartenir à l'une d'entre elles.
Vous aurez aussi la possibilité de faire évaluer votre niveau, de nous montrer vos talents de graphistes et d'apprendre via
le partage mais aussi grâce aux tutos, cours collectifs et particuliers.<br /></span><br>
<br>
</marquee></td>
<table cellpadding="3"><tr><td width="170" valign="top" rowspan="2" bgcolor="#4d8ffc"><div style="height: 20px; background: #4d8ffc; border-bottom: 1px dashed #000000; font-family: impact; color:#000000; font-size:15px;"><center>Crédits</center></div><span style="color: black;">L'ensemble du forum appartient à ses fondatrices . Thème et Code conçuent par
<a href="http://graph-addict.forumactif.pro/u3">Miss CC</a>. Agencement et rédaction par
<a href="http://graph-addict.forumactif.pro/u2">Ellanna</a> et <a href="http://graph-addict.forumactif.pro/u4">Elfy</a>.
Merci à tout ceux qui nous ont aidé à bâtir Graph Addict. <br /></span><br>
<br>
</td>
<span class="video">
<td width="580" height="312" bgcolor="#4d8ffc" align="justify">
<iframe width="580" height="312" src="//www.youtube.com/v/QX-Efv95zqA?version=3&&rel=0&autoplay=1&replay&loop=1&playlist=lniVx_pFM_A%5D&rel=0" frameborder="0" allowFullScreen=""></iframe>
</span>
</td>
</table>
</div>
</li>
<li>
<h2><span class="accordeon2">Le Staff</span></h2>
<div>
<figure>
<img class="full" src="http://i.imgur.com/v5LuU.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span class="accordeon3">Les Teams</span></h2>
<div>
<figure>
<img class="full" src="http://i.imgur.com/VdDge.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span class="accordeon4" >Les Tops</span></h2>
<div>
<figure>
<img class="full" src="http://i.imgur.com/EwuD0.jpg" alt="image" />
</figure>
</div>
</li>
<li>
</li>
</ol>
</div>
- Code:
/*PA EN ACCORDEON */
.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: #ffffff;
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: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }
accordion .slide > h2 span.accordeon1{
background-color: #4d8ffc;}
/****************************************** Dark */
.accordion {
border: 1px solid #4d8ffc;
border-bottom-width: 1px;
padding: 5px 5px 6px 0;
background: #000000;
-webkit-box-shadow: 0 -1px 0 #000000 inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -1px 0 #000000 inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 -1px 0 #000000 inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 -1px 0 #000000 inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #000000 inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 {
background: #000000;
text-shadow: 0 -1px 0 #030303;
line-height: 265% }
.accordeon1 {
background: #4d8ffc;
color: black}
.accordeon2 {
background: #b36ed0;
color: black}
.accordeon3 {
background: #da448a;
color: black}
.accordeon4 {
background: #fd8983;
color: black}
.accordion .slide > h2 b {
background: transparent;
color: #030303;
text-shadow: -1px 1px 0 #5b5b5b }
.accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {
background: #000000;
background: -moz-linear-gradient(left, #000000 0%, #555555 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(100%,#555555));
background: -webkit-linear-gradient(left, #000000 0%,#555555 100%);
background: -o-linear-gradient(left, #000000 0%,#555555 100%);
background: -ms-linear-gradient(left, #000000 0%,#555555 100%);
background: linear-gradient(left, #000000 0%,#555555 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#555555',GradientType=1 );
}
.accordion .slide > h2.selected b {
background: #383838;
background: -moz-linear-gradient(top, #3a3a3a 0%, #363636 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
background: -webkit-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: -o-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: -ms-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: linear-gradient(top, #3a3a3a 0%,#363636 100%);
}
.accordion .slide > div { background: #030303; 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% }
.ie9.accordion .slide > h2.selected span, .ie9.accordion .slide > h2.selected span:hover { filter: none }
/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }
/* centrer l'accordéon */
.accordion { margin: auto; }
Dernière édition par Miss CC le Mer 28 Aoû 2013 - 17:23, édité 1 fois
Re: Problème PA en accordéon
Bonjour,
pour le temps entre chaque onglet tu cherches: cycleSpeed:6000 dans le script et tu agis sur la valeur 6000
je regarde le reste
pour le temps entre chaque onglet tu cherches: cycleSpeed:6000 dans le script et tu agis sur la valeur 6000
je regarde le reste
Invité- Invité
Re: Problème PA en accordéon
Ha nikel merci pour le temps c'est parfait, merci beaucoup!
Re: Problème PA en accordéon
je fais le reste tu l'auras demain matin car je dois partir !!!
mais pas de problème
Cdt
mais pas de problème
Cdt
Invité- Invité
Re: Problème PA en accordéon
Ha merci c'est très gentil vraiment!
bonne soirée cdt
bonne soirée cdt
Re: Problème PA en accordéon
Bonjour,
Voilà le code que je t'ai promis, j'espère que cela te convient.
je te conseil aussi ces valeurs là dans le script:
containerWidth: 980,
containerHeight: 320
EDIT: 13h45 aujourd'hui: j'ai rajouté un onglet pour etre dans ta config
@+
Cordialement
Voilà le code que je t'ai promis, j'espère que cela te convient.
- Code:
<div id="accordeon-pa" class="accordion">
<ol>
<li>
<h2><span class="accordeon1">A Propos</span></h2>
<div>
<table border="0">
<tr>
<td valign="top">
<table height="317" border="0">
<tr>
<td valign="top" height="163" bgcolor="#4d8ffc">
<div style="height: 20px; background: #4d8ffc; border-bottom: 1px dashed #000000; font-family: impact; color:#000000; font-size:15px;"><center>A Propos</center></div>
<marquee height="170" direction="up" scrollamount="1">
<span style="color: black;">GA est un forum de Graphisme basé en premier lieu sur la convivialité et l'entraide!<br /> <br />
Il n'a pas pour vocation d'être un forum comme les autres, étant donné qu'il est entièrement tourné vers un système de teams.
Pour pouvoir profiter pleinement des concours, défis, duels il vous faudra appartenir à l'une d'entre elles.
Vous aurez aussi la possibilité de faire évaluer votre niveau, de nous montrer vos talents de graphistes et d'apprendre via
le partage mais aussi grâce aux tutos, cours collectifs et particuliers.<br />
</span>
</marquee>
</td>
</tr>
<tr height="100%">
<td bgcolor="#4d8ffc"><div style="height: 20px; background: #4d8ffc; border-bottom: 1px dashed #000000; font-family: impact; color:#000000; font-size:15px;"><center>Crédits</center></div>
<span style=" height: 120px; color: black;">L'ensemble du forum appartient à ses fondatrices . Thème et Code conçuent par
<a href="http://graph-addict.forumactif.pro/u3">Miss CC</a>. Agencement et rédaction par
<a href="http://graph-addict.forumactif.pro/u2">Ellanna</a> et <a href="http://graph-addict.forumactif.pro/u4">Elfy</a>.Merci à tout ceux qui nous ont aidé à bâtir Graph Addict. <br />
</span><br />
</td>
</tr>
</table>
<td class="video" width="580" height="316" bgcolor="#4d8ffc" align="justify">
<iframe width="580" height="310" src="//www.youtube.com/v/QX-Efv95zqA?version=3&&rel=0&autoplay=1&replay&loop=1&playlist=lniVx_pFM_A%5D&rel=0" frameborder="0" allowFullScreen=""></iframe>
</td>
</td>
</tr>
</table>
<li>
<h2><span class="accordeon2">Le Staff</span></h2>
<div>
<figure>
<img class="full" src="http://i.imgur.com/v5LuU.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span class="accordeon3">Les Teams</span></h2>
<div>
<figure>
<img class="full" src="http://i.imgur.com/VdDge.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span class="accordeon4" >Les Tops</span></h2>
<div>
<figure>
<img class="full" src="http://i.imgur.com/EwuD0.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span class="accordeon5" >Les infos</span></h2>
<div>
<figure>
<img class="full" src="http://i.imgur.com/EwuD0.jpg" alt="image" />
</figure>
</div>
</li>
</ol>
</div>
je te conseil aussi ces valeurs là dans le script:
containerWidth: 980,
containerHeight: 320
EDIT: 13h45 aujourd'hui: j'ai rajouté un onglet pour etre dans ta config
@+
Cordialement
Invité- Invité
Re: Problème PA en accordéon
Coucou Merci beaucoup beaucoup ^^
c'est juste nikel merci infiniement!
c'est juste nikel merci infiniement!
Dernière édition par Miss CC le Mer 28 Aoû 2013 - 17:03, édité 1 fois
Re: Problème PA en accordéon
de rien n'hésite surtout pas
Invité- Invité
Re: Problème PA en accordéon
c'est gentil ^^
ben si je peux te demander si tu vois un truc qui cloche dans mon script ici si tu t'y connais: https://forum.forumactif.com/t356842-probmleme-avec-un-script-java
Car J e trouve pas la solution à mon problème depuis hier je m'arrache les cheveux lol
Merci beaucoup pour ton aide!
ben si je peux te demander si tu vois un truc qui cloche dans mon script ici si tu t'y connais: https://forum.forumactif.com/t356842-probmleme-avec-un-script-java
Car J e trouve pas la solution à mon problème depuis hier je m'arrache les cheveux lol
Merci beaucoup pour ton aide!
Re: Problème PA en accordéon
je vais regarder mais te promet rien, tu peux clore le sujet
Invité- Invité
Re: Problème PA en accordéon
oki merci c'est gentil te ta part je clos merci!
Sujets similaires
» Problème de PA en accordéon
» Problème d'affichage de l'accordéon
» Problème effet accordéon
» problème d accueil accordéon
» Problème avec une PA en accordéon !
» Problème d'affichage de l'accordéon
» Problème effet accordéon
» problème d accueil accordéon
» Problème avec une PA en accordéon !
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum