Page scroll obtion

  1. 5 years ago

    Hello, everybody.

    I have a Table of Content page with button images to navigate to their assigned pages using Touch Down (works fine). I also have this same page vertical scroll able since the content is long.
    The issue occurs when I scroll the page the navigation images send me off to their designated pages before I can complete my scroll.
    Does anyone know how to work around this issue?

    Thank you

  2. Angelo S

    30 Mar 2016 Administrator

    Hi Carlton,
    have you tried using the touch up event instead of the touch down for the "go to page" action?

  3. Thanks Angelo, but that does not work either. I guess I could make the images smaller and put them on two pages that would have no scroll.

  4. 4 years ago

    I've got exactly the same problem. Using 'touch up' in stead of 'touch down' doesn't help (it allows for scrolling, but as soon as you 'touch up' your finger, you still go to the linked page).

    Have you already found a solution? For me, splitting the Table of Contents into two pages wouldn't help, it would break up the layout.

    So I am looking for a way to stop the other interactions, as soon as the user swipes up.

    I would appreciate your help!

  5. Angelo S

    20 Feb 2017 Administrator

    Hello Bram,
    we're currently re-thinking our events to fix these kind of issues, but it will take some time.
    In the meanwhile, the only advice I can give (without writing code) si reducing the interactive area, e.g. use a smaller button (like an arrow) for the go-to-page action instead of using the entire text.

    Hope this helps.

    Bye,
    Angelo

  6. Angelo S

    21 Feb 2017 Administrator

    Hello again,
    I think I've found a better solution. Just add this CSS class to all of your table of contents items: moveTouchUpToClick

    -image-

    Then add this script to your page headers:

    <script type="text/javascript"><![CDATA[
    $(window).on(PubCoder.Events.PageReady, function() {
    	/* Insert your custom JavaScript code below */
    	$(".moveTouchUpToClick").each(function() {
        	var elem = $(this)[0];
        	var data = jQuery.hasData( elem ) && jQuery._data( elem );
        	var f = data.events[window.touchUpEvent][0].handler;
        	$(this).unbind(window.touchUpEvent);
        	$(this).bind("click", f);
        });
    });
    ]]></script>

    -image-

  7. Many thanks, this is exactly what I was looking for. It works like a charm.

 

or Sign Up to reply!