I've been trying to implement Enscroll Plug in into a Bootstrap page, but I haven't gotten Facebook Ticker Scrollbar that is shown in their demo's page to function right. I was wondering if anyone will be able to help me out and look at my code, and see what I am doing wrong in my syntax, and explain to me what I am doing wrong.
$('#scrollbox3').enscroll({
showOnHover: true,
verticalTrackClass: 'track3',
verticalHandleClass: 'handle3'
});
#scrollbox3 {
overflow: auto;
width: 400px;
height: 360px;
padding: 0 5px;
border: 1px solid #b7b7b7;
}
.track3 {
width: 10px;
background: rgba(0, 0, 0, 0);
margin-right: 2px;
border-radius: 10px;
-webkit-transition: background 250ms linear;
transition: background 250ms linear;
}
.track3:hover,
.track3.dragging {
background: #d9d9d9;
/* Browsers without rgba support */
background: rgba(0, 0, 0, 0.15);
}
.handle3 {
width: 7px;
right: 0;
background: #999;
background: rgba(0, 0, 0, 0.4);
border-radius: 7px;
-webkit-transition: width 250ms;
transition: width 250ms;
}
.track3:hover .handle3,
.track3.dragging .handle3 {
width: 10px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://enscrollplugin.com/releases/enscroll-0.6.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
<div id="scrollbox3">
<h1>New Scrolling Window</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla
commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies
sed mattis sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend
pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor
cursus. Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas.</p>
</div>
</div>
</div>
</div>
DEMO: http://jsfiddle.net/npfLjser/
The problem is because jquery is defined in the end. change order.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://enscrollplugin.com/releases/enscroll-0.6.1.min.js"></script>
Show code snippet
Related
I have a save setting button for a profile edit web page. The page is long and I want the save setting button fixed at bottom of the page. On scrolling down it take her normal position. I can make it fixed at bottom on scrolling but I can't make it stick on the normal position when scrolling.
The design on small height mobile screen
And on scrolling down, I expect to stick before the footer
I add this css to the bottom container save-setting but this style make it fixed at the bottom all the time.
.save-settings {
box-shadow: 0px -2px 10px rgba(23, 29, 26, 0.1);
padding: 14px 24px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #fcfcfc;
z-index: 100;
}
I think this question is similar to my question but I can't understand because the website example isn't working anymore. So anybody can help me in more details.
Edit
This is a example code for what I expect
.header {
height: 100px;
background-color: green;
}
.page-holder {
height: 600px;
background-color: red;
}
.save-settings {
box-shadow: 0px -2px 10px rgba(23, 29, 26, 0.1);
padding: 14px 24px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #fcfcfc;
z-index: 100;
}
button.primary-btn {
padding: 12px 20px;
border-radius: 10px;
color: #fcfcfc;
font-size: 14px;
line-height: 21px;
font-weight: 600;
background: linear-gradient(100.96deg, #15c077 8.41%, #2dc015 88.4%);
border: 0;
width: 100%;
}
.footer {
height: 300px;
background-color: orange;
}
<div class="header">
<h2>Header</h2>
</div>
<div class="page-holder">
<h1>Main Content</h1>
<div class="save-settings">
<button class="primary-btn">Save Setting</button>
</div>
</div>
<div class="footer">
<h2>footer</h2>
</div>
So I want the save-settings at the bottom page but on scrolling it stick before the footer on his normal DOM position.
You can use position: sticky to fix the footer to the bottom, you can then place content below it, to have it stick to it.
.wrapper {
height: 100vh;
position: relative;
}
.content {
background: green;
}
.save-settings {
box-shadow: 0px -2px 10px rgba(23, 29, 26, 0.1);
padding: 14px 24px;
position: sticky;
left: 0;
bottom: 0;
width: 100%;
background-color: #fcfcfc;
z-index: 100;
}
.under-settings {
background: blue;
}
<div class="wrapper">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae condimentum nisl. Morbi lorem felis, placerat vitae gravida sed, imperdiet eu ante. Vestibulum molestie felis ac felis hendrerit, vel tincidunt diam fermentum. Donec interdum eleifend
faucibus. Mauris id magna pulvinar, tempus metus ut, rhoncus nisi. Aenean quis lectus est. Proin tortor velit, tristique sed congue nec, consequat non urna. Donec nibh purus, faucibus at lobortis eget, congue sed elit. Ut quis ex felis. Vivamus finibus
lacinia interdum. Maecenas rutrum semper varius. Cras rutrum rhoncus augue ut sodales. Vivamus consectetur dignissim purus vitae suscipit. Fusce vitae nibh condimentum, rhoncus erat ut, fringilla tellus. Vestibulum vel ligula ac arcu pharetra euismod
id vitae magna. Nam mauris turpis, iaculis nec varius eget, varius et magna.
<br /><br /> Morbi lobortis nunc ipsum, sed ullamcorper est finibus sit amet. Proin in erat sapien. Morbi semper feugiat ipsum ac facilisis. Donec feugiat sit amet odio in molestie. Nullam auctor lobortis sapien vel elementum. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Fusce hendrerit, massa id convallis eleifend, neque lorem cursus lectus, non rhoncus sem odio efficitur lorem. Nulla ut massa sodales, tempus ipsum vitae, facilisis nulla. Pellentesque vulputate mauris ac volutpat
dictum.
<br /><br /> Pellentesque lorem ipsum, posuere sed facilisis a, malesuada ut lorem. Vestibulum at sagittis metus, ut rhoncus ligula. Integer sit amet bibendum risus, sed tempor elit. Phasellus leo leo, elementum eget urna eleifend, fermentum semper
urna. Vestibulum condimentum interdum sem, id dapibus leo ornare eu. Quisque lacus nunc, interdum in iaculis id, gravida non urna. Quisque pulvinar augue eget felis posuere, quis ultricies lectus pellentesque.
<br /><br /> Nunc vel dolor vulputate, commodo sem nec, placerat nulla. Nullam quis nibh tempus, iaculis purus in, congue nisi. Vestibulum id aliquam augue. Integer varius rutrum efficitur. Nunc sit amet elementum lectus. Praesent ut sodales ante.
Nulla non posuere arcu, ut molestie lectus.
<br /><br /> Morbi vestibulum imperdiet eros eget fermentum. Duis suscipit malesuada lectus. Nam sagittis, est vel pulvinar iaculis, purus justo ultrices lacus, eget tincidunt massa ipsum id dolor. Mauris congue placerat lobortis. Sed non laoreet
nulla. Aenean consequat ante ac gravida molestie. Sed nisi felis, auctor quis blandit nec, volutpat et ligula. Donec facilisis est a sapien lobortis vulputate.<br />
</div>
<div class="save-settings">
Save Settings
</div>
<div class="under-settings">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae condimentum nisl. Morbi lorem felis, placerat vitae gravida sed, imperdiet eu ante. Vestibulum molestie felis ac felis hendrerit, vel tincidunt diam fermentum. Donec interdum eleifend
faucibus. Mauris id magna pulvinar, tempus metus ut, rhoncus nisi. Aenean quis lectus est. Proin tortor velit, tristique sed congue nec, consequat non urna. Donec nibh purus, faucibus at lobortis eget, congue sed elit. Ut quis ex felis. Vivamus finibus
lacinia interdum. Maecenas rutrum semper varius. Cras rutrum rhoncus augue ut sodales. Vivamus consectetur dignissim purus vitae suscipit. Fusce vitae nibh condimentum, rhoncus erat ut, fringilla tellus. Vestibulum vel ligula ac arcu pharetra euismod
id vitae magna. Nam mauris turpis, iaculis nec varius eget, varius et magna.
<br /><br /> Morbi lobortis nunc ipsum, sed ullamcorper est finibus sit amet. Proin in erat sapien. Morbi semper feugiat ipsum ac facilisis. Donec feugiat sit amet odio in molestie. Nullam auctor lobortis sapien vel elementum. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Fusce hendrerit, massa id convallis eleifend, neque lorem cursus lectus, non rhoncus sem odio efficitur lorem. Nulla ut massa sodales, tempus ipsum vitae, facilisis nulla. Pellentesque vulputate mauris ac volutpat
dictum.
<br /><br /> Pellentesque lorem ipsum, posuere sed facilisis a, malesuada ut lorem. Vestibulum at sagittis metus, ut rhoncus ligula. Integer sit amet bibendum risus, sed tempor elit. Phasellus leo leo, elementum eget urna eleifend, fermentum semper
urna. Vestibulum condimentum interdum sem, id dapibus leo ornare eu. Quisque lacus nunc, interdum in iaculis id, gravida non urna. Quisque pulvinar augue eget felis posuere, quis ultricies lectus pellentesque.
<br /><br /> Nunc vel dolor vulputate, commodo sem nec, placerat nulla. Nullam quis nibh tempus, iaculis purus in, congue nisi. Vestibulum id aliquam augue. Integer varius rutrum efficitur. Nunc sit amet elementum lectus. Praesent ut sodales ante.
Nulla non posuere arcu, ut molestie lectus.
<br /><br /> Morbi vestibulum imperdiet eros eget fermentum. Duis suscipit malesuada lectus. Nam sagittis, est vel pulvinar iaculis, purus justo ultrices lacus, eget tincidunt massa ipsum id dolor. Mauris congue placerat lobortis. Sed non laoreet
nulla. Aenean consequat ante ac gravida molestie. Sed nisi felis, auctor quis blandit nec, volutpat et ligula. Donec facilisis est a sapien lobortis vulputate.<br />
</div>
</div>
Following your case in details, it turns out that your HTML structure needs some tweaking:
.page-holder {
height: 100vh;
}
.save-settings {
text-align: center;
border-top: 1px solid black;
padding: 20px;
position: sticky;
bottom: 0;
right: 0;
left: 0;
}
<div class="header">
<h2>Header</h2>
</div>
<div class="page-holder">
<h1>Main Content</h1>
</div>
<div class="save-settings">
<button class="primary-btn">Save Setting</button>
</div>
<div class="footer">
<h2>footer</h2>
</div>
Make the .save-settings element a direct child of the body element.
In this case, the position: sticky; will work without adding any additional position property.
In my page, I have a div that will hold a large quantity of text. I would like to use the scroll value for overflow-y property. However, as I would like to style it, the scroll bar does not transform with the radius. Here is the jsfiddle to go along with it:
https://jsfiddle.net/cjbruin/kkve1bas/
and the code:
HTML
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget
turpis nisi. Sed pellentesque urna a fringilla feugiat. Vivamus consequat
vitae risus nec congue. Nulla faucibus hendrerit velit vitae euismod.
Pellentesque efficitur efficitur aliquet. Vivamus ut nunc mi. Fusce
aliquam quam sit amet malesuada lacinia.
Aenean vulputate sagittis porta. Nullam vehicula tellus a erat malesuada gravida.
Vestibulum vulputate eros consectetur ipsum luctus fermentum. Cras consequat
sollicitudin elit, sed tempor nulla gravida ac. Donec in porttitor ipsum. Sed
a nisi nec massa euismod tincidunt sed vitae justo. Phasellus a nunc commodo,
imperdiet nulla vitae, sollicitudin mi. Pellentesque aliquet faucibus sapien et
congue. In vel diam vitae orci interdum sollicitudin. In a tristique libero,
vitae finibus metus. Aliquam porttitor justo sed iaculis cursus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Mauris massa arcu, pellentesque eu libero vitae, volutpat
eleifend eros. Quisque ut ultrices dui. Mauris quis
</div>
CSS
div {
height: 300px;
width: 400px;
border: 2px solid black;
overflow-y: scroll;
border-radius: 7%;
}
Is there anyway to fix this using CSS3? Or will I have to use JS/jQuery to fix it?
Try this one:
.wrapper {
padding: 15px;
border: 2px solid black;
height: 300px;
width: 400px;
border-radius: 7%;
}
.wrapper div {
height: 300px;
width: 400px;
overflow-y: scroll;
padding-right: 10px;
}
<div class="wrapper"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget
turpis nisi. Sed pellentesque urna a fringilla feugiat. Vivamus consequat
vitae risus nec congue. Nulla faucibus hendrerit velit vitae euismod.
Pellentesque efficitur efficitur aliquet. Vivamus ut nunc mi. Fusce
aliquam quam sit amet malesuada lacinia.
Aenean vulputate sagittis porta. Nullam vehicula tellus a erat malesuada gravida.
Vestibulum vulputate eros consectetur ipsum luctus fermentum. Cras consequat
sollicitudin elit, sed tempor nulla gravida ac. Donec in porttitor ipsum. Sed
a nisi nec massa euismod tincidunt sed vitae justo. Phasellus a nunc commodo,
imperdiet nulla vitae, sollicitudin mi. Pellentesque aliquet faucibus sapien et
congue. In vel diam vitae orci interdum sollicitudin. In a tristique libero,
vitae finibus metus. Aliquam porttitor justo sed iaculis cursus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Mauris massa arcu, pellentesque eu libero vitae, volutpat
eleifend eros. Quisque ut ultrices dui. Mauris quis
</div></div>
Use the following CSS (::-webkit-scrollbar-xxx) to style your scroll bar, or apply this "sidebar" class to your div.
.sidebar::-webkit-scrollbar{
width:5px;
background-color:#303949;
}
.sidebar::-webkit-scrollbar-thumb{
background-color:#cccccc;
}
.sidebar::-webkit-scrollbar-thumb:hover{
background-color:#cccccc;
}
.sidebar::-webkit-scrollbar-thumb:active{
background-color:#cccccc;
}
.sidebar::-webkit-scrollbar-track{
border:1px #303949 solid;
-webkit-box-shadow:0 0 5px 303949 inset;
}
I want to lock the scrollbar on window when the overlay is triggered which is working fine. But the problem is the body/ document jumps to the top when you scroll the page to the bottom/ middle and trigger the overlay.
I don't want the page to jump to the top. What I want to achieve is similar to Facebook's image overlay/ popup when you click on the image - it locks the background when you click on the image but it stays as it s when you exit the image popup. Is it possible?
CSS:
html,
body {
font-family: 'Raleway', sans-serif;
height: auto;
margin: 0;
padding: 0;
overflow: auto;
color: #000;
}
html.lock-scrollbar {
position: fixed;
overflow-y: scroll;
width: 100%;
height: 100%;
}
#main {
height: 2000px;
border: 1px solid red;
}
.overlay {
width: 90%;
height: 100%;
background: #fff;
z-index: 999;
overflow: auto;
position: absolute;
top: 0;
left: 0;
display: none;
border: 1px solid black;
}
jQuery:
$( document ).ready(function() {
var windowHeight = $(window).height();
console.log(windowHeight);
$("#main").click(function(){
$("html").addClass('lock-scrollbar');
$('.overlay').show();
return false;
});
$(".overlay").click(function(){
$("html").removeClass('lock-scrollbar');
$('.overlay').hide();
return false;
});
});
HTML:
<div id="main">
<h1>New Scrolling Window</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus. Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="overlay"></div>
What have I done incorrectly?
My jsfiddle.
Well, I would lock the scroll in this way instead of using a fixed positioned lock-scrollbar:
$('html,body').css({'overflow-y': 'hidden'});
on the click of main and overflow-y back to auto:
$('html,body').css({'overflow-y': 'auto'});
when the overlay is hidden.
See demo below and updated fiddle here:
$(document).ready(function() {
var windowHeight = $(window).height();
// console.log(windowHeight);
$("#main").click(function() {
$('html,body').css({'overflow-y': 'hidden'});
$('.overlay').show();
return false;
});
$(".overlay").click(function() {
$('html,body').css({'overflow-y': 'auto'});
$('.overlay').hide();
return false;
});
});
html,
body {
font-family: 'Raleway', sans-serif;
height: auto;
margin: 0;
padding: 0;
overflow: auto;
color: #000;
}
html.lock-scrollbar {
position: fixed;
overflow-y: scroll;
width: 100%;
height: 100%;
}
#main {
height: 2000px;
border: 1px solid red;
}
.overlay {
width: 90%;
height: 100%;
background: #fff;
z-index: 999;
overflow: auto;
position: fixed;
top: 0;
left: 0;
display: none;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<h1>New Scrolling Window</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla
commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis
sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend
pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus.
Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="overlay"></div>
EDIT:
If you want to stick with the position: fixed solution - get / Set the value of scrollTop to reset the scroll.
Also added in $('html').css({'top':-scrollTop + 'px'}) while locking scroll - see demo below:
$(document).ready(function() {
var windowHeight = $(window).height();
// console.log(windowHeight);
var scrollTop = 0;
$("#main").click(function() {
scrollTop = $(window).scrollTop();
$("html").addClass('lock-scrollbar');
$('html').css({'top':-scrollTop + 'px'});
$('.overlay').show();
return false;
});
$(".overlay").click(function() {
$("html").removeClass('lock-scrollbar');
$(window).scrollTop(scrollTop);
$('.overlay').hide();
return false;
});
});
html,
body {
font-family: 'Raleway', sans-serif;
height: auto;
margin: 0;
padding: 0;
color: #000;
}
html.lock-scrollbar {
position: fixed;
overflow-y: scroll;
width: 100%;
height: 100%;
}
#main {
height: 2000px;
border: 1px solid red;
}
.overlay {
width: 90%;
height: 100%;
background: #fff;
z-index: 999;
overflow: auto;
position: fixed;
top: 0;
left: 0;
display: none;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<h1>New Scrolling Window</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla
commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis
sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend
pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus.
Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="overlay"></div>
Try CSS:
html, body {
font-family: 'Raleway', sans-serif;
margin: 0;
padding: 0;
color: #000;
}
Try JS:
$( document ).ready(function() {
var windowHeight = $(window).height();
console.log(windowHeight);
$("#main").click(function(){
$('body').css({
overflow: 'hidden',
height: '100%'
});
$('.overlay').show();
return false;
});
$(".overlay").click(function(){
$('body').css({
overflow: 'auto',
height: 'auto'
});
$('.overlay').hide();
return false;
});
});
Your modified jsfiddle: https://jsfiddle.net/y9e1kt3q/
New fiddle (the scroll remains visible): https://jsfiddle.net/y9e1kt3q/1/
I want to be able to scroll horizontally, but without the scroll bar shown.
I know, in Chrome it's:
::-webkit-scrollbar {
display: none;
}
But what about the Firefox and Internet Explorer? Somebody gives the following solution, but it seems does not work for horizontal scroll bar, it just works for vertical scroll bar.
#parent{
height: 100%;
width: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px;
}
Is there someone could help me?
For fire fox just use this rule:
overflow: -moz-scrollbars-none;
for IE:
-ms-overflow-style: none;
jsFiddle Demo (Test it on FF & IE)
Based on this tutorial:
Here the code:
.element, .outer-container {
width: 200px;
height: 200px;
}
.outer-container {
border: 5px solid purple;
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
display: none;
}
<div class="outer-container">
<div class="inner-container">
<div class="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer vehicula quam nibh, eu tristique tellus dignissim
quis. Integer condimentum ultrices elit ut mattis.
Praesent rhoncus tortor metus, nec pellentesque enim
mattis nec. Nulla vitae turpis ut dui consectetur
pellentesque quis vel est. Curabitur rutrum, mauris ut
mollis lobortis, sem est congue lectus, ut sodales nunc
leo a libero. Cras quis sapien in mi fringilla tempus
condimentum quis velit. Aliquam id aliquam arcu. Morbi
tristique aliquam rutrum. Duis tincidunt, orci suscipit
cursus molestie, purus nisi pharetra dui, tempor
dignissim felis turpis in mi. Vivamus ullamcorper arcu
sit amet mauris egestas egestas. Vestibulum turpis neque,
condimentum a tincidunt quis, molestie vel justo. Sed
molestie nunc dapibus arcu feugiat, ut sollicitudin metus
sagittis. Aliquam a volutpat sem. Quisque id magna
ultrices, lobortis dui eget, pretium libero. Curabitur
aliquam in ante eu ultricies.
Quisque vitae tincidunt purus. Vivamus feugiat bibendum
erat, nec interdum urna porta sed. Nunc lobortis neque
orci, ut suscipit nisl congue feugiat. Vivamus feugiat
tellus quis cursus sollicitudin. Curabitur dolor massa,
dictum ut ipsum in, porttitor pellentesque ante. Aenean
egestas cursus tempor. Maecenas semper tortor sit amet
egestas cursus. Mauris porttitor quis nisi ut tincidunt.
Curabitur adipiscing eleifend nibh. Praesent mauris leo,
consequat vitae orci eget, vestibulum bibendum nisi.
Aliquam tempus diam ut tortor cursus, eget sodales augue
adipiscing. Nulla at dignissim libero.
</div>
</div>
</div>
I've been searching for quite a while and tried several different approaches, but can't figure out a solution.
I would like for my footer to always be at the bottom of the page, however not necessarily always shown. So whenever enough posts are added, I want the page to keep growing, but the footer will always be on the bottom. You can see in my example in the snippet below how's it works.
However, I don't want the posts to be on the left side, or start from the top. Whenever I try to move the page-wrap div with absolute positioning, everything gets screwed up.
Originally inspired by this article: https://css-tricks.com/snippets/css/sticky-footer/
$(".btn").click(function() {
var post = $('.status-box').val();
$("<li>").text(post).prependTo(".posts");
});
html,
body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -200px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
/* .push must be the same height as footer */
height: 200px;
}
.site-footer {
background: orange;
}
.container {
width: 520px;
margin-top: 20px;
}
.button-group {
margin-bottom: 20px;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.posts {
clear: both;
list-style: none;
padding-left: 0;
width: 100%;
}
.posts li {
background-color: #fff;
border: 1px solid #d8d8d8;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
word-wrap: break-word;
min-height: 42px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-wrap">
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class="posts">
</ul>
</div>
</div>
<div class="site-footer">
</div>
In order to center your content, you can give .page-wrap a width and auto margin to the left and the rigth:
.page-wrap {
...
width: 50%;
margin: 0 auto -200px auto;
}
$(".btn").click(function() {
var post = $('.status-box').val();
$("<li>").text(post).prependTo(".posts");
});
html,
body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
width: 50%;
background: lightblue;
margin: 0 auto -200px auto;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
/* .push must be the same height as footer */
height: 200px;
}
.site-footer {
background: orange;
}
.container {
width: 520px;
margin-top: 20px;
}
.button-group {
margin-bottom: 20px;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.posts {
clear: both;
list-style: none;
padding-left: 0;
width: 100%;
}
.posts li {
background-color: #fff;
border: 1px solid #d8d8d8;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
word-wrap: break-word;
min-height: 42px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-wrap">
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class="posts">
</ul>
</div>
</div>
<div class="site-footer">
</div>
Have a look into it:
DEMO : https://jsfiddle.net/eLqzhaag/
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
html,
body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
position: absolute;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
/* .push must be the same height as footer */
height: 200px;
}
.site-footer {
background: orange;
width: 100%;
height: 100px;
position: fixed;
bottom: 0px;
}
.container {
margin-top: 20px;
}
.button-group {
margin-bottom: 20px;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.posts {
clear: both;
list-style: none;
padding-left: 0;
width: 100%;
}
.posts li {
background-color: #fff;
border: 1px solid #d8d8d8;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
word-wrap: break-word;
min-height: 42px;
}
</style>
<script>
$(".btn").click(function() {
var post = $('.status-box').val();
$("<li>").text(post).prependTo(".posts");
});
</script>
</head>
<!-- language: lang-css -->
<!-- language: lang-html -->
<body>
<div class="page-wrap">
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class="posts">
</ul>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.
Facilisi. Etiam enim metus, luctus in adipiscing at, consectetur quis sapien. Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper. Etiam tempus, felis vel eleifend porta, velit nunc mattis urna, at ullamcorper erat diam dignissim ante. Pellentesque justo risus.
Rutrum ac semper a, faucibus nec lorem. Nullam eget quam tellus, eget sagittis justo.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante enim, tincidunt ut interdum in, adipiscing quis tortor. Nulla turpis lacus, rutrum in adipiscing ut, porttitor ac ante. Sed euismod, mauris a.
Lobortis laoreet, neque nunc suscipit orci, id ultrices nulla enim ac orci. Proin a erat at mi ornare interdum. Donec sagittis, felis at rutrum egestas, orci risus laoreet diam, quis pulvinar sapien neque id mauris. Suspendisse potenti. Pellentesque eget ligula ut lacus porttitor pharetra et a mauris. Cras varius gravida.
width: 520px;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.
Facilisi. Etiam enim metus, luctus in adipiscing at, consectetur quis sapien. Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper. Etiam tempus, felis vel eleifend porta, velit nunc mattis urna, at ullamcorper erat diam dignissim ante. Pellentesque justo risus.
Rutrum ac semper a, faucibus nec lorem. Nullam eget quam tellus, eget sagittis justo.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante enim, tincidunt ut interdum in, adipiscing quis tortor. Nulla turpis lacus, rutrum in adipiscing ut, porttitor ac ante. Sed euismod, mauris a.
Lobortis laoreet, neque nunc suscipit orci, id ultrices nulla enim ac orci. Proin a erat at mi ornare interdum. Donec sagittis, felis at rutrum egestas, orci risus laoreet diam, quis pulvinar sapien neque id mauris. Suspendisse potenti. Pellentesque eget ligula ut lacus porttitor pharetra et a mauris. Cras varius gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.
Facilisi. Etiam enim metus, luctus in adipiscing at, consectetur quis sapien. Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper. Etiam tempus, felis vel eleifend porta, velit nunc mattis urna, at ullamcorper erat diam dignissim ante. Pellentesque justo risus.
Rutrum ac semper a, faucibus nec lorem. Nullam eget quam tellus, eget sagittis justo.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante enim, tincidunt ut interdum in, adipiscing quis tortor. Nulla turpis lacus, rutrum in adipiscing ut, porttitor ac ante. Sed euismod, mauris a.
Lobortis laoreet, neque nunc suscipit orci, id ultrices nulla enim ac orci. Proin a erat at mi ornare interdum. Donec sagittis, felis at rutrum egestas, orci risus laoreet diam, quis pulvinar sapien neque id mauris. Suspendisse potenti. Pellentesque eget ligula ut lacus porttitor pharetra et a mauris. Cras varius gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.
Facilisi. Etiam enim metus, luctus in adipiscing at, consectetur quis sapien. Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper. Etiam tempus, felis vel eleifend porta, velit nunc mattis urna, at ullamcorper erat diam dignissim ante. Pellentesque justo risus.
Rutrum ac semper a, faucibus nec lorem. Nullam eget quam tellus, eget sagittis justo.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante enim, tincidunt ut interdum in, adipiscing quis tortor. Nulla turpis lacus, rutrum in adipiscing ut, porttitor ac ante. Sed euismod, mauris a.
Lobortis laoreet, neque nunc suscipit orci, id ultrices nulla enim ac orci. Proin a erat at mi ornare interdum. Donec sagittis, felis at rutrum egestas, orci risus laoreet diam, quis pulvinar sapien neque id mauris. Suspendisse potenti. Pellentesque eget ligula ut lacus porttitor pharetra et a mauris. Cras varius gravida.
</div>
</div>
</div>
<div class="site-footer">
</div>
</body>
</html>