On horizontal resize my webpage becomes bugged, in particular at the breakpoint of 993px. 993px is defined in fullpagejs as the responsiveWidth:
responsiveWidth: '993'
Resizing on the first page of the website won't cause the bug, however resizing past the breakpoint(993px) on any other page causes the top pages to dissappear from the browser window.
Reloading the page will fix the bug, so I could reload the page every time the window is resized past the breakpoint(993px). However, I'm wondering if there's a better solution.
I am not sure if it's allowed but here is the link to my webpage so you can see for yourself:
http://forgetthe.fish/
In addition to fullpagejs I'm using bootstrap for the lay-out.
Related
I have a html site which works well on any device which uses a mouse or scrollwheel. However when I test on mobile, my site scrolls smoothly for a certain amount of time, and pauses at the bottom of a section as if it has reached the bottom of the page.
After about half a second the site works as usual, but if I scroll back up the page the same issue occurs.
I have tried adding webkit-overflow-scrolling to all classes and most of the resolutions to this problem I find are based on this methodology. But It's not fixing things in my case.
If it helps, when I scroll to the point where the site pauses, chrome's (mobile) toolbar disappears as if I have reached the bottom of the page and swiped it away.
I'm working on a web application that was not built with responsive design, so the mobile experience is not very good for users. Nonetheless, users still use the site on mobile devices. When a particular page in the app is rendered on a mobile device, a vertical scroll bar appears, which seems to be totally normal (viewing the same page in a desktop browser also has a vertical scroll bar). The issue is that when the user on the mobile device tries to scroll to the bottom to press the submit button, the page jumps back to the very top. More specifically, the user touches and drags the screen so that the bottom of the page comes into view, and as soon as they lift their finger from the screen, the page jumps back to the top, preventing them from being able to press the submit button because it becomes hidden from view. I've hooked up my iPhone 5s to my Mac and used Desktop Safari to set up remote debugging. That hasn't helped much yet. I noticed that changing the device orientation makes the issue go away. More specifically, the issue happens in both portrait and landscape orientation. However, if you load the page in one orientation and then switch to the other orientation, the issue seems to go away. I also noticed that setting an explicit height on one of the container divs in the CSS seems to fix the issue, despite the CSS rule being ultimately overridden by the browser (I think). When I set the height, though, the page renders a little differently because the content seems more zoomed out and no vertical scroll bar appears.
I've searched around the web for a while and have not found anything useful. I found two SO posts about similar issues, and one had no answer and the other had a junk answer that should've been a comment.
Basically what I'm looking for is for someone that has some amount of experience developing for the mobile web to give me some possible avenues to travel down to solve this thing the right way. I don't want a hacky solution and I'm not necessarily looking for you to tell me what code to write. I just want to get to the bottom of what would cause the page to jerk like that.
Thanks in advance :)
I've got a little problem with one of the sites I've developed. The problem is quiet simple, however the solution seems to be a bit harder.
The problem
The problem is that the page is being rendered as it should be on a mobile device at first, but right after the pageload is finished, the page resizes to fit the viewport. Nothing strange, this happens at almost every non-responsive website. But the strange thing is that only 75% of the available width is being used.
I already compared the based/sliced version of the design with the production version. The based version does render as it should (100% width). I've tried to spot the differences in the CSS, but I can only find a couple, I tried resetting those, but that didn't work.
Also, I've tried to disable the javascript (it's only Lightbox and 1 JqueryUI "AddClass" effect). The javascript effect has only 1 task: after pageload the header will be resized from 480px to 220px height. There are no changes being made to the width of any element on the page.
Last but not least I started Adobe Edge Inspect and took a look on the pagesource of the mobile device. But unfortunately I can't spot any element on the page that exceeds the width of the "body" tag. The only one exceeding the width is the header image, but the image is within a div (100% width) with overflow:hidden
Based and production version
If anyone would be so kind to take a look at what messes up the rendering, that would be awesome. I can't seem to find out what is causing the issue.
Based (working): http://www.nambi.nl/lefunq/
Production (rendering at 75% width on mobile): http://www.lefunq.com/_index.php
Thanks to everyone who takes the time to look into this issue.
Your problem was caused by the facepile code:
<div
class="fb-facepile"
data-href="http://www.facebook.com/pages/Le-Funq/113332665510819"
data-size="large"
data-max-rows="1"
data-width="450"
></div>
More info:
As soon as the facepile cannot be loaded due to the invalid login, the page becomes resized. As soon as I log in to facebook and the facepile is shown, the page is stretched the way it should. I just have to find out what is causing the weird scaling, because if there's no facepile, it's a 0x0 div/iframe, etc.
Solutions:
I have tried a couple of things. Onload or Onready events, and hiding or removing the facepile code. In the end, neither of these options worked. The scaling happened before the facepile was loaded completely. The final solution is a javascript workaround, checking if there's a mobile device, if so, then disable the facepile code:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) == false ) {
document.write('<fb:facepile href="http://www.facebook.com/pages/Le-Funq/113332665510819" size="large" max_rows="1" show_count="false" width="450" class="facepile"></fb:facepile>');
}
I found the way to detect if the browser is mobile in this answer:
What is the best way to detect a mobile device in jQuery?
I tried native browser, Firefox and Dolphin on Android 2.3.7.
Both pages render at 100% zoom, and the zoom does not change after the page is loaded completely.
I believe this problem is specific to the software of your device.
Unable to scroll pages vertically on Google Chrome "12.0.742.100", using the scroll-bar thumb, however I can use mouse scroll and also scroll the page using the up and down arrow keys.
Important points:
If I re-size the window such that there is a horizontal scroll-bar, the vertical scroll-bar starts to works fine, but if I re-size/there is no horizontal scroll-bar, the vertical scroll-bar thumb fails to work.
If I stop loading the page/try to scroll while the page is loading, it works fine.
The issue is reproducible on almost all the pages of my client's website "http://www.charlotterusse.com/", like:
http://www.charlotterusse.com/home/index.jsp
http://www.charlotterusse.com/category/index.jsp?categoryId=4078197
http://www.charlotterusse.com/family/index.jsp?categoryId=4335463&cp=4078197
http://www.charlotterusse.com/category/index.jsp?categoryId=4238904
http://www.charlotterusse.com/category/index.jsp?categoryId=4238909&cp=4238904
but, the following pages scroll just fine:
http://www.charlotterusse.com/sitemap/index.jsp
https://www.charlotterusse.com/checkout/index.jsp?process=login
http://www.charlotterusse.com/helpdesk/index.jsp
http://www.charlotterusse.com/storeLocator/index.jsp
http://www.charlotterusse.com/giftCenter/index.jsp
It may be due to some conflict with Flash or JavaScript, but the site works fine on all other browsers and not chrome.
Please advice what could the issue be and how can it be fixed.
Ultimately found the solution for this issue. There was a JS code which was hindering the normal mousedrag actions.
Hi I want to disable the resizing the html web page by the user. How to do that
I want to disable the resize button and manual resizing by dragging. pls help
You can't, thank God.
When you open a new popup you can request it be unresizable using the feature resizable:
window.open('something.html', '_blank', 'resizable=no');
however modern browsers may ignore your request as it is considered egregiously user-hostile.
Use liquid layout to make your page respond flexibly to changes in window size, rather than attempting to set it in concrete. The web is inherently a variable-size medium, and mobile browser users get no input in how large their screen is anyway.
Pardon? Are you talking about resizing the browser window? If that's the case then you can't do this in HTML, or JavaScript as it would be a security risk allow web pages to control browsers behaviour.
If you want to get rid of scroll bars you can set the body tag to 'overflow: hidden' in CSS?
If you mean to stop the page shrinking and expanding in sympathy with browser window size, then use fixed width elements as supposed to relative (%)