I created a website https://www.saugatnpl.com.np using a blogger template. But I am facing a problem. I can't scroll to the end of the website on a mobile device. The website is working fine on the computer. But on mobile, it will automatically scroll up and I can't stay at the end of the page. I can't understand what's actually causing the problem. In case you would like to see the code, here it is Codepen link. If I can't fix this, the site becomes useless so it'd be a great help if you could figure out the problem.
I think the problem lies in this segment but can't decide:
e.prototype.onThrottledResize = function () {
b.clearTimeout(this.resizeTimer),
this.resizeTimer = b.setTimeout(
this._handlers.onResize,
this.settings.responsiveRefreshRate
)
}
Hey for me it's work perfectly.
On Galaxy s20+5G
I have the same problem on my site. scrolling down then scrolls itself up after a threshold. You wrote that you solved the problem. Can you write how you did it?
Also, I found a hint for the scripts inside, I think it's relevant.
draggable:true,easing:'linear',edgeFriction:0.35,fade:false,focusOnSelect:false,infinite:true,initialSlide:0,lazyLoad:'ondemand',mobileFirst:false,pauseOnHover:true,pauseOnFocus:true,pauseOnDotsHover:false,respondTo:'window',responsive:null,rows:1,rtl:false,slide:'',slidesPerRow:1,slidesToShow:1,slidesToScroll:1,speed:500,swipe:true,swipeToSlide:false,touchMove:true,touchThreshold:5,useCSS:true,
although I changed some functions here, java implementation is limited
Related
I'm working on a website, and it flashes a white screen between page loads, every time I click a link. I've read a lot of other posts on similar issues, but each scenario looks to be different. How do I best go about troubleshooting where this flash is coming from?
The site is using WordPress, custom built from the Genesis Child Sample theme. I'm not greatly versed in the Inspector tool. Anything I should be focusing on in reviewing/testing?
This issue ended up coming from an animation I was unaware of on the .site-container. I removed this CSS, and the issue was resolved.
I'm facing an issue since few days. When users land to our website they are automatically scrolled down at the bottom of the page.
I just can't provide the website I'm really sorry.
There is no anchor in the URI, no such things related to scroll.
When I was reproducing the behaviour I disabled the JavaScript to eliminate this track. Even with no JS the behaviour is the same.
Almost of our users use Firefox as web browser. I figured out that issue is constantly happening on Firefox instead of Chrome which is happening randomly.
Do you have any idea what could cause that behaviour, event when the JS is disabled ?
If anyone has faced this issue and can be helpful to dig with us do not hesitate !
Thanks again
I want to detect the elastic scroll in order to try to replicate some iOS behaviour like refreshing my page if someone scrolls the whole page up.
Also it would be nice if I could present a message to the user just like in iOS (but this might be asking too much).
I tried searching around the web but couldn't really find any proper info. Has anyone worked around this?
P.S. Sorry for not posting code as this is still a concept. I will post it here when I pull it off.
I ended up following a similar approach to the one followed on Hammer.js example: http://eightmedia.github.io/hammer.js/examples/pull-to-refresh.html
I'm working on a web application that requires me to use a modalpopup I recently made within a user control. Everything works as expected, but somehow after a PostBack, and not always, the panel used in the modal flickers (blink) on the screen very briefly.
I have read on dozens of forums saying that I needed to add "display:none;" to the style tag of this panel. This usually "helps", and most of the postbacks don't show the panel, but some do. Seems that the property is being ignored somehow, but I can't find where, how, when.
I have also tried debuging the javascript with firebug, tested all page events and even tried taking a look at the ajax modalpopupextender sourcecode, but couldn't fix this issue.
The browser I HAVE to make this web application work is Mozilla Firefox 3.5.10, that is the current version on the company I work for. This can't be changed due to corporate policies.
Due to quality and user experience issues that arise with this flickering, I leave it as is, so if anyone can help me out I'd appreciate that. I'm also on a rather tight schedule, so any quick help will be appreciated too, as I'm ready to try and test changes on the go.
Please let me know of any doubts or questions.
Thanks in advance.
If your CSS is in an external file, it's possible that the HTML is being loaded and rendered before the CSS is downloaded, causing the flicker. If this is the case, then adding style="display:none" directly to the HTML tag ought to fix it.
The following works for me:
<script type="text/javascript">
window.onbeforeunload = function () {
document.getElementById("PanelDialog").style.display = "none";
}
</script>
I'm trying to do the screenshot gallery of an app from the AppStore but in a web app in html.
I've actually get it but the problem is that it scrolls REALLY slow.
To do the touch/swipe functions I've used the code from here:
http://quirksmode.org/m/tests/scrollayer.html
In the example, the div's are scrolled smoothly but not in my site with my div's...
Does anyone know what can be happening? Does anyone know a proper way to do it?
This is my (under-developement) site:
http://www.actec.cat/iphone/#projectes_pre
I'm testing it in an iPhone 4.
Thanks.
I finally solved using webkit transforms (translate3d) instead of using javascript.
The problem was that javascript was taking care of moving the object.
For example, I was using:
testElement.style.marginLeft="newposition px";
That was painfully slow in iOS devices.
Now I use:
testElement.style.webkitTransform='translate3d("newposition px",0,0);
And it works as smooth as it should.