How do i get a fixed sidebar like the one containing the social buttons on this site:
http://www.tripwiremagazine.com/2012/11/social-media-buttons-and-icon-sets.html
I want my sidebar to be fixed to the top of my screen when i scroll down but on the top of the page there must be an absolute position it so that it stops following the browser as i scrool.
Currently I am just using:
#sidebar { position:fixed; }
But this does not give it an absolute position when reaching the top of the page.
Thank you
html
<div class="wrapper"><div class="abs" id="sidebar"></div></div>
CSS
.abs { position: absolute; }
.fixed {
position: fixed;
top: 30px !important;}
#sidebar {
top: 150px;
left: 0;
height: 100px;
width: 20px;
background-color: #ccc;}
.wrapper {
height: 1500px;
padding: 20px;}
jQuery
$(document).scroll(function() {
var scrollPosition = $(document).scrollTop();
var scrollReference = 10;
if (scrollPosition >= scrollReference) {
$("#sidebar").addClass('fixed');
} else {
$("#sidebar").removeClass('fixed');
$("#sidebar").addClass('abs');
};
});
DEMO of this code:
http://jsfiddle.net/B3jZ5/6/
<div class="wrapper">
is the example of content.
You can also try this plugin:
https://code.google.com/p/sticky-panel/
Related
I am creating a web based billing system, in which I have to generate bill pdfs of multiple pages.
The problem is: I want to print the footer at the bottom of last print page.
#footer{
position: fixed;
bottom: 0px;
width:100%;
}
This code is printing footer on every page, but I want it only on last page.
Add this to your stylesheet, see if it helps you:
#media print {
body {
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
}
Reference: html footer at last page
In addition to #bhansa answer
<style>
#media print {
body {
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
.empty {
height: 150px;
width: 100%;
}
}
</style>
<body>
<div class="content">Somebody</div>
<div class="empty"><div>
<div id="footer" style="height=150px; width=100%">Footer</div>
</body>
In order not to overlap the content, add an empty div after the content that matches the height of the footer
When I enter my website and resize the browser to make it smaller and then scroll horizontally to the right, half of the nav bar is getting cut off, I want the nav bar to show all my links even if I have to scroll to the right.
Why is this happening?
here is my css:
#header{
width:100%;
}
.head{
width: 100%;
min-width: 1350px;
height: 100px;
position: fixed;
top: 0;
left: 0;
background-color:#303030;
}
nav{
width:655px;
margin-top:20px;
float:right;
border:2px solid yellow;
}
$(function(){
var shrinkHeader = 100;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if ( scroll >= shrinkHeader ) {
$('.head').addClass('shrink');
$('#logo').hide();
$('#postLogo').addClass('now').show();
}
else {
$('.head').removeClass('shrink');
$('#logo').show();
$('#postLogo').addClass('now').hide();
}
});
function getCurrentScroll() {
return window.pageYOffset;
}
});
The structure of my html is
<body>
<div class="divHead"></div>
<div class="divBody"></div>
</body>
What I want to do is give a fixed height to the divHeader, let's say 100px, and let the divBody expand to the end of the page exactly, without scroll bars for the browser.
So, if the user's window is 1000px, the body will be 900px and etc...
If i set the divBody height to 100%, it will take the 100% of the body, which means will create a scroll bar in the page.
Thanks in advance,
You could use absolute positioning: FIDDLE: http://jsfiddle.net/Z4vNN/2/
.divHead {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background-color: red;
}
.divBody {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
background-color: green;
overflow: auto;
}
.divBody {
height: calc(100% - 100px);
}
#crush is certainly right, but if absolute positioning messes up other page elements you can avoid it by just having the elements displayed as blocks : http://jsfiddle.net/kF5wQ/
#header {
height:100px;
width:100%;
background:red;
display:block;
}
#container {
height:100%;
width:100%;
background:blue;
display:block;
overflow:visible;
}
I have a div of width: 1000px and inside that is a child which I wish to span the entire width of the browser window.
The trouble is, I don't know how to override previous width inheritance.
I could just position this outside of my container div, but that would be a huge inconvenience and workaround, unless of course this is equally as troublesome.
Markup:
<div class="centreContainer">
<div class="menuContainer"></div>
</div>
CSS:
html, body
{
margin: 0;
padding: 0;
}
.centreContainer
{
margin: auto;
width: 1000px;
}
.menuContainer
{
width: <what to do>;
height: 420px;
}
Preferably I would like a CSS only workaround, I was thinking of some stupid Javascript solution where you get the width of the browser window, then set the width of the menuContainer to:
<variable> / 10 (10 because 1000 / 100 = 10, where 1000 is the width of the centre container)
And have the menuContainer set on margin: auto; so it is centered.
Just use position:
.menuContainer
{
position: absolute;
width: 100%;
height: 420px;
}
Just use position:absolute shown in this jsfiddle
.menuContainer
{
width: 100%;
height: 420px;
position: absolute;
}
you could try placing your .menuContainer as absolute position into a relative parent position . JSfiddle
#root{
display:block;
position: relative;
}
.menuContainer{
position:absolute;
top: 50px;
left: 0;
}
I want to make a screen unclickable by spreading a think transparent layer of any color over the screen on the click event of a button using CSS.
Please help with this.
Using jQuery and CSS, you could define a class .spread :
.spread {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
opacity: 0.5;
z-index: 200;
}
And when you click on the button:
$('body').append("<div class='spread'></div>");
This would add the div to the body, and the div would position itself in the top left corner. You may also have to put:
body {
margin: 0;
}
Example: http://jsfiddle.net/jcolicchio/TuP2A/
It should be super easy
HTML
<body>
some code here
<div class=overlay><div>
</body>
CSS
.overlay {
position: fixed;
z-index:100;
top:0;right:0;bottom:0;left:0;
background: rgba(0,0,0,.0);
}