Now I Am Here With A New JQuery Code With A Hope That You Will Surely Like It. Today I Will Share You My Code That How To Add Simple And Stylish Floating DIVs To Left Or Right In Your Blog And WebSite Using J-Query And Having A Working Close Button To Add Any Data Into The DIV Easily? Actually Many Friends Were Asking About Something Like This So Here It Is.
This is a simple code in this a DIV will remain floating with your browsers sides that will contain your data with a close button. It’s 99.99% likes the position”fixed code type but it has j-query effect that will make it more awesome and another cool thing that it does not contain position:fixed that will help you in many way.
This is an awesome code that can be used in many ways like adding some nice hot news on your webpage or something like giveaway. In this procedure you can attract more visitors to the DIV data. Now with out any more preface just proceed to the code by going through live demo and the list of features in quick way.
Table of Contents
Features:
1.) Single J-Query 1.7.2 Added. (Don’t Add If You Have It)
2.) Pure HTML-CSS-JavaScript-J-Query Code.
3.) Simple Code With Easy Installation.
4.) You Can Add Anything In The Floating DIV.
5.) No Position Fixed Code Used.
6.) J-Query Sliding Effect.
7.) With Simple Close Button.
8.) Awesome In Working And Loading.
9.) SEO Due To Relative Position Not Fixed.
10.) Cross Browser. (IE6+, etc)
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT“
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.
For Right Side DIV:
<!-- EXE-Floating Right DIV Start -->
<div id='exe-floating-div' position='absolute' z-index='99999'>
<script src='https://code.jquery.com/jquery-1.7.2.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function(){$('#exe-floating-div-content-right')
.animate({top: $(window)
.height() - $('#exe-floating-div-content-right')
.height()}, 5000, function() {});$(window)
.scroll(function(){$('#exe-floating-div-content-right')
.stop().animate({ top: $(window).scrollTop() + $(window)
.height() - $('#exe-floating-div-content-right')
.height()}, 500);});$('#exe-floating-div-close-right')
.click(function(){$('#exe-floating-div-content-right')
.hide()});});
</script>
<div id='exe-floating-div-content-right' style='position: absolute; z-index: 99999; right: 0px; top: 1000px; visibility: visible;'>
<!-- EXE-Floating Right DIV Close Button Start -->
<div style='position: relative; width: 100%; visibility: visible;'>
<div style='position: relative; background-color: rgb(204, 204, 204); height: 15px; width;100%; visibility: visible;' align='right'>
<div id='exe-floating-div-close-right' style=' position: relative; background-color: rgb(204, 204, 204); display: inline; height: 15px; font-family: verdana; color: rgb(255, 255, 255); font-weight: bold; font-size: 9px; text-decoration: none; cursor: pointer; overflow: hidden; visibility: visible; '>
[X]
</div>
</div>
</div>
<!-- EXE-Floating Right DIV Close Button End -->
<!-- EXE-Floating Right DIV Data Start -->
+++Your Desired Data In HTML, Text, Photo, Video, Frame etc+++
<!-- EXE-Floating Right DIV Data End -->
</div>
</div>
<!-- EXE-Floating Right DIV End -->
For Left Side DIV:
<!-- EXE-Floating Left DIV Start -->
<div id='exe-floating-div-left' position='absolute' z-index='99999'>
<script src='https://code.jquery.com/jquery-1.7.2.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function(){$('#exe-floating-div-content-left')
.animate({top: $(window)
.height() - $('#exe-floating-div-content-left')
.height()}, 5000, function() {});$(window)
.scroll(function(){$('#exe-floating-div-content-left')
.stop().animate({ top: $(window).scrollTop() + $(window)
.height() - $('#exe-floating-div-content-left')
.height()}, 500);});$('#exe-floating-div-close-left')
.click(function(){$('#exe-floating-div-content-left')
.hide()});});
</script>
<div id='exe-floating-div-content-left' style='position: absolute; z-index: 99999; left: 0px; top: 1000px; visibility: visible;'>
<!-- EXE-Floating Left DIV Close Button Start -->
<div style='position: relative; width: 100%; visibility: visible;'>
<div style='position: relative; background-color: rgb(204, 204, 204); height: 15px; width;100%; visibility: visible;' align='left'>
<div id='exe-floating-div-close-left' style=' position: relative; background-color: rgb(204, 204, 204); display: inline; height: 15px; font-family: verdana; color: rgb(255, 255, 255); font-weight: bold; font-size: 9px; text-decoration: none; cursor: pointer; overflow: hidden; visibility: visible; '>
[X]
</div>
</div>
</div>
<!-- EXE-Floating Left DIV Close Button End -->
<!-- EXE-Floating Left DIV Data Start -->
+++Your Desired Data In HTML, Text, Photo, Video, Frame etc+++
<!-- EXE-Floating Left DIV Data End -->
</div>
</div>
<!-- EXE-Floating Left DIV End -->
Customization:
1.) Just Change +++Your Desired Data In HTML, Text, Photo, Video, Frame etc+++ With Your Desire.
2.) Do More According To Your Desire.(Feel Free To Ask)
3.) Save And Done.
wow really cool bro,,keep posting useful tips,thanks for posting this.you can now Automatically add URL Resources On Copied Articles
You Are Welcome To Visit Us And Leaving Your Review…