How to use mobiscroller *instead of* input? - javascript

I'm want to use the mobiscroll selector (demo | source) on my (desktop oriented) website. I've got a basic version working here. The way that works is that when you click the input at the top, it loads the (enormously sexy) spinner as an overlay with a dark layer over the rest of the site (try it out).
What I would rather have instead of this behaviour though, is that on my desktop website it shows this spinner instead of the input. So not as an overlay, but integrated with the rest of the design without needing to click to bring it up. That way the user is saved one click and it is immediately clear what's expected of him or her.
Does anybody know how I would be able to use this spinner instead of the input, so that it integrates nicely with the rest of my page instead of working as some sort of pop-up/overlay?
All tips are welcome!

You can use it display: 'modal' on mobile and use it in display: 'inline' on desktop. You'll find more info about the display option that you can pass on init in the documentation.
Now you just need to detect if your users are browsing from a mobile device or a desktop. You have a couple of options there, this would be one approach.

Related

Mobile Browsers - Tap event/psuedo event for navigating a site

I am looking to try and make my current mobile site have the look and feel of a native app for iOS, Android and Windows Phone by giving the user some feedback when they click a link.
What I am looking to do is when a user clicks a link it changes the background colour of that element to show that they have interacted with that element. I've tried using :active, :focus and :focus for these but they have different interactions on all the different platforms.
For instance if you use :hover on an element, when scrolling on iOS in Safari the background colour changes even though you're trying to scroll.
An example of what I'd like to do can be seen on http://bbc.co.uk/news but it seems they're using JavaScript to add a class that changes the colour of the text.
If I can get away without using JavaScript I would be greatful, but if this is the only cross-platform way of doing this I guess I'll bite the bullet!
Thanks in advance

itemtap event not firing on all taps

I'm using Sencha Touch 2.1. I have Ext.carousel.Carousel container and bunch of Ext.dataview.Dataview as pages inside carousel.
On each dataview I have a lot of buttons (rendered using CSS - so they are not buttons controls but simple divs with fancy styles). I'm trying to catch itemtap event when user taps on the "button".
Everything works fine in browser on the desktop. On the iPad however touch sensitivity is different and often I will not get itemtap event when user not carefully and somewhat slowly taps on the button. Carousel would start moving slightly as in swipe event was detected and carousel needs to change pages.
I tried to replace itemtap and use itemtouchstart instead. Button responsiveness got significantly better, but I often see false positives when user legitimately swipes between pages.
I'm stuck. I want to have responsive buttons and also swipe across to change pages.
Anybody seen something similar? Or solve it somehow?
This is a known issue check out this forum post in sencha forum. Tragically i have the same issue & at the moment it cannot be solved using sencha alone perhaps a solution is available in phonegap but i dont know.

Proper touch button behavior for MobileSafari

MobileSafari as a rule has incorrect HTML button behavior (incorrect meaning: "not like an iOS native button"). Correct button behavior is as follows:
User touches button: Button highlights
User drags finger out of button: Button dims
User drags finger back into button: Button highlights
User drags finger out of button and releases: Button does not click
MobileSafari buttons highlight when you touch them, stay highlighted no matter where you move, and click no matter where you release them (unless the view scrolls, in which case the touch is always canceled, even if you re-enter the button).
This problem applies to all clickable things such as links (when -webkit-touch-callout is set to none). I have only found one web application so far that has correct button behavior: Facebook. Looking at their code for it, it looks like they've done quite a lot of jumping-through-hoops to make it work correctly (tracking all the mouse events manually and not using buttons at all). The code is dense, uses Javelin, and I'm not yet clear on all the pieces required to make it work.
I know I'm somewhat kidding myself (since if it were easy, everyone would do it), but I'm going to ask anyway. Is there any generally-available piece of code that handles this feature? Is there a simpler solution than reverse engineering Javelin, even if it is only applicable to WebKit? (Javelin isn't very-well suited to my lightweight needs.) My ultimate goal is correct button behavior for a UIWebView embedded in a native app, so hybrid JavaScript/ObjC solutions are acceptable as well (though no hybrid approaches come to mind).
Basically what you'd want to do is build out some sort of hybrid hover functionality for touch devices, which detects when your finger moves in/out of the button in question.
I built a basic JSFiddle which implements some barebones functionality. If you know any javascript, I think you'll get the idea.
Live JSFiddle DEMO
Try it on your iOS device (and maybe your Android device??).
-
brian

For my website, is it possible to create a button where users can click on it to create an ICON on their iPhone desktop?

User clicks the button, and an icon is added to the iPhone desktop.
If possible, can I activate this button manually?
There is no way for you to do this, because otherwise every developer would do this by invoking it with an automated script and then everyone would just be annoyed. You will have to direct users to press the + sign and then Add to Home Screen.
I believe this is not possible. However a common approach is to detect whether running in an iPhone browser (not as an HTML app) and show a huge arrow pointing at the + sign.
You can take a look at this tool, which is a nice JavaScript snippet giving the user a hint on how to add your homepage as a Icon on your homescreen:
http://cubiq.org/add-to-home-screen
For a live demo visit this page with your iOS-device:
http://cubiq.org/dropbox/a2h/examples/simple/

How to implement the functionality of autoscrolling page if the element is below page fold in javascript?

I want to implement a similar functionality like Template Monster's menu. I am trying to create a feature list which slides down when the user clicks on the feature. But if the link is at the bottom of the page and the user clicks on that link, the feature list is shown below the view area and the user doesn't know that it is open until he manually scrolls the browser window down.
I want to incorporate a functionality that if the feature list is not in the viewable area, the browser window automatically scrolls down to show the full list (templatemonster.com has done so with their drop down menus).
Can anybody help me?
Thanks,
Gaurav
The website which you reference is using the Prototype JavaScript framework with Scriptaculous for it's visual effects. These libraries make this sort of task much easier as there are built in controls to achieve, more or less, exactly what you want.
If you want something to slide down when a user clicks on it; you should be thinking about the event click and effect slide down Check out the demo in the manual for this.
The second aspect of scrolling can be achieved using these libraries too. Again, checkout the demo in the manual for this too. Essentially, you need to use an anchor tag to mark the point on the page where the feature exists, and then use the scrollto effect to take you to that poision on the page.
Hope this sets you on the right path.

Categories