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
Ouvrir
Fermer
texte 1
Ouvrir
Fermer
spoiler imbriqué
Cliquez pour découvrir
Cliquez pour recouvrir
texte 1
Ouvrir
Fermer
spoiler imbriqué
Nouveau spoiler en place, il remplace les anciens. N'utilisez plus que la balise [ spoiler ], avec ou sans argument.
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é ?
Vitesse des fonctions en Basic Casio | 7 days CPC | Casio Universal Wiki | Tutoriel Basic Casio
>>> Give me a click Brother
>>> Random Youtube Video
Citer : Posté le 07/08/2012 00:42 | #
Sur google chrome, c'est nikel
Quant au design, je n'ai pas de suggestion...
-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
-Portal2D de JavierXD
-CalCraft de Wime
-GeekBros du groupe GeekBrothers (Eiyeron,Siapran,KevKevVTT,Adbook,LIMachi)
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)
Citer : Posté le 07/08/2012 00:58 | #
Je confirme, sur IE, les nouveaux spoilers fonctionnent, mais sans style css.
Vitesse des fonctions en Basic Casio | 7 days CPC | Casio Universal Wiki | Tutoriel Basic Casio
>>> Give me a click Brother
>>> Random Youtube Video
Citer : Posté le 07/08/2012 01:00 | #
Petite precision, le gris du contenu du spoiler fonctionne mais que a partir d'IE8 (inclus)
Citer : Posté le 07/08/2012 01:04 | #
Sur FireFox, c'est pareil que sur Google Chrome.
-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
-Portal2D de JavierXD
-CalCraft de Wime
-GeekBros du groupe GeekBrothers (Eiyeron,Siapran,KevKevVTT,Adbook,LIMachi)
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
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
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 :
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
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 :
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.
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
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
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).
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 ?
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
Citer : Posté le 07/08/2012 12:37 | #
Perso, fais le spoiler plus petit...
Citer : Posté le 07/08/2012 12:56 | #
Sur Chrome je vois ce que ça doit donner réellement, et c'est vachement beau
Calculatrices : Graph 35+ USB tweakée et Classpad 330
Suivez moi et mon humour dévastateur ici
Citer : Posté le 07/08/2012 13:25 | #
Vous en pensez quoi de ce design ? Lien
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 ?
Citer : Posté le 07/08/2012 14:35 | # |
Fichier joint
tu mettrait quoi comme couleur de fond dans le contenu sachant que le texte sera forcément en noir ?
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)