Jquery, bootstrap notification
Jotech
Messages postés
786
Date d'inscription
Statut
Membre
Dernière intervention
-
jordane45 Messages postés 40053 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 40053 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
J'ai un petit problème avec un script que j'ai trouvais, le but du script est de faire pop toutes les X secondes une fenetre de notification en haut a droite, seul problème c'est que j'aimerai modifier le positionnement de cette fenêtre, n'étant pas un expert en js je gallere un peu
Code html
jquery.js
Merci !
J'ai un petit problème avec un script que j'ai trouvais, le but du script est de faire pop toutes les X secondes une fenetre de notification en haut a droite, seul problème c'est que j'aimerai modifier le positionnement de cette fenêtre, n'étant pas un expert en js je gallere un peu
Code html
<!DOCTYPE html>
<html>
<head>
<title>jquery.bootstrap-growl Demo</title>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="jquery.bootstrap-growl.js"></script>
<script type="text/javascript">
$(function() {
$.bootstrapGrowl("This is a test.");
setTimeout(function() {
$.bootstrapGrowl("This is another test.", { type: 'success' });
}, 1000);
setTimeout(function() {
$.bootstrapGrowl("Danger, Danger!", {
type: 'danger',
align: 'center',
width: 'auto',
allow_dismiss: false
});
}, 2000);
setTimeout(function() {
$.bootstrapGrowl("Danger, Danger!", {
type: 'info',
align: 'left',
stackup_spacing: 30
});
}, 3000);
});
</script>
</body>
</html>
jquery.js
(function() {
var $;
$ = jQuery;
$.bootstrapGrowl = function(message, options) {
var $alert, css, offsetAmount;
options = $.extend({}, $.bootstrapGrowl.default_options, options);
$alert = $("<div>");
$alert.attr("class", "bootstrap-growl alert");
if (options.type) {
$alert.addClass("alert-" + options.type);
}
if (options.allow_dismiss) {
$alert.addClass("alert-dismissible");
$alert.append("<button class=\"close\" data-dismiss=\"alert\" type=\"button\"><span aria-hidden=\"true\">×</span><span class=\"sr-only\">Close</span></button>");
}
$alert.append(message);
if (options.top_offset) {
options.offset = {
from: "top",
amount: options.top_offset
};
}
offsetAmount = options.offset.amount;
$(".bootstrap-growl").each(function() {
return offsetAmount = Math.max(offsetAmount, parseInt($(this).css(options.offset.from)) + $(this).outerHeight() + options.stackup_spacing);
});
css = {
"position": (options.ele === "body" ? "fixed" : "absolute"),
"margin": 0,
"z-index": "9999",
"display": "none"
};
css[options.offset.from] = offsetAmount + "px";
$alert.css(css);
if (options.width !== "auto") {
$alert.css("width", options.width + "px");
}
$(options.ele).append($alert);
switch (options.align) {
case "center":
$alert.css({
"left": "50%",
"margin-left": "-" + ($alert.outerWidth() / 2) + "px"
});
break;
case "left":
$alert.css("left", "20px");
break;
default:
$alert.css("right", "20px");
}
$alert.fadeIn();
if (options.delay > 0) {
$alert.delay(options.delay).fadeOut(function() {
return $(this).alert("close");
});
}
return $alert;
};
$.bootstrapGrowl.default_options = {
ele: "body",
type: "info",
offset: {
from: "top",
amount: 20
},
align: "right",
width: 250,
delay: 4000,
allow_dismiss: true,
stackup_spacing: 10
};
}).call(this);
Merci !
A voir également:
- Jquery, bootstrap notification
- Notification visite profil facebook - Guide
- Historique notification android - Guide
- Son notification par application android - Guide
- Enlever notification whatsapp pour une personne - Guide
- Notification sms - Guide
1 réponse
Bonjour,
Oui mais encore .....
Tu veux la placer où ?
Car sans cette information.. difficile de te dire quoi changer. ^^
Visiblement tu as déjà trouvé l'option ALIGN ...
Mais pour changer la hauteur.. tu peux regarder du côté de l'option offset
seul problème c'est que j'aimerai modifier le positionnement de cette fenêtre
Oui mais encore .....
Tu veux la placer où ?
Car sans cette information.. difficile de te dire quoi changer. ^^
Visiblement tu as déjà trouvé l'option ALIGN ...
Mais pour changer la hauteur.. tu peux regarder du côté de l'option offset
offset: {
from: "top",
amount: 20
},
