On my site I have the Problem that when I´m coming from the Imprint or How-to-find-us Site and I click on service or contact, the scrollTop doesn´t work correktly.
http://wicker-schuetz.de/en/
thanks
It's doing that because when you get to that point on the page, there's no more room for the page to scroll up any further; because your footer is kind of stuck to the bottom of the page.
You need to add some padding to the bottom of your footer to allow some extra space for your page to scroll up. You can do that by either adding a line to your css:
#footer { padding-bottom: 40%; }
or by adding a line to your javascript file:
document.getElementById("footer").style.paddingBottom="40%";
Either one should work, but If you want to dynamically adjust the padding on the bottom of the footer, so that the padding is just right, based upon the screen size, you might want to take a look at javascript's window onresize event and adjust the padding accordingly. Or you could probably just use CSS3 media queries.
Related
I have a background image as can be seen here https://www.nova969.com.au/win/novas-sending-you-ed-sheeran
The image is background image to the body.
When the off-canvas menu is opened, the background image shifts.
I will like to keep the background image to stay in the exact location where it was before opening the background image.
You will notice the following css is there for the body
body.has-background {
background-image: url(https://d2nzqyyfd6k6c7.cloudfront.net/nova-skins/972409-novafm-edsheeran-platwinpage-bg.jpg);
}
When the off-canvas opens, it causes background position shift. I need to ensure that the background does not shift. Can someone help me in getting this resolved?
Combining the two images into one is not an option for our case at this moment.
Also, to replicate,
Go to the link using any browser in Desktop
scroll a bit down the page.
Open the off-canvas menu (the one on the left-hand top side)
You will notice the shift of the background
If i've understood your problem correctly then the following should fix it.
Edit: it seems to only be an issue on devices over 1200px wide? If so, then apply these changes using #media (min-width: 1200px).
Make the following declaration additions to the following selectors:
.disabledInteraction {
position: relative;
}
(or delete the position: fixed; from .disabledInteraction)
and then:
.header-fixed .site-wrapper {
margin-top: 0 !important;
}
The problem lies with fixing the position of body. If you remove this declaration or change it to position: relative, you can see this stops the image moving around problem.
The problem then is that the text moves up the screen, which is caused by some JS changing the margin to -268px. Adding margin: 0 !important overrides this, but if you can you should stop the JS from adding this negative margin.
Hope this helps!
As you might of figured out, this is a standard behavior of a website. Content shifts as your available area shifts (scroll is part of visible area) causing your whole content of the page to shift 17 pixels? (Whatever the scroll is).
What you need to do is append a scroll once the sidebar is open.
I had a play with your website and it works, however there must be some javascript which removes the scroll bar.
I was going to fine the file for you, but you're returning too many files and I don't have time to go through all of them.
Selector:
body > div.site-wrapper.off-canvas-menu-overlay
Add overflow-y: scroll to that div using javascript, on sidebar open event, or when you add it in CSS make sure whatever is manipulating that Element once the sidebar is open that it stops as currently it seems to append styles on open event.
I guess you mean the "hidden" menu on the left side of the page.
The background shifts because the scrollbar is removed when you open the menu.
You could change your code so the scrollbar stays visible, or shift the background image to accomodate for this change. I'm not sure if you can do that so it will work without a flicker in every browser, so your best bet is to keep that scrollbar visible.
I would like to add a footer to a page, but I don't want the footer to overlap the text if the user makes the page too small. How do I prevent this from happening without making a large table or a bunch of returns? The footer code is located in an included page. Perhaps there might be a way to chose when scrolling turns on or a minimum from the top CSS attribute.
I thought I explained it well enough, here's some more explanation:
On the page with the footer, there's a tag include('footer.php').
In footer.php, there's a section of text aligned at the bottom, with something like,
<div style="position: fixed; bottom: 10px">Footer Text</div>
If the user makes the window too small, the text will overlap everything else. I'd rather it stay at the bottom and a scroll bar appear.
The problem is not clear, but you might be looking for a responsive layout. This allows you to use a different set of CSS rules when the viewport's dimensions fall below a certain "breakpoint".
The specific technique is known as media queries. You might use it to hide the footer when the viewport gets too short, as follows:
#media screen and (max-height:700px) {
footer { display: none; }
}
Probably you're looking for something like a sticky footer, then?
On many sites now, say you have a toolbar/table-header that is midway in the page.
Once you start scrolling, you can't see the header or toolbar anymore so you can't perform actions on any rows you may have selected, or you can't see the name's of the headers of the columns.
Many sites do this now, which is great, when you start to scroll the toolbar/header is fixed at the top of the browser. This doesn't happend right away, only when you scroll down to the point where the header/toolbar would normally not be visible.
How can I do this? Is there a name for this functionality?
Gmail has this, if you scroll down when reading an email, the toolbar at the top is fixed at the top so you can label/move/spam the email.
Take a look at jQuery Waypoints - Sticky elements, should be what you're looking for.
Use this css:
.static{
position:fixed;
}
And then, put a class="static" to your header element.
Hope this helps. Cheers
You don't need Javascript to solve this problem — don't make it harder on yourself. Using fixed positioning forces the header to "hover" above your content, and when you scroll, remain at the top of your screen, not at the top of the page. You can use this CSS to make your header fixed.
.header {
position: fixed;
}
Make sure you assign the class "header" to your div. For design reasons, I'd suggest keeping your header at the very top of the screen and stretching all the way across. You can use this CSS to do so.
.header {
top: 0px;
left: 0px;
width: 100%;
}
Technically, you don't need to specify "top" or "left" positioning, but it ensures you don't have anything to go wrong if you do decide to change something like that later. You can take a look at other types of positioning at this site.
I have webpage with a large height attribute which displays products. I want the user to hit space bar to move the page down to view more products, but I need my screen widgets (shopping cart & categories) on the left and right to stay in the same place on the screen. And I don't want to use scrollbars. I assume this is a javascript request, can someone point me to a good resource for this?
There's no reason to use JavaScript here - CSS should do. Using position: fixed, you can fix the elements in your page such that they always remain in a certain position relative to the user's viewport. An example would probably illustrate this best: http://www.jsfiddle.net/yijiang/qtkss/
Further reading:
http://reference.sitepoint.com/css/displaypositionfloat
http://reference.sitepoint.com/css/display
http://www.alistapart.com/articles/css-positioning-101/
You don't need javascript for this, just use position: fixed; in the widget's CSS and set the appropriate top, bottom, left, and right values on the widgets. That will position the widgets in a fixed location with respect to the browser window rather than other elements in the HTML.
I have a web page that has content which extends past the right edge of the browser window. I set overflow-x: hidden on <body> to turn off the bottom scrollbar, but I can still scroll horizontally with the trackpad, which is not what I want.
Is there any way to prevent the browser from scrolling horizontally?
As a side note: Safari 4.0.4 only scrolls horizontally sometimes, and the scrolling feels "sticky" and "jumpy," whereas Firefox always smoothly scrolls horizontally.
you could try to set in CSS:
html{
overflow-x: hidden;
}
instead of use body selector.
I tried that and works in firefox.
I think the real question is, why do you have your content overflowing out of the intended size of the page? Is this content that you don't want users to actually see? In that case, put it in a div somewhere and set it's display to none. That would avoid the overflow issue entirely.
If there is a legit reason you want it to overflow the container, then set the size of the container explicitly, then the overflow-x to hidden. I haven't tested it, but that should prevent the current behavior. If not, try using a div, rather than the body tag. The browsers may be acting strangely because it's working on the body tag itself.
I would go into Chrome and open the developer tools on a desktop. Remove the overflow-x property. Then proceed to delete each parent element on your page. When you see that the horizontal scroll bar disappears, you know you have found your problem. Then dive into that element. My bet is you have a width of 100% and than a margin put onto it. Remove the margin if that is the case.
If all else fails, you could use Javascript to constantly force the browser to scroll to the left using window.scrollTo(xpos, ypos). For xpos you'll want to use 0 and ypos you'll want to get the user's current scroll position assuming you want to allow vertical scrolling.
You could put your function call either in the window.onscroll event handler, or in a javascript interval that runs every 100 ms or so. Up to you. If you need code examples just ask.
This would be better to understand if you had an example.
is this a long url or something with no whitespaces? Do you have white-space:nowrap; set on the element?
If you have a container with a defined size (one that fits in the viewport), the text should adhere correctly, (unless it's a long line with no spaces)
Old discussion, but it could be of use to people looking for the right answer !
Set "overflow:hidden" on the parent div of the element that is wider than the browser window (not html or body as you would normaly do), that will stop the scroll with de pad or the arrows pad...