AppStore's screenshot gallery in html? - javascript

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.

Related

Auto-scrolling problem in blogger website in mobile

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

Fix specific links in website not working on iphone only

I'm creating a website from this template and I've downloaded the template and uploaded it without modifications here.
I have this problem (confirmed by a ticket on templatemonster): on Iphone only (seems like both on safari and chrome), i cannot click on some links (e.g. "view charateristics" on the 4 boats images under "YACHTS FOR SALE".
I tried editing it:
adding a big z-index on the tags
creating a custom section with bootstrap and custom link
using <span> tags with onclick="window.location.href='test.php'"
using a <form> and a <button>
It really seems that the browser does not "catch" the click on the element.
But still, none of them work.
Unluckily, i cannot test on a real phone, but this simulator https://appetize.io/ seems to work pretty well. I did confirm that the problem is also on real devices, thanks to a customer.
I would like to know if anybody knows to fix this issue, without making the template look much different, thanks
EDIT
Here's the page where i'm trying to fix the bug. As you can see the <ontouchstart> is also not working.
I don't know if it would help, but you can also see that the carousel is not working on iphone (not a problem itself, i'm going to hide it).
It's a known Safari Mobile bug, you should add the ontouchstart event handler
More infos here

freeMode not working in mobile browser using Swiper

I'm trying to use Swiper in a mobile hybrid app and I noticed the freeMode option wasn't responding which I wanted it do. I couldn't figure out what I did wrong until I tried one of the demos on idangero.us that uses freeMode and I ran it on my desktop browser (FireFox, latest) in mobile view and it didn't work.
I tried it on my phone as well and it didn't work there either which to me suggests that this feature isn't supported on mobile browsers.
This is kind of a deal-breaker for me and I need to know if there is any kind of known workaround? I tried Swipeshow as an alternative and they make it work, but it's a jQuery plugin and I want to avoid using jQuery since I'm not using it in the rest of the app.
Edit
To clarify, I want freeMode to be false, I want freeMode to be set to false but in the demo linked above freeMode kicks in on mobile devices, it only sticks on desktop devices.
Edit 2
I've found that if I change to mobile mode in firefox (ctrl+shift+m) and then back again it works. What seems to happen when I do that is that something is triggered and the swipe-slides (the slider content) get their width set explicitly. After that it seems to work. Setting the width manually in my developer tools doesn't seem to be doing very much though.
Well, I figured out the problem. It was a bit tricky.
At the time of initiating Swiper the div containing my swiping stuff was not showing (display: none). The solution was to wait with the Swiper initialization until I'd actually shown the div containing my swipe stuff.
The thing that really bugs me though is that Swiper didn't fail in any way, it just tried to do its best and gave me semi-functionality. I would've preferred a crash stating something like "Could not compute slide-sizes" or something like that. Instead it fails silently :(

Detect elastic scroll in Mac OS X webkit browsers

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

Using javascript to build android scrollable tab design

http://developer.android.com/design/building-blocks/tabs.html#scrollable
Has anyone achieved this effect in a web app using JavaScript (or even jQuery)?
Got the pages sliding nicely (obviously that's the easy part), but getting the page titles to animate correctly looks like it could be painful!
May just go with the fixed tab layout but if anyone has any tips or examples, I would be very grateful...
There's a CSS which makes your page look like Android:
https://github.com/proimage/Android-4-ICS-CSS
There's a more advanced project with some JS:
http://jaunesarmiento.me/fries/index.html
And this is the way to do page swiping:
http://stereobit.github.io/dragend/ (also works on the PC)
http://swipejs.com/ (only works on touch device)
http://eightmedia.github.io/hammer.js/ (only triggers the event, doen't swipe the page)
With these you can have multiple pages in one HTML file:
http://handlebarsjs.com/
https://github.com/janl/mustache.js
http://underscorejs.org/
http://embeddedjs.com/
http://jade-lang.com/
https://github.com/blueimp/JavaScript-Templates
I'm working myself to combine some of these libs into a usable application. Hope it helps. This is also a note to myself.

Categories