I have an animated Burger Menu in the mobile view, which slides from right to left into the screen.
With overflow-x: hidden the inactive Menu shouldnt be seen in the page.
In the normal view (smaller browser windows) it works.
But in the mobile view (on my phone or mobile view in browser), after first click on the burger menu, it allows me to scroll right to the space from the "hidden" menu background.
See screenshot
I have a live view of my page, so maybe its better for you to understand instead of posting the whole website code here. I didnt wanted to post only the footer code, as im not sure if maybe its related to something else in the body.
Live Site
add overflox-x: hidden to html
Related
I'm having a weird issue with page render while using AngularJS and Chrome.
I'm creating a cart icon that only shows when there's at least one element in my cart. The code is:
<a ng-style="{visibility:myCart.checkCartExistence()?'visible':'hidden'}" href="/cart"><span ng-bind="myCart.getCartQty()"></span></a>
Here's the problem:
Top image shows the page as soon as an article is added to the cart.Bottom image shows the same page when you scroll down a bit.
The cart icon and the quantity aren't displayed immediately and only show up when you scroll down the page. The weirdest thing is that if you scroll all the way up, the cart icon disappear again.
The same happens with the title that is set dynamically, when you're at the top of the page it shows TITLE A, if you scroll down a bit it updates to TITLE B. If you scroll up it shows TITLE A again.
Unfortunately I can't post any link to the page so I'm wondering if anyone knows what this is without actually seeing the page.
NOTE THAT:
This happens with Chrome.
I tried with other browsers and it looks like they don't have this issue.
I managed to make it work somehow, clearing the browser cache but it came up again soon after.
In this store, if you click on the first two links in the menu, after you scroll down the menu changes: it stays at the top of the visible page with a black background. This way the visitor always have access to the menu.
The squarespace theme I'm using allows this to happen only to these first two pages.
If you enter any other menu link and scroll the page down, you will see that the menu doens't do what it does in the first two pages. If you scroll down, the menu stays at the scrolled part of the page.
I'd like to identify the menu CSS which makes changes it and makes it stay at the top of the page with the black background and apply it to all pages.
I'm having a hard time to identify it using FireBug.
If you need to just identify the stylesheet use "inspect element". Right click and select it.
For CSS to make it stay at the top, I think position:fixed will work.
I am making a simple website and I am encountering a problem whenever I reload it.
I placed my menu at the middle of the screen and when you clicked it, it needs to go down to the content. My problem is, whenever I reload it, it would still go up and show the upper picture. What I want is that after one of the menu is pressed, the menu should now stay on the upper corner of the screen without showing the upper picture (Sample website -> http://ec2-54-84-168-45.compute-1.amazonaws.com/Teapop/)
It seems like my url code that directs it on a particular div (e.g menu#teapop_nav)` doesn't work as I expected after I deployed it on the hosting site even though it works well on my local build.
Without using any javascript code, is there a fix for this using html5/css3?
Thank you.
i just tested it on my computer (chrome & firefox) and it seems to work. And also on page refresh. The picture is always on the top.
If any of you guys can pull up the twitter.com web app on your iPhone's, you will notice how the address bar dissapears and becomes replaced with the Twitter header bar. You can scroll the content with elasticity but the Twitter header bar stays in place just like with a native app. How did these guys do it?
Update: Looks like they changed their web app. Before, it was kind of like Sencha. I am trying to create the effect without using the full library. Take a look at this:
http://cdn.sencha.io/touch/sencha-touch-2.1.0/examples/kitchensink/index.html
They didn't hide the address bar permanently. They are using Mobile Safari's behavior of scrolling down causes the address bar to scroll with the page. What they did was scroll the page down, probably using window.scrollBy so the address bar "disappears" (just like it does on any other page). If you fiddle with the page, you can scroll all the way back up to the top again.
I added a Like button to a friend's website. In all browsers (IE7-8-9, Firefox 6, Chrome), if a visitor is logged into their FB account, a box with a scroll bar appears next to the Like button and remains visible. It's hard to see what is in the box, but it appears to be my own Facebook page. Can this box be removed or a setting changed so it doesn't show?
The login button actually has a different state when you're logged in. I'm going to assume that you've set the size of the button div via CSS. If you've done that, then you'll get that effect. Play with the width/height values of the container.