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.

How do I give this popup a scrollbar?

I can't figure this out for the life of me. On this page, if the browser height is too small, you won't be able to see the full form. How do I add a scroll bar to the popup so that people with small screen sizes will still be able to see the entire form from top to bottom?
http://kinkarso.com/rayku/profile.html
Thanks!

You change position: fixed; to position: relative; (or absolute if you want it to be overlaid something else) on the .filter-popup class

Your problem is the CSS position attribute for your popup (using filter_popup class). If you used position: fixed, the containing element will not grow to accommodate it. Change it to position: absolute instead and the scroll bar will appear.

To solve this you should use overflow:scroll which is the css way of creating scroll bars.
http://www.w3schools.com/cssref/pr_pos_overflow.asp

Completely disable horizontal scrolling, also in drop events

I got a html page with a sliding panel on the right. This panel is 200px wide, position: fixed, and its position is initially set to right: -100px (halfway outside of the clientArea). Overflow-x is set to hidden for body, html (css), and the panel accepts mouseover events and drop events. On mouse over, the panel slides to right: 0.
If I drag a draggable element on this panel, the panel correctly slides to left, but the window starts to scroll to right, which is an unwanted behaviour.
I also tried a javascript solution as described here: Disable horizontal scroll with JavaScript
but is's a bad workaround because it make the clientArea start flickering.
What is the best way to completely disable horizontal scrolling? Possibly a cross browser solution.
Thanks
Update:
It's not the sliding panel causing the issue, but the helper object of the draggable element (I'm using jquery-ui), which is anchored to the mouse position at top left while dragging. Imagine the helper object as a div 200x100px. When dragged to the rightmost part of the window area, the issue shows up scrolling the window to the right, instead of clipping the helper (and not scroll the window). I sort of manage this by anchoring the mouse to the top right corner of the helper during the drag operation, but I'm still curious if there is any way to completely disable the horizontal scroll of the window. I supposed the helper object to be completely "detached" from the page flow (as happens using position: absolute in css), but apparently it's not.

I ended up changing my initial requirements and thus the page design.

And what if you do not place the panel at right: -100px, but give it a width of 100px and place it at right: 0px?
Then on mouseover animate the width to 200px. It still feels like a slide. I don't know if the content of your panel allows the change of the width, but maybe you can give the panel an overflow: hidden too.

Div Overflow, Scroll only work there, till div is removed and trigger a offset of that overflow offsetheight div

I have a Div Overflow prepended to the body container wrapper, when its triggered this prepend, I wish all the scroll made by the mouse scroll work only in the div overflow which has width: 60% of the window. so I wish anywhere I scroll only work in the div overflow, because the way that it is right now, when you reach the maximum scroll in the div, it starts to scroll the body in the background and also if I put my mouse outside of the div overflow it also scrolls the body in the background. what do I do to help this? I'm using JQuery library.
Another thing is that I would like to add an eventListener when the scroll of that div reach some height, it does something, call a javascript function for example.
Is it all possible? if Yes, how? Thank you guys in advance.

Try adding overflow:hidden to body. The browser will automatically add scroll if its content reachees beyond its boundaries.

how to display scrollbars on page load using javascript?

Is there a way to display the vertical scrollbar immediately after the page loads using javascript? I have a jquery slide toggle animation that, when activated, makes the vertical scrollbar appear because the toggle animation makes the page longer. The problem is that when the scrollbar appears, the document elements "spasm" or "shake". If the vertical scrollbar appears before the jquery animation is activated then I won't have the problem.
Update: overflow-y:scroll; does the trick without much compatibility issues!

Depending on your current function, you can use jQuery (or plain JavaScript) to find the current max-height (that the element can expand to without making the page longer), and simply apply that height (or one that's smaller) with overflow: hidden. Once the new element has been successfully added, the overflow can be re-set to overflow: auto; (or overflow: scroll;).

Or you can set position to fixed on elements animated at begin to avoid scrollbars...
Can you create a jsfiddle.net with a little example of your code ?