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
Related
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
First a little context. I'm a designer from the Netherlands with a love for code. I can find my way pretty ok in html and css and a little bit in php and javascript. I love the Stack Overflow community, it helped me so much and it still helps me every day in becoming a little bit better at coding!
I have never asked a question here at S.O. before, because I always found a way to solve problems, untill now. I literally tried everything and I really hope you guys can help me.
I have a hobby project: https://unboxguide.com
It is some kind of TripAdvisor for CrossFit Boxes (gym boxes).
It is a Wordpress website which uses several different plugins for some functionalities.
The site works perfect on desktop browsers like Chrome, Safari, Firefox, etc. No problem there.
Then on mobile, still no problem there. On Android with chrome, it works perfect, on iPhone with Safari, still shiny.
But then.... the horror starts.
The Facebook in-app browser. There is something completely weird there. If I post a link to the website on Facebook and you click on it in the Facebook app it will open the Facebook in-app browser. The website renders completely randomly. Sometimes it doesn't load fonts, or any of the layout (css). Sometimes it doesn't even load the images.
Some research taught me that it is some kind of webview of the internal Mobile OS browser. So on iPhone a webview of Safari and Android a webview of Chrome.
I tested the Facebook links on Android, no problems there. The problem only occurs in the Facebook app on iPhone.
If you want to see for yourself, post https://unboxguide.com on your Facebook (just do it privately, so only you can see it) and keep refreshing it. The more you refresh, the more random results you will get. It's so strange.
I've tried so many things: rebuild the whole CSS, killed all plugins, tried different themes and tried to build everything from scratch. I also tried different backups from a few months ago where (I thought) the problem didn't occur yet. Nothing helped.
I really really hope someone has had the same issue or understands the problem, and can help or point me in the right direction.
Thanks in advance!
PS: If anything is needed furthermore to help you guys figure out what the problem can be, please let me know and I can post more information.
Old question, late answer. If your website uses ajax and uses X-Requested-With header to detect ajax requests (or not) this could be the reason. Webviews most of time use the X-Requested-With header for something else, so your pages are displayed like Ajax results (without css, javascript etc) and not like full html page.
Hope this helps.
I am not sure does anyone notice that Facebook can detect users zoom-in level when it hits a level, it will dynamically add .hidden_elem classname onto .fbChatSidebar to hide it. (Check the attachments below)
I have searched a lot about this feature and found the repo in github called detect-zoom, but it seems that there are still some problems especially in latest version of FF & Chrome.
So I am really curious about how does Facebook detect this with JavaScript and I have tried it with latest FF & Chrome and it seems that Facebook can detect it correctly and hide the sidebar at the right zoom-in level.
Does anyone know anything about how they implement this feature ? or even possible solutions are welcome.
Thanks.
I'm not sure about the exact solution Facebook is using but I discovered they hide the sidebar on both window resize and zoom.
My research shows that all browsers, including IE8 and up fires the window.resize event when zooming as well. So by setting some breakpoint when you wish to hide something you should be able to implement some similar functionality.
Quick and dirty example: http://jsbin.com/ofufer/1/
I am using the js code window.print() to perform print functionality. But this is not working in Fluid browser in MAC OS. Its working in all other browsers. Please give me a solution for this.
thnx
seems like you're not the only one having this problem (see this post in fluidapps google group), so i assume this is a bug.
the best way to get a fast and reliable answer is to ask the developers - just click on "support" on the official website (on the right side below the download/purchase-buttons).
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.