Announcement:

  Hello, We Changed Our Cloth, How It Is Looking? Leave Your Feedback At Our Page.

Wednesday, January 23, 2013

How To Add Simple Floating DIV Using J-Query In Blog/Site

This Article Was Live On: Wednesday, January 23, 2013 And Till Now Have2 comments.
How To Add Simple Floating DIV Using J-Query In Blog/Site

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.

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='http://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='http://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.

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



2 comments :

  1. wow really cool bro,,keep posting useful tips,thanks for posting this.you can now Automatically add URL Resources On Copied Articles

    ReplyDelete
    Replies
    1. You Are Welcome To Visit Us And Leaving Your Review...

      Delete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.