11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Notifications en JS

Bonjour,

J'utilise un fichier JS ayant pour fonction d'afficher des notifications sur mon site mais je n'arrive pas à le parametrer correctement pour que les notifications s'affichent là où a lieu l'action (du type onclick, etc...).

Voici à quoi ressemble le fichier (je me suis basé sur un projet OpenSource) :

(function($) {
	var config = window.NotifierjsConfig = {
		defaultTimeOut: 3500,
		position: ["top", "right"],
		notificationStyles: {
			padding: "15px",
			margin: "0",
			backgroundColor: "#FBFCFD",
			opacity: 0.9,
			color: "#444444",
			font: "bold 12px 'HelveticaNeue', sans-serif",
			borderRadius: "8px",
			boxShadow: "inset 0 0 3px 1px #CCCCCC",
			display: "inline-block",
			position: "relative",
			border: "1px solid #C3C3C3"
		},
		notificationStylesHover: {
			opacity: 1
		},
		container: $("<div></div>")
	};

	$(document).ready(function() {
		config.container.css("position", "absolute");
		config.container.css("z-index", 9999);
		config.container.css(config.position[0], "12px");
		config.container.css(config.position[1], "12px");
		$("body").append(config.container);
	});

	function getNotificationElement() {
		return $("<div>").css(config.notificationStyles).hover(function() {
			$(this).css(config.notificationStylesHover);
		},
		function() {
			$(this).css(config.notificationStyles);
		});
	}

	var Notifier = window.Notifier = {};

	Notifier.notify = function(message, title, iconUrl, timeOut) {
		var notificationElement = getNotificationElement();

		timeOut = timeOut || config.defaultTimeOut;

		if (iconUrl) {
			var iconElement = $("<img/>", {
				src: iconUrl,
				css: {
					width: 36,
					height: 36,
					display: "inline-block",
					verticalAlign: "middle"
				}
			});
			notificationElement.append(iconElement);
		}

		var textElement = $("<div/>").css({
			display: 'inline-block',
			verticalAlign: 'middle',
			padding: '0 12px'
		});

		if (title) {
			var titleElement = $("<div/>");
			titleElement.append(document.createTextNode(title));
			titleElement.css("font-weight", "bold");
			textElement.append(titleElement);
		}

		if (message) {
			var messageElement = $("<div/>");
			messageElement.append(document.createTextNode(message));
			textElement.append(messageElement);
		}

		notificationElement.delay(timeOut).fadeOut(function(){
			notificationElement.remove();
		});
		notificationElement.bind("click", function() {
			notificationElement.hide();
		});

		notificationElement.append(textElement);
		config.container.prepend(notificationElement);
	};

	Notifier.info = function(message, title) {
		Notifier.notify(message, title, "images/bullet_info.png");
	};
	Notifier.warning = function(message, title) {
		Notifier.notify(message, title, "images/bullet_error.png");
	};
	Notifier.error = function(message, title) {
		Notifier.notify(message, title, "images/bullet_deny.png");
	};
	Notifier.success = function(message, title) {
		Notifier.notify(message, title, "js/images/bullet_accept.png");
	};
}(jQuery));

Merci d'avance pour votre aide !
Modifié par cocochepeau (17 Jun 2012 - 22:20)
Re,

j'ai complètement changé ma façon de procéder, mais j'ai toujours un problème...

voici mon code

<html>
	<head>
		<style type="text/css">
			#notifications {
				width: 100px;
				height: 890px;
				background: #ffb;
				padding: 10px;
				border: 2px solid #999;
			}
		</style>
		<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
		<script type="text/javascript">
			$("#test").click(function() {
				$("#notifications").fadeOut("slow", function() {});
			});
		</script>
	</head>
	<body>
		<div id="notifications">
			<div id="test">Cliquez ici pour fermer</div>
		</div>
	</body>
</html>


et le code sur jsFiddle -> http://jsfiddle.net/NmudS/1540/

Le soucis est que mon code ne fonctionne pas contrairement à celui présent sur jsFiddle...

P.S : jsFiddle c'est énorme, je ne connaissais pas. Smiley smile
Modifié par cocochepeau (17 Jun 2012 - 19:46)
Re,

J'ai cherché justement du côté des API / Docs de JQuery pour en apprendre plus et j'ai trouvé la solution à mon problème. Smiley smile

Et non les blocs sont générés par du PHP.

En fait le script ne doit pas se trouver entre les balises <head></head> mais après mon bloc <div></div> concerné !

Le soucis c'est que je suis obligé de copier plusieurs fois le script, en dessous de chaque notifications... C'est pas très optimisé !

Pour ceux qui voudraient en apprendre plus voici comment mon code fonctionne maintenant :


<!------->

<div id="notifications">
<div class="notifications_padding notifications_success">Vous êtes maintenant connecté !</div>
<div id="js_close">Fermer</div>
</div>
<script>
$("#js_close").click(function () {
$("#notifications").fadeOut("slow");
});
</script>

<!------->


A+ !
Modifié par cocochepeau (17 Jun 2012 - 22:24)
Le problème est que tu utilisais ce bloc de code avant que le DOM ne soit prêt.

Tu n'as pas à le copier en dessous de chacun de tes blocs. Ce que tu dois faire, c'est attendre le chargement du dom, ainsi:


$(document).ready(function() {
    // tout ton code ici
});

// Ou la version simplifiée:

$(function() {
    // Tout ton code ici
});


Ceci fonctionnera peu importe où ton code est placé (head ou body). Cela dit, pour des questions de performances, tu devrais mettre tes blocs de script en dernier, juste avant la fermeture de body.


    <script></script>
</body>


Sinon, pensant à l'avenir, tu devrais éviter d'utiliser des ID (un seul par page) et essayer de créer un code qui sera réutilisable si tu as plusieurs blocs de notifications, ou des blocs au comportement similaire dans d'autres situations.
Re,

Merci pour les conseils !

J'en ai profité pour mettre en place une fonction PHP qui traite les notifications selon plusieurs paramètres (le message, le type...).

J'ai gagné au moins 1500 caractères.

Merci encore, sans toi je n'y aurais sûrement pas pensé. Smiley langue
Sujet clos
Aller à