Page scrolls on mobile devices due to hidden menu - javascript

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

Related

Force hide address bar in Chrome on Android

I recently developed a website that fetches mixed http/https content. Due to this, I always get the address bar displayed on top (It doesn't auto-hide like in other websites). Here's what I'm talking about:
This is the link to the website.
The content is fetched from various sources, hence filtering non-https content is not possible. And since the website is meant for reading, a non-full-screen display is painful for the reader. So, is there a way to force the auto-hide behavior?
PS: The website uses Twitter Bootstrap, if it helps.
PPS: I don't want to use the full-screen API, it'll be too heavy for this.
Check this has everything you need
http://www.html5rocks.com/en/mobile/fullscreen/
The Chrome team has recently implemented a feature that tells the browser to launch the page fullscreen when the user has added it to the home screen. It is similar to the iOS Safari model.
<meta name="mobile-web-app-capable" content="yes">
window.scrollTo(0,1);
this will help you but this javascript is may not work in all browsers

Scroll bug in Chrome on Windows with Swipe-script

I am using this swipe script from iDangero but I have a small, everywhere it works perfect but only Chrome on windows is giving me a hard time. I already stated the issue at the owner of the script but he can't find a solution for the script at this point, maybe somebody here can help me.
Issue at GitHub:
https://github.com/nolimits4web/Swiper/issues/825
Script URL:
http://www.idangero.us/sliders/swiper/
URL:
http://testjevorm.nl/magazine
The Problem:
As soon as you go to the website you have the possibility to navigate to the next slide in two ways:
Click on the "UITGELICHT ARTIKEL"-block on the left.
Click on the arrow on the right
When you click on the block on the left it's not possible to scroll up and down on the next page (the scroll is somehow not working/disabled). The weird thing is that it "activates" when you click on the arrow in the menu right or hover over the social media icons on a page.
To show the issue I made a small video:
http://youtu.be/T8Bnz2fsvhU
(Yes, it's windows XP but the problem is also there in Windows Vista and Windows 7)
Part of the solution:
I found out that it has to do with the css I added myself:
body {width:100%; height:100%;}
html {width:100%; height:100%;}
When I remove this, the problem is solved but then all the pages have the same height as the longest page in the serie.
just tried what you told me to do on my Mac. It works fine on my Mac, but that's not what you said that didn't work, so I tried it on a Windows 8 Laptop.
Well... it works perfectly fine for me, with Chrome 35 on Windows 8. I assume that you either resolved the issue, or that there's something wrong with your Windows XP setup on mac.
Note: I highly doubt that there is a issue on your website, which will only "show up" in Windows 7 or below, as Windows has always been pretty much downwards compatible (and I'm sure they haven't changed anything about the scroll behavior).
Note 2: If you're still having the issue, it might be chrome on Windows XP. But as you want it to work on that as well (or your companies policy states so), then try this:
In your CSS, simply add overflow-x: scroll to your body.

Disable scrolling in Nintendo 3DS Browser

I am building a website for the Nintendo 3DS and have been trying to figure out a way to disable scrolling in the browser. I have the meta tag set to: <meta name="viewport" content="width=device-width" /> which is working, and also have this to position the page properly:
$(window).load(function() {
window.scrollTo(40, 240);
})
This is necessary so that the top screen is filled with content since the browser loads in the bottom screen. The next part would be disabling scrolling so that the user does not re-position the browser outside of the content area since it is possible to scroll off the page. I have tried these with no luck:
http://stackoverflow.com/a/3656618/1363726
http://stackoverflow.com/a/4770059/1363726
http://ajax911.com/disable-window-scroll-jquery/
I feel like disabling scrolling should be possible since window.scrollTo() works. Any thoughts or suggestions on what else I might try would be greatly appreciated.
Thanks

How to stop page scrolling while....still allowing scrolling?

I'm making a mobile app with PhoneGap. I've got this--
function preventBehavior(e)
{
e.preventDefault();
};
document.addEventListener("touchmove",preventBehavior, false);
You know how you can drag a page a tiny ways off of the smartphone screen by dragging it, and then it pops right back when you release it? And all you see behind it is black? That's what this code is meant to prevent. And it does.
But it's also preventing all standard scrolling, such as scrolling through a list. Does anyone know a solution?
An easy solution for Cordova 1.7+
Locate Cordova.plist in your Xcode project.
At the top it will say “UIWebViewBounce“. Set this to NO.
you have two options:
iScroll - Super effective in giving this effect. Granted it does have it's limitations.
-webkit-overflow-scrolling:touch; a new css method introduced in ios 5 it works well but again has it's limitations within phonegap.
Personally I use iScroll for phonegap apps, it works great if you don't have a super large list of items you are scrolling. If you're looking for a more native way I would suggest the overflow-scrolling method, this has proven to cause some strange effects in the webview. Phonegap uses webview vs mobile safari so your support differs a bit.
iScroll - http://cubiq.org/iscroll-4
webkit-scrolling - http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/
You should add this in your head tag: (No need of your listener code now)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
This basically disables the scaling (zoom in/out) and that drag effect which you do not want. So the page will not be scrolled but still touchmove event can be tracked.

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.

Categories