href does't work when touchScrolling: true

[william-h]

I just want to signal a issue

Touch is a great feature for mobile, but unfortunately href doesn’t work for Android /Chrome

It works on a PC + Chrome / firefox/etc… and Mobile ipdad, Android Firefox, Opera, native bowser but not on Android /Chrome version 18.0.102564 ( now the reference browser for android)

How to reproduce ….

Effect: Display a colored rectangle but don’t link the hreference Code :

…

… $(document).ready(function () { $("#icon_hbar").smoothDivScroll({ autoScrollingDirection: "endlessLoopRight", autoScrollingStep: 1, autoScrollingInterval: 25, touchScrolling: true

        });

[tkahn]

Hi!

I don't own an Android device that I can test on so this is very hard for me to debug. Perhaps anyone that does own and use an Android device could provide error logs or something similar?

/Thomas

[mahboobi]

This is not just an issue with android, i see the same issue in iOS, all href's are not clickable. One has to press for a long time to activate the right click which give you options such as "Open link in new tab"... Can someone please look into this.

[arthurgouveia]

Hello, @tkahn! First of all, congrats on your plugin :)

I have an Android, a Nexus 4, with the latest version running on it and I'm having the same issue. As a matter of fact I came here to look for someone who had the same problem.

Here's the website I'm working on: http://cherry.bracketarmy.com/

There's a bunch of anchor tags right after the huge video and anchor tags don't work. They only switch to the :hover state instead.

Any help would be much appreciated!

[tkahn]

I'm interested to know more about the status of this. When I try http://cherry.bracketarmy.com/ on an iPad it seems to work fine(?) I can click items in the scroller?

[arthurgouveia]

This url is no longer up to date :/

[tkahn]

So you're not using Smooth Div Scroll for this site? I will have to look into this since I think it's important that users can click links in the scroller. Still, it can be a tough nut to crack since I have to code the plugin so it can distinguish between touch events as in "I touch the screen because I want to scroll" and touch events as in "I touch the screen because I want to click this link". I've faced this type of UI dilemmas before though and often the solution lies in timing.

[JonyIvy]

It sounds like I'm having the same problem with an image map in the scroller. Interestingly it works with iOS 4 and 5 and Android 4.2 and 4.3 but not with higher versions.

See my post https://github.com/tkahn/Smooth-Div-Scroll/issues/153

[mvaudano]

Hi everyone! Have you figured out a solution for this problem? The whole wrapper content seems to be desactivated: neither a href nor tooltip events work when touch scroll is activated... Thanks for any tip you may have! Max

[JonyIvy]

The solution in my case consisted of two answers, given by davetayls here: https://github.com/davetayls/jquery.kinetic/issues/41 and warren-bank here: https://github.com/tkahn/Smooth-Div-Scroll/issues/153.

In short: Use filterTarget and jquery.kinetic v 1.8.4.

[makani-ph]

Hi everyone, I am experiencing the same problem on touch devices running on iOS and Android (even 4.3). One significant difference in implemention though : my href is not on the scrolldiv image but on a separate text based div on top of the image. You can find my scrolldiv page here : http://artune.be/realisaties

I also followed some advises earlier received via this post in order to disable hotspotscrolling for touch 'media' : https://github.com/tkahn/Smooth-Div-Scroll/issues/156 resulting in this main.js settings :

// Initialize the plugin with no custom options
jQuery(document).ready(function ($) {
    // I just set some of the options
    $("#scroll").smoothDivScroll({
        mousewheelScrolling: false,
        touchScrolling: true,
        manualContinuousScrolling: true,
        hotSpotScrolling: true,
        visibleHotSpotBackgrounds: "hover",
        hotSpotScrollingStep: 10,
        hotSpotScrollingInterval: 2,
        scrollingHotSpotLeftVisibleClass: "scrollingHotSpotLeftVisible",
        scrollingHotSpotRightVisibleClass: "scrollingHotSpotRightVisible"   
    });
    // remove smoothDivScroll hotspots on touchscreen
    var hasTouch;
    window.addEventListener('touchstart', function setHasTouch () {
   hasTouch = true;
   $("#scroll").smoothDivScroll({
            hotSpotScrolling: false,
        });    
   window.removeEventListener('touchstart', setHasTouch);
    }, false);
});

Can someone give me some advise in this particular case ? I am not in favor using the kinetic imp.

[makani-ph]

Hi everyone, After a short visit yesterday to my local media store, i can add that the issue is not present on Windows Phone 8 (Nokia) devices. Both touch scrolling as 'href clicking' are operational. Testing on recent showcased iOS and Android devices (phones and tablets) were all negative. Double clicking did work one 1 particular iPad Mini configuration. On Android, right-clicking by press and hold the href link, enabled the option to open the subsequent page.

Thomas, what is your suggestion ? Move to your newly published Smooth Touch Scroll ? http://smoothtouchscroll.com/

[makani-ph]

Because usability of my portfolio page as decreased significantly on touch devices, and in attendance of a transparent solution provided here, i implemented a JS+CSS solution to inform the touch user he or she will have to press and hold a desired scroll item (until further notice...). Modernizr derived solution contributed by : http://stackoverflow.com/questions/11387805/touchscreen-media-queries/18397475 In the linked article form Nick Zakas, he explains a similar malfunctioning scenario linked to the :hover CSS rule. Is there any common root cause to be found here also ? Is enabled hovering conflicting with a simple href anchor click event ?

[jasper-giscombe]

To fix issue, i modified the kinetic 2.1.1 library:

// KINETIC CLASS DEFINITION // ======================

var Kinetic = function (element, settings) { this.settings = settings; this.el = element; this.$el = $(element); this._initElements();

/** create filter target function here**/
this.settings.filterTarget = function (target, e) {
    if (!/down|start/.test(e.type)) {
        return !(/area|a|input/i.test(target.tagName));
    }
};
return this;

};

[FeinkostLehmann]

Could you explain the code, please? How does the structure build to work with these lines?: if (!/down|start/.test(e.type)) { return !(/area|a|input/i.test(target.tagName)); }