Aller au contenu

alert()

dimi3

Par dimi3
dans AjaX et JavaScript

 Partager

Sujets conseillés

dimi3

dimi3

Posté
Posté

Bonjour,

Je fais connaissance avec jQuery. Par le code ci-dessous, la largeur de la fenêtre alert ne tient pas compte de la longueur du texte. Celui-ci sort tout simplement de la boîte :


<body>
<script language=javascript>
jAlert("Coucou à tout le monde !","Bienvenue");
</script>
</body>

Si je passe par un bouton et une fonction javascript, la boîte alert se dimensionne correctement par rapport au texte :


<head>
<script language=javascript>
   function Message() {
              jAlert("Coucou à tout le monde !","Bienvenue");
   }
</SCRIPT>
</head>
<body>
<FORM>
<INPUT type=button value="Cliquez moi" onClick="Message()">
</FORM>
</body>

Comment s'explique une telle différence ? Comment faire pour que la boîte alert respecte la longueur du texte sans utiliser de fonction javascript ?

Merci à vous.

captain_torche

captain_torche

Posté
Posté

Quand tu utilises jQuery, fais toujours attention à ce que la bibliothèque soit pleinement chargée avant d'appeler tes fonctions.

Tu peux remplacer ton premier code par :

<script type="text/javascript">
$().ready(function() {
	jAlert('Coucou à tout le monde !', 'Bienvenue');
});
</script>

La première fonction ($().ready(), ou $(document).ready()) attend le chargement complet de la page (code et script) avant de s'exécuter.

Soit dit en passant, un appel comme celui que tu as fait dans le second exemple (avec le onclick directement dans le code HTML), doit être évité (Même si c'est juste pour un test).

Un bon moyen de le faire serait de donner un ID à ton bouton, et de gérer le clic directement dans le code javaScript :

<head>
	<script type="text/javascript">
		$().ready(function() {
				$('#mon_bouton').click(function() {
					jAlert('toto', 'tata');
				});
		});
	</script>
</head>
<body>
	<form action="">
			<input type="button" id="mon_bouton" value="Cliquez-moi">
	</form>
</body>

Tu peux aussi envisager de faire un clic sur n'importe quel autre élément de ta page, un bouton n'est pas obligatoire.

dimi3

dimi3

Posté
  • Auteur
Posté

Merci pour cette réponse très claire.

Je prends note du second conseil.

J'ai testé :


<script type="text/javascript">
$().ready(function() {
        jAlert('Coucou à tout le monde !', 'Bienvenue');
});
</script>

Le texte ne sort en effet plus de la boîte, mais il est emprisonné d'une telle manière que pour la phrase "Coucou à tout le monde !", il fait 3 retours à la ligne. En somme c'est le texte qui se plie aux dimensions de la boîte alors que je souhaiterais que ce soit la boîte qui s'aligne sur la longueur du texte. De plus, Est-il possible de fixer les dimensions de la boîte ?

merci encore.

captain_torche

captain_torche

Posté
Posté

La page de démo de jAlert donne un exemple de largeur forcée :

$('body').jAlert('This is a jAlert Success Box with custom width of 780px', 'success', 'widthcustom', 780, '100');

Soit dit en passant, je trouve que le code généré par le plugin est inutilement complexe et pourrait être extrêmement simplifié.

<div class="msg-box-cont msg-warning" id="jalert_box_cont_warningboxid" style="width: 350px; left: 315px; top: 195px; display: block; "><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><div class="msg-text"><div class="msg-icon msg-icon-warning"></div>This is a jAlert Warning Box</div></td><td width="21" valign="top"><div class="msg-btn close-warning"></div></td></tr></tbody></table></div>

Personnellement, je me mettrai en quête d'un autre plugin . Tu pourras sans doute en trouver à cette page : http://plugins.jquer...ugin-tags/alert

dimi3

dimi3

Posté
  • Auteur
Posté

Merci. Que signifie <i>$('body').</i> en tête de ligne ? Si je mets ça, la boîte jAlert ne s'affiche pas. Si je l'ôte tout va bien.

Ernestine

Ernestine

Posté
Posté

Salut,

Puisque tu t'es mis sérieusement au javascript, il faut maintenant installer l'indispensable Firebug, qui est un plugin firefox qui permet, entre autres, de faciliter la programmation en javascript. En particulier, il t'affiche une erreur si quelque chose ne se passe bien, et t'indique où se situe l'erreur. Que de temps gagné. En plus de ça, il permet de modifier à la volée les styles CSS, de suivre au fur et à mesure les modifications effectuées dans la page par javascript, mais aussi l'évolution des CSS, sans oublier le détail des requêtes/réponses en ajax, et plein d'autres choses encore.

Page de téléchargement : https://addons.mozilla.org/fr/firefox/addon/1843/

$('body') signifie grosso modo que tu sélectionnes l'élément body (c'est à dire le corps de page) et que tu lui appliques ce qui suit, en l'occurrence la fonction jAlert. Si ça ne fonctionne pas, les raisons peuvent être multiples, impossible de te donner la réponse sans voir la page concernée ;)

dimi3

dimi3

Posté
  • Auteur
Posté (modifié)

Bonsoir,

Le fichier téléchargé Firebug a pour extension xpi. Comment le dézipper ?

Voici le script complet de mon fichier :


<html>
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.ui.draggable.js" type="text/javascript"></script>
<script src="js/jquery.alerts.js" type="text/javascript"></script>
<link href="js/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<script type="text/javascript">
$().ready(function() {
$('body').jAlert('This is a jAlert Success Box with custom width of 780px', 'success', 'widthcustom', 780, '100');
});
</script>
</body>

Merci.

Modifié par dimi3
Ernestine

Ernestine

Posté
Posté

Heu ? Pour installer le plugin, il suffit d'aller sur la page avec Firefox et de cliquer sur "Ajouter à Firefox".

Ton code est bon, hormis qu'il manque la balise fermante </html> mais bon ce n'est sûrement pas ça qui provoque le bug. Si ça ne marche pas, c'est sûrement parce que les inclusions des scripts ne se font pas correctement (mauvais chemin d'accès).

Enfin bon, là tu commences tout juste à découvrir jQuery et tu veux déjà installer un plugin (qui d'ailleurs n'est pas un plugin "officiel"). Il vaudrait mieux commencer par le commencement et suivre tranquillement un tutoriel pour jQuery. Par exemple, comprendre ce que signifie $('body'), c'est le B.A.BA, inutile d'aller plus loin si tu ne maîtrises pas cela parfaitement ;)

dimi3

dimi3

Posté
  • Auteur
Posté

Oui, tu as raison. jQuery n'est pas du prêt-à-porter. Je remarque aussi que jQuery est fantaisiste. Modifier les arguments 780 et 100 dans la ligne jAlert('This is a jAlert Success Box with custom width of 780px', 'success', 'widthcustom', 780, '100'); n'a aucun effet. Mais en passant par un bouton lançant une fonction, les arguments sont respectés. D'autre part j'ai remarqué qu'en modifiant le fichier jquery.alerts.css, on obtient bien des dimensions de boites différentes selon les nombres rentrés mais les résultats sont différents d'un navigateur à l'autre. Le texte ne dépassera pas de la boite sur Mozilla Firefox, mais dépassera sur Google Chrome. Il faut avoir les nerfs solides... :-)

captain_torche

captain_torche

Posté
Posté

Les problèmes ne viennent pas de jQuery, qui est une bibliothèque solide, mais très probablement du plugin.

En ce qui concerne les soucis de taille dans les différents navigateurs, c'est l'intégration qui est probablement en cause. En ajoutant un doctype à ta page de test (Idéalement HTML 4 strict), tu devrais éloigner ce dernier souci.

dimi3

dimi3

Posté
  • Auteur
Posté

En ce qui concerne les soucis de taille dans les différents navigateurs, c'est l'intégration qui est probablement en cause. En ajoutant un doctype à ta page de test (Idéalement HTML 4 strict), tu devrais éloigner ce dernier souci.

Bien vu ! Merci beaucoup de partager vos connaissances... Que de choses je ne sais pas ! Paradoxalement, plus j'apprends de choses, plus je me rends compte que je ne sais pas grand-chose... :-( J'ai testé sur les 5 navigateurs courants, et l'affichage est partout correct avec le bon doctype.

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...