Show and close information bar with jquery
What Will I Learn?
- You'll learn how to place an informative fixed bar on your site, where you can close whenever you want.
Requirements
- Basic knowledge about HTML.
- Basic knowledge about CSS.
- Basic knowledge about Jquery.
- You have to install / host the jQuery file or you can add jQuery CDN if you don't want to install or host it.
- You have to install / host the Font-Awesome file or you can add Font-Awesome CDN if you don't want to install or host it.
- To try out the code in this tutorial you will need a code editor and browser.
Difficulty
- Basic
Tutorial Contents
This tutorial is very interesting because it teaches you how to put an information bar always visible on your site. Besides this particularity, you also have the possibility to close this information bar.
- Open your code editor
- Create a new file and save as
index.html - Add html base code
<html>
<head>
<title>Show and close toolbar with jquery </title>
</head>
<body>
</body>
</html>
Let's create content for the site to make it possible to scroll.
<html>
<head>
<style>
header{
top: 0px;
background-color:#000;
height: 50px;
color:#fff;
text-align:center;
}
.exampleDiv1, .exampleDiv2, .exampleDiv3{
background-color: #fff;
text-align:center;
padding: 250px 0px 250px 0px;
}
.exampleDiv2{
background-color: #000;
color:#fff;
}
footer{
height: 50px;
background-color:#000;
color:#fff;
text-align:center;
}
</style>
<title>Show and close toolbar with jquery< /title>
</head>
<body>
<header>
<center><p>Head</p></center>
</header>
<div class="exampleDiv1">DIV 1</div>
<div class="exampleDiv2">DIV 2</div>
<div class="exampleDiv3">DIV 3</div>
<footer>
<center><p>Footer</p></center>
</footer>
</body>
</html>
Now we have the site with content.
Let's create our information bar at the end of the page where it is always fixed for the user to constantly see the message.
.bar-info {
height: 70px;
background-color: #e1411d;
position: fixed;
bottom: 0px;
width: 100%;
color:#fff;
z-index: 9;
}
<div class="bar-info">
<div class="container">
<div class="row">
<center> <p class="bar-info-text">Bar Information<a href="#close" class="important-container-close"><i class="close-bar fa fa-times" aria-hidden="true"></i></a></p></center>
</div>
</div>
</div>
To put the possibility of closing the information bar, we will put font-awsome to use it to see the "x" and click on it.
We should put in the < head>< /head> of the page the CDN Font-awsome.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
To use jQuery, we need to install or host it. We can also add jQuery CDN. For more details you can visit an official jquery website. In this tutorial, I use Google's CDN. Add the CDN in the < head> element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
After performing these steps, we get our index.html file like this:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<style>
header{
top: 0px;
background-color:#000;
height: 50px;
color:#fff;
text-align:center;
}
.exampleDiv1, .exampleDiv2, .exampleDiv3{
background-color: #fff;
text-align:center;
padding: 250px 0px 250px 0px;
}
.exampleDiv2{
background-color: blue;
color:#fff;
}
footer{
height: 50px;
background-color:#000;
color:#fff;
text-align:center;
}
.bar-info {
height: 70px;
background-color: #e1411d;
position: fixed;
bottom: 0px;
width: 100%;
color:#fff;
z-index: 9;
}
.bar-info i.fa.fa-times {
float: left;
margin-top: 3px;
color: #fff;
margin-left: 10px;
position: absolute;
}
</style>
<title>Bar information in website with Jquery</title>
</head>
<body>
<header>
<center><p>Head</p></center>
</header>
<div class="exampleDiv1">DIV 1</div>
<div class="exampleDiv2">DIV 2</div>
<div class="exampleDiv3">DIV 3</div>
<div class="bar-info">
<div class="container">
<div class="row">
<center> <p class="bar-info-text">Bar Information<a href="#close" class="important-container-close"><i class="close-bar fa fa-times" aria-hidden="true"></i></a></p></center>
</div>
</div>
</div>
<footer>
<center><p>Footer</p></center>
</footer>
</body>
</html>
Now we will give the functionality of the user clicking on the "x" and the bar disappears.
This event detects the click on the "x" $(".close-bar").on("click", function(event) {});.
When the event detects that you have clicked the "x" it is necessary to indicate the information bar that disappears $(".bar-info").fadeOut();
<script>
$(".close-bar").on("click", function(event) {
$(".bar-info").fadeOut();
});
</script>
The complete code would look like this:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<style>
header{
top: 0px;
background-color:#000;
height: 50px;
color:#fff;
text-align:center;
}
.exampleDiv1, .exampleDiv2, .exampleDiv3{
background-color: #fff;
text-align:center;
padding: 250px 0px 250px 0px;
}
.exampleDiv2{
background-color: blue;
color:#fff;
}
footer{
height: 50px;
background-color:#000;
color:#fff;
text-align:center;
}
.bar-info {
height: 70px;
background-color: #e1411d;
position: fixed;
bottom: 0px;
width: 100%;
color:#fff;
z-index: 9;
}
.bar-info i.fa.fa-times {
float: left;
margin-top: 3px;
color: #fff;
margin-left: 10px;
position: absolute;
}
</style>
<title>Bar information in website with Jquery</title>
</head>
<body>
<header>
<center><p>Head</p></center>
</header>
(html comment removed: div example 1 )
<div class="exampleDiv1">DIV 1</div>
(html comment removed: div example 2 )
<div class="exampleDiv2">DIV 2</div>
(html comment removed: div example 3 )
<div class="exampleDiv3">DIV 3</div>
<div class="bar-info">
<div class="container">
<div class="row">
<center> <p class="bar-info-text">Bar Information<a href="#close" class="important-container-close"><i class="close-bar fa fa-times" aria-hidden="true"></i></a></p></center>
</div>
</div>
</div>
<footer>
<center><p>Footer</p></center>
</footer>
<script>
$(".close-bar").on("click", function(event) {
$(".bar-info").fadeOut();
});
</script>
</body>
</html>
Here you can see the code of this tutorial working. LIVE DEMO
Curriculum
- Tutorial: Minimal Header effect with Jquery
- Tutorial: Jquery animation scroll with anchors
- Tutorial:How to add breadcrumb in wordpress
- Tutorial: How to create a data table with filters and Import & Export data table (Wordpress)
- Tutorial: How to use Lazy Load in Wordpress
- Tutorial: How to use EU Cookie Law (Wordpress)
- Tutorial: How to use tawk.to in wordpress
- Tutorial: Wordpress: Album and Image Gallery Plus Lightbox
- Tutorial: Wordpress: WP Multilang
- Tutorial: How to use disabe comments plugin
- Tutorial: How to use duplicate pages plugin (Wordpress)
Posted on Utopian.io - Rewarding Open Source Contributors
Hey @portugalcoin, your contribution was rejected by the supervisor @mcfarhat because he found out that it did not follow the Utopian rules.
Upvote this comment to help Utopian grow its power and help other Open Source contributions like this one. Do you want to chat? Join me on Discord.
Excellent, very professional as always, this one came just in time, i was looking for this info, thank you :D
Thank you for your words! It's a pleasure to contribute to the open source community.
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Thank you very much.
Hug!
Please change the category from development to tutorials immediately !!!Or it will be rejected.!
When editing the post in utopian does not allow to modify the category. How can I do this?
Your contribution cannot be approved because it does not follow the Utopian Rules.
This contribution is in the wrong category. You should have chosen tutorials instead of development.
You can contact us on Discord.
[utopian-moderator]
It was a mistake, it was my fault.
Next time I'll be careful to select the category well.
Sorry to have done that.