| | Créer un accordéon vertical (messages) |  |
|
 Boow 
{ Membre actif }
 Messages : 866
 | Merci Habiiiiiiiiiiiiiii  Merci beaucoup beaucoup beaucoup  | | |
|
| | |
Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| |
| | |
Boow
{ Membre actif }
Messages : 866
| Oui, parfaitement | | |
|
| | |
Invité Invité
| Ta démo marche bien quand je passe la souris sur le lien du premier, mais pas sur les autres. Ils se chevauchent et à terme ca devient pas grand-chose :0 est-ce à cause du code original ou de tes paramètres ?
EDIT : Curieuse j'ai été sur son site. En fait, si l'on passe la souris trop vite entre 3 éléments, ils se chevauchent. La meillere solution reviendrait à utiliser l'event click... Mais c'est pas forcément ce que veulent les gens. | | |
|
| | |
Laakoh
{ Membre }
 Messages : 2
| - Hari'. « a écrit:
- Dans le template "overall_header", placez ce code que j'ai hébergé juste pour vous :
- Code:
-
<script src="http://hariboow.free.fr/CSSActif/verticalkwicks.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('#vkwicks .kwicks').kwicks({
max : 205,
spacing : 3,
isVertical : true
});
});
</script> Bonjour ! Voilà, j'aimerais juste savoir où placer ce code dans le template " overall_header" ? Car j'ai essayé un peu de partout (début, fin...) & cela ne fonctionne pas vraiment correctement. (Je souhaite le mettre dans la page d'accueil, je précise ^^") Merci d'avance ! | | |
|
| | |
Tupac
{ Membre actif }
Messages : 368
| Bonjour Vous devez placer ce code juste avant la balise suivante - Code:
-
</head> dans la template overall-header Bonne fin de journée | | |
|
| | |
kyana
{ Membre }
Messages : 60
| bonsoir. Voilà j'ai le script et tout et tout a fonctionne très bien.
J'arrive a réduire ou augmenter la largeur des cellules.
mais est t'il possible de réduire la taille totale?
La chaque carré fermé fait 100 de hauteur. ouvert une autre taille. est t'(il possible de modifier cette hauteur totale?
Merci à vous
EDIT: autant pour mois c la hauteur qu'il faut modifier et c'est bon. désolée du dérangement
| | |
|
| | |
Tupac
{ Membre actif }
Messages : 368
| Bonjour Haribot' ♪
J'ai l'intention de faire très prochainement un tutoriel sur un autre genre de menu et je voulais savoir comment vous avez fait pour mettre votre exemple sur une page complètement vierge.
| | |
|
| | |
kyana
{ Membre }
Messages : 60
| Bonsoir, bon finalement j'ai vraiment un soucis.
Plus rien ne fonctionne.
heu quoi que ici non plus la première page ne fonctionne plus alors et ce que ca vient de chez moi ou du script lui meme qui est hs?? | | |
|
| | |
Tupac
{ Membre actif }
Messages : 368
| Bonsoir Le mieux c'est que tu héberges toi même le code jquery par exemple sur Harchive-Host - Spoiler:
- Code:
-
(function($){$.fn.kwicks=function(options){var defaults={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(defaults,options);var WoH=(o.isVertical?'height':'width');var LoT=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var kwicks=container.children('li');var normWoH=kwicks.eq(0).css(WoH).replace(/px/,'');if(!o.max){o.max=(normWoH*kwicks.size())-(o.min*(kwicks.size()-1))}else{o.min=((normWoH*kwicks.size())-o.max)/(kwicks.size()-1)}if(o.isVertical){container.css({width:kwicks.eq(0).css('width'),height:(normWoH*kwicks.size())+(o.spacing*(kwicks.size()-1))+'px'})}else{container.css({width:(normWoH*kwicks.size())+(o.spacing*(kwicks.size()-1))+'px',height:kwicks.eq(0).css('height')})}var preCalcLoTs=[];for(i=0;i<kwicks.size();i++){preCalcLoTs[i]=[];for(j=1;j<kwicks.size()-1;j++){if(i==j){preCalcLoTs[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{preCalcLoTs[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}kwicks.each(function(i){var kwick=$(this);if(i===0){kwick.css(LoT,'0px')}else if(i==kwicks.size()-1){kwick.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){kwick.css(LoT,preCalcLoTs[o.defaultKwick][i])}else{kwick.css(LoT,(i*normWoH)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){kwick.css(WoH,o.max+'px');kwick.addClass('active')}else{kwick.css(WoH,o.min+'px')}}kwick.css({margin:0,position:'absolute'});kwick.bind(o.event,function(){var prevWoHs=[];var prevLoTs=[];kwicks.stop().removeClass('active');for(j=0;j<kwicks.size();j++){prevWoHs[j]=kwicks.eq(j).css(WoH).replace(/px/,'');prevLoTs[j]=kwicks.eq(j).css(LoT).replace(/px/,'')}var aniObj={};aniObj[WoH]=o.max;var maxDif=o.max-prevWoHs[i];var prevWoHsMaxDifRatio=prevWoHs[i]/maxDif;kwick.addClass('active').animate(aniObj,{step:function(now){var percentage=maxDif!=0?now/maxDif-prevWoHsMaxDifRatio:1;kwicks.each(function(j){if(j!=i){kwicks.eq(j).css(WoH,prevWoHs[j]-((prevWoHs[j]-o.min)*percentage)+'px')}if(j>0&&j<kwicks.size()-1){kwicks.eq(j).css(LoT,prevLoTs[j]-((prevLoTs[j]-preCalcLoTs[i][j])*percentage)+'px')}})},duration:o.duration,easing:o.easing})})});if(!o.sticky){container.bind("mouseleave",function(){var prevWoHs=[];var prevLoTs=[];kwicks.removeClass('active').stop();for(i=0;i<kwicks.size();i++){prevWoHs[i]=kwicks.eq(i).css(WoH).replace(/px/,'');prevLoTs[i]=kwicks.eq(i).css(LoT).replace(/px/,'')}var aniObj={};aniObj[WoH]=normWoH;var normDif=normWoH-prevWoHs[0];kwicks.eq(0).animate(aniObj,{step:function(now){var percentage=normDif!=0?(now-prevWoHs[0])/normDif:1;for(i=1;i<kwicks.size();i++){kwicks.eq(i).css(WoH,prevWoHs[i]-((prevWoHs[i]-normWoH)*percentage)+'px');if(i<kwicks.size()-1){kwicks.eq(i).css(LoT,prevLoTs[i]-((prevLoTs[i]-((i*normWoH)+(i*o.spacing)))*percentage)+'px')}}},duration:o.duration,easing:o.easing})})}})}})(jQuery);
| | |
|
| | |
kyana
{ Membre }
Messages : 60
| c'est quoi ce spoiler?
je veux bien héberger, mais sur le site source il y a deux fichier diffèrent, comment savoir c lequel des deux qui est utilisé ici? | | |
|
| | |
Tupac
{ Membre actif }
Messages : 368
| Tu prends le code que je t'ai donné plus haut,tu l'héberges et tu le place dans le script ci-dessous. - Code:
-
<script type="text/javascript" src="ici le code hébergé"></script>
<script type="text/javascript">
$().ready(function() {
$('#vkwicks .kwicks').kwicks({
max : 205,
spacing : 3,
isVertical : true
});
});
</script>
| | |
|
| | |
kyana
{ Membre }
Messages : 60
| trop compliqué vu que c un texte et non un fichier Mais j'ai téléchargé la première version fichier sur le site source et héberger sur le site que tu m'a donné, c'est bon, ca fonctionne très bien. merci. c'etait donc bien le lien qui ne marchait plus. C'est parfait. thanks, personne n'aura vu les degat vu l'heure c'est pratique  | | |
|
| | |
Tupac
{ Membre actif }
Messages : 368
| Ok super
C'est la première version que j'ai pris aussi mais je l'ai compressé pour qu'il prenne moins de place c'est pour cela qu'il est différent du tient mais il fonctionnait aussi tu pouvais faire un copier-coller du code plus haut ce qui revenait au même.
Bonne fin de soirée | | |
|
| | |
Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| kyana » Tu peux remettre le code du script Javascript dans ton template overall_header  C'était une erreur de ma part. Je l'avais supprimé de mes serveurs. Tu peux donc remettre ceci dans ton template et ça devrait fonctionner : - Code:
-
<script src="http://hariboow.free.fr/CSSActif/verticalkwicks.js" type="text/javascript"></script> | | |
|
| | |
kyana
{ Membre }
Messages : 60
| Merci beaucoup haribot. Pour l'instant ca marche le l'hébergeur que j'ai trouvé mais si jamais yaura en dépannage ou pour d'autre.
Merci beaucoup pour ce tuto en tout cas. l'accordéon c comme une pelote de laine avec un chaton, je peux pas m'empêcher de jouer avec | | |
|
| | |
Tupac
{ Membre actif }
Messages : 368
| ...et c'est jamais très bon de dépendre des fichiers hébergé chez les autres tu ne sais jamais a quoi t'attendre donc je te conseille de garder ton fichier kyana. | | |
|
| | |
Contenu sponsorisé
| |
| | |
| | Créer un accordéon vertical (messages) | |
|
