My web template is based on div tags. I want to freeze header part (Header, logo etc), I mean when you scroll the page the header should be in fixed position.
<!--Header and Logo -->
<div id="outer">
<div id="header">
<h1>Some Application</h1>
<img src="/media/images/logo.gif" height="95" width="190">
</div>
Here is my css
#outer
{
}
/* Header */
#header
{
height: 95px;
background-image: url();
background-repeat:no-repeat;
background-position: bottom left;
padding-left: 20px;
padding-top: 15px;
padding-bottom: 15px;
}
Can some one help me? Thanks
Try using the position: fixed; property. Here is an example fiddle:
http://jsfiddle.net/austinbv/2KTFG/
You want position: fixed.
A nifty CSS attribute:
#outer {
position: fixed;
}
Freeze header at top (with correct header widths and alignment)
position:fixed; makes the header sit still but is far short of all the behavior I'd expect from a header - stick at the top of the screen when the actual table headers are scrolled up off the screen, and keep the widths and html of the frozen header synced with the actual table. This solution...
declares a function resizeHdr() that will iterate through the tblData first row <th>'s and grab existing width and HTML
sets global variables for the window and placeholder for how far down the screen the tblData top is
on $ready, inserts a new, hidden shell table that at the top of the <body>
sets the placeholder
grabs width, margins from tblData
calls resizeHdr() to populate the hidden cloned table
sets a watcher for scrolling: y-scrolling shows the cloned header when the top of tblData (main table) passes the screen top and hides it again when the bottom of the table passes above the top of the screen; and x-axis scrolling moves the cloned header sideways because position:fixed is, well, fixed.
sets a watcher for when the the window is resized to keep the widths of the cloned table in sync with tblData
<html>
<script type="text/javascript" src="jquery.min.js"></script><!-- load before freeze header -->
<script type="text/javascript">
var distance = 0, $window = $(window);
function resizeHdr(){
$("#tblDataHdr").css("width", $("#tblData").css("width"));
var oTr=$("#tblDataHdrTr").html("");//short var for frozen header row
$("#tblData tr").first().find("th").each(function(i){//loop through header to mimic
oTr.append('<th style="width:'+$(this).css("width")+' !important">'+$(this).html()+'</th>');//copy content with forced width
});
}
$(function(){
$("body").prepend(// stuff frozen header table html into the page just inside/at top of <body>
'<table class="'+$("#tblData").attr("class")+
'" style="display:none;position:fixed;background-color:white;z-index:10;'+$("#tblData").attr("style")+
'" id="tblDataHdr">'+
'<tr id="tblDataHdrTr" class="" style=""></tr></table>'
)
distance=$('#tblData').offset().top;
var oTr=$("#trHoldHdr");//stuff the frozen header
$("#tblDataHdr").css({"margin-left":$("body").css("margin"),"margin-top":-parseInt($("body").css("margin"))+"px"});//position frozen hder
$("#tblData tr:first").find("th").each(function(i){//populate <th>
oTr.append("<th>"+$(this).html()+"</th>");
});
resizeHdr();
});
$(window).scroll(function(){
$("#tblDataHdr").css("left", -$(this).scrollLeft());//frozen hdr pos fixed doesn't move w/ scrolling so this keeps it lined up (w/o "-" header slides twice as fast out to the right)
if($window.scrollTop() >= distance &&
$window.scrollTop() <= distance + 1*$("#tblData").css("height").replace(/px/,"")){
$("#tblDataHdr").css("display","");// Hdr has reached the top
}else{
$("#tblDataHdr").css("display","none");// Hdr below top
}
});
$(window).resize(function(){
resizeHdr();
});
</script>
<body>
<table id="tblData"><thead>
<tr><th><b style="color:red;">col 1</b></th><th>Linked Wide Column Header</th><tr>
</thead><tbody>
<tr><td>1234567890 1234567890 1234567890</td><td>xyz</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
</tbody></table>
<div style="height:300px;">Below table</div>
</body>
</html>
Related
I have a top navigator, and an iframe below the navigator which load the content.
The layout is kind of like
<body>
<div style="text-align:middle">
<div id="nav"></div>
<iframe></iframe>
</div>
</body>
The navigator is set to fixed width to match the width of iframe content which is not full screen width. So that the navigator and the iframe are aligned at both sides.
But when iframe's height grows beyond the screen, the vertical scroll bar for the iframe shows up and the the iframe becomes a little left(no longer in the absolute horizontal position) and not aligned with the top navigator.
How could I make the iframe always showing at the center even with a vertical bar?
I think this should be a common issue but haven't searched out a similar question here...
Edit 1:
Attach a full sample here to illustrate this question.Here index is the main page, iframe2.html is a frame without vertical bar and iframe.html is the one with a bar. The blue block(iframe) is not aligned with the other two:
index.html:
<html>
<head></head>
<style type="text/css">
iframe {
width : 100%;
padding : 0;
margin: 0 auto;
display : block;
}
</style>
<body>
<div style="text-align:center;margin:0 auto;overflow:hidden">
<div style="background-color:red;width:900px;margin:0 auto;padding:8px 0 8px 0">
<span>test</span>
</div>
<iframe frameborder="0" scrolling="auto" src="iframe2.html" style="height:200px;"></iframe>
<iframe frameborder="0" scrolling="auto" src="iframe.html" style="height:100%;"></iframe>
</div>
</body>
</html>
iframe2.html
<html>
<head></head>
<body style="padding:0px;margin:0px;">
<div style="width:900px;height:190px;background-color:green;margin:0 auto"></div>
</body>
</html>
iframe.html
<html>
<head></head>
<body style="padding:0px;margin:0px;overflow-y:scroll">
<div style="width:900px;height:2000px;background-color:blue;margin:0 auto"></div>
</body>
</html>
Result:
You can center the iframe using css,
iframe {
margin: 0 auto;
display: block;
}
See the example: https://jsfiddle.net/bnby6umd/
After my comment (as this seemed to help you with the edits you have made):
Perhaps always force scrollbar even when it is not needed, and then align the navbar to that? body { overflow-y: scroll; }
and further to your reply, I would suggest the simplest way to keep the elements aligned would be to ensure they are the same width. As you are now forcing the scrollbar permanently, perhaps the easiest way to do this would be to add to the width of the first element, or remove from the width of the second, to account for the width of the scrollbar.
Although this would be very browser dependant as each browser may use a slightly different width scrollbar, as per this article, I suggest altering whichever width by 17 pixels, and see if that achieves the effect you are after.
UPDATE
Apologies, I misunderstood what you were after. The reason you are experiencing this issue is because you are getting confused between styling the iframe element and the content within the document it is displaying.
By setting the <div> within the 'iframe.html' files to a width of 900px, you are only styling the content being displayed. The 'outer' iframe element is being styled to 100% width, and so will span the full width of the window. Because of this, the centered content will be offset by the horizontal scrollbar, giving the appearance of not being aligned - however the actual iframe is not moving at all.
It is only possible to align the edges of two elements, regardless of their position, is for them to have the same width (obviously, as otherwise the edges could never line up). To do this, style the <iframe> to be of the correct width - what you do with the content behind that is then unimportant. This way, the width of the scrollbar will then be taken into account automatically, and the total width adjusted accordingly.
Basically, in the styling for the iframe, change width: 100%; to width: 900px;.
Here's a Fiddle.
I've tried to create a diagram to help explain:
On the left the content is offset by the scrollbar, whereas on the right, the element is styled and centered, not the content, and so the scrollbar just overlaps the content.
You may also like to take a look at some documentation and tutorials for iframes.
I'm creating a calendar component with my own HTML/CSS.
It can have multiple categories across it's header horizontally (x-axis) and it will have up to 24 time slots down it's side vertically (y-axis).
The category headers must always be visible when scrolling vertically and the time slots must always be visible when scrolling horizontially.
How can I achieve this via css?
See screenshot for what I want (Image more tracks across header that results in content overflow).
Maybe take this as my sinple html structure:
<div class="calendar">
<div class="calendarColumnHeaders"></div>
<div class="calendarGrid">
<div class="timeSlotsColumn"></div>
<div class="tracksContainer"></div>
</div>
</div>
Thanks
Give <div class="tracksContainer"></div> an extra class called stick
add this Css:
.stick {
position:fixed;
top:0px;
}
And unfortunately, you do need some Jquery
jQuery – Calculates the position of the sticker div and makes its position fixed if the page has scrolled that far.
$(document).ready(function() {
var s = $(".tracksContainer");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
overflow-x: scroll; //horizontal
overflow-y: scroll; //vertical
Consider the following snap on my site.
The area in red is a table that's being rendered dynamically and is in a separate div. The bottom 3 rows are in a different tables in a different div which is static. As these two are basically different tables, the check boxes don't align themselves. These divs are part of a liquid layout and are in the left hand column. Is there a way to align them without fixing the table, row and column widths? Or maybe fool those two tables to believe that they are actually one and align them?
Here is the structure
<div id='dynamic_in_red_border'>
<table id="one">
</table>
</div>
<div id="bottom">
<table id="static">
</table>
</div>
Hope my question is clear.
PS: the red box is just to make my point, its not there on the actual UI
You can dynamically insert rows using jQuery or pure JS. I'll do jQuery for now:
HTML:
<table id="foo">
<tr><td>foo</td></tr>
</table>
JavaScript (with jQuery):
var td = $('<td>').html('bar');
var tr = $('<tr>').append(td);
$('table#foo').append(tr);
I would have thought this should work:
<style>
div.container {display:table;} /* For a container including both tables */
table {display:table-row-group;}
/* Redundant, but just putting here for experimenting */
tbody {display:table-row-group;}
tr {display:table-row;}
td {display:table-cell;}
/* Add some visible borders */
div, td {border: inset black 2px;}
</style>
...but from my tests in Chrome and Firefox, it only works when the file is true XHTML (with XHTML extension or explicit application/xhtml+xml content-type header) or pure XML (.xml extension), and only if there is a single container div.
I haven't tested this but this is what I would try.
You could try wrapping both table container divs in a div (#tables_container), that has position:relative, then give both current divs width 100%. So something in the lines of
#tables_container {position:relative; width: 20%; }
/* width to be the left column width*/
#dynamic_in_red_border table,
#bottom table {width: 100%;}
<div id="tables_container">
<div id='dynamic_in_red_border'>
<table id="one">
</table>
</div>
<div id="bottom">
<table id="static">
</table>
</div>
</div>
After getting the table-widths to match, you could just give the check-box cells text-align: right. But if you want to align the table cells too, it gets more difficult.
I have a div element that at the beginning is hidden. It appears when a button is clicked. the problem is that this div has a scroll and when it appears, it is at the end of scroll. How can I fix this?
The code is something like this:
<div style="width: 412px; height: 351px; overflow: auto; position: relative;">
<div style="width: 540px;">
Here is a form
</div>
</div>
The first div is that is hidden at the beginning.
On your button that displays the div, add this javascript to set the div to be scrolled to the top.
document.getElementById('id').scrollTop = 0;
Per your comment, if you want to set the scroll without modifying the button's code, you could try running it on page load:
<body onload="javascript: document.getElementById('id').scrollTop = 0;">
Or, you could run it at the bottom of the page:
<script type="text/javascript">
document.getElementById('id').scrollTop = 0;
</script>
I would suggest showing your code, providing a link, or creating a test page for people to view and debug. It's difficult to see what's going on without some context.
Here's an example that, I believe, shows what you want: http://jsbin.com/emoji4/edit
This uses the jQuery library, so I'm not sure it will meet your needs.
<html>
<head>
<style type="text/css" rel="stylesheet">
* {margin:0;padding:0;}
div#box {background-color:green;width:1000px;}
/* #box {position:absolute;top:0;right:0;} */
/* #box {position:absolute;top:0;left:0;} */
/* #box {float:right;} */
#box {float:left;}
.clearer {clear:both;}
</style>
</head>
<body>
<div id="box">
asdafdsf
</div>
<div class="clearer"></div>
</body>
</html>
Uncomment the first float left id with the float right one and you will see. I left my tried solutions commented out as well.
You should have a full repro from a copy and paste.
I don't believe there is any way around this without using javascript. The browser renders a page relative to the top-left corner of that page, so anything positioned above or to the left of that 0,0 point is effectively off-screen. All overflow happens to the bottom and the right. It's the same way with content inside of any block element. So if you have an item positioned relative to the right side of the page, wider than 100% width. The part to the left of the 0,0 origin point will simply be offscreen.
I'd love for someone to prove me wrong though.
Here's a javascript solution that works:
<html>
<head>
<style type="text/css" rel="stylesheet">
* {margin:0;padding:0;}
div#box {background-color:green;width:1000px;}
#box {position:absolute;top:0;left:0;}
.clearer {clear:both;}
</style>
</head>
<body>
<div id="box">
asdafdsf
</div>
<div class="clearer"></div>
<script type="text/javascript">
function layout() {
if( typeof( window.innerWidth ) == 'number' )
this.screenWidth = window.innerWidth;
else //patch for IE
this.screenWidth = document.body.clientWidth;
this.el = document.getElementById('box')
if (this.el.offsetWidth > this.screenWidth)
window.scroll(this.el.offsetWidth,0);
else
this.el.style.left = (this.screenWidth - this.el.offsetWidth) + 'px';
}
function eventListener(el,action,func) {
if (el) {
if (el.addEventListener)
el.addEventListener(action, func, false);
else if (el.attachEvent)
el.attachEvent('on' + action, func);
}
}
eventListener(window,'resize',layout);
layout();
</script>
</body>
</html>
I had (what I think may be) a similar issue where I wanted to right-align a canvas element that is wider then the div that holds it. The div is about 300px, the canvas element about 1000px.
Using float: right, the canvas was right aligned but the scrollbars on the div disappeared.
I solved this with jQuery using scrollLeft() to set the initial scroll based on the div and canvas widths, similar to:
$("#div").scrollLeft(canvas.width() - div.width() )
I had this problem. I solved it by making the inner contents display:inline-block, then the outer container text-align:right. The inner content gets 'floated' right (as if it was inline text) but the scrollbar still remains. You have to reset the text-align on the inner content or all its content gets aligned right too.
If your inner content doesn't like being inline-block, then you're stuck with other solutions.