Annotations Link behaviour and IOS devices

[goul]

Hi,

I'm having an issue where annotation nodes do not seem to honour click requests under IOS 5 in Safari. I am using the 1.2 bundle with an annotation defined as follows. The same code when clicking on an annotation follows the link correctly - on IOS I see no change pressing on the defined annotation.

Cheers, Paul. Code below.

<img id="image" src='ff/ff1.jpg' width="640" height="480" />
    <script>
      $(function()
        { // when DOM ready

                $('#image').reel(
                {
                        frames:8,
                        speed:0.1,
                        revolution:100,
                        images:      [
                                'ff/ff1.jpg',
                                'ff/ff2.jpg',
                                'ff/ff3.jpg',
                                'ff/ff4.jpg',
                                'ff/ff5.jpg',
                                'ff/ff6.jpg',
                                'ff/ff7.jpg',
                                'ff/ff8.jpg'
                                ],
                        annotations:
                        {
                                "headlight" :
                                {
                                        x:[370,441,484],
                                        y:[298,291,276],
                                        image:
                                        {
                                                src:"./img/crosshair.png",
                                                width:  20,
                                                height: 20
                                        },
                                        link:
                                        {
                                                href: "http://www.google.com#headlight"
                                        }, 
                                }
                        }
                });
        }
      );

[goul]

Wondering now if I'm doing something dumb, if I add the following :

 node:
                                        {
                                                html: "<a href='http://www.google.com/'>dave</a>"
                                        },

Clicking on dave follows links elsewhere, but not on IOS. Apologies if I'm just being stupid.

Paul.

[pisi]

I can confirm the same behavior on one of examples on my iPad. Don't know the reason of that yet. Looks like the click event gets roadblocked somewhere (interesting is that the :hover style for the link is correctly applied when clicking, but that's it). Will check it out to see what I can do. Please hold on. Apologies for the inconvenience and thanks for reporting it!

[goul]

No worries - thanks for the amazing plugin. Don't stress too much as I can work around with some direct binding.

[pisi]

@goul, you're too kind.

[pisi]

This issue also helped to uncover one more bug in stepping through Reel by clicking on iOS. Thanks for helping make Reel better! :)

Both issues are fixed now in the development branch. Checked on iOS 4 and Android 2.3.5 @goul, please verify, thx.

[pisi]

This bugfix just landed in the v1.2rc2 heading for the 1.2 launch. If you can, please verify this bugfix is working for you. Thanks!

[goul]

Will do Peter - sorry I've been travelling with clients for the last 3 weeks - I've not forgotten!

Cheers, Paul.

On Mon, May 21, 2012 at 4:51 PM, Petr Vostřel reply@reply.github.com wrote:

This bugfix just landed in the v1.2rc2 heading for the 1.2 launch. If you can, please verify this bugfix is working for you. Thanks!

---

Reply to this email directly or view it on GitHub: https://github.com/pisi/Reel/issues/122#issuecomment-5826087

[pisi]

Perfect! I appreciate it. I'm just having strong itches for the release these days, so making sure where things are at the moment ;) Thanks, mate!

[Awzen]

Can't make it work on my iPad 2... I tried with the latest release though. When i click on an annotation, there is a little step of one frame, but the link doesn't work at all. Do you have any suggestion ? Awesome plugin btw.

[pisi]

Ouch. Have no idea :/ When I grab my iPad 1 and visit http://test.vostrel.cz/jquery.reel/example/object-movie-clockwise-sequence/ , clicking on annotation link works like a charm. There's a link to manufacturer "UAV Factory" here and there below the plane (mainly when the plane is facing you), I would love to know how this link is holding up on your iPad2, @Awzen. I have no iPad2 around unfortunately.

[Awzen]

It's working when I use text links, but not image links. Weird isn't it ?

[pisi]

It's working when I use text links, but not image links.

Now this was a useful bump in the right direction! Thanks :) Potential fix landed in the development branch. Can you confirm this fix on the iPad2, please?

[Awzen]

Problem solved ! Thanks for your support and your awesome plugin ;)

[aceckert]

First of all, amazing plugin.

Even though this is closed I though I would throw in my 2 cents, for anyone who happens to run into issues with click behaviors on annotations when viewed on an iOS device. I found comment string because I was having trouble with onClick functions within an annotation not working on the iPad (works on desktop)

I put hotspots on my spinning object as annotations so I could make them track with points on the object. the hotspots onClick would bring up a popup div with details on the object. Anyways onClick didn't work on the iPad an in reading this I learned that would work in the latest version of reel.

Anyways, I finally got the function to work by changing my onClick to "

link

".

This may be an obvious work around to some, but I was happy to get it to work.

[pisi]

@aceckert Right. Sadly, clicks aren't that simple on iOS. The element has to qualify for click event. So Reel uses mousedown-based implementation of clicks on annotations instead and the way to create clickable annotations is to properly define link property of annotation.

Thanks for commenting tho!