Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Fixed DIV Header Notification Bar on Scroll with Fade in Out Effects

Dec 4, 2012
Introduction
  
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

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 RSS subscribe by email Subscribe by Email

5 comments :

Anonymous said...

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.

Sri Kumarans School said...

where is this implemented ?

Sri Kumarans School said...

where is this implemented ?

shanti said...

nice code.........

Anonymous said...

s

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.