We Keep Coding

Page scrolls on mobile devices due to hidden menu

UPDATE AT BOTTOM: I discovered a partial solution, but still not a total solution. So, I will leave my question up.
I have made a new webpage, and placed the hamburger menu on the top right of the screen, and hidden it off screen when not selected. The code is too lengthy to copy/paste here, but you can view source of my new page at this URL: https://ContractWithAmerica2.com
My problem is this: When I scroll up and down on my mobile device, and don't scroll "exactly" up/down, the screen slides to the left or right due to the extra content, (content is this: my hamburger menu which I hid to the right of the visible viewport).
Now, my desktop behaves: I was able to insert HTML CSS code that removes the scrollbar; however, on my smartphone, the scroll is not disabled-- and it is annoying to me (and to others).
Now, I found another webpage with HTML and CSS that, like my page, has a hamburger menu on top-right, so I thought I'd be "smart" and copy it. That page is at this URL:
https://www.WesternJournal.com
However, it uses a form of CSS that draws from a stylesheet, and yet even when I tried copying their stylesheet method, I was unable.
My request is for assistance in writing CSS directly into my page's HTML code (which makes my page more stable, as it will not need to send a "call" for a stylesheet), that will do this.
My HTML and CSS are, so far, good in making my page work-- except for this one flaw. Does anyone know the proper code to make my page "lock" and stop the left-right scrolling when my menu is hidden? Like the Western Journal website does? When scrolling on that page, it scrolls up/down ONLY-- and does not allow me to scroll to the left-right, exposing the hidden menu-- as does my page.
P.S.: I looked all over StackOverflow, but no answers prior given have fixed this problem for me, so I must ask de novo.
Thanks!
Gordon, new StackOverflow member!
UPDATE: Remember, when I said I discovered a partial solution at top? Here is my update:
Initially, I had this code:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
But just earlier today saw some post some place with newer info, and I updated that section to this:
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
In other words, the newer code I found online had the "user-scalable=no" attribute, plus some code specific to Apple devices.
Plus, prior versions had this code:
<style>body{overflow-x: hidden;}</style>
But my newer version added a few more bells and whistles:
<style>body{overflow-x: hidden; position: relative; width: 100%;}</style>
When I ran the tests, however, it worked ok only on CHROME (both desktop and mobile device), where both the scrollbar disappeared, and the touch screen attempts to scroll "left-to-right" were finally stopped. (I.e., my menu, hidden off-screen, stayed hidden until clicked.)
My "desktop" OPERA browser worked ok, but, while my desktop MOZILLA FIREFOX hid the scroll bar (good), it still let me manually scroll (with the arrow keys). My mobile experience was even worse:
Both the SAMSUNG INTERNET BROWSER and my OPERA BROWSER on my smartphone (mobile device) allowed the page to scroll left-to-right, meaning users who scrolled "down," when reading would scroll to the left, exposing the hidden menu if they didn't scroll "exactly" top-to-bottom.
In other words, only GOOGLE'S CHROME worked ok on my mobile device.
Can anyone else weigh in?
URL: https://ContractWithAmerica2.com And: Mirror pages are https://GordonWatts.com/m.index.html and https://GordonWayneWatts.com/m.index.html
Call me old fashioned, but I like a "spare tire" (redundancy) on the Internet Highway, and so I cross-post to several mirrors.
Thank you if anyone can help me get it to work in ALL browsers!
Gordon Wayne Watts, FLORIDA
Screenshot of problem

iPhone viewport meta tag width=device-width not working

I tried all possible viewport meta tags but nothing seems to be working.
Can anyone help me on this?
<meta name="viewport" content="width=device-width,initial-scale = 1.0">
Site is http://sival.dk/ . You can run on chrome iphone simulator. When you load the page you feel that the page is fit, but try scrolling through x position, you could see that the page is not fitted entirely in iphone
UPDATE: Thanks to Cory's answer. I finally found that the problem was not with meta tag, seems the problem was with the title involved in the page. See Marked answer for reference.

In cases like this, I usually use the chrome developer tools to look for any element whose padding or margin is making the page wider than the device width. In this case, it was your <h1 class="site-title">sival</h1>. See the screenshot below. Adding margin: 0 to the styles for that element (or fixing the element in another way) should solve your problem.

This image is not set to device-width cause the problem within your media queries.
<img src="http://sival.dk/wp-content/uploads/2015/09/Logo.png" width="450" height="168">
and this heading tag margin needed to be set.
<h1 class="site-title">sival</h1>

Video tag on jQuery Mobile page causes page to jump to top

I have been working on a jQuery Mobile site and have been noticing that once the page was loaded it would jump back to the top of the page after a second or two - giving a horrible user experience if the user had scrolled down immediately.
It turns out this only happens when an HTML 5 VIDEO tag is present on the page - even if it has no associated script, absolute size and even if it's in an iframe.
I made a sample test page to demonstrate:
HOW TO TEST BEHAVIOR
Open the jsfiddle http://jsfiddle.net/MR966/1
Click Run
Click within the output panel IMMEDIATELY and hit space bar a couple times to scroll down. You must do this the instant the page loads.
After the Youtube Video has loaded the page will jump to the top.
Click Run and try again if you weren't fast enough.
<HEAD>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"
<BODY>
<h1>JQuery Mobile Video Jump</h1>
<div class="fake-content"></div>
<div class="fake-content"></div>
<div class="fake-content"></div>
<div class="fake-content"></div>
<div class="fake-content"></div>
<div class="fake-content"></div>
<div class="fake-content"></div>
<iframe width="640" height="390" src="//www.youtube.com/embed/EQ1HKCYJM5U" frameborder="0" allowfullscreen></iframe>
The content can be anything - just long enough to be at least one screen length in height.
.fake-content
{
margin: 1em;
background: orange;
height: 10em;
}
NOTES
Removing jQuery Mobile stops this behavior : http://jsfiddle.net/MR966/2/ (you'll see the background is yellow showing it wasn't initialized). So it is definitely doing something to cause this.
Removing the video stops this behavior.
This happens for pure video tags, and YouTube - which is somewhat surprising considering they're within an externally loaded iFrame.
The word 'video' doesn't appear once in the jQuery Mobile sourcecode!
This happens on Chrome / iPad / IE / Firefox.
On an iPad it's particularly bad because the page doesn't jump to the top until the scrolling has completely stopped due to de-acceleration.
If you don't see the issue keep trying, use a slower internet connection or copy out the HTML from the JSFiddle to a local page.
On my actual page with other resources this is a much bigger issue than on this simple quick-fire test page.
I have video on each of my pages and if I can't fix this I'll need to abandon JQM at the eleventh hour :-/

This is normal end expected behavior, let me explain why.
When page content is larger then available page height jQuery Mobile will scroll page to the top before transitioning to the other page. This is happening because, if you transition page which is fully scrolled and second page is not high enough you will be faced with empty screen. So jQuery Mobile need to correct current viewable position before transition can occur.
This is easily solvable with iScroll plugin + iScrollView extension for jQuery Mobile. You want feel any different and everything will work just fine.
This is because height of iScroll div container is as high as screen height while inner div is scrollable and can take as much height as you need. Because top most div is high as available screen height page will normally transition without unnecessary jumping.
Read more about this problem here and here.

This problem only occurs on the initial page load.
Looking at the source code it turns out to be related to this line:
// window load event
// hide iOS browser chrome on load if hideUrlBar is true this is as fall back incase we were too early before
if ($.mobile.hideUrlBar)
{
$window.load( $.mobile.silentScroll );
}
I commented out just the $window.load line and the problem went away.
The problem of course is that $window.load with lots of video / images can take 1-2 seconds. So if the user scrolls in the meantime you get a painful jump.
This hideUrlBar behavior is related to trying to hide some iOS specific toolbars, that I don't even care about anyway. So I can do without this 'fall back'.
The problem with just setting hideUrlBar=false in mobileinit is that this variable is used elsewhere during normal scrolling and means the window doesn't scroll to the top after a transition. I think this is a bug.
Final fix
I settled on this:
In my mobileinit event I set hideUrlBar=false to prevent the $window.load event from running.
When the page is loaded then I re-enable it so as not to break transitions between pages (from a link at the bottom to another page).
// mobile init
$(document).on('mobileinit', function ()
{
$.mobile.hideUrlBar = false;
$.mobile.defaultDialogTransition = "pop";
$.mobile.defaultPageTransition = "none";
});
$(window).load(function ()
{
$.mobile.hideUrlBar = true;
});
This seems to be working fine, but the fact that setting hideUrlBar=false breaks other scrolling is bad. At least I managed to fix it without having to change the source.
Misc notes
I ONLY had this 'jumping' problem during in initial page load. This isn't a problem for me during transitions since the $window.load code above is only ever executed once and not after a transition.
I have transitions turned off anyway.
My application is fully responsive and meant to work on mobile and desktop alike.

When designing a website/webapp for iphone, how do you prevent tapping on an input from pushing your page up?

When designing a website/webapp for iphone, how do you prevent tapping on an input from pushing your page up?
I have a sencha touch page with a fixed layout and a 'toolbar' up the top, i don't want this from scrolling off the top of the screen when they tap in the input box.
Thanks

Here is a workaround, I don't know if there's any other way of accomplishing what you want.
I don't know what you're building, but this might be of use too:
<meta name="viewport" content="width=device-width, user-scalable=no" />
The above code will prevent the page from beind zoomable.
Credits go to this SO answer.

Wordpress 2.8+ and IE8 display problems?

EDIT: Corrected the site header IE7 code in my original post. Have tried that and inserting X-UA-Compatible: IE=EmulateIE7 into the header without any success. Both of these steps are suggested by Microsoft here:
http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx
I'm working on a Wordpress blog (URL: www.nxtbot.com) and have encountered some problems with how the blog renders in IE8. The site uses Wordpress 2.8+ and the Mandigo Wordpress theme.
The primary design of the page has one central content window, with two sidebars on the right side of the page that use and display widget elements.
The site loads and displays perfectly when viewed with Chrome, Firefox, and Safari, but breaks when viewed with IE8: Both sidebars disappear, and only the main content window is visible.
I've tried inserting this into the site header...
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
...to force IE7 compatibility, but that didn't seem to help.
Anyone else encountered this problem, or have a fix/workaround?

Your use of to position the content and the sidebar is a really bad idea, but that is not the problem with IE8.
the real problem is that you have an unclosed object tag in post 228 and that eats the rest of the page. As your sidebars are after the content then they disappear.
What you should do (except fixing the broken markup, of course) is to stop using tables and instead draw the sidebars in divs that are right floated, and put them before the content in the HTML. The result would be properly positioned sidebars that are rendered before the content and will not disappear if your content breaks the markup.

" is misssing after content attribute, if that isn't tying mistake.