Twitter Bootstrap Question posted in

notification section like in Facebook and Twitter – Twitter bootstrap

I would like to ask how do I make a notification section like in Facebook and Twitter where when we click the button it shows out all the notification. I am currently using BootStrap and Jquery to develop a social app. Anyone have tutorials or can give me sources on how to do this? thanks

Tags:

2

Answers


  1. 0

    If you want to send notifications to someone I would use something languages like SQL and PHP but if you don’t want to send anything to anyone heres an example for you:

    the key to this is using jquery’s val() to get the value of an input then append something to the screen with that text with the text method again.

    Heres the code to do it:

    TIP: research all parts of the code you dont understand I recommend searching and putting w3schools because its a very good place to learn

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
	<meta content='width=device-width, initial-scale=1' name='viewport'>
	<link href='/style.css' media='all' rel='stylesheet' type='text/css'>
	<link href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
	<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
	<script>
$(document).ready(function() {
var text;
var newDiv;
  $("button").click(function() {
    text = $("input").val();
    newDiv = $("<div/>");
    $(newDiv).text(text);
    $(newDiv).addClass("newDiv");
    $(".textBox").append(newDiv);
  });
});
	</script>
	<style>
.textBox {
  width: 800px;
  height: 200px;
  overflow: auto;
  background-color: #d1d1e0;
  border: 2px solid #6699ff;
  border-radius: 5px;
}
.newDiv {
  display: block;
  background-color: #5d5d89;
  margin-bottom: 5px;
  border-radius: 5px;
}
p {
  float: left;
}
	</style>
  </head>
  <body>
  <div class="textBox"></div>
  <p><input type="text" placeholder="type something"></p>
  <button>Enter</button>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    If you want the notifications to hide its easy. Just use ‘fadeToggle()’ and a button like this:

    <!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
	<meta content='width=device-width, initial-scale=1' name='viewport'>
	<link href='/style.css' media='all' rel='stylesheet' type='text/css'>
	<link href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
	<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
	<script>
$(document).ready(function() {
var text;
var newDiv;
  $(".show").click(function() {
    $(".textBox, .newDiv").fadeToggle();
  });
  $(".enter").click(function() {
    text = $("input").val();
    newDiv = $("<div/>");
    $(newDiv).text(text);
    $(newDiv).addClass("newDiv");
    $(".textBox").append(newDiv);
  });
});
	</script>
	<style>
.textBox {
  width: 800px;
  height: 200px;
  overflow: auto;
  background-color: #d1d1e0;
  border: 2px solid #6699ff;
  border-radius: 5px;
  display: none;
}
.newDiv {
  display: block;
  background-color: #5d5d89;
  margin-bottom: 5px;
  border-radius: 5px;
}
.enter {
  float: left;
}
p {
  float: left;
}
	</style>
  </head>
  <body>
  <div class="textBox"></div>
  <p><input type="text" placeholder="type something"></p>
  <button class="enter">Enter</button>
  <button class="show">show notifications</button>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search