Jquery, bootstrap notification

Fermé

Jotech Messages postés 712 Date d'inscription dimanche 1 avril 2007 Statut Membre Dernière intervention 4 janvier 2023 - 26 mai 2015 à 14:36
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 - 27 mai 2015 à 00:54

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 !

A voir également:

Jquery, bootstrap notification
Activer notification visite profil facebook - Guide
Notification android - Guide
Historique notification android - Guide
Notification messenger sans message ✓ - Forum Logiciels
Notification anniversaire facebook - Forum Facebook

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
27 mai 2015 à 00:54

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
    },

Discussions similaires

Pourquoi je n'arrive plus à voir les anniversaires de mes amis sur Facebook ?

Notification Messenger Lite mais pas de nouveaux messages. Bug ?

Notifications reçues mais pas de chat sur Snapchat

Message : votre iPhone a été piraté. Que faire ?

Notification Snapchat mais aucun message n’apparaît

Discussions similaires

Newsletters