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.

Hiding overflow on HTML tag makes browser jump to top of the page

When I set the style on the html tag, like so in AngularJS:
angular.element($document[0].documentElement).css('overflow', 'hidden');
The page jumps to the top of the page. How can I prevent this?
I am trying to display a full page overlay, and when I try to scroll, the background scrolls. It doesn't scroll when I set the overflow: css style on the html tag. That has lead me to this problem.

When you hide the document, you're essentially telling the browser to not scroll. That's why you're being directed to the top of the page, as the page in essence no longer extends beyond the viewport.
While not every browser will send you to the top of the page (expected behavior here would be to lock the user into the page where they're at), something like active tracking of a hash (e.g. mypage.com/#ShowLogin/) like Angular often uses for routing could very easily cause the page to jump to the top of the screen.
Edit:
If you want to keep the background so that it doesn't scroll with the page, use the property background-attachment:
html, body {
... /* Other code here */
background-attachment: fixed;
}

Fixed Off-Canvas Menu with Zurb Foundation

I am building a web page with Zurb Foundation. I need my web page to run on phones and laptops. What's unique about my app is I want to do something more refined than responsive design. For that reason, I'm making heavy use of the show-for-small-only and show-for-medium-up classes.
In my phone view, I'm making use of Offcanvas navigation. As the HTML is setup, it works great if you include the content of your page in the off-canvas-wrap div. However, in my scenario, I cannot do that. Instead, I want to have the content of my page outside of the off-canvas-wrap div. This creates two problems:
The menu doesn't grow to the size of the window.
If I make the right-off-canvas-menu the height of the window, it pushes my content down.
I've created a JSFiddle here that demonstrates the problem. Is there a way I can make the offcanvas menu just slide over the top of everything? I do not need to push everything to the left. Pushing is fine. My main issue is I need to have the content where it is, but still have the menu appear full-size when needed.
Thank you

Or if you want to actually use the offcanvas menu and simply have it overlap your content, you can add this CSS (Foundation 5)
.off-canvas-wrap.move-right,
.off-canvas-wrap.move-left,
.off-canvas-wrap.move-right .inner-wrap,
.off-canvas-wrap.move-left .inner-wrap {
height:100%;
}
.off-canvas-wrap {
position: absolute;
z-index:100;
}
.main-content-wrapper {
padding-top: 2.8125rem;
}
And wrap your content in
<div class="main-content-wrapper">
[your page content here]
</div>
I updated your fiddle with the changes so you can see it in action. Obviously if you want to only show the offcanvas menu conditionally, you'll want to add a media query wrapper to those rules so they only affect the page when you want them to. Otherwise you're adding padding to the top when you don't need it.

If you don't want your content to move when you click the navigation button, then you should not use off navigation canvas (that's what its supposed to do). Instead just use the Foundation 5 Button and set the CSS to be height = 100%
http://foundation.zurb.com/docs/components/dropdown.html

Use JavaScript to have pages slide in?

I'm creating a web based mobile application and looking for a way to slide between pages.
Currently I have all the pages (which are divs) set to absolute and have them placed exactly on top of each other. Only one page is visible at a time, when the user clicks a button it hides the current page and sets the button targeted page's visibility to true.
I need the page to slide though, like iOS and other mobile platforms do. Using jQuery Mobile is not an option for me (I'm creating a framework myself).
If anyone can advise me on how I can have the pages slide in rather than cut and show immediately I'd appreciate that.
Thanks

You can use css transitions to animate the div's position, e.g.
.page {
position: absolute;
transition: left 1s;
left: 100%;
}
.page.in {
left: 0
}
See also: http://jsfiddle.net/jkDUm/
It probably doesn't show the exact effect you are looking for but it demonstrates the idea...

WordPress menu position

I am running a website using WordPress and using some javascript that changes the page see http://s72956.gridserver.com/dev/.
I want my menu position to be static at 150px down and 800px right and not move when I change my browser window to any size. Currently when I try position:static; it moves when I click on one of my javascript links that expands a section. Can anybody help?

In your css, try position: fixed; instead of using position:absolute;.