Pour avoir une P.A Accordéon
3 participants
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
Pour avoir une P.A Accordéon
Bonjour! Je remercie la personne d'avance qui viendra m'aider. =)
Alors, J'ai essayé de mettre les code de ce tutoriel qui est en anglais, ici, comme je comprends rien, j'ai trouvé divers sujet...Comme celui-ci, ici. Mais sans succès, j'ai pas réussi à le mettre. Est-ce que quelqu'un pourrait me dire comment le mettre (réussir) du premier coup ? >.<'
J'ai crée les deux fiches séparés dans le Javascript... Mais il m'affiche cela quand je le mets sur la p.a.
Merci d'avance. *O*
Alors, J'ai essayé de mettre les code de ce tutoriel qui est en anglais, ici, comme je comprends rien, j'ai trouvé divers sujet...Comme celui-ci, ici. Mais sans succès, j'ai pas réussi à le mettre. Est-ce que quelqu'un pourrait me dire comment le mettre (réussir) du premier coup ? >.<'
J'ai crée les deux fiches séparés dans le Javascript... Mais il m'affiche cela quand je le mets sur la p.a.
- Spoiler:
Merci d'avance. *O*
Dernière édition par Symphony Lips le Sam 13 Aoû 2011 - 0:56, édité 1 fois
Invité- Invité
Re: Pour avoir une P.A Accordéon
Bonsoir.
Pour ce code, il faut faire ainsi :
Dans la gestion des pages javascripts, mettre ce code, en index :
puis, dans une autre page, toujours en index, ceci :
et ensuite, dans votre PA, mettre ceci :
et dans votre css, mettre ceci :
(les codes se trouvant sur ce lien : https://github.com/nikki/liteAccordion/archives/master => choisir au mieux de télécharger en zip. On y trouve code js et css
et ici : http://nicolahibbert.com/demo/liteAccordion/ on a le code html de la PA )
Ainsi, tout devrait fonctionner.
Cordialement.
Pour ce code, il faut faire ainsi :
Dans la gestion des pages javascripts, mettre ce code, en index :
- 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);
puis, dans une autre page, toujours en index, ceci :
- Code:
$(document).ready(function(){
$('#one').liteAccordion({
onActivate : function() {
this.find('figcaption').fadeOut();
},
slideCallback : function() {
this.find('figcaption').fadeIn();
},
autoPlay : true,
pauseOnHover : true,
theme : 'dark',
rounded : true,
enumerateSlides : true
}).find('figcaption:first').show();
});
et ensuite, dans votre PA, mettre ceci :
- 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>
et dans votre css, mettre ceci :
- Code:
.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 */
(les codes se trouvant sur ce lien : https://github.com/nikki/liteAccordion/archives/master => choisir au mieux de télécharger en zip. On y trouve code js et css
et ici : http://nicolahibbert.com/demo/liteAccordion/ on a le code html de la PA )
Ainsi, tout devrait fonctionner.
Cordialement.
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Pour avoir une P.A Accordéon
C'est bon, ça a marché ! J'ai oublié de le mettre dans le CSS. XDD
Je suis vraiment blonde et j'ai mis le mauvais code dans la P.A.
Merci beaucoup. Je trouve cette explication très claire! *O*.
Thanks you very much!
J'ai envie de dire +1000! xD
Je suis vraiment blonde et j'ai mis le mauvais code dans la P.A.
Merci beaucoup. Je trouve cette explication très claire! *O*.
Thanks you very much!
J'ai envie de dire +1000! xD
Invité- Invité
Re: Pour avoir une P.A Accordéon
Je pourrai savoir c'est quoi le P.A ? >< Panneau d'admin ? Ouais mais faut la mettre ou ça:
- 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>
Re: Pour avoir une P.A Accordéon
Alors P.A = Page d'accueil. =)
Dernière édition par Symphony Lips le Ven 12 Aoû 2011 - 22:34, édité 1 fois
Invité- Invité
Re: Pour avoir une P.A Accordéon
On doit trouver ça dans les Template non ?
Re: Pour avoir une P.A Accordéon
Non, tu le trouves dans panneau d'administration -> Affichage -> Généralités
Tu marques dans le bloc. =)
Tu marques dans le bloc. =)
Invité- Invité
Re: Pour avoir une P.A Accordéon
Ah ok merci. Tu es doué, tu pourrai aller voir le topic que j'ai créer s'il te plaît ? C'est dans les Problèmes script aussi. Merci.
Re: Pour avoir une P.A Accordéon
Et bien, si vous voulez remercier, cliquez sur le bouton de mon poste. Il sera ainsi sous fond vert, et ça me rajoutera des points de réputation.
Et si le sujet est résolu, n'oubliez pas d'éditer votre premier message et de cocher le bouton pour que le sujet soit rangé dans les sujets archivés.
@Puissantninja => Merci de ne pas flooder, et faire de la pub pour ses propres sujets.
Cordialement.
Et si le sujet est résolu, n'oubliez pas d'éditer votre premier message et de cocher le bouton pour que le sujet soit rangé dans les sujets archivés.
@Puissantninja => Merci de ne pas flooder, et faire de la pub pour ses propres sujets.
Cordialement.
Re: Pour avoir une P.A Accordéon
Ah ok désolé je savais pas. XD
Re: Pour avoir une P.A Accordéon
^^
Et bien, étant donné que vous venez de vous inscrire, voici quelques liens importants à retenir :
Règles du forum
Questions/Réponses fréquentes
Listing des questions et réponses fréquentes
Listing des Trucs & astuces
La fonction rechercher
La FAQ de forumactif.com
Prenez le temps de tout lire.
Cordialement.
Et bien, étant donné que vous venez de vous inscrire, voici quelques liens importants à retenir :
Règles du forum
Questions/Réponses fréquentes
Listing des questions et réponses fréquentes
Listing des Trucs & astuces
La fonction rechercher
La FAQ de forumactif.com
Prenez le temps de tout lire.
Cordialement.
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Pour avoir une P.A Accordéon
J'ai fait ce que vous avez dit sauf que rien ne s'affiche ! ( A cause des templates ??)
J'ai pas compris le
J'ai pas compris le
(les codes se trouvant sur ce lien : https://github.com/nikki/liteAccordion/archives/master => choisir au mieux de télécharger en zip. On y trouve code js et css
et ici : http://nicolahibbert.com/demo/liteAccordion/ on a le code html de la PA )
Ainsi, tout devrait fonctionner.
Cordialement.
Re: Pour avoir une P.A Accordéon
Je trouve que son explication est suffisamment claire....
Pour la partie Javascript: Vous postez les deux messages.
Le javascript vous le trouvez dans panneau d'administration -> Modules -> Html et Javascript. Deux pages différentes...
Après vous postez le code dans le CSS, qui est la feuille CSS (dans Affichage -> Images et couleurs -> Couleurs -> Feuille CSS)
Après vous postez dans la P.A, le code pour mettre les informations que vous voulez.
Si vous voulez faire du réglage. Il faut voir dans le CSS ou encore le javascript tout dépend. Enfin bref... J'ai fini mon sujet, en tout cas. =)
Merci encore de ton aide précieuse, Lixyr Yrna
Je suis pas tellement nouvelle, je viens seulement quand je rencontre principalement un problème que j'ai besoin de conseil et trouvez des réponses sur divers bugs.
J'édite pour mettre sur résolu. *O*.
Pour la partie Javascript: Vous postez les deux messages.
Le javascript vous le trouvez dans panneau d'administration -> Modules -> Html et Javascript. Deux pages différentes...
Après vous postez le code dans le CSS, qui est la feuille CSS (dans Affichage -> Images et couleurs -> Couleurs -> Feuille CSS)
Après vous postez dans la P.A, le code pour mettre les informations que vous voulez.
Si vous voulez faire du réglage. Il faut voir dans le CSS ou encore le javascript tout dépend. Enfin bref... J'ai fini mon sujet, en tout cas. =)
Merci encore de ton aide précieuse, Lixyr Yrna
Je suis pas tellement nouvelle, je viens seulement quand je rencontre principalement un problème que j'ai besoin de conseil et trouvez des réponses sur divers bugs.
J'édite pour mettre sur résolu. *O*.
Invité- Invité
Sujets similaires
» Code qui ne fonctionne pas ni quand on l'intègre dans le corps des messages pour avoir une apparence différente pour le dit message, ni pour les généralités de la page d'acceuil
» Un code pour la PA accordéon
» peut-on payer pour avoir d'autre fonctions pour le forum?
» Problème pour certains pour avoir accès au forum réservé à leur groupe
» Comment faire pour avoir un fond différent pour chaque sous forum :Edit:[photos]
» Un code pour la PA accordéon
» peut-on payer pour avoir d'autre fonctions pour le forum?
» Problème pour certains pour avoir accès au forum réservé à leur groupe
» Comment faire pour avoir un fond différent pour chaque sous forum :Edit:[photos]
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