- Dec 18, 2010
- 2,637
- 2,389
A few of these may already exist but in this tutorial I'm going to show you how to do the Twitter drop down alert in CSS and jQuery.
What you need:
Now, we need to design the bar:
Now we have to code the function to make it work
Now you need a form to be able to run the code
Also, don't forget to call the drop_down_alert div!
Now you should end up with something like this:
Here is a demo of it:
Hope it helped, I sort of rushed the tutorial lul.
What you need:
- to be good at copying and pasting code
- to import the jQuery library
- to import the jQuery UI library
Code:
http://code.jquery.com/jquery-latest.js
Code:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.jsNow, we need to design the bar:
Code:
<style type="text/css">
body {
font-family: "Verdana";
font-size: 11px;
color: #000000;
background-color: #dbdbd9;
}
div#drop_down_bar {
width: 100%;
height: 60px;
padding-top: 20px;
position: fixed;
top: 0;
left: 0;
z-index: 9999 !important; /*makes this layer always on top!*/
background-color: rgba(255, 255, 255, .7);
font-family: Arial, Helvetica, sans-serif;
font-size: 26px;
color: #000000;
text-align: center;
border-bottom: 2px solid #cccccc;
display: none;
}
div.form {
margin-top: 150px;
}
</style>Now we have to code the function to make it work
Code:
<script type="text/javascript">
function DDA( message )
{
$("div#drop_down_bar").text(message).slideDown(350, function(){
$(this).effect("bounce", { times: 3 }, 250, function(){
$(this).delay(4000).slideUp("slow");
});
});
}
$(function(){
$("input[type='button']#go").click(function(){
DDA($("input[type='text']#message").val());
});
});
</script>Now you need a form to be able to run the code
Code:
<div class="form">
<input type="text" name="message" id="message" placeholder="Enter a message here..." /> <input type="button" value="Go" id="go" name="go" />
</div>Also, don't forget to call the drop_down_alert div!
Code:
<div id="drop_down_bar"></div>Now you should end up with something like this:
PHP:
<html>
<head>
<title>jQuery Drop Down Alert</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
function DDA( message )
{
$("div#drop_down_bar").text(message).slideDown(350, function(){
$(this).effect("bounce", { times: 3 }, 250, function(){
$(this).delay(4000).slideUp("slow");
});
});
}
$(function(){
$("input[type='button']#go").click(function(){
DDA($("input[type='text']#message").val());
});
});
</script>
<style type="text/css">
body {
font-family: "Verdana";
font-size: 11px;
color: #000000;
background-color: #dbdbd9;
}
div#drop_down_bar {
width: 100%;
height: 60px;
padding-top: 20px;
position: fixed;
top: 0;
left: 0;
z-index: 9999 !important; /*makes this layer always on top!*/
background-color: rgba(255, 255, 255, .7);
font-family: Arial, Helvetica, sans-serif;
font-size: 26px;
color: #000000;
text-align: center;
border-bottom: 2px solid #cccccc;
display: none;
}
div.form {
margin-top: 150px;
}
</style>
</head>
<body>
<div id="drop_down_bar"></div>
<div class="form">
<input type="text" name="message" id="message" placeholder="Enter a message here..." /> <input type="button" value="Go" id="go" name="go" />
</div>
</body>
</html>Here is a demo of it:
You must be registered for see links
Hope it helped, I sort of rushed the tutorial lul.
