Les membres ayant 30 points peuvent parler sur les canaux annonces, projets et hs du chat.

Forum Casio - Vie communautaire


Index du Forum » Vie communautaire » Nouveau spoiler
Pierrotll Hors ligne Ancien administrateur Points: 5488 Défis: 41 Message

Nouveau spoiler

Posté le 07/08/2012 00:24

J'ai entrepris de créer un nouveau spoiler, pour remplacer les 2 déjà existant qui ne fonctionnent pas très bien.
Le but est qu'il vienne remplacer les deux anciens, mais avant je préfère avoir confirmation qu'il fonctionne bien, et aussi avoir vos suggestion.
Le risque d'incompatibilité est au niveau CSS. J'ai utilisé des propriétés CSS3 non-compatibles avec les anciens navigateurs. J'ai donc besoin de savoir si ça fonctionne bien chez vous.
Pour le style je me suis inspiré des anciens, mais je ne le trouve pas cohérent avec le design du site, si vous avez des idées je suis preneur.

Les avantages du nouveau par rapport aux anciens sont :
- Possibilité d'avoir (ou non) des titres personnalisés
- Pas de soucis lors de l'imbrication
- Pas de soucis si plusieurs spoilers se suivent
- Possibilité de mettre plusieurs spoilers sur la même ligne

Exemple, si j'applique cette structure aux différents spoilers, on voit bien leurs dysfonctionnements :
<spoiler>
    texte 1
    <spoiler> spoiler imbriqué </spoiler>
</spoiler>
<spoiler> texte 2 </spoiler>

Avec la balise spoiler :
Cliquez pour découvrir
Cliquez pour recouvrir
texte 1
Cliquez pour découvrir
Cliquez pour recouvrir
spoiler imbriqué
Cliquez pour découvrir
Cliquez pour recouvrir
texte 2

Avec la balise spoiler2 :
Ouvrir
Fermer
texte 1
Ouvrir
Fermer
spoiler imbriqué
Ouvrir
Fermer
texte 2

Avec le nouveau spoiler :
Cliquez pour découvrir
Cliquez pour recouvrir
texte 1
Ouvrir
Fermer
spoiler imbriqué
Ouvrir
Fermer
texte 2


EDIT : Nouveau spoiler en place, il remplace les anciens. N'utilisez plus que la balise [ spoiler ], avec ou sans argument.


1, 2, 3 Suivante
Totoyo Hors ligne Membre d'honneur Points: 16044 Défis: 102 Message

Citer : Posté le 07/08/2012 00:41 | #


Les deux nouveaux spoilers s'imbriquent

Pourquoi ne pas avoir repris l'ancien thème, le nouveau est plus foncé ?
Limachi Hors ligne Youtuber Points: 2798 Défis: 67 Message

Citer : Posté le 07/08/2012 00:42 | #


Sur google chrome, c'est nikel

Quant au design, je n'ai pas de suggestion...
Mes Programmes
Cliquer pour enrouler
-en basic: un programme nommé PICFMLIM convertissant une picture en code basic.
-en C:
-Un pong.
-Un projet en pause. Je compte le reprendre de temps en temps: Summer Cursed


-mon tuto sur les Str


Mes calto: G25+, G75
Mon minecraft en dévelopement


Projets et Programmes que je soutiens (sur une idée de Marmotti)
Cliquer pour enrouler
-Pokemon Jade de Dodormeur
-Portal2D de JavierXD
-CalCraft de Wime
-GeekBros du groupe GeekBrothers (Eiyeron,Siapran,KevKevVTT,Adbook,LIMachi)
Ziqumu Hors ligne Membre d'honneur Points: 3055 Défis: 9 Message

Citer : Posté le 07/08/2012 00:47 | #


@totoyo il a utilisé les propriété css3 pour faire un degradé(c'est pour ca que c'est plus sombre) et pour les arrondis donc il n'y a aucune image utilisé la ce qui est bien donc il allait pas remprendre le même design

Sur IE... Bah c'est ie quoi, techniquement ça fonctionne, mais le style n'est pas dutout là. à la limite les arrondi on s'en fou, mais essai au moi de faire un background-color. Je n'ai jamais utilisé les gradient donc je sais pas si on peut les coupler, mais il doit y avoir un moyen. (sinon mais une feuille de style special ie et integre la avec des commentaire conditionnel au pire)

Sinon pour les couleur, faudrait peut etre se rapprocher plus du design rouge/bordeaux du site, parce que la ca fait un peu tache :/ ENfin sinon c'est pas grâve. je vais essayer de faire quelques combinaison de rouge voir ce qui pourrait etre bien.

Ajouté le 07/08/2012 à 00:53 :
Ah et juste pour savoir tu à pas remis le script dans la fonction qui integre celle de l\'editeur ? parce que le spoiler2 y etait et on l\'a déplacé(info.js) et donc tout le js des spoiler sera supprimer du code de l\'editeur a la prochaine mise a jour que je prépare(d\'ailleur faudra que tu me dise si on change la syntax)
Totoyo Hors ligne Membre d'honneur Points: 16044 Défis: 102 Message
Ziqumu Hors ligne Membre d'honneur Points: 3055 Défis: 9 Message

Citer : Posté le 07/08/2012 01:00 | #


Petite precision, le gris du contenu du spoiler fonctionne mais que a partir d'IE8 (inclus)
Limachi Hors ligne Youtuber Points: 2798 Défis: 67 Message

Citer : Posté le 07/08/2012 01:04 | #


Sur FireFox, c'est pareil que sur Google Chrome.
Mes Programmes
Cliquer pour enrouler
-en basic: un programme nommé PICFMLIM convertissant une picture en code basic.
-en C:
-Un pong.
-Un projet en pause. Je compte le reprendre de temps en temps: Summer Cursed


-mon tuto sur les Str


Mes calto: G25+, G75
Mon minecraft en dévelopement


Projets et Programmes que je soutiens (sur une idée de Marmotti)
Cliquer pour enrouler
-Pokemon Jade de Dodormeur
-Portal2D de JavierXD
-CalCraft de Wime
-GeekBros du groupe GeekBrothers (Eiyeron,Siapran,KevKevVTT,Adbook,LIMachi)
Smashmaster Hors ligne Ancien modérateur Points: 4561 Défis: 253 Message

Citer : Posté le 07/08/2012 01:21 | # | Fichier joint


Sur IE9 j'ai ça (fichier-joint), sur Opera il n'y a pas les arrondis, mais sur tous les autres navigateurs je n'ai pas de problème
Ziqumu Hors ligne Membre d'honneur Points: 3055 Défis: 9 Message

Citer : Posté le 07/08/2012 01:30 | #


Bon je vient de vérifier tu a mis le code js du spoiler dans le js de l'editeur, faudra que tu le mette autrepart (dans info.js si tu veut) parce que sinon ca ne fonctionne que sur les page qui on un editeur, donc ce qui veut dire que ca ne fonnctionnera pas sur les mp (il y avais le même problème avec spoiler2 avant) pareil pour le css

Ajouté le 07/08/2012 à 02:10 :
En fait IE gère le border radiant, c\'est juste qu\'il faut lui donner un doctype qu\'il n y pas sur planet casio.. Le problème c\'est que ajouter un doctype ca va changer la methode de tratement sur tous les navigateurs

Voila une une page avec doctype html5 tu peut voir que sous IE les arrondies fonctionnent bien, (pas le gégradé) par contre sous tous les navigateurs ca ajoute une barre blanche au dessus des bouton du header, et sous IE ca centre le texte partout, et c\'est peut etre pas tout, alors a toi de voir si tu veut prendre le risque pour ça après je pense que tout est corrigeable, mais ca peut prendre du temps
Pierrotll Hors ligne Ancien administrateur Points: 5488 Défis: 41 Message

Citer : Posté le 07/08/2012 02:24 | #


@Ziqumu: Oui je sais, le déplacement du code est prévu. D'ailleurs, pour les anciens spoilers Light_spirit avait utilisé jQuery, je me demande si c'est le seul truc qui utilise cette lib.

J'ai essayé de faire un dégradé de rouge pour le style du titre.

Pour la compatibilité IE, c'est un truc de dingue. IE9 ne prend pas en compte les propriétés display:inline-block ni border-radius (alors qu'il en est capable cet abrutis) simplement parce qu'il n'y a pas la balise meta "compatible IE9". Mais quand j'ajoute cette balise, pas mal d'autres trucs changent dans l'affichage de la page.

EDIT: On a fait les tests en même temps

Test sur fond rose :
Cliquez pour découvrir
Cliquez pour recouvrir
test

Ziqumu Hors ligne Membre d'honneur Points: 3055 Défis: 9 Message

Citer : Posté le 07/08/2012 02:34 | #


Bah personnelement j'ai jamais fait de jQuery donc je vais pas coder l'editeur en jQuery, après tu peut essayer de l'enlever et de tester tous truc js, de toute façon au pire à cette heure si ca va pas gener grand monde. Enfin moi en parcourant le js du site pour regarder un peu a quoi correspondait quoi, je n'ai rien vu d'autre qui ressemblait à du jquery

C'est pas mal, j'aurait peut etre reduit un peu le border radius. Et oublie pas de changer la couleur du fond du "spoiler3-body" parce que le gris ca fait encore plus tache

Balise meta "compatible IE9" ? Je suppose que ca fait le même resultat que de mettre le doctype.. Faudrait tout refaire sur ce site ^^..

Edit: Ouais
Pierrotll Hors ligne Ancien administrateur Points: 5488 Défis: 41 Message

Citer : Posté le 07/08/2012 03:08 | #


J'ai encore changé les couleurs ... et le webdesign n'est décidément pas mon domaine

Pour la meta je parlais d'un truc comme :
<meta http-equiv="X-UA-Compatible" content="IE=edge">
mais effectivement, avec un doctype html5 le résultat est le même.

En fait je savais à l'avance que je me privais de la compatibilité IE avec l'utilisation du dégradé (déjà que les autres nav ne le gèrent qu'avec préfixe vendeur), mais je ne pensais pas qu'il rechignerait à gérer d'office le display:inline et le border-radius.
Je vais voir si c'est faisable de corriger les problèmes dus au doctype html5.
Ziqumu Hors ligne Membre d'honneur Points: 3055 Défis: 9 Message

Citer : Posté le 07/08/2012 03:19 | #


Mdr on est deux, J'adore codé mais je deteste dessiner le design

Bah après du moment que c'est fonctionnel, c'est déjà bien T'imagine pas comment je galère à faire un truc compatible pour l'editeur, il y a un cart du code qui lui est reservé

Pour le doctype html5 ca serait déjà un bon début pour rendre le site un tout petit peu plus aux normes et plus compatible
Louloux Hors ligne Ancien administrateur Points: 7035 Défis: 61 Message

Citer : Posté le 07/08/2012 10:52 | # | Fichier joint


Sous chrome c'est nickel chrome.
Sous IE9 j'ai la couleur mais pas l'arrondi (cf fichier joint).


SiteDuZéro a écrit :
Les bordures arrondies fonctionnent avec tous les navigateurs récents, y compris Internet Explorer à partir de la version 9 (IE9).

Tu utilises pas border-radius ?
Tsuneo Hors ligne Membre Points: 973 Défis: 51 Message

Citer : Posté le 07/08/2012 11:27 | #


Sur ma 3DS, ça fonctionne nikel, mieux que l'ancien

Calculatrices : Graph 35+ USB tweakée et Classpad 330
Suivez moi et mon humour dévastateur ici focliquéla
Eiyeron Hors ligne Ancien modérateur Points: 5525 Défis: 57 Message

Citer : Posté le 07/08/2012 12:37 | #


Perso, fais le spoiler plus petit...
Tsuneo Hors ligne Membre Points: 973 Défis: 51 Message

Citer : Posté le 07/08/2012 12:56 | #


Sur Chrome je vois ce que ça doit donner réellement, et c'est vachement beau Même si ça s'affiche mal sur 3DS c'est toujours mieux que l'ancien

Calculatrices : Graph 35+ USB tweakée et Classpad 330
Suivez moi et mon humour dévastateur ici focliquéla
Smashmaster Hors ligne Ancien modérateur Points: 4561 Défis: 253 Message

Citer : Posté le 07/08/2012 13:25 | #


Vous en pensez quoi de ce design ? Lien
Ziqumu Hors ligne Membre d'honneur Points: 3055 Défis: 9 Message

Citer : Posté le 07/08/2012 13:42 | #


@Louloux IE gère le border radius a condition qu'on lui donne un doctype, regarde le code html, il n'y a pas de doctype. Le problème c'est que si on le rajoute ça ne va pas changer que ça, Voila ce que ça donne. Et tu peut voir qu'il y a un bug de bande blanche en haut par exemple (et ca ne sera sans doute pas le seul bug sur tout le site) mais que le border-radius fonctionne sous ie.

J'aime bien le design de smashmaster moi, et tu mettrait quoi comme couleur de fond dans le contenu sachant que le texte sera forcément en noir ?
Smashmaster Hors ligne Ancien modérateur Points: 4561 Défis: 253 Message

Citer : Posté le 07/08/2012 14:35 | # | Fichier joint


Ziqumu a écrit :
tu mettrait quoi comme couleur de fond dans le contenu sachant que le texte sera forcément en noir ?
Je ne sais pas trop, peut-être du rose très clair ?
Ziqumu Hors ligne Membre d'honneur Points: 3055 Défis: 9 Message

Citer : Posté le 07/08/2012 14:37 | #


Faut faire gaffe que le spoiler pourra etre sur du blanc ou du rose (le fond des messages sur le forum)
1, 2, 3 Suivante

LienAjouter une imageAjouter une vidéoAjouter un lien vers un profilAjouter du codeCiterAjouter un spoiler(texte affichable/masquable par un clic)Ajouter une barre de progressionItaliqueGrasSoulignéAfficher du texte barréCentréJustifiéPlus petitPlus grandPlus de smileys !
Cliquez pour épingler Cliquez pour détacher Cliquez pour fermer
Alignement de l'image: Redimensionnement de l'image (en pixel):
Afficher la liste des membres
:bow: :cool: :good: :love: ^^
:omg: :fusil: :aie: :argh: :mdr:
:boulet2: :thx: :champ: :whistle: :bounce:
valider
 :)  ;)  :D  :p
 :lol:  8)  :(  :@
 0_0  :oops:  :grr:  :E
 :O  :sry:  :mmm:  :waza:
 :'(  :here:  ^^  >:)

Σ π θ ± α β γ δ Δ σ λ
Veuillez donner la réponse en chiffre
Vous devez activer le Javascript dans votre navigateur pour pouvoir valider ce formulaire.

Si vous n'avez pas volontairement désactivé cette fonctionnalité de votre navigateur, il s'agit probablement d'un bug : contactez l'équipe de Planète Casio.

Planète Casio v42 © créé par Neuronix et Muelsaco 2004 - 2022 | Il y a 38 connectés | Nous contacter | Qui sommes-nous ? | Licences et remerciements

Planète Casio est un site communautaire non affilié à Casio. Toute reproduction de Planète Casio, même partielle, est interdite.
Les programmes et autres publications présentes sur Planète Casio restent la propriété de leurs auteurs et peuvent être soumis à des licences ou copyrights.
CASIO est une marque déposée par CASIO Computer Co., Ltd