Develop Reference

How to add an auto incremental page number for every printed page?

I'm looking for a way to put an auto incremental page number for every printed page, I prefer to achieve that merely using CSS but I appreciate it if you offer any solution using JavaScript.
I utilized counter-reset to create a counter then I used counter-increment as it stated in W3Schools, it works fine if there are multiple elements, for instance if we have 10 <li>s but if I have only one <div class="page-footer"></div> which is going to be iterated at the bottom of every single page at print, it won't work as it used to work in Firefox.
For more clarification, take a look at following sample and click on Print me button, (you can save it as XPS to simulate printing):
body{
counter-reset: page;
}
.page-header, .page-header-space {
height: 100px;
}
.page-footer, .page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page-footer:after {
counter-increment: page;
content: counter(page)
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page {
page-break-after: always;
}
#page {
margin: 20mm
}
#media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}
<div class="page-header" style="text-align: center">
I'm The Header
<br/>
<button type="button" onClick="window.print()" style="background: pink">
PRINT ME!
</button>
</div>
<div class="page-footer">
I'm The Footer, Page #
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div class="page">PAGE 1</div>
<div class="page">PAGE 2</div>
<div class="page" style="line-height: 3;">
PAGE 3 - Long Content
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
suscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales rutrum.
Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque. Nunc vel
lorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod massa blandit
pharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean commodo
mollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum orci, non accumsan
sem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam. Vestibulum lectus
justo, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc luctus quis. Ut
fermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur. Nulla
nec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi vestibulum.
Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo at placerat.
Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum.
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
As you see, there is only one <div class="page-footer"></div>.
At print result:
in Firefox the total page number will be shown at the first page, for instance if the total pages is 5, the number 5 will be shown at the first page-footer and other page-footer s will be left blank.
In Chrome, Opera and Edge, all page-footer s will be set by 1.
I even used var(--page) in CSS but nothing changed, is there any solution for that?
UPDATE: Please don't just tell it's a duplicated question, I almost have read
all related questions but none of them works for the scenario I stated, it seems that #page with page numbers doesn't work in browsers anymore.

Using position: fixed in css print media queries? [duplicate]

This question already has answers here:
How to use HTML to print header and footer on every printed page of a document?
(23 answers)
Closed 4 years ago.
We want to get a footer to appear on each printed page and using position: fixed adds the footer to each page. The only problem is that content on the page can flow under the footer.
Is there a way to prevent printed page content from flowing under a position: fixed footer?

body {
margin: 0;
}
.content {
padding: 30px;
font-size: 18px;
background: #ccc;
padding-bottom: 60px;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
background: #f89;
}
footer div {
padding: 20px;
}
.last-content {
color:red;
}
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus ex odio, in bibendum odio aliquam nec. Phasellus suscipit in mi eget pretium. Etiam pellentesque est ac nunc ullamcorper dapibus. Maecenas viverra tristique erat, ac fringilla est placerat a. In non porta metus. Integer tincidunt mollis quam, ut vestibulum orci tempor eu. Vestibulum rutrum est vitae porta tristique. Fusce dui libero, luctus et leo quis, euismod tincidunt ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque ut fringilla felis.
Nulla at erat nulla. Aenean ut elementum sem, sed fringilla neque. Quisque dolor dui, varius eget tempus vitae, scelerisque interdum lectus. Suspendisse ut ante maximus, accumsan urna at, vehicula purus. Aenean auctor justo in viverra varius. In malesuada, turpis egestas aliquet mollis, magna nisi dignissim libero, vitae bibendum elit risus ut eros. Aenean quis metus eget odio egestas ornare. Maecenas malesuada nulla ligula, ut sagittis est finibus eget. Donec nec ullamcorper nunc. Fusce elementum urna et neque aliquet volutpat. Morbi convallis luctus facilisis.
Suspendisse et ipsum nec odio maximus placerat eget in nisi. Vivamus gravida, velit non euismod mollis, nisi lectus sodales leo, et elementum odio elit quis lectus. Ut efficitur vitae neque in malesuada. Nam varius malesuada metus, id lobortis orci ultrices vitae. Duis iaculis libero eu metus feugiat consectetur. Maecenas scelerisque et turpis at ultrices. Morbi vehicula eu dolor eget porttitor. Maecenas leo enim, tempus vel mi ut, eleifend venenatis ante. Proin id aliquam metus. Nullam non lorem ut odio molestie finibus pharetra ullamcorper enim.
Aliquam egestas purus libero, et lacinia nisl semper at. Integer a ornare orci. Pellentesque porta, purus nec consectetur sollicitudin, nunc lectus tincidunt eros, a dictum libero augue et elit. Integer quis ultricies lectus. Nunc eu eros venenatis, euismod mi at, maximus augue. Vestibulum ut aliquam neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus scelerisque velit ante, id tempus quam auctor nec.
Integer vitae nibh id ipsum ultrices hendrerit. Maecenas tempus arcu enim, aliquam feugiat mauris finibus sit amet. Quisque elementum risus eros, tincidunt suscipit velit fermentum ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras nec fermentum quam. Integer quis tempus nunc. Curabitur in massa ac lorem pellentesque porta. Phasellus finibus lorem est, at cursus sem imperdiet at. Cras nunc lacus, dictum vitae finibus et, porttitor id nisi. Integer bibendum imperdiet urna, eget sollicitudin erat <span class="last-content">last content</span>
</div>
<footer>
<div> here is footer block </div>
</footer>
That is how CSS behave when position fixed. You should add margin-bottom for the main block(parallel block before the footer)
margin-bottom == footer height

.content {
margin-bottom: 50px;
/*same height as footer*/
}
.footer {
height: 50px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: yellow;
}
<div class="content">
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p style="color: red">BOTTOM CONTENT</p>
</div>
<div class="footer">
FOOTER
</div>

Well, it looks like the content is ignoring the block of your footer and being rendered under it somehow.
Maybe you can add display: inline-block; to your CSS so the footer occupies a full line without being surpassed.

Creating unobtrusive overlay for arbitrary html document

I'm trying to create an overlay that attaches itself to an existing DOM node and covers its entire content area. This should work regardless of whether this node is the body of the page or some deeply nested div. It's key that the layout of the page that I am overlaying should not change. Eventually, my code will run as a browser extension on top of existing html pages.
I am encountering a problem in the very simple case where I am trying to overlay a page with text (or anything that takes space) directly nested within the document body. I have no choice but to append my overlay div as another child node of the body and set its position to absolute and its width/height to 100%. Of course, in the case where the body is statically positioned (default), my div will size to the viewport and not the body's content. If content overflows, my overlay won't cover all of it :\.
All other answers suggest setting the position of the parent div (the body in my case) to define it as the positioning context. I can't do this, however. Changing the position of the document body to 'relative', for example, could change the layout of the content of the body, and defeats the purpose of an unobtrusive overlay. What to do?
Extension-specific suggestions are welcome. For reference, the extension will be for Chrome.
Here's a jsfiddle with a hypothetical page that I have to overlay. Note that although the original page is strangely formatted, my overlay cannot change it.
<body>
<style>
.overlay {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%
/*some magic I am unaware of*/
}
</style>
<!-- begin original document (stupid hypothetical scenario) -->
<div style="position:absolute;top:0px;width:100%;height:100%;background-color:red;">
<!-- this div is part of the original html document I want to overlay.
It should behave as it did originally, i.e size to the viewport of the document-->
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id tellus vehicula, tincidunt est fermentum, hendrerit dui. Nullam lacinia, justo sed porta hendrerit, nisl quam blandit nunc, ut imperdiet nibh metus in ante. Pellentesque viverra egestas
nulla eu dictum. Aliquam ac accumsan leo. Integer ut tellus odio. Duis blandit venenatis venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum vel lorem egestas, tincidunt sem vel, venenatis
ipsum. Donec vitae blandit nibh. Curabitur cursus nunc arcu, id tempor massa gravida ut. Integer vulputate libero in placerat vestibulum. Duis quis turpis vel lectus venenatis rhoncus. Sed congue est consequat, dapibus odio sit amet, sollicitudin arcu.
Praesent hendrerit massa velit, vel pretium erat viverra quis. Proin non enim facilisis, venenatis dolor ut, dapibus nulla. Morbi vestibulum mollis felis ut venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Ut mollis velit nulla, et tristique sapien auctor eu. Phasellus tincidunt mauris elit, vel fringilla leo consectetur a. Vivamus a porta magna. Mauris hendrerit leo eget sapien aliquet dignissim. Nunc id sem est. Integer sed lacus est. Nulla sit
amet sapien et ex aliquam malesuada quis vel eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus turpis ligula, elementum sit amet sapien nec, malesuada fringilla nibh. Duis euismod, purus semper viverra aliquam, ligula sem
vehicula mi, sit amet cursus mauris augue vel enim. Donec lacinia diam quis sapien laoreet vulputate in eu est. Proin consequat, ex vitae molestie pellentesque, libero purus pellentesque arcu, id porttitor orci sem a lectus. Morbi mattis in metus quis
euismod. Nam arcu augue, imperdiet eu felis eu, rhoncus facilisis lectus. Nullam placerat, tortor non tincidunt tristique, purus magna cursus leo, vitae sagittis odio turpis sodales nisi. Nullam vehicula erat nisl, ac venenatis massa rutrum sed. Mauris
massa tortor, volutpat vel nisl a, consectetur molestie sapien. Quisque eu elit nulla. Praesent at eros vehicula, lobortis purus quis, efficitur velit. Donec eget faucibus nisl. Praesent pharetra mattis porta. Donec volutpat lacinia dui non maximus.
Vivamus eu sodales leo. Ut eu ipsum scelerisque, consectetur turpis condimentum, malesuada elit. Proin tincidunt mauris metus, eu tincidunt ex ultrices ut. Sed sollicitudin leo nunc, in pharetra ligula egestas ut. Etiam suscipit eget ligula ut convallis.
Ut tempus tellus id ultrices rutrum. Nam accumsan fermentum metus, tristique gravida eros ultricies eget. Integer tortor diam, posuere ut ornare quis, bibendum ut tellus. Maecenas imperdiet lacus vitae felis viverra, nec dignissim lacus volutpat. Curabitur
et elit vehicula ipsum luctus tempor et sed enim. Fusce ultrices eget ante nec consectetur. Donec commodo nunc eget diam tristique, at euismod nisl commodo. Fusce felis neque, vulputate ut tincidunt sed, commodo in risus. Quisque sed magna sodales tortor
condimentum aliquam. Phasellus mattis justo eget diam tincidunt luctus. Cras pharetra ultrices sem, sed sollicitudin purus feugiat sed. Vivamus vitae tempor velit.
<!-- end original document -->
<div class='overlay'>
<!-- this div is my overlay. It should size to the content of the document body, not the viewport. Careful setting the body's position to relative, the other div will change!-->
</div>
</body>

I think you're best off appending one element to the body (unless you have access to some higher stacked element available to extensions) and simply use the element.getClientBoundingRect() to obtain the position and dimensions.
function applyStyle(element, styles) {
for (var key in styles) {
element.style[key] = styles[key];
}
}
var overlay = document.body.appendChild(document.createElement('div')),
indicator = overlay.appendChild(document.createElement('div'));
// apply the styles
applyStyle(overlay, {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 2147483647, // it doesn't get higher than this
pointerEvents: 'none'
});
applyStyle(indicator, {
position: 'absolute',
border: '1px dotted red',
backgroundColor: 'rgba(255,0,0,0.2)'
});
window.addEventListener('mouseover', function(event) {
var bound = event.target.getBoundingClientRect();
applyStyle(indicator, {
top: bound.top + 'px',
left: bound.left + 'px',
width: bound.width + 'px',
height: bound.height + 'px'
});
});
.foo {
position: absolute;
top: 30px;
left: 10px;
width: 300px;
border: 1px solid gold;
}
.bar {
position: relative;
width: 40%;
margin: 200px auto 0;
max-height: 10em;
overflow: hidden;
border: 1px solid green;
}
<div class=foo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nibh dapibus tellus varius tristique vitae id elit. Fusce vestibulum neque a scelerisque pellentesque. Vestibulum eu odio risus. Aliquam id tellus in mauris sollicitudin vestibulum. Aenean vestibulum et massa vel dapibus. Pellentesque eu lectus odio. Aliquam vitae fermentum mauris. Pellentesque feugiat sem vel dolor imperdiet tempor.
</div>
<div class=bar>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nibh dapibus tellus varius tristique vitae id elit. Fusce vestibulum neque a scelerisque pellentesque. Vestibulum eu odio risus. Aliquam id tellus in mauris sollicitudin vestibulum. Aenean vestibulum et massa vel dapibus. Pellentesque eu lectus odio. Aliquam vitae fermentum mauris. Pellentesque feugiat sem vel dolor imperdiet tempor.
</div>
The bits of "trickery" in here involve:
using the maximum z-index combined with the overlay element being the last element within <body> makes it nearly impossible for any page to rise above it
the little known getBoundingClientRect treasure
pointer-events: none css, removing the interactivity from the overlay element (simply add pointer-events: auto on the indicator to re-enable)
As you are targeting one specific browser and a (evergreen) modern one, I don't think you should use jQuery. You don't need it.

I don't know whether jQuery is an option but I couldn't resist... Here's how you could use jQuery to style your overlay
var $thingToOverlay = $('#someDivOrWhatever'); // use $(document) for whole page
var $overlay = $('.overlay');
var getMaxZ = function($elements){
var z;
return Math.max.apply(null, $elements.map(function(){
return isNaN(z = parseInt($(this).css("z-index"), 10)) ? 0 : z;
}));
};
$overlay.css({
'position': 'absolute',
'box-sizing': 'border-box',
'background-color': 'red',
'height': $thingToOverlay.height(),
'width': $thingToOverlay.width(),
'top': $thingToOverlay.offset().top, // don't use this for whole page (document), just set to 0
'left': $thingToOverlay.offset().left, // ditto
'z-index': getMaxZ($overlay.siblings()) // assuming overlay is last on page, no need to +1
});
This will obviously need some logic around it depending on whether the overlay needs to cover the whole page or just a div but you get the idea?

Jquery smooth scrolling (not anchor)

I've seen a couple of articles here but I just can't find the right answer.
I'm not looking for a smooth scrolling to an anchor point, I already got that, I'm looking for a smooth scrolling like this or this.
somehow they both uses this jquery which I don't know how to implement.
I've tried this one: simplr-smoothscroll. But this one is not really that 'smooth', when you scroll fast it slows you down.
I've also tried: simple smooth-wheel. But I couldn't implement that properly, since my body height is set to 100%, someone else complained about that as well on github. Above that, the demo provided in the Download (not on github) didn't work for me aswell, tried to fix that demo but still no luck.
I've also try to use the source of that one: smoothwheel. However I'm not a javascript magician with javascript so, no couldn't get that done.
Here is the simple jsfiddle page I have, where it should work: jsfiddle
<div id="menubar">
WelcomeWelcomeWelcomeWelcome
</div>
<div id="container">
<div id="content">
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a tortor fringilla, volutpat justo malesuada, suscipit justo. Fusce ante dui, bibendum non sapien vitae, hendrerit ultricies enim. Quisque dictum fermentum congue. Vestibulum posuere iaculis arcu, ultrices pharetra mauris ultrices finibus. Ut pulvinar sit amet justo et rhoncus. Maecenas id ante vel tortor vulputate commodo in in lacus. Nunc auctor vulputate ornare. Donec lacus odio, maximus ut massa a, finibus pulvinar justo. In facilisis quam sed pharetra aliquet. Etiam varius non eros non suscipit. Vestibulum venenatis placerat accumsan. Nulla nec consequat mauris. Etiam nisl magna, semper vel sem mollis, vehicula bibendum urna. Nunc porttitor dui sed volutpat imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra ligula sit amet sapien mollis malesuada.
Sed mollis convallis risus. Duis volutpat, diam rutrum pretium scelerisque, odio nunc faucibus odio, sit amet cursus justo justo ac mi. Aenean laoreet et eros non viverra. Praesent id erat vel nisl molestie pharetra. Pellentesque eu eros nibh. Aliquam mollis, tortor eget consequat varius, metus sapien suscipit nisl, eu convallis ligula orci eu erat. Fusce et ex dignissim eros porta eleifend in quis sapien. Suspendisse potenti. Quisque non vehicula mauris, eget ornare tellus. Pellentesque aliquet massa augue, sed hendrerit massa condimentum eget. Nunc vulputate neque nunc, ac interdum velit tristique sed. Donec vestibulum nibh at tellus condimentum, sed rutrum quam pellentesque. Mauris congue blandit justo, a auctor est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse et sem vulputate, malesuada lectus ultrices, luctus elit.
Ut enim metus, lobortis in malesuada sed, fringilla sit amet velit. Phasellus nec tincidunt risus. Nam id nulla et dolor tempor consectetur elementum sit amet lacus. Nunc non felis enim. Curabitur feugiat at quam ac auctor. Duis nibh enim, consequat id sagittis vitae, pharetra nec arcu. Pellentesque vitae nisl tincidunt purus faucibus dignissim ut egestas enim. Integer gravida suscipit interdum. Nunc ac tellus urna. Proin odio quam, pulvinar sed tristique sed, viverra sed mi. Phasellus dapibus ipsum in tempor aliquet. Nam a lectus eu purus volutpat sodales eu at ante. Duis quis scelerisque lectus. Mauris interdum massa quis nisi luctus tincidunt. Etiam ut varius arcu, venenatis lacinia nulla. Cras tristique porta accumsan.
Nam dignissim risus tellus, sit amet faucibus mi dignissim eget. Sed luctus dolor et augue convallis tristique. Etiam sed urna urna. Etiam id lacinia neque. Aliquam ac sapien lacus. Ut lacus quam, efficitur a orci a, gravida porttitor dui. Nunc eget augue vehicula, congue mi ultrices, tempus neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nullam at venenatis ante. Ut odio justo, auctor non lacinia at, sollicitudin vel augue. Pellentesque urna felis, posuere sit amet lacus fermentum, congue dignissim elit. Phasellus eleifend lectus vitae arcu tristique, et pellentesque nunc venenatis. Duis at est velit. Nullam vestibulum lorem auctor vestibulum ornare. Mauris sed libero ut libero pellentesque fermentum eget eu nisi. Nam augue dolor, mollis ut volutpat eget, vulputate sit amet nisl. Etiam at elit dapibus, laoreet est at, sagittis nisl. Pellentesque sed risus in quam pretium porta sed vitae velit. Phasellus risus odio, imperdiet vel vulputate eget, imperdiet eu nisl. Aliquam ultrices lorem nec aliquet consectetur.</p>
<br />
</div>
<div id="img2">
<img src="someImage.png" />
</div>
css:
body {
min-width:800px;
margin: 0;
background-color:blue; <!--this is a image -->
background-size: 100% auto;
background-attachment:fixed;
height:100%;
}
#menubar{
position:fixed;
top:5px;
right:0;
background-color:none;
height:auto;
z-index:1;
}
#container{
position:absolute;
top:75%;
}
#content{
width:100%;
background-color:white;
margin:0;
}
#img2{
width:100%;
margin:0;
}
#img2 img{
width:100%;
}

In the example you gave, they are using jquery.smoothwheel by IntelliJ IDEA.
Check this link. Maybe it's the effect you are searching for.
Hope it's useful!
Edit by OP:
After #Academia gave me this fiddle I manged to get it to work for my needs.
This is what I ended up with:
css:
body {
background: url(someImage.png);
background-size: 100% auto;
background-attachment:fixed;
margin: 0 auto;
width:100%;
height:1000px; /*key value to make this script work, else it only scrolls smoothly when your mouse is hovering over the #container*/
overflow:auto;
-webkit-overflow-scrolling: touch;
position:relative;
}
#container{
width:100%;
background-color:white;
position:absolute;
top:700px; /*I intent to scroll the content over the bg image, that was my struggle, I had it in procentage first*/
}
#content{
width:100%;
background-color:white;
margin:0;
}
html:
<body>
<div id="container">
<div id="content">
<p>some content</p>
</div>
</div>
</body>
Now for the javascript, I had to add an function that would keep the top value of the container correct to the width of the screen
script for smoothscroll:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/jquery.smoothwheel.js"></script>
<script>
$(document).ready(function () {
$("body").smoothWheel()
});
</script>
script for the top value of the container, 0.36 because 1920/700 = 0.36, this depends on the top value you want to have:
<script type="text/javascript">
$(document).ready(function () {
var jqeuryElem = jQuery("#container");
var w = $(window).width();
var top = w *0.36;
jqeuryElem.css("top", top+"px");
});
$(window).resize(function () {
var jqeuryElem = jQuery("#container");
var w = $(window).width();
var top = w * 0.36;
jqeuryElem.css("top", top + "px");
});
</script>
I'll post the result when the website is done.

How to set the height of a floated div to the same height of its neighbour

I am trying to create a simple 2 column layout with a header and a footer.
I have the following HTML
<body>
<div id="header">
<h1>Title Bar</h1>
</div>
<div id="content">
<div id="left">
left
</div>
<div id="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum neque id eros auctor tristique. Fusce quam lorem, vestibulum ut magna et, cursus molestie libero. Suspendisse sed mauris vitae diam mattis pellentesque. Nulla neque tortor, varius quis augue vel, commodo tincidunt elit. Maecenas vel odio nec velit faucibus fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum arcu libero, auctor vitae urna eget, blandit fringilla justo. Fusce eu enim id nisi condimentum dictum sit amet non lectus.
Aenean at nulla odio. Vestibulum eleifend massa vitae velit tempor, non auctor velit imperdiet. Nunc ac odio eu justo pretium luctus. Nulla vestibulum urna sed est fermentum aliquam. Etiam eget erat eu tortor dictum rhoncus a nec justo. Sed eu dui ut leo lobortis laoreet quis sed sem. Nulla consectetur augue tristique dignissim viverra. Proin tincidunt tincidunt libero a iaculis. Etiam leo elit, cursus at velit sed, faucibus pretium leo. Ut viverra mattis sodales. Morbi hendrerit quam eu est dignissim congue. Pellentesque quis metus commodo sapien interdum rutrum pellentesque at risus. Sed tempor, orci nec tincidunt dictum, turpis purus mattis enim, ut sodales odio arcu quis sem. Praesent vitae justo lorem. Nam ultrices enim at consectetur vehicula. Ut luctus interdum urna, rutrum luctus orci varius vel.
Integer pharetra nisi vitae massa condimentum, ac hendrerit magna commodo. Pellentesque sit amet neque ac mauris hendrerit scelerisque quis nec sapien. Nullam tempor odio sed tristique interdum. Donec non aliquet quam. Nunc ac adipiscing tortor. Mauris nec nisl accumsan, ullamcorper metus eu, dictum mi. Mauris id adipiscing lectus. Morbi dignissim scelerisque purus ut ullamcorper. Nu
nc placerat ipsum tortor, quis pretium est sagittis nec. In lacus eros, volutpat eu convallis a, ullamcorper vel leo. Quisque vel orci ultricies, molestie nisi non, congue leo. Nulla orci metus, vehicula at laoreet ut, congue nec sem. Proin tempor justo ut odio vestibulum suscipit in a eros. Sed fermentum et sapien id aliquam. Donec at erat bibendum, fringilla odio sit amet, sagittis nibh.
Morbi accumsan ullamcorper leo vel viverra. In ac imperdiet libero, id cursus eros. Morbi sed auctor quam, ac ullamcorper metus. Morbi et vestibulum justo, et volutpat libero. Duis pretium magna sapien, at porta justo sodales ve
l. Sed consequat magna odio, eu mattis risus malesuada vel. Aliquam tristique accumsan fermentum. Morbi interdum nunc vitae viverra pulvinar.
Donec neque magna, sodales dapibus imperdiet non, suscipit eget ipsum. Etiam nec dolor ut nisi pharetra dictum non eget augue. Etiam tincidunt mi id est euismod, ut venenatis neque tempus. Praesent lacinia risus metus, at condimentum diam vestibulum et. Integer ac mi nec enim facilisis pharetra. Nunc sed nibh libero. Duis imperdiet sapien id euismod viverra. Integer aliquam metus a nulla tincidunt eleifend. Donec a porttitor tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam convallis aliquam dolor. Morbi eu velit quam. Nullam sed neque id risus aliquam lobortis. Sed vel pulvinar velit, id varius mauris. Sed justo nunc, laoreet eu velit et, pulvinar eleifend lacus. Phasellus tristique orci vitae dignissim imperdiet.
</div>
</div>
<div id="footer">
<h5>Footer </h5>
</div>
</body>
and the following css
body {
background-color: red;
margin: 0px;
}
body h1 {
margin: 0px;
}
#header {
background-color: blue;
color: white;
height: 80px;
}
#content {
width: 700px;
}
#left {
background-color: black;
color: pink;
float: left;
width: 100px;
height: 100%;
}
#right {
background-color: lightgreen;
color: brown;
}
#footer {
background-color: yellow;
color: blue;
clear: both;
height: 40px;
}
I want to make sure that the height of the left Div is the same as the height of the right div, regardless of what content is in the right div.
To do this I reverted to java script with this
$(document).ready(function () {
adjustLeftHeight();
});
$(window).resize(function () {
adjustLeftHeight();
});
function adjustLeftHeight() {
$("#left").height($("#content").height());
}
This doesn't quite work in that when the adjustLeftHeight is executed its sets the lefts height to the height of the content div, but because of the extra space taken up by the increase in the height of the left div the content in the right div gets pushed down increasing the height of the right div and leaving a gap between the heights of the 2 divs.
see this fiddle for a worked example http://jsfiddle.net/W3P4U/
Is there a way to achieve a 2 column layout where the height of both columns is the height of the tallest column.

See updated fiddle.
Changes:
1: add float: right to right div and width: 300px (being content's width - left's width), if you want them fixed as width;
2: change adjustLeftHeight function to this:
function adjustLeftHeight() {
var left = $("#left"),
right = $("#right");
if (left.height() > right.height())
right.height(left.height());
else
left.height(right.height());
}