Fixed header notification with show/hide using Jquery
In this article, we learn about how to set fixed header notification bar with show/ hide notification. I need to implement this type of code in some project that time I will do same code on this. You can also check on live project www.vblue.in
Source Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="js/jbar.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.jBar({
type: 'fixed', // Fixed/Static
delay: '1000', // In milliseconds
backgroundColor: '#DB5903', // Background Color
borderColor: '#FFF', // Background Color
buttonTextColor: '#FFF', // Button Text
buttonColor: '#333', // Button Color
buttonColorHover: '#222', // Button Color Hover
calltoAction: ' <h2 align="center">Book your service now   <i class="glyphicon glyphicon-earphone" aria-hidden="true"></i> 8004561000 </h4>', // Call to action text
buttonText: '', // Button Text
buttonLink: '' // Hyperlink from button
});
});
</script>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div class="wrapper">
<div id="main">
<p>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- automaticsize -->
<ins class="adsbygoogle"
style="display: block"
data-ad-client="ca-pub-8436844275140446"
data-ad-slot="5939165016"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</p>
</div>
</div>
</form>
</body>
</html>
Out-Put:-
Note: Please download this code for jquery, css and image
Fixed header notification with show/hide using Jquery
Reviewed by NEERAJ SRIVASTAVA
on
5:33:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
5:33:00 PM
Rating:
No comments: