Jquery, bootstrap notification [Fermé]

Signaler
Messages postés
709
Date d'inscription
dimanche 1 avril 2007
Statut
Membre
Dernière intervention
13 juin 2019
-
jordane45
Messages postés
27296
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 janvier 2020
-
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
<!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 !



1 réponse

Messages postés
27296
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 janvier 2020
2020
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 offset
 offset: {
      from: "top",
      amount: 20
    },