Develop Reference

How to keep background position in the same location once an off-canvas menu opened?

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.

Page will not scroll

I'm editing a wordpress theme and I want the main content area to be larger. But when I enlarge it beyond the limits of the screen it does not scroll. And I know the most common cause of this problem is position: fixed, but I only found two cases of this in the code and when disabling both it doesn't fix the issue.
The original code makes a div with the id of "content" have a scrollbar, but I made the div much larger and so I want the scrollbar to appear and be back in the default spot like most pages have it.
Resources: Here is the original page for reference. (You can just inspect the code from there since I haven't made any edits to it yet anyway.)
http://themes.themolitor.com/wpzoom/2011/04/first-blog-post-title/

You page has been setup in such a way that, a javascript file is placing an inline style to the content, and giving a dynamic height depending on the screen size.
and the content id has a overflow auto, which gives a scroll bar when the content overflows outside the parent element.
So if you wan to have the scroll bar removed either do "overflow: hidden;" (this will hide the content which overflows unfortunately.
Or you will have to rearrange the whole page structure.

Your problem seems to be in http://themes.themolitor.com/wpzoom/wp-content/themes/wpzoom/style.css, where html and body are set to overflow:hidden. If the content extends past the end of the page, it will not scroll. You can change it to overflow:auto (auto adds a scroll bar when there's too much content to fit), or you can just get rid of the overflow property because auto is the default behavior.
overflow:scroll /* always show a scroll bar */
overflow:auto /* show a scroll bar when the content of a box is bigger than the box itself */
overflow:hidden /* never show a scroll bar */

Using CSS or JavaScript to limit the page size or limit positioning to prevent overlapping

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?

How to stop horizontal scrolling?

I have written a file using html and javascript.
In that Vertical scrolling should be there, but i want to stop horizontal scrolling.
How can I do that?

Sarfraz has already mentioned overflow-x, which is one answer although it means (as it says!) that anything that would have been off to the right is now unavailable to the user. There are use cases for that, but in the main it's undesireable to bother to have content the user can't access.
The question is: Why are you getting horizontal scrolling at all? In the normal course of things, the browser will wrap content such that there isn't any horizontal scrolling required. Provided the user has a normal-ish window size, you cause horizontal scrolling in your design by having elements that you've specified as being a certain width, either via style information or by having non-wrappable content (like a big image). For instance, this won't require horizontal scrolling:
<p>...lots of text here...</p>
...but this will:
<p style='width: 1200px'>...lots of text here...</p>
...if the user's browser window is less than 1200 pixels wide.
So if having the content off to the right unavailable isn't what you intend, my answer would be to find the elements causing the scrolling and correct them.

Apply following style to that element:
overflow-x:hidden;
or it should be:
overflow:auto;
overflow-x:hidden;
this will make sure that vertical scrolling is there when needed.

if you want to use this in every browser, you shouldn't add no width to the element, and then it gets no horizontal overflow, in every browser.

If I understand your question correctly, you want to prevent your content from going beyond the boundaries of the browser window. Very often, designers set their layout widths to 960px in order to set a fixed width centered on the page, which fits nicely within a 1024px x 768px computer screen. As per below comments, a smaller resolution computer would gain scrollbars because of this. You would do that with something like:
<html>
<head>
</head>
<body>
<div style="width:960px; margin:0 auto;">
... The rest of your content goes here ...
</div>
</body>
</html>
You can read more about browser width here:
http://www.fivefingercoding.com/web-design/is-there-a-perfect-web-design-width
If you find that the content stretches beyond this width, then a specific item inside the page is too wide. Look at the page yourself to identify what it might be, or provide a link to stack overflow for our help. To give you an example, having this inbetween the above div would be problematic:
<table style="width:99999px;"> ... table stuff ... </table>

if you want your html.body or div liquid;
div.sample{ width:100%;}
sample div will resize whether your screen big or small/
without scroller/

If you view the file using a browser, you can set the width of the content by setting it to a percentage.

Is it possible to prevent just horizontal scrolling when overflow-x is hidden?

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...