Introduction:
Here I will explain how to display jQuery fixed DIV Header Notification Bar with Fade in fade out effects on scroll.
Here I will explain how to display jQuery fixed DIV Header Notification Bar with Fade in fade out effects on scroll.
Description:
In previous posts I explained jQuery Convert UpperCase to LowerCase, Disable Future dates in Calendar, Show multiple months in datepicker, jQuery get cursor position and many articles relating to JQuery and datepicker. Now I will explain how to display jQuery fixed DIV Header Notification Bar with Fade in fade out effects on scroll like as shown below
In previous posts I explained jQuery Convert UpperCase to LowerCase, Disable Future dates in Calendar, Show multiple months in datepicker, jQuery get cursor position and many articles relating to JQuery and datepicker. Now I will explain how to display jQuery fixed DIV Header Notification Bar with Fade in fade out effects on scroll like as shown below
 |
We
have one jQuery plugin jBar by using that we can implement this functionality
easily. For that you need to write the code like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery fixed DIV Header Notification Bar with Fade in fade
out effects on scroll</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jbar.min.js"></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: 'jBar
Plugin! A simple and lightweight notification banner.', // Call to action text
buttonText: 'Download
it!', // Button Text
buttonLink: 'http://www.aspdotnet-suresh.com'
// Hyperlink from button
});
});
</script>
<style type="text/css">
* {margin:0;padding:0;}
body {font:400 12px/1.625 "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;font-smoothing:antialiased;text-rendering:optimizeLegibility;color:#444;background:#F0F0ED;}
.wrapper {max-width:1000px;width:95%;margin:0 auto;position:relative;}
#main p {padding:0;margin:10px 0 0;}
</style>
</head>
<body>
<form id="form1"
runat="server">
<div class="wrapper">
<div id="main">
<p>
Welcome to Aspdotnet-Suresh.comWelcome to
Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.comWelcome to
Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.comWelcome to
Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.comWelcome to
Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.comWelcome to
Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.comWelcome to
Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.comWelcome to
Aspdotnet-Suresh.com
</p>
</div>
</div>
</form>
</body>
</html>
|
If
you observe above code in header section I added some of script files and css
file by using those files we will get notification bar with fade in fadeout
effects. To get those files download attached sample code or get it from here jBar Plugin
Demo
 |
Download
Attached Sample
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
|
|
5 comments :
sir i need code to drag an image from data list and drop it in a particular div or image icon, and on mouse clicking over next image in data list my image which i dragged first should come back to it original place. pls help me for that.
where is this implemented ?
where is this implemented ?
nice code.........
s