My website has a fixed width of 1024px to easier implement for smaller screens, the header and the footer that are displayed are in a fixed position.
However when the users has a smaller width than 1024px the header and footer are cut off, which is fine. However you cannot horizontally scroll to see the rest of them.
I imagine to fix this it'd be something to do with the CSS, however I'm unsure on what properties to change / use.
The pages are constructed like so:
<body>
<div class='header'>
<div class='headerbar'>
<div class='headerleft'><h1>BMRA Web Client</h1></div>
<div class='headerright'><!--image here--></div>
</div>
</div>
<div class='footer'>
<div class='headerbar'>
<div class='footerleft'></div><div class='footermiddle'></div><div class='footerright'></div>
</div>
</div>
</body>
That's as simple as put overflow-x: auto in your header with 100% width.
.header {
overflow: auto;
}
By this mode, you'll have a header with 100% of width, in small screens you'll see how it shrinks. With the hard pixel definition of the elements inside the header (as 1024px), your content will have this width and the overflow in the parent allows you to scroll it horizontally.
If this doesn't fits with your requirements, maybe you need a global scroll solution, that can be made with simply javascript.
EDIT
As we talk in comments, your solution will be to handle global horizontal scroll and move the fixed header with the content, like a relative or absolute header. To make this you need javascript to read how many pixels you need to move the fixed header. Here you are the complete code:
// when scroll
$(window).on('scroll', function(e) {
//calculate left position
var left = $(this).scrollLeft();
//apply to header in negative
$('.header').css('left', -left);
});
Do you like to see it working? Try this fiddle:
http://jsfiddle.net/fbvat00q/
EDIT 2
As far as you need to have the background fixed, you must to relativize the children and target it in the javascript. So your final code will be:
CSS:
.headerbar {
position: relative;
}
Javascript:
$(window).on('scroll', function(e) {
var left = $(this).scrollLeft();
$('.headerbar').css('left', -left);
});
See it working:
http://jsfiddle.net/fbvat00q/1/
If the main wrapper (that one which is set to width: 1024px) doesnt have overflow: hidden as a property, you should be able to scroll horizontally. Try to set it manually to overflow: auto
Loot At This Real Example
You can set wrapper with overflow: scroll, and fixed position, and set for inner value, or spesfic style you want
To manage abehaviour when content overflow a container(both vertical and horizontal), with fixed dimension, you can use the CSS overflow property (see this link for more details):
scoll : to scroll when content overflow
hidden : to hide the overflowed content
visble : to see the overflowed content even if it does not fit the container
In your case you have to set the property to scroll
.selector{overflow: scroll}
If you want to only manage horizontal overflow, you can set overflow-x CSS property .selector{overflow-x: scroll}
For the vertical overflow you can set overflow-y, .selector{overflow-y: scroll}
Try setting overflow to scroll horizontally. e.g:
.header {
overflow-x: scroll;
}
As here: W3C Link
Related
I try to use Bootstrap affix to make an element, during affix on bottom of page and on affix-top to top od the page.
I implement affix and on desktop it works like a charm but on mobile it doesn't work. I mean: on mobile there aren't the toggle of the classes and it remain always with affix-top class..
I use this code:
<div class="affix-div" data-spy="affix" data-offset-top="197">
<h1>Title</h1>
</div>
and css are:
.affix-div.affix {
bottom: 10px;
right: 10px;
z-index: 9999;
}
Why on mobile not change the classes??
(Sorry for bad english)
Bootstrap affix calculates offset based on document height, window scrollTop and the element's offset. One of the pitfall here is the $(window).scrollTop. According to the overflow specification, if you set the body's overflow property neither to visible or clip values, it makes the body a scroll container and scrollTop wont work anymore, because now the body is a scroll container and scrolling takes effect inside of it, not in the window.
Look for the body overflow, overflow-x or overflow-y properties and set the values to visible. If you need the overflowing effect, just wrap the body's content inside of a another element and set the overflow there.
I have a problem, i am making a website for a friend and he wanted a horizontale one page website,
but i have a problem, i want to create it like this that you can scroll the page vertical if the page is longer then the screen, BUT i want the scrollbar IN the div and not over the whole body content.
I created a image quickly what i mean with the scrollbar.
and on this moment if had did it over the whole body all the other pages got the same height if one page was longer then the other one.
Image:
Live example: http://onepage.ringocontent.com/
The live example is how i described it above about that all the pages get the same height if only one page get a overflow with the height.
Adding this to your stylesheet should solve the problem:
<style>
#home, #blog, #info, #contact {
overflow-y: scroll;
height: 500px;
}
#page {
height: auto;
}
</style>
I think what you are looking for here is the overflow property of an element. Particularly overflow-y.
If you apply
overflow-y: auto;
To the #page div then you will get a scroll bar inside of that div if and only if you have content inside of it that overflows the height of the div.
If you are seeing a scroll bar on the right hand side of the page then you have the div #page height set too tall, try reducing the height on that div until that scroll bar goes away.
I have a custom timeline view like this: http://jsfiddle.net/B4xRb/1/
The inner vertical scroll affects the rows beneath the header only.
The parent horizontal scroll affects the entire timeline.
<div class="parentDiv">
<div class="monthHeader"></div>
<div class="lanes"></div>
</div>
However, how could I structure this so that the vertical scroll bar can be seen WITHOUT
adjusting the row data as it can be really wide.
initially scrolling to the right, I want it so as you load the page, both scroll bars are visible
Here's the solution I came up with, using jQuery: http://jsfiddle.net/eB8WQ/6/
First off, to hide the second outside vertical scroll bar, add this code
html, body {
overflow-y: hidden;
}
for .lanes, you want to hide the horizontal scroll bar and set the initial width to 100%.
width: 100%;
overflow-x: hidden;
Next, the javascript you want to use sets the width of .lanes to 100% while scrolling (to avoid the messy flickering problem), and when you're done scrolling, it calculates the position of the horizontal scrollbar and adds that value to the width of your body element. Use the $.data function to store the value.
More information on $.data: http://api.jquery.com/jQuery.data/
$('.parentDiv').scroll(function() {
$('.lanes').css("width", $('.monthHeader').width());
});
$('.parentDiv').scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
$('.lanes').css("width", $('.parentDiv').scrollLeft() + $('body').width() + "px");
}, 100));
});
Some code taken from this previous answer.
I'm trying to make the main body of my site to have a fixed height (I think!).
Anyway, the site body is just white, with a border of size 1. Basically, the size of the body is determined by what's in it so, for example, it will resize automatically as more things are added.
What I want is vertical scroll bars so the body doesn't extend forever (is that right?). Should I have a fixed body size?
If you want vertical scroll bars you can use this in your CSS;
body {
height: 900px;
overflow-y: scroll;
overflow-x: hidden; /* hides the horizontal scroll bar */
}
What are you trying to accomplish? You sound unsure if you even want the scroll bars; is there a reason you want to show the scroll bars instead of just having the browser handle the scrolling when the content gets larger than the window?
Yes. You need a fixed height
body{
height: your-height;
overflow:auto;
}
will generate scroll bars only when you overflow the area without growing it vertically.
So, in your body create a layer:
<div id="mainbar">
</div>
And using CSS you can set the height:
div#mainbar {
min-height:100px;
overflow:auto;
}
The min-height guarantees the initial height that you need. Once it goes over that, it you will automatically have scrollbars. If you would rather the page itself scroll and the body lengthen, just take out the overflow line from the CSS.
If you want the vertical scroll bars to an inner div on your site (like so you can have a footer visible at all times), simple specify the height of the div:
#inner { max-height: 300px;
}
I think the default for the overflow is to scroll, but if your content is cutting cut off with no scrollbars, you could also set
overflow: auto;
I have a div container which is centered (by margin-left:auto and margin-right:auto) and page design looks fine when loaded...
Below this div there is another hidden one, which shows up on user request.
But when this happens browser scroll shows up and mess up my design because centered div also moves few pixels to the left (so it can again be in the center).
Can this behavior be stopped?
Alternative solution is adding overflow-y:scroll but I found that overflow-y is not supported by all browsers and I can't find by which browsers...
Can somebody post a link where I can see browser support list for css3 functions?
With scroll always being shown, maybe be not good for layout.
Try to limit body width with css3
body {
width: calc(100vw - 34px);
}
vw is width of viewport (see this link for some explanation)
calc calculate in css3
34px stands for double scrollbar width (see this for fixed or this to calculate if you don't trust fixed sizes)
This css will always show vertical scroll on your page.
body {
overflow-y: scroll;
}
By default it's overflow: auto;