2

Building a mobile site and wanted to create a rotator that would work just like on yahoo.com's mobile site. I can swipe my fingers to the left or right and it will swipe the news, I could not find it using my computer but on my iphone and I'm guessing android it will show up.

Any information? Thank you!

Darius
  • 1,613
  • 5
  • 29
  • 58

2 Answers2

2

Answering by parts:

Building a mobile site and wanted to create a rotator that would work just like on yahoo.com's mobile site. I can swipe my fingers to the left or right and it will swipe the news

You can use iScroll 4 to create scrolling areas in your page. It's pretty simple and i've implemented that already.

I will not give you any code, but a quick explanation:

When you start the iscroll, you need to give it the id of a div. The first child of this div witll be the scroller so you have to declare 2 divs. One as wrapper (and the one the id you'll give to iscroll), and one inner that will be scrolled. Inside this second that you will add everything you want to scroll.

In your case, would be good to make as UL>LI and then add the option snap: li in iscroll so it will not get stuck between news, it will jump from li to li, like yahoo's.

I could not find it using my computer but on my iphone and I'm guessing android it will show up.

For this,you need to fake your User-Agent, so Yahoo page show you the mobile version. With Firefox, search for the User-Agent Switcher plugin (click here if you are lazy).

After installing, go 'Tools' and you'll see a gray globe with 'Default user-agent'. Open it and pick iPhone for e.g.

If you go on Tools again, you'll notice gray globe is now Blue. This means you are now faking your UA to be an iPhone, and now most pages that have mobile versions will change to mobile. And then, you can inspect with Firebug to learn how they made it.

BUT keep in mind that they might have made the code only for touch events and then, of course will not work with mouse. (If they used iScroll, maybe they activated the desktopCompatibility option, and then it will work if you drag with mouse.)

RaphaelDDL
  • 4,452
  • 2
  • 32
  • 56
  • Just a tip for Mac/Safari users: You can go into the Develop menu and quickly change your user agent. – Sum Jan 03 '12 at 00:09
  • @Sum That too :) Normally going at Preferences (Cmd/Ctrl+,) and then picking the Advanced Tab. there, check the 'Show Developer menu'. The menu will show and there is some Apple's UA to use as well. – RaphaelDDL Jan 03 '12 at 04:39
1

you will need to go into Safari programming because iOS device use specific identifiers to recognize the gestures.

Just look at the Apple documentation especially this one for animations and css designs etc.