I'm currently face an issue with my fixed 100% width header overlapping the scroll bar. I need the overflow-x:hidden as I have CSS animations which fly in and cause horizontal scrollbars.
Here is the JS Fiddle Code: https://js fiddle.net/kanwu3mc/1/
Any help greatly appreciated.
A quick solution would be to add the following to your scroll event callback:
header.style.width = `${document.body.scrollWidth}px`;
However, I would suggest that you consider implementing a largely CSS solution for such tasks. Consider making the header position: sticky and adding a new teal color class to the element when the scroll event is triggered.
This is a problem
html, body{
...
height:100%;
...
}
change to
html, body{
...
min-height:100%;
...
}
It's incorrect to fix the height of html and body that way. Only min-height allowed in this case.
Related
document.body.height = document.getElementById("page-main").clientHeight + 400;
#page-main {
position:absolute;
width:100%;
height:2000px;
z-index:2;
background:#eeeeee;
}
#footer {
position:fixed;
width:100%:
bottom:0px;
height:400px;
z-index:1;
background:#aaaaaa;
}
<body>
<div id='page-main'>main</div>
<div id='footer'>footer</div>
</body>
I have a footer div with position: fixed; bottom: 0px; and a main content div with position: absolute;.
Basically the idea is to have the main content div act like a sheet of paper on top of the static background of the document, so you would scroll through the content of the page and when you get to the bottom you would need to be able to scroll a couple hundred more pixels to reveal the footer div below the main content div.
I allowed this in my landing page by finding out the height of the body necessary to facilitate this extra space at the bottom and setting the height using height: 1720px; on the body itself. However, I'd like to implement this in a way that it does not need to be constant, as I fear browsers and devices may have different rendered heights for the main content div and I'd like to use this on multiple pages without having to individually hard code the body height.
I tried using JavaScript to find the height of the main content div (using clientHeight, which seems to work perfectly) and add a couple hundred pixels to that number for the height of the body as follows:
document.body.height = document.getElementById("page-main").clientHeight + 400;
and also tried changing the following:
document.body.style.height
document.body.style.paddingBottom
This does not change the height of the body at all. I tried using a similar approach to change the body's background to red, which works, but for some reason it just refuses to change the height specifically. I've tried placing this script in the head, above the body, and at the end of the body. Doesn't help. Finding the clientHeight of the main content div works fine, adding 400 to that number seems easy enough, and I know the document definitely has a body, so I'm very confused as to why it could possibly be that JavaScript refuses to change the height of the body.
I've checked the console in Edge and Chrome and it seems there's no issue, so I'm completely lost here. Normally I can find answers online and I've never had to ask for help but at this point I feel like it's such a simple question and I have no idea why it won't work.
Sorry if this question is't written well, but does anybody have an idea of why JavaScript might not be allowing the changing of the height of the body?
TL;DR:
content div is positioned absolute and can change depending on scenario
footer div is positioned static on the bottom and is supposed to be revealed below the content div by allowing user to scroll a couple hundred pixels below the end of the content div
I want to achieve this by altering the height of the body, which works perfectly through hardcoding in html but for some reason JavaScript refuses to change the height of the body
Try it like this:
document.body.style.height = document.getElementById("page-main").clientHeight + 400 + 'px';
You have to specify the units to get a proper result. Like you would do in CSS.
Setting the height of the body element, the way you want in your question, is complicated by it's relationship with html element and their default CSS (like position: static on body), and by the overflow property. Read more here.
From my experiments on the chrome console, you can't set body height via document.body.clientHeight, it seems to be read-only. You'll need to set height (and possibly overflow) properties in CSS (via document.body.style for javascript).
However, I think the best solution for the effect you want doesn't involve setting body (or html) properties at all. Try this:
Let the footer element by default have CSS: display: none
Detect when user has scrolled to the bottom of the page (using jQuery or scrollTop) or bottom minus some offset
Change the footer's CSS to display: block (by toggling classes preferably, or editing the style property). This will automatically increase the body's scrollbar to accommodate the footer.
When user scrolls back up beyond the footer (or point 2 is false), you set it's CSS to display: none again.
With the above approach, there is no need to hard code or know before hand the height of your footer and non-footer content. You don't need to mess with html or body element CSS. You can also apply CSS animations if you want!
This is the first time i'm trying out Nivo Slider, so bear with me here --
I'm trying to position my controlNav thumbnails INSIDE the slider (I want it in the center, 15px from the bottom of the slider), but so far using position:absolute and left and top attributes just make the entire positioning of the thumbnails position around the body instead of the slider.
Am I doing something wrong? I'm looking online for solutions but I just can't find any. Maybe I'm searching for the wrong keywords?
The site I'm testing it out with is [link removed]. I've reset the thumbnails to the original centered below slider layout, if you want to fiddle with it inside the console it'll be easier.
If when you say "thumbnails", you mean the small pager icons then you can change the css to:
#front-showcase .nivo-controlNav {
z-index: 10;
position: relative;
bottom: 40px;
}
Here I removed display:block and you can adjust the 40px to what ever will suit your layout needs.
In your CSS, set the positioning properties on .nivo-control instead of nivo-controlNAV.
This worked for me by adding to your <head>:
<style type="text/css">
.nivo-control {
position:relative;
top:-45px;
}
</style>
Ah, looks like i've found the answer with help from #aditya and #mToce's answers.
Seems that I forgot about positioning the #front-showcase as a relative element, thus making the controlNav position itself with the body element instead of the slider element.
For more information, read this :
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I've solved the thing by entering position:relative; inside my #front-showcase, and entering position:absolute; inside .controlNav.
Hope this helps!
I have 2 toolbars, 1 of each side of the screen, and a main content area. I dont want it to have to sidescroll cause that is pathetic, so i was trying to figure out if someone could help me set it up.
My current attemp was:
$("#main").css("width", window.outerWidth - $("#t1").width() - $("#t2").width());
The issue is that it is too big still because of margins. Instead of me doing width, should i do outerWidth, similar to how i did window, or is there a jquery command which will do just that?
Thanks
here is a basic fiddle: it is set up differently, but the idea is there. I just am unsure as to how to do it. http://jsfiddle.net/fallenreaper/DfZx7/
Upon tinkering deeper and deeper with my fiddle, i am fairly certain i figured it out in the example i had given. derp Standby while i look and see if i can apply the same thing to my code.
The sample did not work with my code, but border was set to 2px around, for both main and attributes. Deducting 8 pixels resolves.
You don't need JavaScript to avoid scrollbars. It's a layout width two fixed-width columns and a liquid one.
Here is the "skeleton" of your layout in a responsive way:
<div id="window">
<div id="column-sx"></div>
<div id="main"></div>
<div id="column-dx"></div>
</div>
CSS:
#window {
width:100%;
overflow:hidden;
}
#column-sx {
width:54px;
float:left;
}
#column-dx {
width: 140px;
float:right;
}
#main {
width:100%;
float:left;
margin-right:-194px; /* left + right col width */
}
#main > * {
margin-right:194px; /* left + right col width */
}
This way it will never "break" nor cause an horizontal scrollbar.
Anyway, probably you want to set a min-width for #main contents, and add another container for contents instead of targeting them with > *
Check this fiddle with your code revised
Off the top of my head, i would think outerWidth would work. If it doesnt, you can find the margin value via the .style attribute - but thats not ideal.
One thing you should be aware of is window resize if your setting your widths dynamically and you truely hate horizontal scrolling. You could put the above function also in the $().resize() function to ensure the widths are always within the window and complement this with css min-width so it doesnt go too small.
how to make the scrollbar of the hole page affect only on ConentPlaceHolder , i use style=" overflow:scroll; height: 500px;" but it makes a special scrollbar for Conentplaceholder but i want the main scrollbar to do this effect .
As far as I know, the best way to do it will be to use position:fixed on all your non-scrolling elements, and then just let the page flow normally. This way, the main scrollbar will scroll the content while the rest of the page appears not to move, giving the desired effect.
Here is a jsfiddle of Dereleased's suggestion: http://jsfiddle.net/sQmhY/2/
Note that the padding of the #content div is the same as the heights of the #header and #footer divs.
Demo
scroll bar demo
Documentation
Using position:fixed fixes an element both vertically and horizontally, but I want my element only to remain horizontally fixed. That is, I want it to scroll vertically with the rest of the page.
Is there any CSS way of doing this? If not, would monitoring scroll offsets and then moving the element be the right approach?
I ended up doing something like this:
.fixThisHorizontally {
position:absolute;
z-index:100;
}
Then,
jQuery(window).scroll(function() {
jQuery('.fixThisHorizontally').css('left', document.body.scrollLeft);
});
Thanks to all who answered.
position:absolute;overflow-x: hidden; overflow-y: scroll;
did you try these
I don't think this is possible entirely with CSS. I would, indeed, use position:absolute and use JavaScript to change the top css value when the page is scrolled.