Jquery, bootstrap notification
Jotech
Messages postés
786
Date d'inscription
Statut
Membre
Dernière intervention
-
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 30427 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 !
--
Un merci fait toujours plaisir.
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 !
--
Un merci fait toujours plaisir.
1 réponse
-
Bonjour,
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 offsetoffset: { from: "top", amount: 20 },
