Amoraboti - Program
Rashed - Uz - Zaman (Rasel)
Home
About Me
Brainstorming
Facebook Fan Page
Contact
Author
I'm
Rz Rasel
From
Bangladesh
Archives
April 2010
May 2010
January 2011
February 2011
January 2012
February 2012
March 2012
Current
Previous Posts
Fixed Bar At The Bottom Like Facebook
Connect to MySQL using C# and Connector/Net
Send Email (smtp.gmail.com) Using C Sharp
Making CSS Rollover Buttons
Get Local Computer IP Address
Get Local Computer IP Address
Find Difference Between Two Dates In C Sharp
Calculating Date Difference in C Sharp
Without SSL connection, Normal SMTP Java
Fetch Mail through a proxy server (Gmail) Java
My Link
Islam And We
My Diary (Bangla)
My Diary (English)
My Lyrics (Bangla)
My Lyrics (English)
My Poem (Bangla)
My Poem (English)
My Story (Bangla)
My Story (English)
General Knowledge
Fun And Jokes
Lyrics (Bangla)
Lyrics (English)
Lyrics (Hindi)
Quotations
Fixed Bar At The Bottom Like Facebook
Saturday, April 10, 2010
FIXED BAR AT THE BOTTOM LIKE FACEBOOK:
<!DOCTYPE HTML>
<html>
<head>
<title>Using CSS Fixed Position Across Browsers</title>
<style type="text/css">
html,
body {
margin: 0px 0px 0px 0px ;
padding: 0px 0px 0px 0px ;
}
#site-body-container {}
#site-body-content {
padding: 15px 15px 15px 15px ;
}
#site-bottom-bar {
background-color: #F0F0F0 ;
border-top: 1px solid #CCCCCC ;
bottom: 0px ;
font-family: verdana, arial ;
font-size: 11px ;
height: 30px ;
position: fixed ;
width: 100% ;
z-index: 1000 ;
}
#site-bottom-bar-frame {
height: 30px ;
margin: 0px 10px 0px 10px ;
position: relative ;
}
#site-bottom-bar-content {
padding: 3px 0px 0px 0px ;
}
#menu-root {
background-color: #E8E8E8 ;
border: 1px solid #D0D0D0 ;
color: #000000 ;
display: block ;
height: 22px ;
line-height: 22px ;
text-align: center ;
text-decoration: none ;
width: 105px ;
}
#menu-root:hover {
background-color: #666666 ;
border-color: #000000 ;
color: #FFFFFF ;
}
#menu {
background-color: #E8E8E8 ;
border: 1px solid #666666 ;
bottom: 32px ;
display: none ;
left: 0px ;
padding: 5px 5px 1px 5px ;
position: absolute ;
width: 200px ;
}
#menu a {
background-color: #E8E8E8 ;
border: 1px solid #FFFFFF ;
color: #000000 ;
display: block ;
margin-bottom: 4px ;
padding: 5px 0px 5px 5px ;
text-decoration: none ;
}
#menu a:hover {
background-color: #666666 ;
border-color: #000000 ;
color: #FFFFFF ;
}
/* -------------------------------------------------- */
/* -- IE 6 FIXED POSITION HACK ---------------------- */
/* -------------------------------------------------- */
html,
body,
#site-body-container {
_height: 100% ;
_overflow: hidden ;
_width: 100% ;
}
#site-body-container {
_overflow-y: scroll ;
_overflow-x: hidden ;
_position: relative ;
}
/* To make up for scroll-bar. */
#site-bottom-bar {
_bottom: -1px ;
_position: absolute ;
_right: 16px ;
}
/* To make up for overflow left. */
#site-bottom-bar-frame {
_margin-left: 26px ;
}
/* To fix IE6 display bugs. */
#menu a {
_display: inline-block ;
_width: 99% ;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
jQuery(function( $ ){
var menuRoot = $( "#menu-root" );
var menu = $( "#menu" );
// Hook up menu root click event.
menuRoot
.attr( "href", "javascript:void( 0 )" )
.click(
function(){
// Toggle the menu display.
menu.toggle();
// Blur the link to remove focus.
menuRoot.blur();
// Cancel event (and its bubbling).
return( false );
}
)
;
// Hook up a click handler on the document so that
// we can hide the menu if it is not the target of
// the mouse click.
$( document ).click(
function( event ){
// Check to see if this came from the menu.
if (
menu.is( ":visible" ) &&
!$( event.target ).closest( "#menu" ).size()
){
// The click came outside the menu, so
// close the menu.
menu.hide();
}
}
);
});
</script>
</head>
<body>
<div id="site-bottom-bar" class="fixed-position">
<div id="site-bottom-bar-frame">
<div id="site-bottom-bar-content">
<a id="menu-root" href="##">Toggle Menu</a>
<div id="menu">
<a href="##">Here is a menu item</a>
<a href="##">Here is a menu item</a>
<a href="##">Here is a menu item</a>
<a href="##">Here is a menu item</a>
<a href="##">Here is a menu item</a>
<a href="##">Here is a menu item</a>
</div>
</div>
</div>
</div>
<!-- ------- -->
<!-- ------- -->
<div id="site-body-container">
<div id="site-body-content">
<cfloop
index="i"
from="1"
to="20"
step="1">
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aliquam dictum enim in mauris
luctus convallis. Aliquam erat volutpat.
Suspendisse potenti. Duis blandit, urna vitae
feugiat porttitor, risus est ornare metus, at
dignissim urna velit id enim. Donec lectus nisi,
consectetur eget sollicitudin id, bibendum
laoreet velit.
<p>
</cfloop>
</div>
</div>
</body>
</html>
RZ RASEL
Amoraboti
IF ERROR – PLEASE ACKNOWLEDGE ME. (RZ RASEL)
Labels:
JavaScript
posted by Rz Rasel At
8:21 AM
,
0 Comments:
Post a Comment
<< Home
Problem In Font
Download then zip file unzip and install in your system. Or normal font file just install in your system font folder. Rz Rasel
Bangla Font
Bangla Font
Find Me In Facebook
aaaa
aaaa
Copyright © 2010 - Amoraboti - Program. ® All right reaserved. Design and developed by:-
Rz Rasl
Post a Comment