JOLIE ALERTE AVEC "ALERT()"

Signaler
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
-
HACKANDROID
Messages postés
103
Date d'inscription
mardi 12 juillet 2011
Statut
Membre
Dernière intervention
3 janvier 2013
-
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

HACKANDROID
Messages postés
103
Date d'inscription
mardi 12 juillet 2011
Statut
Membre
Dernière intervention
3 janvier 2013

...

J’ADORE!!!

Merci!
calfou
Messages postés
24
Date d'inscription
dimanche 16 février 2003
Statut
Membre
Dernière intervention
18 mars 2010

Bonjour,

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
jdmcreator
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
C'est d'ailleurs ce que j'ai dit ^^ À quand la mise à jour ? :P
LeFauve42
Messages postés
239
Date d'inscription
vendredi 20 octobre 2006
Statut
Membre
Dernière intervention
20 avril 2009

Idee interessante, mais j'ai du mal a comprendre pourquoi la majorite du code (box.style.xxxxx=yyyyy;) n'est pas simplement dans un .css ?

Il n'y a pas de raison de torturer ce pauvre browser en lui faisant mouliner du javascript a chaque ouverture d'alert. :o)
jdmcreator
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
Mais il a raison, tout écrire ce commentaire et passé en revu ce code m'a pris 1h30, merci à lui de reconnaître cela ^^ . Quand à la manière dont je l'ai fait, relire en haut mon autre commentaire ^^

@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 ;)
crazygogo
Messages postés
135
Date d'inscription
samedi 18 janvier 2003
Statut
Membre
Dernière intervention
17 avril 2009

@jdmcreator: faute avouée à moitié pardonnée ! je comprend que certaines erreurs qui te paraissent évidentes peuvent t'énerver mais il ne faut pas oublier que ce qui fait la force de codes sources c'est aussi qu'il rassemble des gens de tous les niveaux alors il faut que les "pros" fassent preuve de pédagogie avec ceux qui sont ici pour apprendre ! Ceci dit merci pour ta réponse qui prouve que ce n'était pas intentionnel et que tu es ici avec un esprit constructif alors bravo !

@mdbdev: on a pas la même notion des mots "sympa", "respectueux", "superbe" etc...
cs_heycraft
Messages postés
4
Date d'inscription
mardi 20 juillet 2010
Statut
Membre
Dernière intervention
27 octobre 2010

Bien compris.

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.
jdmcreator
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
@CrazyGogo : Totalement 2h du mat et j'avoue avoir eu une journée pour le moins difficile :P Mes excuses pour le ton donné qui n'étais vraiment pas intentionnel et je ne l'ai pas voulu fâché (le ton) mais plutôt constructif... C'est sûr qu'il y a des fois où ça me dérange, par exemple lorsque la compatibilité n'est pas vérifié, ce qui serait la moindre des choses avant de poster un code sur ce site ;) Mon désir était surtout de montrer heycraft les nombreuses fautes de ce code qu'il a, et il le dit lui-même, fait à la va-vite. Si j'ai posé des questions, c'est bien parce qu'il est possible qu'il aille des raisons aux points relevés et que c'était plus des incompréhensions qu'autre chose et que je ne connais pas la vérité absolu ;)

@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 ;)
mdbdev
Messages postés
6
Date d'inscription
dimanche 9 février 2003
Statut
Membre
Dernière intervention
11 novembre 2003

Bonsoir,
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
crazygogo
Messages postés
135
Date d'inscription
samedi 18 janvier 2003
Statut
Membre
Dernière intervention
17 avril 2009

ça c'est du commentaire fait à 2h du mat !!! il devait être fatigué et énervé !!!
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
jdmcreator
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
Bonjour,

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