JOLIE ALERTE AVEC "ALERT()"
jdmcreator
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
-
26 oct. 2010 à 02:15
HACKANDROID Messages postés 103 Date d'inscription mardi 12 juillet 2011 Statut Membre Dernière intervention 3 janvier 2013 - 29 août 2011 à 22:55
HACKANDROID Messages postés 103 Date d'inscription mardi 12 juillet 2011 Statut Membre Dernière intervention 3 janvier 2013 - 29 août 2011 à 22:55
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/52414-jolie-alerte-avec-alert
https://codes-sources.commentcamarche.net/source/52414-jolie-alerte-avec-alert
29 août 2011 à 22:55
J’ADORE!!!
Merci!
2 févr. 2011 à 11:43
Très interressant ce code.
J'ai une question tout de même, est-ce que le code en l'état ne pose aucun problème si je met ça en production sur un site? Ou faut-il appliquer les recommendations de JDM avant? Car je ne suis pas certain de pouvoir les appliquer seul..
Merci d'avance
3 nov. 2010 à 23:32
3 nov. 2010 à 11:33
Il n'y a pas de raison de torturer ce pauvre browser en lui faisant mouliner du javascript a chaque ouverture d'alert. :o)
27 oct. 2010 à 22:47
@Heycraft : Ce ne sont que des propositions, tu utilises la méthode que tu veux ;) Et personnellement, je ne mettrai jamais 3 à quelqu'un a moins qu'il l'aille chercher, car les notes sur CodeS-SourceS ne peuvent être changé, donc tu restes pris avec un 3 peu importe si tu as modifié ton code et qu'il vaille désormais un 10 ;)
27 oct. 2010 à 17:57
@mdbdev: on a pas la même notion des mots "sympa", "respectueux", "superbe" etc...
27 oct. 2010 à 11:02
Il y a tout de même certains points dont je ne suis pas d'accord avec toi, notemment au niveau du CSS.
J'ai mis des classes pour pouvoir rajouter des propriétés supplémentaires, mais je vais certainement utiliser ces classes. Je ne connaissait pas l'évènement onResize, merci pour sa.
Il a été testé sous Firefox car je l'ai fait vraiment rapidement, c'est pour sa qu'il n'y a pas de propriété border radius pour tuot les navigateurs(surtout qu'en ddernieres version, les navigateurs accepte tous border-radius (FF4, Chrome et IE9) donc c'est évolutif.
Je corrigerai tous les autres petits défault, je reconnais qu'il y en a.
Et merci de ne pas avoir mis de 3/10.
27 oct. 2010 à 02:38
@MDBDev : Merci beaucoup, d'ailleurs c'est aussi de la façon que je voudrais être traité, c'est à dire précis et non pas une appréciation générale du genre "J'adore ce code ! Très utile !" (même si c'est toujours plaisant) et l'on donne un 10/10 ;)
26 oct. 2010 à 20:35
Franchement moi je trouve très sympa les explicatiosn données.
Questions et tons franchement respectueux et superbes commentaires.
Je peux comprendre la frustration mais il faut avouer JDMCreator aurait très bien pu ne rien faire. Il a pris de son temps comme vous pour être constructif pour la communauté.
Je viens d'apprendre pas mal de choses avec le code de départ et la finalité.
Donc merci à tous les deux
26 oct. 2010 à 10:57
si ça se veut constructif, il faudrait changer de ton et enlever toutes les questions et les points d'interrogation
c'est mis en niveau débutant donc pas la prétention d'être digne d'un super développeur javascript professionnel qui aurait fait ça en 15 lignes
alors du calme, il dit bien que c'est juste une première version
ça me tue ces commentaires de mecs expérimentés dans le développement qui se la pètent et démolissent tous les nouveaux scripts qui arrivent
26 oct. 2010 à 02:15
Une petite première chose à dire : ton script contient vraiment beaucoup de codes inutiles :
" box.style.position = "absolute";
box.style.zIndex = 9998;
box.style.overflox = "hidden";
box.style.left = "50%";
box.style.top = "50%";
box.style.width = width + "px";
box.style.minHeight = height[0] + "px";
box.style.maxHeight = height[1] + "px";
box.style.marginLeft = -(width / 2) + "px";
box.style.marginTop = -(box.offsetHeight / 2) + "px";
box.style.border = "1px #000000 solid";
box.style.backgroundColor = "#AFD4DB";
box.style.fontFamily = "sans-serif";
// CSS3
box.style.borderTopRadius = "15px";
box.style.borderBottomRadius = "5px";
box.style.MozBorderRadius = "10px";
box.style.boxShadow = "2px 2px 5px #000000";
box.style.MozBoxShadow = "2px 2px 12px #000000";
"
Tu aurais pu facilement compresser ce code comme ceci : box.style.cssText="position:absolute;z-index:9998...."
Et ce pour toutes les déclarations de style, si tu ne souhaites tout simplement leur donner une class et faire une feuille de style externe.
Pour continuer, ton code a AFFREUSEMENT beaucoup de bogue ^^ Heureusement pour toi, je peux en noter plusieurs, puisque j'ai faite exactement les mêmes erreurs que toi dans mon précédent code JDMath que je t'invite à voir ;)
Alors pour commencer, Si ta page est très très longue (c'est à dire s'il y a une barre de défilement) peu importe où tu es sur la page, ta boîte de dialogue (nom en français d'une "alert") s'affichera toujours en haut : stupide problème que l'on a avec les pourcentages. Attention de ne pas utiliser la très tentative "position:fixed" non compatible avec IE7 et - . Préfère plutôt la méthode que j'ai employé : soit empêcher l'utilisateur de défiler dans la page : pour cela met "overflow" de body à "hidden" et crée un fond, que tu peux mettre transparent si tu veux, qui empêchera l'utilisateur de cliquer sur le reste de la page. Aussi il serait bien que tu supportes le Drag & Drop pour ton script, dans JDMath je ne l'ai pas fait puisque ce n'est pas un code dédié à des boîtes de dialogues, mais comme ce l'est pour le tien, ce serait bien que tu le supportes.
Pour continuer,
Ligne 28 : content.setAttribute("class", "alertContent");
Pourquoi pas simplement content.className="alertContent"; ???
Ligne 57 : box.style.MozBorderRadius = "10px";
Où est le support pour les autres navigateurs ??? -o-border-radius, -webkit-border-radius, -icab-border-radius, -khtml-border-radius . Il est toujours important de faire de la recherche pour les propriétés CSS propriétaires.
Ligne 58 : box.style.MozBoxShadow = "2px 2px 12px #000000";
Exactement la même chose : -webkit-box-shadow. Pour IE, c'est plus compliqué, tu peux lire des informations ici : http://msdn.microsoft.com/en-us/library/ms532985(VS.85).aspx
Mais après lecture, il te faudrait quelque chose du genre :
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='#000', Positive='true')
Ligne 47-48 :
box.style.minHeight = height[0] + "px";
box.style.maxHeight = height[1] + "px";
Non reconnu par IE : http://www.alsacreations.com/actu/lire/149-min-height-sur-internet-explorer.html
Ligne 76-77 :
box.style.borderRadius = "5px";
box.style.MozBorderRadius = "5px";
Tu t'es complètement perdu ^^ C'est plutôt title qu'il faut modifier ^^ Applique aussi ici ce que je t'ai écrit en haut
Ligne 84 : content.style.overflow = "auto";
Ligne
Valeur par défaut... pourquoi la marquer ?
Ligne 43 : box.style.overflox = "hidden";
Pourquoi ? O_O Si mon texte est trop long il est couper O_O
Ligne 93-97 : HORREUR !!!! O_O Ta fonction replacement est vraiment mal faite !!! Elle prend plein de ressource pour rien puisqu'elle est appelé à toutes les 200 millisecondes !!! C'est beaucoup !!! Pourquoi n'a tu pas utiliser l'événement onResize de ? (https://developer.mozilla.org/fr/DOM/element.onresize) Sûrement que tu ne connaissais pas mais voilà ^^ Désolé pour cet instant de panique mais ta fonction a vraiment été mal faite ^^
Ligne 31 : if(typeof(aname) == "undefined")
typeof n'est pas une fonction mais un mot-clé, tu peux donc écrire : if(typeof aname == "undefined") Ça te supprime un caractère ^^
Ligne 38-39 :
var width = 360; // largeur
var height = [160, 480]; // hauteur [min, max]
Serait-t-il possible de pouvoir définir une hauteur/largeur différente pour chaque alerte =) ?
Ligne 32 : aname = "Alert window"
Ne pourrais tout simplement pas mettre un pas de titre ? Ou alors lui donner un nom plus beau ^^ Voir parfaitement, le nom du navigateur
Ligne 33 : title.innerHTML = aname;
Icchh !!! Si je donne comme titre <textarea></textarea> et bien une textarea va s'afficher. Pour y remédier :
try{
title.innerText=aname;
}
catch(e){
title.textContent=aname;
}
;)
Ligne 12 : var title = box.appendChild(span);
et
Ligne 27 : var content = box.appendChild(span);
Pourquoi donner un autre nom de variable ??? Span et title sont les mêmes variables et représentent le même objet HTML.
Ligne 8 : box.style.display = "none";
Pourquoi le cacher au début et le réafficher à la fin O_O ??? Au pire, si tu as peur que le chargement soit lent, et bien ajoute box à body seulement à la fin de la fonction
Ligne 51, 58, 59, 72, 73 :#000000 compressible par #000 et #FFFFFF par #FFF. C'est plus court, plus léger et plus lisible.
Ligne 7 : box.setAttribute("class", "alertBox");
Pour revenir sur cette ligne, où est la classe alertBox ????
Finalement, un dernier bug, lorsque je redimmensionne la fenêtre, si la boîte de dialogue est plus haute que la taille de la fenêtre du navigateur, le haut et le bas seront coupé... ce qui est gênant
"Ce petit script à été réalisé plutot vite et testé uniquement sous Firefox 3.6.11 sous ubuntu."
Losqu'un script est réalisé en vitesse et peu testé, il est facile de s'exposer à de longues critiques ... comme celle-ci ^^ Revoie ton code et comme je suis gentil je ne te mettrai pas de note . Une chance car je t'aurais mis 3 : Un code assez facile à faire mais comportant ÉNORMÉMENT de bug et comportant ANORMALEMENT de code compressible.
Donc, refais ton code, teste plus en longueur que moi, je n'ai testé que sur Safari et Firefox... Je n'ai pas osé regarder sur IE et Opéra puisque j'ose prévoir un massacre ^^
Mais ne prend pas ces critiques personnels, mais plutôt constructive ;) On apprend tous :P Et moi y compris :P
JDMCreator
Note donnée lors de la première évaluation : 3/10