Problème avec les spoilers

Page 1 sur 2 1, 2  Suivant

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

Résolu Problème avec les spoilers

Message par Ventus le Sam 17 Déc 2011 - 16:53

Bonjour,

depuis hier, alors que j'ai ajouter en ligne une nouvelle un systeme de menu déroulant pour afficher des messages avec un titre. C'est ressemblant au spoiler mais ce n'en ai pas un.

Le problème réside dans le fait que depuis que j'ai ajouté et modifier le templates, les spoiler ne s'ouvrent plus. Je sais, une fois de plus, j'ai fait une boulette...

La modification a été effectuée dans orerall_header

Un extrait des codes :

Code:

<!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}
   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><script src="http://illiweb.com/rs3/14/frm/lang/fr.js" type="text/javascript"></script><script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[
$(document).ready(function(){});//]]></script><script type="text/javascript">//<![CDATA[
var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-18266394-1']);_gaq.push(['_trackPageview']);(function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();//]]></script>

<script type="text/javascript">$(document).ready(function() {$('#faqs h3').each(function() {var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();tis.click(function() {state = !state;answer.slideToggle(state);tis.toggleClass('active',state);});});});            $(function() {$('#sdt_menu > li').bind('mouseenter',function(){var $elem = $(this);$elem.find('img').stop(true).animate({'width':'420px','height':'170px','left':'0px'},400,'easeOutBack').andSelf().find('.sdt_wrap').stop(true).animate({'top':'140px'},500,'easeOutBack').andSelf().find('.sdt_active').stop(true).animate({'height':'170px'},300,function(){var $sub_menu = $elem.find('.sdt_box');if($sub_menu.length){var left = '170px';if($elem.parent().children().length == $elem.index()+1)left = '-170px';$sub_menu.show().animate({'left':left},200);}});}).bind('mouseleave',function(){var $elem = $(this);var $sub_menu = $elem.find('.sdt_box');if($sub_menu.length)$sub_menu.hide().css('left','0px');$elem.find('.sdt_active').stop(true).animate({'height':'0px'},300).andSelf().find('img').stop(true).animate({'width':'0px','height':'0px','left':'85px'},400).andSelf().find('.sdt_wrap').stop(true).animate({'top':'25px'},500);});});</script>



            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <td align="center" width="100%" valign="middle">
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- END switch_logo_left -->


Comme je n'ai rien modifier d'autre, c'est sans nul doute ici qu'il manque quelque chose sauf si je me trompe.

Lien pour un spoiler sur le forum (regarder dans la signature du Capitaine Jack Sparrow) : http://piratedescaraibes.forum-actif.net/t3302-9760giselle-c-est-qui-celle-la#59984

Pour le menu déroulant, message de 13:38

D'avance, merci beaucoup de me venir en aide Very Happy


Avec mes plus plates salutations, Ventus



Dernière édition par Ventus le Sam 7 Jan 2012 - 12:32, édité 1 fois

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Sam 17 Déc 2011 - 21:46

Bonsoir Ventus,

@Ventus a écrit:Lien pour un spoiler sur le forum (regarder dans la signature du Capitaine Jack Sparrow) : http://piratedescaraibes.forum-actif.net/t3302-9760giselle-c-est-qui-celle-la#59984
Apparemment le lien que tu cites ne fonctionne pas. /-:

@Ventus a écrit:Pour le menu déroulant, message de 13:38
Gné, quel message de 13:38 ?

Pourrais-tu donner un lien de l'endroit où ça cloche, parce que je vois pas bien entre ton utilisation et le spoiler conventionnel des FA...

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Dim 18 Déc 2011 - 1:25

Ben justement, le spoiler ne fonctionne plus depuis que j'ai mit en place une version du menu déroulant.

Et je viens de me relire, mes excuses, j'ai oublier de poster le deuxième lien Neutral que voici : http://piratedescaraibes.forum-actif.net/t3320p60-important-ligne-du-temps#59978

Ok, j'aurais pu faire plus simple : soit vous trouverez tout dans le deuxième lien directement dans le lien ci dessus.

Encore une fois, désolé pour mon oubli et d'avance, merci de me venir en aide.

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Dim 18 Déc 2011 - 9:21

Pas de mal du tout.

En fait tu as pris le code de la FAQ FA, c'est ça ?
Il faut savoir que le même attribut ID ne peut être utilisé qu'une seule fois par page.
Il est là pour déterminer un comportement unique par élément, auquel ensuite on attribue des "class" qui eux peuvent être utilisés autant de fois qu'on souhaite les mêmes propriétés aux différents éléments dans la page.
La FAQ étant à l'origine dans une autre page, il faut veiller de ne pas entrer en conflit avec les ID du spoiler si tu utilises le même code, et je pense que c'est ce qui se produit dans ton code.
De plus le script importé dans le template, alourdi passablement le HTML.

Deux solutions :
1°- Modifier les ID les uns après les autres si tu tiens à garder ce système, et sur une même page penser à modifier le suivant (galère !).
2°- Ce que je te suggère, c'est d'installer un autre genre de menu/spoiler déroulant RIEN QU'EN CSS =
"le script c'est bien, mais rien que du CSS c'est classe !" LHV

Si tu es d'accord, bien sûr... ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Dim 18 Déc 2011 - 11:53

Dans le cas ou c'est possible de faire un genre de menu spoiler uniquement en CSS, je suis preneur. Surtout si il n'est possible d'avoir les deux autrement.

Pense tu pouvoir me fournir le codage CSS ? Si oui, je serais vraiment ravi Very Happy

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Dim 18 Déc 2011 - 12:02

Oui je te prépare le tuto.

Cela dit, on peut aussi avec du script, mais avec que du CSS c'est moins lourd, et avec le CSS3, on peut aussi atteindre de très chouettes effets.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Dim 18 Déc 2011 - 12:06

Du CSS3 ? Hum, je ne connais pas du tout... Mais curieux de découvrir.

D'avance, merci beaucoup pour toute la peine que tu portes a mes problèmes

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Dim 18 Déc 2011 - 15:42

Le spoiler pur CSS existe bien, et tu peux l'essayer dans une page HTML (là il n'est styler qu'à l'essentiel) :
Code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>pure CSS spoiler technique-lhv</title>

<style type="text/css">
/* -- the nice spoiler with CSS3 --*/
#nicespoiler #inspoiler {
height: 0em;
line-height:1.6em;
margin: 2px;
padding: 2px;
overflow: hidden;
border: 1px dashed gray;
transition: height 1s 0s linear;
-moz-transition: height 1s 0s linear;
-o-transition: height 1s 0s linear;
-webkit-transition: height 1s 0s linear;
}
#nicespoiler:target #inspoiler {
height: 4.7em; /* (number lines of text) times (line-height) plus 0.5em ; (the transition effect needs a fixed height actually) */
}
#nicespoiler:target #hidespoiler, #nicespoiler #showspoiler {
display: inline;
}
#nicespoiler:target #showspoiler, #nicespoiler #hidespoiler {
display: none;
}
div.textspoiler {
margin: 10px auto;
width: 430px;
}
a.linkspoiler {
padding: 2px;
border-radius: 3px;
border: 1px solid gray;
background: -moz-linear-gradient(0 0px -90deg, white, #f7f7f7 1px, #eee 9px, #dde 12px);
background: -o-linear-gradient(top, white, #f7f7f7 1px, #eee 9px, #dde 12px);
background: -webkit-gradient(linear, 0 0, 0 12, from(#fff), color-stop(.07, #f7f7f7), color-stop(.75, #eee), to(#f7f7f7));
}
</style>
</head>

<body>

<div id="nicespoiler">
<a id="hidespoiler" href="#showspoiler" class="linkspoiler">Cacher</a> <a id="showspoiler" href="#nicespoiler" class="linkspoiler">Montrer</a>
<div id="inspoiler">
Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit.<br/>
Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit.<br/>
Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit.
</div>
</div>

<div class="textspoiler">
Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5] A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.
</div>

</body>
</HTML>
Le souci de ce code, bien que très cool, c'est qu'il contient aussi des attribut ID et donc, il faudrait les modifier tant dans le HTML de la même page, mais tout autant dans le CSS et ce à chaque fois que tu voudrais l'utiliser dans une même page.
Je n'y avais pas penser, mais en effet, c'est le seul moyen d'avoir l'effet "clic" sans js.

Le CSS3 de ce code-CSS c'est le comportement "transition" (slide, coulissement) et l'effet dégradé pour le fond.

Donc si tu es toujours intéressé "que par du pure CSS", je te propose le faux spoiler, avec aussi l'effet "slide down" mais par le hover ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Dim 18 Déc 2011 - 17:39

Merci beaucoup pour ton aide Very Happy

Par contre, je ne parviens pas à l'activer sur une page, c'est normal ? où j'utilise une mauvaise balise d'activation... Si ta une idée, merci de le faire savoir.

Toujours bien amicalement, Ventus

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Dim 18 Déc 2011 - 18:48

Le code plus haut n'est qu'un exemple est c'est pour mettre dans une page HTML
PA >> Modules >> Gestion des pages HTML

Par contre voici le spoiler par le hover et que tu peux utiliser autant de fois que tu veux dans un post, à fortiori dans une page..
Le HTML est tout simple et si tu ne veux pas de différenciation entre le texte extérieur et intérieur, tu peux même n'utiliser que la balise principale .
Code:
<div class="smartspoiler"><p class="outspoiler">Blablabla</p><div class="inspoiler">Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5] A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.</div></div>
<div class="smartspoiler"><p class="outspoiler">Blablabla</p><div class="inspoiler">Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5] A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.</div></div>
<div class="smartspoiler"><p class="outspoiler">Blablabla</p><div class="inspoiler">Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5] A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.</div></div>
Deux petits points :
- Dans un post on ne fait pas de saut de ligne ou d'espace entre les balises (à moins que tu le veuilles comme dans mon exemple entre les différents "spoiler"), car c'est pris en compte.
- Là j'ai mis trois balises :
Une pour le bloc principal
Une pour le texte extérieur
Une pour le texte intérieur

Dans le CSS :
Spoiler:
.smartspoiler {
display: block;
overflow: hidden;
width: 520px;
height: 34px;
transition: 1s all;
-webkit-transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
-ktm-transition: 1s all;
margin: 0px 4px;
cursor: pointer;
}
.outspoiler {
display: inline-block;
font: smallcaps bold 13px arial; /*ordre a respecter pour les normes W3C avec le raccourci font > style > variant > weight > size/height > familly (on peut omettre toutes les propriétés sauf le size ez le family dans l ordre*/
text-align: left;
}
.smartspoiler:hover {
height: 210px;
overflow-y: auto; /*au cas où le texte serait trop long une scrollbar sera là*/
transition: height 1s linear;
-webkit-transition: height 1s linear;
-moz-transition: height 1s linear;
-o-transition: height 1s linear;
-ktm-transition: height 1s linear;
}
.inspoiler {
display: inline-block;
width: auto;
font: 13px arial; /*ordre a respecter pour les normes W3C avec le raccourci font > style > variant > weight > size/height > familly (on peut omettre toutes les propriétés sauf le size ez le family dans l ordre)*/
text-align: justify;
padding: 0px 4px;
margin: o auto;
}
Alors, comme dit plus haut, tu peux aussi n'utiliser que la balise "smartspoiler"
Il te faudra alors tout de même utiliser des balises comme celles des blocs : "p" ou "div", ou celle du "span" balise inline, pour le texte, mais dans un post même pas obligé, parce que tu peux aussi tout à fait éditer tes spoiler avec l'éditeur étendu.

Si j'ai mis plusieurs "transition" le "smartspoiler" pour retour du div et "smartspoiler:hover" qui est c'est pour descendre le bloc.
EDIT : ATTENTION : HTML et CSS édités.


Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Dim 18 Déc 2011 - 22:00

Waouw

Merci beaucoup pour tous les détails apportés, je te remercie vraiment pour la peine que tu t'est donné a répondre. (Bien au delà de mon attente)

Je m'en vais faire des essais avant d'en conclure que tout est au poil, mais personnellement, je ne pense pas être déçu. Au plus tard a demain pour mon avis sur le principe.

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Lun 19 Déc 2011 - 9:09

Pas de souci, prends ton temps, et t'en prie.

Juste encore deux précisions :
- Les espacements dans un post sont pris en compte, mais il faut savoir qu'un "div" et un "p" sont des blocs, donc ils font d'office un saut de ligne à leur fermeture. Pas le "span".
- Tu peux modifier individuellement la vitesse de fermeture et d'ouverture par les :
transition: 1s all; ou transition: height 1s linear;
Il faudra juste l'appliquer aux 5 lignes.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Lun 19 Déc 2011 - 21:35

Merci vraiment beaucoup pour tout ton aide. Actuellement, je suis entrain de modifier les templates pour revenir à la version antérieur afin d'activer les spoiler normaux.

De plus, comme j'ai eu pus de boulot de prévu, je vais voir pour faire tout cela d'ici demain, car la neige me donne passablement de quoi faire. Faut bien que je m'occupe de mes clients ^^

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Mar 20 Déc 2011 - 8:23

@Ventus a écrit:modifier les templates pour revenir à la version antérieur afin d'activer les spoiler normaux.
C'est en effet mieux de séparer les deux, surtout si tu comptes souvent utiliser ce procédé.

J'ai aussi pensé à quelque chose, c'est le système du toggleVisibility :
Un script, qui te permet ensuite aussi de l'utiliser sous forme de "spoiler" avec lequel on attribue des id comme des class, le script lui ne fait que le mécanisme.
Tu peux voir l'effet ici, en cliquant sur les liens en orange qui se suivent, ou bien sur le petit bouton "ici".
- C'est un script pratique, et assez léger pour le forum.
- Inconvénient, il faut savoir le coder à chaque fois, mais rien d'insurmontable non plus.
A ti de voir.

@Ventus a écrit:la neige me donne passablement de quoi faire. Faut bien que je m'occupe de mes clients ^^
Moi elle me donne plus de ski à faire, et mon boulot en ce moment ce sont diverses recherches sur le net...
Alors, jaloux, hum ? Mr. Green
Cela dit, ça ne va pas durer ! Grrr

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Mer 21 Déc 2011 - 20:41

Arf, je n'arrive pas du tout a remettre en place les spoilers d'origine et je bug sur le problème depuis deux jours... A devenir chèvre ! Mais je vais y arriver ^^



ps: Moi jaloux ? Baston Même pas en rêve xD

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Mer 21 Déc 2011 - 20:45

Ciao Ventus,

Où as-tu touché au spoiler ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Mer 21 Déc 2011 - 22:01

Dans les templates : orerall_header et j'avais posté le codage dans mon premier message.

Penses-tu avoir une solution ? D'avance, merci beaucoup

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Mer 21 Déc 2011 - 22:08

Si tu veux rétablir l'ordre, fais le ménage par le vide :
- Sauvegarde ton template en l'état dans Bloc-notes ou Notepad++
- Supprime le template personnalisé avec suppr dans la liste des templates < Général
-- Supprime aussi tout ce qui se rapporte au spoiler que tu as modifié dans le CSS
- Réinstalle ce qu'il te faut d'autre que le spoiler si tu l'as autrement personnalisé, en utilisant la sauvegarde

Je ne peux t'aider plus, parce que tu es le plus apte à appliquer cette procédure, si c'est toi qui a modifié ce template.


EDIT : en gros sans trop me tromper, d'emblée supprime ce bloc :
Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><script src="http://illiweb.com/rs3/14/frm/lang/fr.js" type="text/javascript"></script><script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[
$(document).ready(function(){});//]]></script><script type="text/javascript">//<![CDATA[
var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-18266394-1']);_gaq.push(['_trackPageview']);(function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();//]]></script>
 
<script type="text/javascript">$(document).ready(function() {$('#faqs h3').each(function() {var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();tis.click(function() {state = !state;answer.slideToggle(state);tis.toggleClass('active',state);});});});            $(function() {$('#sdt_menu > li').bind('mouseenter',function(){var $elem = $(this);$elem.find('img').stop(true).animate({'width':'420px','height':'170px','left':'0px'},400,'easeOutBack').andSelf().find('.sdt_wrap').stop(true).animate({'top':'140px'},500,'easeOutBack').andSelf().find('.sdt_active').stop(true).animate({'height':'170px'},300,function(){var $sub_menu = $elem.find('.sdt_box');if($sub_menu.length){var left = '170px';if($elem.parent().children().length == $elem.index()+1)left = '-170px';$sub_menu.show().animate({'left':left},200);}});}).bind('mouseleave',function(){var $elem = $(this);var $sub_menu = $elem.find('.sdt_box');if($sub_menu.length)$sub_menu.hide().css('left','0px');$elem.find('.sdt_active').stop(true).animate({'height':'0px'},300).andSelf().find('img').stop(true).animate({'width':'0px','height':'0px','left':'85px'},400).andSelf().find('.sdt_wrap').stop(true).animate({'top':'25px'},500);});});</script>
 
 
Réfère-toi au template par défaut aussi.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Mer 21 Déc 2011 - 23:45

Pourquoi n'y ais-je pas penser avant... Franchement, je mérite des baffes mdr !

Je regarde cela demain soir après le boulot car il ce fait tard. Encore une fois merci d'illuminer ma lanterne qui s'était soudainement obscurcie.


ps: tu ne cherche pas à rejoindre l'aministration sur mon forum ? Car je suis le seul a savoir plus ou moins réaliser des modifications. (Sauf quand je me plante dans des idées totalement farfelue xD)

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Ven 23 Déc 2011 - 7:44

Je t'en prie, je ne suis moi-même souvent boulet avec les évidences juste sous mon nez.

Alors, il serai temps de voir pour quelle option tu optes.
Déjà essaie s'appliquer le tuto donné plus haut.
Et va voir sur le lien si tu préféreraisavec le toggleVisibility.


NB : Nope merci, je ne cherche pas de poste d'admin.
Je suis juste là pour l'entraide quand je le peux, (j'ai aussi mes cours).
Je suis relativement trop souvent très prise dans l'IRL.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Sam 24 Déc 2011 - 17:22

C'est bon et je pense prendre la solution toggleVisibility. je n'ai pas encore eu le temps de mettre en ligne sur le forum principal, mais demain 25 décembre, je vais enfin avoir du temps libre cheers



NB : Dommage bien que je m'y attendais Razz

NB2 : Joyeux noël a tout le monde Very Happy

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Mer 28 Déc 2011 - 15:33

Merci pour les voeux de Noël, il était en effet "joyeux" et super.
J'espère que le tien aussi.

Donc allons y pour le "toggleVisibility".

Tout d'abord, tu vas héberger ce script dans le :
PA >> Modules >> Gestion des codes javascripts > Activer les scripts > Titre: togglevisibility > Cocher : Toutes les pages
Code:
function toggleVisibility(tagId) {
      if (!document.getElementById) {
        msg = 'Votre navigateur est trop ancien pour profiter de votre visite\n';
        msg += 'Veuillez le mettre à jour ou vous en procurer un autre';
        return false;
      }
      var tagToToggle;
      try {
        tagToToggle = document.getElementById(tagId);
      }
      catch (e) {
        alert('Je n\'ai pas pu trouver la balise cible');
      }
      try {
        if (tagToToggle.style.display == 'none') {
            tagToToggle.style.display = 'inline';
        }
        else {
            tagToToggle.style.display = 'none';
        }
      }
      catch (e) {}
      if (tagToToggle.style.visibility == 'hidden') {
        tagToToggle.style.visibility = 'visible';
      }
      else {
        tagToToggle.style.visibility = 'hidden';
      }
  }
Dans le HTML, à n'importe quel endroit tant que dans une même page tu donnes un identifiant différent à l'attribut id, voilà comment ça se passe :
Code:
<div class="outsidespoiler" align="center"><a href="javascript:toggleVisibility('demo')">Titre du spoiler</a></div>
<div id="demo" onclick="javascript:toggleVisibility('demo')" style="display: none; visibility: hidden;">
<table align="center" cellspacing="3" cellpadding="4"><tr>
<td class="insidespoiler" valign="top">Contenu du spoiler</td>
</tr></table></div>
- Ce qui importe ici c'est que les 3 identifiants id soient exactement pareils, orthographe et casse, pour un seul "spoiler".
Si tu veux avoir plusieurs "spoiler" dans un même post, dans un même bloc ou tableau, ou bien dans une même page, tu choisiras pour chacun un autre identifiant que tu appliqueras 3 fois comme l'exemple plus haut.
- Ensuite, indispensable est aussi les deux lignes de style css mises directement dans le HTML de la balise contenant et l'attribut id et le script du clic, c'est le display:none et le visibility:hidden.
A ce propos, j'ai essayé de le mettre dans le CSS par le biais d'un class, mais il faut alors cliquer deux fois pour qu'il s'ouvre lors du rafraichissement d'une page...???
- Dans l'exemple plus haut, j'ai bien séparé les blocs pour que tu puisses bien comprendre, mais si c'est dans un message, encore une fois pas de séparation.
Tu peux aussi remplacer le tableau contenant le spoiler, par un div. Perso, je préfère le tableau juste pour l'alignement vertical du "td" et pour tout ce qui est bordures, box-shadow, etc.

En gros voilà ce que ça donnerait dans un post sur trois "spoiler" avec le CSS en plus :
Code:
<div class="outsidespoiler" align="left"><a href="javascript:toggleVisibility('pepsy')">Sois belle, vintage et rebelle !</a></div><div id="pepsy" onclick="javascript:toggleVisibility('pepsy')" style="display: none; visibility: hidden;"><div class="insidespoiler">Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5] A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.
Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5] A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.
Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5] A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.</div></div>
<div class="outsidespoiler" align="left"><a href="javascript:toggleVisibility('sexy')">Sois belle, vintage et rebelle !</a></div><div id="sexy" onclick="javascript:toggleVisibility('sexy')" style="display: none; visibility: hidden;"><div class="insidespoiler">"Le vintage est un anglicisme appliqué d'abord dans l'œnologie pour parler de millésimes (le mot signifie en anglais « vendange »), rapporté dans la mode depuis les années 1990. D'abord utilisé pour désigner les vêtements anciens de créateurs prestigieux (Chanel, Dior, Yves Saint Laurent, Hermès…), le terme s'est étendu à toute pièce d'occasion, datant au plus tard des années 1980, et reflétant un moment particulier de l'histoire de la mode du XXe siècle. La vogue du vintage est telle que le mot est désormais usité au XXIe siècle par extension pour toute pièce un tant soit peu rétro. Or, contrairement à la fripe où peuvent se mêler toutes origines, le vintage est d'abord le reflet d'une authenticité, que ce soit par la marque, les techniques de couture ou les tissus employés. La mode du vintage, commencée dans les années 1990, s'est développée mêlant fashionistas et antiquaires du vêtement.  Certaines grandes maisons de couture, attirées par l'aubaine, développent des collections de rééditions de leurs modèles (le smoking Yves Saint-Laurent, par exemple). Les grandes expositions consacrées à l'histoire de la mode ne désemplissent pas. Cette vogue serait peut-être due à une réaction contre la massification de la mode. Les principales sources de vintage sont les boutiques spécialisées et les ventes aux enchères (classiques ou en ligne). Suivant la provenance, l'époque ou l'état du vêtement, les prix peuvent aller de quelques dizaines d'euros à des milliers. Les pièces les plus recherchées sont les pièces griffées, ou antérieures à 1950. [wiki]"</div></div>
<div class="outsidespoiler" align="left"><a href="javascript:toggleVisibility('spoily')">Sois belle, vintage et rebelle !</a></div><div id="spoily" onclick="javascript:toggleVisibility('spoily')" style="display: none; visibility: hidden;"><div class="insidespoiler">"Le vintage est un anglicisme appliqué d'abord dans l'œnologie pour parler de millésimes (le mot signifie en anglais « vendange »), rapporté dans la mode depuis les années 1990. D'abord utilisé pour désigner les vêtements anciens de créateurs prestigieux (Chanel, Dior, Yves Saint Laurent, Hermès…), le terme s'est étendu à toute pièce d'occasion, datant au plus tard des années 1980, et reflétant un moment particulier de l'histoire de la mode du XXe siècle. La vogue du vintage est telle que le mot est désormais usité au XXIe siècle par extension pour toute pièce un tant soit peu rétro. Or, contrairement à la fripe où peuvent se mêler toutes origines, le vintage est d'abord le reflet d'une authenticité, que ce soit par la marque, les techniques de couture ou les tissus employés. La mode du vintage, commencée dans les années 1990, s'est développée mêlant fashionistas et antiquaires du vêtement.  Certaines grandes maisons de couture, attirées par l'aubaine, développent des collections de rééditions de leurs modèles (le smoking Yves Saint-Laurent, par exemple). Les grandes expositions consacrées à l'histoire de la mode ne désemplissent pas. Cette vogue serait peut-être due à une réaction contre la massification de la mode. Les principales sources de vintage sont les boutiques spécialisées et les ventes aux enchères (classiques ou en ligne). Suivant la provenance, l'époque ou l'état du vêtement, les prix peuvent aller de quelques dizaines d'euros à des milliers. Les pièces les plus recherchées sont les pièces griffées, ou antérieures à 1950. [wiki]"</div></div>

Dans le CSS, par exemple :
Spoiler:
/* togglevisibility spoiler
-----------------------------------*/
/* outside spoiler */
.outsidespoiler a {
text-align: left;
font: italic small-caps bold 16px arial; /* ordre a respecter pour les normes W3C avec le raccourci font > style > variant > weight > size/height > familly (on peut omettre toutes les propriétés sauf le size ez le family dans l ordre */
}
.outsidespoiler a:hover {
color: #fff;
}
/* inside spoiler */
.insidespoiler {
width: 540px;
text-align: justify;
color: #910; /* ainsi raccourci la valeur hexadécimale est en réalité 991100 > on supprime la deuxième même valeur */
font: bold 13px arial;
border: 4px solid #fff; /* ceci suffit pour les 4 côtés et sion veut un bord en moins > voir la ligne du bas */
border-width: 0 2px 2px; /* top right bottom left> si on ne le spécifie pas cela veut dire que ce sera la même largeur que le right déjà mis, pareil pour le top et le bottom */
padding: 10px;
margin: 7px auto;
-moz-box-shadow: 2px 2px 5px #dad;
-webkit-box-shadow: 2px 2px 5px #dad;
-o-box-shadow: 2px 2px 5px #dad;
box-shadow: 2px 2px 5px #dad;
}


Dernière édition par Final-Blonde le Jeu 29 Déc 2011 - 17:00, édité 1 fois

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Jeu 29 Déc 2011 - 16:07

Comment remercier une explication aussi exhaustives ? Waouw, franchement, mes félicitations pour ton travail c'est absolument parfait et très simple a mettre en oeuvre. Bonne nouvelle, tout fonctionne a merveille Very Happy

Il y a juste la manière d'ajouter de nouvelles ID que je n'ai pas saisi, mais pour le reste c'est absolument parfait.

Mes remerciements les plus sincères ok


NB: un noël merveilleux pour moi aussi. Et comme c'est presque l'heure, BONNE ANNEE

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Jeu 29 Déc 2011 - 16:48

Je t'en prie. Plus c'est expliqué, mieux tu gères par la suite.

Pour ce qui est des id, regarde les 3 "spoiler" que je t'ai mis en exemple :
Il faut que tu gardes le code de base quelque part d'accessible pour toi (Notepad, Bloc-Notes ou/et section d'admins) afin qu'il ne te reste plus qu'à modifier les 3 id, ajouter le titre et le contenu:
- 2x entre les apostrophes 'id'
- 1x en HTML entre les guillemets id="id"
Le plus simple est de prendre un mot dans l'esprit du contenu, ou ce que tu veux tant que ce sont les 3 mêmes pour un "spoiler".

Comme je t'ai donné le spoiler par le hover qui est aussi simple et zouli, tu peux utiliser les deux.

Ah aussi une dernière chose que j'ai omise :
Si tu souhaites limiter la hauteur de la box-contenant, tu peux dans le CSS donner une hauteur fixe et mettre un overflow-y: auto; ce qui ajoute une scrollbar dès que c'est plus long:
Spoiler:
/* inside spoiler */
.insidespoiler {
width: 540px;
height: 340px;
overflow-y: auto;

text-align: justify;
color: #910; /* ainsi raccourci la valeur hexadécimale est en réalité 991100 > on supprime la deuxième même valeur */
font: bold 13px arial;
border: 4px solid #fff; /* ceci suffit pour les 4 côtés et sion veut un bord en moins > voir la ligne du bas */
border-width: 0 2px 2px; /* top right bottom left> si on ne le spécifie pas cela veut dire que ce sera la même largeur que le right déjà mis, pareil pour le top et le bottom */
padding: 10px;
margin: 7px auto;
-moz-box-shadow: 2px 2px 5px #dad;
-webkit-box-shadow: 2px 2px 5px #dad;
-o-box-shadow: 2px 2px 5px #dad;
box-shadow: 2px 2px 5px #dad;
}

Amuse-toi bien.


NB : Moi je te souhaite une bonne glisse de cette fin d'année à la nouvelle.
On se croisera certainement l'année prochaine, pour les voeux de celle-ci.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Jeu 29 Déc 2011 - 18:04

Parfait et bien plaisant tout ça Very Happy

J'ai ajouté ta dernière proposition et effectivement, c'est plus structuré avec un rendu agréable a l’œil.

Donc, afin que l'ont puisse surfer sur la dernière vague de l'année, je laisse le sujet ouvert pour te souhaiter une bonne et heureuse année 2012 à ma manière Wink

Je tenais aussi à te remercier pour ta rapidité dans les réponses, chose super appréciable.


A l'année prochaine lol

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Jeu 29 Déc 2011 - 18:30

Mouais, pour la rapidité, c'était pas trop ça ces derniers jours, mais je suis totalement prise et débordée par la famille, les amis, le ski et et... Bref, les vacances quoi.

J'ai juste une critique constructive à faire :
- La critique c'est que je soulignement des liens, je ne sais pas toi, mais je trouve ça pas bô du tout et ça surcharge inutilement un forum aussi "lisse" que le tien, alors qu'il y a de super effets pour le hover des liens avec le CSS3, notamment la propriété "transition".
- Constructive parce que je te donne les lignes de codes pour remédier à cela et même plus...

Ceci est valable pour tous les liens du forum, donc plus besoin de remettre le code, sauf si tu veux rajouter le soulignement :
/*------------------------------------------------------- no touch codes -------------------------------------------*/
/*mort au soulignement*/
a, a:link, a:hover {
text-decoration: none!important;
-webkit-transition: color 0.7s ease;
-moz-transition: color 0.7s ease;
-o-transition: color 0.7s ease;
-htm-transition: color 0.7s ease;
transition: color 0.7s ease;
}
/*------------------------------------------------------- end no touch codes -------------------------------------------*/
La transition est de 0.7 seconde, mais tu mets ce que tu veux, tant que c'est modifié à chaque ligne.
Elle n'est aussi valable que pour les liens où tu auras spécifié une autre couleur lors du hover. Par défaut c'est le cas, et sinon c'est dans le panel des couleurs.

Ok, alors à dans quelques jours, et n'hésite pas si tu as des questions ou un souci.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Jeu 29 Déc 2011 - 18:58

Je rêve ou ta une boule en cristal sous la main ? O_O

Plus sérieusement, j'étais entrain d'effectuer une recherche pour supprimer le soulignement et aussi comment faire pour que le texte ne s'affiche pas tout de suite. Soit avec un retard comme tu l'as si gentiment proposer d'office lol. merci beaucoup thumleft

Je profite dans ce cas pour une fois de plus abuser de toi (dans le sens connaissance de codage). A savoir, comment m'y prendre pour que le texte ne s'affiche pas en un seul bloc mais d'une manière plus douche. une sorte de cascade. Si ça existe bien entendu. C'est l'effet que j'avais obtenu avec mon ancien code.

Voila, cette fois c'est tout, non non, je t'assure, c'est tout xD

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Jeu 29 Déc 2011 - 19:44

En cascade ? Je crois que là il faut un script (et je suis plus CSS et HTML), mais il y a des générateurs de ce genre d'effets que tu peux trouver via Google ton ami.

En revanche, je peux t'indiquer comment faire apparaitre et disparaitre du texte "en fondu" et en CSS.
Ce sont les propriétés "transition" oui, mais aussi "opacity".

Prenons en exemple le texte dans le "inside spoiler" :
Il faut avant tout ajouter une balise <span class="insidetext">SEULEMENT AUTROUR DU CONTENU</span> juste avant la fermeture des deux div du spoiler.

Dans le CSS à la suite, ce qui donne en entier (donc à remplacer l'ancien code) :
Spoiler:
/*togglevisibility spoiler
-----------------------------------*/
/*outside spoiler*/
.outsidespoiler a {
text-align: left;
font: italic small-caps bold 16px arial; /* ordre a respecter pour les normes W3C avec le raccourci font > style > variant > weight > size/height > familly (on peut omettre toutes les propriétés sauf le size ez le family dans l ordre */
}
.outsidespoiler a:hover {
color: #fff;
}
/*inside spoiler*/
.insidespoiler {
width: 540px;
height: 340px;
overflow-y: auto;
text-align: justify;
color: #910; /* ainsi raccourci la valeur hexadécimale est en réalité 991100 > on supprime la deuxième même valeur */
font: bold 13px arial;
border: 4px inset #fff; /* ceci suffit pour les 4 côtés et sion veut un bord en moins > voir la ligne du bas */
border-width: 0 2px 2px; /* top right bottom left> si on ne le spécifie pas cela veut dire que ce sera la même largeur que le right déjà mis, pareil pour le top et le bottom */
padding: 10px;
margin: 7px auto;
-moz-box-shadow: 2px 2px 5px #dad;
-webkit-box-shadow: 2px 2px 5px #dad;
-o-box-shadow: 2px 2px 5px #dad;
box-shadow: 2px 2px 5px #dad;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#dad', Direction=135, Strength=7);
cursor: pointer;
}
.insidetext {
opacity : 0.01;
-moz-opacity : 0.01;
-khtml-opacity: 0.01;
-ms-filter: "alpha(opacity=1)"; /* IE 8 */
filter : alpha(opacity=1); /* IE < 8 */
transition: all 7s;
-moz-transition: all 7s;
-o-transition: all 7s;
-webkit-transition: all 7s;
-htm-transition: all 7s;
}
.insidetext:hover {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
-ms-filter: "alpha(opacity=100)";
filter: alpha(opacity=100);
transition: all 4s;
-moz-transition: all 4s;
-o-transition: all 4s;
-webkit-transition: all 4s;
-htm-transition: all 4s;
}
- Là les valeurs 7 secondes et de l'opacité à 0.01 (à 0.07 c'est bon, ça laisse juste deviner un texte) sont très excessives, juste pour te montrer.
- J'ai aussi ajouter un cursor: pointer; au insidespoiler pour la transition de l'opacité.


EDIT: Attention, tu as mis deux fois les codes de l'identifiant insidespoiler, en CSS c'est ce qui est mis en dernier dans la feuille de style qui prend effet.
De plus, ce n'était que pour te montrer où tu pouvais ajouter ces deux lignes. Mr. Green

Ensuite, optimise ton CSS (en bas de la page de la feuille de style), ça allège le forum, donc la navigation.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Ventus le Jeu 29 Déc 2011 - 21:39

C’est juste absolument génial comme rendu !

En passant, j’ai optimisé le CSS mais avec ma connexion et le pc, je ne vois aucune différence lol Mais très certainement pour les membres qui n’ont pas ma chance.

Css changé par ton dernier lien et merci de m’avoir signalé un doublon. Dans mon euphorie, j’ai complètement zappé le problème.

Ensuite, j’ai mis en ligne ton nouveau codage et cela me plait fortement. Juste le problème que le texte ne s’affiche pas seul, il faut passer dessus avec la souris et une fois que celle-ci s’éloigne le texte disparait. Donc, ma question, c’est possible de faire en sorte que le texte apparaisse sans avoir la souris dessus et reste fixe ?

D’avance, merci Very Happy



EDITE : Quand j'optimise le CSS c'est toute la structure du fond des catégories qui disparait pour rendre une apparence vraiment moche... Donc, je pense que je vais laisser comme c'est ! Mais merci quand même pour la proposition.

Ventus
****

Messages : 358
Inscrit(e) le : 14/04/2008

http://piratedescaraibes.forum-actif.net/index.htm
Ventus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les spoilers

Message par Final-Blonde le Ven 30 Déc 2011 - 10:12

@Ventus a écrit:le texte ne s’affiche pas seul, il faut passer dessus avec la souris et une fois que celle-ci s’éloigne le texte disparait. Donc, ma question, c’est possible de faire en sorte que le texte apparaisse sans avoir la souris dessus et reste fixe ?
Je crains qu'avec ce système et ce script (par le clic), ce ne soit pas possible. Il faudrait du jQuery, mais là s'arrête ma limite.
Rien qu'en CSS c'est possible avec le tuto précédent à celui-ci, parce qu'il s'ouvre par le hover du lien.
Cela dit, un petit hover n'est pas bien grave. D'autant que nous pouvons ajouter l'élément "delay" à la disparition afin d'avoir le temps de scroller, ou bien de mettre l'opacité sur tout, le contenant et le contenu ce qui n'entrave pas le sroll tant que le curseur est dessus:
"insidespoiler"
Avec le delay on ajoute la fonction juste après celle de la façon que doit s'effectuer la transition (oui, j'ai améliorer quelque peu le bins):
Spoiler:
.insidetext {
opacity : 0.07;
-moz-opacity : 0.07;
-khtml-opacity: 0.07;
-ms-filter: "alpha(opacity=7)"; /* IE 8 */
filter : alpha(opacity=7); /* IE < 8 */
transition: opacity 7s linear 5s;
-moz-transition: opacity 7s linear 5s;
-o-transition: opacity 7s linear 5s;
-webkit-transition: opacity 7s linear 5s;
-htm-transition: opacity 7s linear 5s;
}
.insidetext:hover {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
-ms-filter: "alpha(opacity=100)";
filter: alpha(opacity=100);
transition: opacity 1.7s ease-in;
-moz-transition: opacity 1.7s ease-in;
-o-transition: opacity 1.7s ease-in;
-webkit-transition: opacity 1.7s ease-in;
-htm-transition: opacity 1.7s ease-in;
}
En rouge, c'est le retard avant que ça ne commence à s'effacer.
En bleu, ce sont deux façons différentes dont la transition s'effectue.


@Ventus a écrit:Quand j'optimise le CSS c'est toute la structure du fond des catégories qui disparait pour rendre une apparence vraiment moche...
Ah, tu ne devrais voir aucune différence pourtant. Tout ce que cela devrait faire, c'est compresser les codes (supprimer les espaces, les commentaires, en gros, tous les codes sont à la suite) afin d'accélérer le chargement de la feuille de style CSS, et ceci n'est visible que sur le code source-CSS.

Au passage, en regardant dans la source de ton CSS, il y a beaucoup de mêmes identifiants qui se contredisent parce que repris plus bas, donc les précédents sont inutiles et chargent le CSS pour nada.
Aussi, il est inutile de mettre l'ouverture { en dessous de l'identifiant, alors qu'il devrait être après celui-ci (même avec un espace) et le code en dessous, quitte à mettre la fermeture } en dessous, oui.
L'optimisation consistant à supprimer tous les espaces.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 2 1, 2  Suivant

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