I have a website which uses 100% width and I accidentally removed the scrollbar.
When I coded back in the scrollbar it's visible but will not scroll down the page. I have the CSS code and the script. What other code do I need to get the scrollbar to scroll down the page?
Here is my existing code within my page:
Site link: http://www.hgcarpentryandjoinery.com/MXJGTV/Index1.html
Please go to the above address and right click and view source code because I don't know how to use this site.
You gave the body position:fixed;. That property makes it so the body cannot be scrolled. Delete that line and your problem should be fixed.
There's an inline position: fixed in the body tag. Remove it and fix the whole code because it's pretty messy
Related
I have a strange question -- my apologies if it is a silly one. Please note the code it too large to reproduce in a snippit so I am posting the link here.
The page I am building is a small intranet page with a full width header. When the user clicks on the button beside the submit button, a div from the top opens and pushes the content down. My problem is in my code editor there is no scroll bar on the page, so when the div opens it pops the entire page slightly over to the left to compensate for the scroll bar.
On codepen, I've pasted the shell of the site, but because a scroll bar is included in its code area, the problem cannot be reperoduced exaclty.
Is there any way I can compensate for the lack of scroll bar in my code? Perhaps force one to be there?
Any help would be grand.
You can force a vertical scrollbar by adding the following CSS rule to the body:
overflow-y: scroll;
EDIT: I misunderstood your question.
Have the whole moving element absolute positioned and wrap it around a container. The scrollbar will appear on the wrapping container, not on the element itself. And because it will be with position absolute there won't be any change of position once the scrollbar appears.
I'm using fullPage.js (which is a great plugin) to create a photo gallery page. The problem is that this page has a header and a footer, they're not fixed, but they need to appear on this page. What should I do?
I already tried normalScrollElements, but with no success so far.
My structure is:
[header - not fixed]
[scrollable content]
[footer - not fixed]
Any ideas?
the property that you try to use is not planned for that:
normalScrollElements: (default null) If you want to avoid the auto scroll when
scrolling over some elements, this is the option you need to use. (useful for
maps, scrolling divs etc.) It requires a string with the jQuery selectors for
those elements. (For example: normalScrollElements: '#element1, .element2')
It just prevent the scroll of your content page if this one also contains a div with a scroll.
I used a bit this plugin and it am pretty sure it scales on your browser window resolution (its a fullpage plugin after all), best advice for you should to put your header/footer in fixed position or as Jonas said, duplicate your header and footer in each section, but they will scroll with the content pages :/
The plugin is a full page plugin as its name says. You won't be able to have a header and a footer which you can reach by scrolling unless those are full page.
Make your header and your footer fixed or add the header in the first section and the footer in the last one. (absolute positioned to a relative section)
Im working on a Website and everything is ok, except my webside is "shaking". (I'm using chrome)
The margin of my main Container is changing on some sides and i have no idea why. They have the same html code, it must have something to do with the content in the main div-container
My Website: www.anitalernt.de
http://www.anitalernt.de/about-us.html is a bit more to the left and http://www.anitalernt.de/index.html after getting a task (just click some buttons) also.
Has someone a idea?
Always display the scrollbar
html {
overflow-y: scroll;
}
See:
Always show browser scrollbar to prevent page jumping
How to always show the vertical scrollbar in a browser?
You could add
html{ overflow-y: scroll;}
to your css.
Places a permanent (but sometimes empty) scroll bar on the window
The issue is most likely caused by the scrollbar appearing, which reduces the viewable area of the browser window and may adjust the contents accordingly.
There are a couple possible workarounds:
You could extend the length of the adjusted web-page so that the content (post-adjustment) also runs "below the fold"
Alternatively, you could encase everything in an absolute positioned DIV which won't "shake" when the viewable area contracts on the scrollbar's appearance.
Or -- depending on your specific content -- you could disable the scrollbar. Although this last workaround is only advisable in very specific cases.
body{
margin: 0;
}
seems to resolve this without having to add a dummy scrollbar :)
I had the same problem because of jQuery scroll where I was checking the scroll value and using that. I fixed my navigation bar by using addClass and removeClass, adding class was not working because I did not use !important in CSS class.
I have made the main framework of my webpage in HTML / CSS but now realise that i need a sticky footer which is always stuck at the bottom of the screen so position fixed and i need the internal segment where all webpage content goes called (wrapper) to stretch from the bottom of the header to the top of the footer, so what i would like is that when you zoom out on the web browser the wight segment fits the whole height of the browser so that it would work on any display height.
Here is a JS fiddle
http://jsfiddle.net/Q8JpC/5/
If anyone finds out how to do this please could you write the code in stack overflow as a reply as this jsfiddle is just my test website and will not be using it for the real thing.
I have tried setting the wrapper as
height:100vh;,
this does always fill the screens height but it does not allow for when i add content it does not extend to fit the content off the screen.
Thankyou very much for any help ! thanks
didn't apply it to your design but i often use this technique:
See: Modern sticky footers
I would also suggest to use html5 markup tags, they are created to get the semantics right instead of using classes like header, nag, footer, etc...
EDIT.
I edited your fiddle here:
JSFiddle
Just add:
html {
position: relative;
min-height: 100%; }
Besides that, change the body to position absolute instead of fixed and add a margin-body to the body element w(same as height of the footer).
I'm using smoothscroll.js to navigate my site. It stops on the correct anchor in Firefox, however in Chrome it passes the point on the first click of the link, and pushes the content to the top, hiding the content behind the page. then if you click it again, it aligns correctly. I've seen the problems on other sites as well. Curious to see if others have the same problem. Chrome seems to ignore any top padding or margin or positioning (example: top:20%;).
SOLVED: http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/#method-D
There are several methods available.
I used Local Scroll (JQuery) to do this.
It allows you to do a top offset
$.localScroll({
offset: -100
});
This may be due to a new wordpress theme using the header html5 element. I changed my header to a div, and it worked fine.