I am trying to add a "sticky footer" to my web site based on skeleton but I can't get it to work correctly. I am doing this based on the instruction on this website: http://www.cssstickyfooter.com/using-sticky-footer-code.html. In Chrome I get an extra pixel or two in the height of the page which result in a vertical scrollbar and in IE the main container becomes left-aligned.
Any idea how I should implement this properly based on Skeleton? Thank you Dave for the great work!
I've developed a dead-simple pure-CSS solution to this now, located here. The solution is based on Skeleton 2.0.4 and basically consists of creating two separate skeleton containers/rowstacks: One for the header/body, another for the sticky footer.
Jquery
$(document).ready(function() {
var footerHeight = $('.footer').height()+30; // "+30" footer on to add space
$('body').css('margin-bottom',footerHeight);
});
Css
html {
position: relative;
min-height:100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
padding: 10px;
color: white;
background-color: #7bbc42;
}
If you prefer to have the footer only come into view if the user tries to scroll down to the very bottom of the page, put everything that goes above the footer into a single div that has a min-height of '100vh'.
Related
Hi All fellow programmers and geniuses,
I am using md-subheader of angularmaterial v1 demo at:
https://material.angularjs.org/latest/demo/subheader
I am building a page in mobile device using this and the problem is that the subheader bounces badly when it should not move a bit. This problem was addressed already in the link below (with proper demo) but I could not find any solution.
https://github.com/angular/material/issues/5862
I had the same issue and after searching for a while, I had to abandon md-subheader and instead I put a div above an md-content that would act as a stationary header when the md-content scrolled. Then I conditionally applied a style to the div that would bump it over the width of a scrollbar if there was enough content to scroll so the header would line up with the content.
I did that by defining this style:
.invisible-scrollbar {
overflow-y: scroll;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: white;
scrollbar-base-color: white;
scrollbar-darkshadow-color: white;
scrollbar-face-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: white;
}
.invisible-scrollbar::-webkit-scrollbar {
opacity: 0;
}
And then applying it to the header div with this:
ng-class="{'invisible-scrollbar':vm.resultsCanScroll}"
And finally, I check if the content has a scrollbar in the controller which was a little tricky with an md-virtual-repeat:
// Wait until the next digest so the content is bound before checking the scroll height.
$timeout(function () {
var scroller = angular.element('#searchResultList .md-virtual-repeat-scroller');
vm.resultsCanScroll = scroller[0].scrollHeight > scroller.height();
});
Of course this won't help you if you have multiple md-subheader tags, but it depends what you're trying to do.
I am stuck with this problem, I have a responsive fixed header that is overlapping the main content!
I am using internal/anchor linking on the same page. Both from the nav-menu/header links and from the VERTIAL DOT NAVIGATION Jquery plugin. I am not able to link to the different sections without the header overlapping the first 60px of the section. I have been trying to add margin-top: 60px; to the .container and .section-top class with no success.
I would like to be able to link both from the nav-menu/header links and the jQuery dot navigation, without the header overlapping with 60px.
See this jsfiddle for more!
Just add this:
[id^="section"]{
padding-top: 60px;
}
and remove this
.section-top {
margin-top: 60px;
}
https://jsfiddle.net/w8u2kg1j/
Try using the following CSS, to have the header overlap with only the padding area:
section {
padding-top:60px;
}
So I'm trying to figure out how I'd go about coding something similar to this website: http://www.nataliads.cl/ and how to have the text scroll down for a certain length, but not have the picture to move.
If you are trying to keep a floating block of text or image above the images moving underneath, you can use css "position:fixed;".
.floating-block{
position: fixed;
top: 25%;
right: 25%;
width: 50%;
border: 3px solid red;
background-color:white;
}
example:
https://jsfiddle.net/NYCguyJason/vxcj31zj/
Or the opposite... (because your wording is a bit confusing)
If you are trying to have fixed position image which does not move while the rest of the page scrolls, try this example:
https://jsfiddle.net/NYCguyJason/4n9ab0x6/1/
.fixedBackground {
width: 100%;
position: fixed;
top: 0;
}
Edits
Edits
**EDITS Per your new comments **
Per your comments, here are some additional ideas to get closer to what you described:
1. Pure CSS:
Set the "z-index"s so that certain elements stay on top of others. (highest z-index stays on top. You must set the "position" to something to use "z-index")
demo:
https://jsfiddle.net/NYCguyJason/vxcj31zj/1/
.fullwidthblock { /* this is the first background */
position:relative;
z-index:1;
}
.floating-block{ /* this is the floating block */
position: fixed;
z-index:2;
}
.stayOnTop{ /* this is for all blocks further down the page that should always stay on top*/
position:relative;
z-index:3;
}
?Do you have jquery on your site?
2. Custom Javascript or Jquery:
Keep the element Fixed, until you scroll to a certain point, and then make it scroll up with you.
There's an answer here: (but it seems to be using an older version of jquery)
Stopping fixed position scrolling at a certain point?
3. A full Jquery plugin:
Sticky Kit
http://leafo.net/sticky-kit
--Seems okay
ScrolTo Fixed
http://bigspotteddog.github.io/ScrollToFixed/
--This looks like your best bet, so I updated the jsfiddle to show you this option:
https://jsfiddle.net/NYCguyJason/bn9ekcds/7/
<!-- grab jquery -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<!-- grab plugin script -->
<script type="text/javascript" src="https://cdn.rawgit.com/bigspotteddog/ScrollToFixed/master/jquery-scrolltofixed-min.js"></script>
<!-- trigger the plugin -->
<script type='text/javascript'>
$(window).load(function(){
$('.floating-block').scrollToFixed({
marginTop: 80, //how far from the top of the window to start
// limit: $($('.stayOnTop')).offset().top
limit: 550 //when to make the fixed element start scrolling up
});
});
</script>
I have a situation where I have 3 divs :
- Menu - Header (#rt-top-surround)
- Showcase (#rt-showcase)
- Main Body content (#rt-mainbody-surround)
The Menu is 'sticky' with position: fixed. Therefor I have to move the div that is rendered below it with padding (padding-top: 120px; margin-bottom: -120px;).
The problem that I run into is that on some pages the second DIV is #rt-mainbody-surround. (Than this div is rendered properly.)
But on other pages I have #rt-showcase (that displays some promotional images) as second DIV followed by the main body DIV.
So what I would need to implement is a rule that not adds the padding & margin on the rt-mainbody-surround div when the rt-showcase is displayed. And I'm not wether to do this with Javascript or with PHP and how to accomplish this.
I've made an illustration to show what I exactly mean.
Hope anyone can help me out here! Thanks!
Illustration
If I understand the question correctly you want a margin below a specific div only if another div isn't actively visible. The best way to handle this is to add a bottom margin to the top div and negative margin to the div below it (that can be shown and hidden). The css for that is:
.top {
margin-bottom: 20px;
}
.middle {
margin-top: -20px;
}
Sometimes a picture is worth more than some code though so I created a fiddle here. Enjoy!
Does anyone know if there is a way to disable the horizontal scrollbar using JavaScript?
I don't want to use overflow-x: hidden;.
Without using the perfectly workable overflow-x CSS property, you could resize the content to not require a scroll bar, through javascript or through HTML/CSS design.
You could also do this:
window.onscroll = function () {
window.scrollTo(0,0);
}
... which will detect any scrolling and automatically return the scroll to the top/left. It bears mentioning that doing something like this is sure to frustrate your users.
You're best served by creating an environment where unwanted UI elements are not present at all (through the CSS, through design). The approach mentioned above shows unnecessary UI elements (scroll bars) and then causes them to not work in a way that the user expects (scroll the page). You've "broken a contract" with the user - how can they trust that the rest of your web site or application will do expected things when the user makes a familiar action?
A way to prevent elements from scrolling down in jQuery:
$(element).scroll(function () {
this.scrollTop = 0;
this.scrollLeft = 0;
});
Well, this does not actually prevent the scrolling, but it "scrolls back" to the top-left corner of an element, similar to Chris' solution which was created for the window instead of single elements. Remove the scrollTop or scrollLeft lines to suit your needs.
A dirty trick would be overlapping the scrollbars: http://jsfiddle.net/dJqgf/.
var overlap = $('<div id=b>');
$("#a").wrap($('<div>'));
$("#a").parent().append(overlap);
with:
#a {
width: 100px;
height: 200px;
overflow-x: scroll;
}
#b {
position: relative;
left: 0;
bottom: 20px;
width: 100%;
height: 20px;
background-color: white;
}