Continuing posting some Ostrovok’s mobile web-app UI widgets. This time it is a slider and autogrowing text area plugins. Slider works and looks very much like jQuery UI’s one. It is not a perfect solution for desktop browsers though, but it works still. Code uses “iSlider” script, based on heavily modified version of Alex Gibson’s WKSlider. iSlider gives you a little more control over the slider movement. That option in particular was used when I worked on the snapping version of the slider. Btw number of snapping positions is easily customizable via options object.
iOS-like calendar for web-applications
Since Ostrovok’s mobile website I worked so hard on is now live, I gonna post some of the UI parts as an open-source projects. The first one will be the dates picker. It’s primary objective is to add a customized solution that allows to select hotel check-in and check-out dates.
Advanced datepicker
I wanted to share the datepicker I just made for the Ostrovok hotel page. Due to the specificity of business it has to select dates ranges. We tried to make a dates row instead of usual calendar approach. Since the check in is usually performed around 12-1pm, we had to put the selection handles in the middle of the day. Handles also snap to the dates so you can’t place them in inappropriate positions.
Things I’ve learned from developing for mobile
There’s a lot of weird stuff going on with mobile browsers. I was working on a mobile version of a big website lately and want to share what I’ve found. Read through if you’re working on a mobile webapp or a mobile verion of a website. Some of this things may save you debugging time, and help you to avoid trouble.
Read more…Zepto window scroll and Zepto device shake detection
I made couple more Zepto plugins for the mobile webapp I’m working on. I wanted to share them since it looks like they solve some common issues. Fist one is the missing window scrolling animation. As you may know Zepto doesn’t support animation of scrollTop. Here’s a live demo of my plugin. Unfortunately it doesn’t work in firefox, but opera and webkit browsers seem OK. You can get latest source at GitHub.