Don't Stop 'touchend' Propagation all the time

[AdamDash-2]

Here is a possible enhancement. This comes in handy when trying to make scrollable elements clickable. Only prevent default when the user didn't scroll up ro down. Here are the changes I made:

1. Comment out event.preventDefault(); in 'touchend' bind
   // Add touch end listener
   container.bind(_getTouchEventName($this, 'touchend'), function(event) {
   // Prevent default behaviour
   // event.preventDefault();
   // Handle
   _handleTouchEndEvent(event, $this);
   });

2. Prevent default in _handleTouchEndEvent when the user didn't scroll. See "startTouchY != lastTouchY"

/* Handles touchend event. */
function _handleTouchEndEvent(event, instance) {

var container = _getMarkupCache(instance, 'container');

var startTouchY = _getTrackingData(instance, 'startTouchY');
var previousTouchY = _getTrackingData(instance, 'previousTouchY');
var lastTouchY = _getTrackingData(instance, 'lastTouchY');
var initialScrollPosition = _getTrackingData(instance, 'initialScrollPosition');

if (!startTouchY) {
  // Nothing to do : touch was already processed
  return;
}

// Only prevent the default event from
// happening when the user has actually
// scrolled
if (startTouchY != lastTouchY) {
    event.preventDefault();
}

var pullHeaderHeight = _getPullHeaderHeight(instance);

if ((startTouchY < lastTouchY) && (container.scrollTop() < pullHeaderHeight)) {

  _handlePullHeader(instance);

} else {

  _handleInertia(instance);
}

// Reset data
_resetTouchTrackingData(instance);

}

[zippy1978]

Thank you !

I just commited your enhancement !

[reachpratheesh]

Hi
i'm unable to get the click event to fire from an image within the scroller.
This is only when i open the application as a mobile-web-app on iphone.

Works alright if open in Safari.

Should i be doing anything specific to get it to work ?

Regards,
Pratheesh

[zippy1978]

Hi,
Could you show me your code ?

[reachpratheesh]

Hi,
apologies for the delay in coming back.

please click on 'Club News' at this link http://clubapp.org/golf/index.html?clubid=4#pgNews

if i click the image for each news item in safari (desktop or phone) it opens in a popup.
but if i open it via webclip , then the click doesnt seem to work..

The full code for just the pgNews page is

<div data-role="page" id="pgNews" data-theme="a"> 
    <div data-role="header" data-position="fixed" data-theme="none">
        <div class="ch" style="box-shadow:none;">
            <div class="d1">
                <a  href="" data-rel="back" data-direction="reverse" ><img src="images/back.png"></a>
            </div>
            <div class="d2">
                <img src="images/header/news-header.png" width="60px" height="60px">
            </div>
            <div class="d3">
                <div class="d3-1">
                    Club News
                </div>
                <div class="d3-2">
                    Information/Photos/News
                </div>
            </div>
        </div>

    </div>

    <div id="divAdBanner" height="40px" width="100%" >
        <a href="<?php echo "$bannerurl"?>" data-rel="external">
            <img style="display: block;" height="40px" width="100%" src=<?php echo "../appleicons/$clubid/banner_advert.png"?> />
        </a>
    </div>
    <div id="divNewsScroll" data-scrollz="pull">

    <table id="tblNews" border=0 cellpadding=0 cellspacing=0 width="100%">
        <tbody>
        </tbody>
    </table>
    </div>
    <div data-role="popup" id="popupNews" data-position-to="window" data-overlay-theme="b" data-mini="true" data-theme="a" class="ui-corner-all" data-inset="true">
            <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
            <div style="padding:10px 5px;">
              <h3>Add News</h3>
              <!--<div data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" data-theme="a">
                        <input type="radio" data-theme="a" name="radio-type" id="radio-view-a" value="1" checked="true" />
                        <label for="radio-view-a">Red</label>
                        <input type="radio" data-theme="a" name="radio-type" id="radio-view-b" value="2"  />
                        <label for="radio-view-b">Orange</label>
                        <input type="radio" data-theme="a" name="radio-type" id="radio-view-c" value="3"  />
                        <label for="radio-view-c">Green</label>
                </fieldset>
            </div>-->
              <label for="txtNewsTitle" class="ui-hidden-accessible">Title:</label>
              <input type="text" name="txtNewsTitle" id="txtNewsTitle" value="" placeholder="Title" data-theme="a" autocapitalize="On" maxlength=25 />

              <label for="txtNewsDesc" class="ui-hidden-accessible">Description:</label>
              <textarea  name="txtNewsDesc" id="txtNewsDesc" value="" placeholder="" data-theme="a" maxlength=75 rows=4 ></textarea>

             <!-- <button type="button" data-theme="a" onclick="addNews()" data-mini="true">Add</button>-->
            </div>

    </div>

    <div  data-role="footer" data-position="fixed"  data-theme="none" data-id="footer" data-tap-toggle="false">
    <table width=100% cellspacing=1 cellpadding=0>
      <tr class="footerrow grid-4">
        <td align="center">
            <a href="#pgIndex" data-transition="slide" data-direction="reverse">
                <div class="icon-footer home"></div>    
            </a>
        </td>
        <td align="center">
            <a href="#pgAlerts" data-transition="slide">
                <div class="icon-footer alerts">
                    <span class="count"></span>
                </div>
            </a>
        </td>
        <td align="center">
            <a href="#pgCompetitions" data-transition="slide">
                <div class="icon-footer livescoring"></div>
            </a>
        </td>
        <td align="center" >
            <a href="#pgContact" data-transition="slide">
                <div class="icon-footer contact"></div>
            </a>
        </td>
      </tr>
    </table> 

    </div> <!--footer-->
    <style>
        .newsimage {
            height: 70px;

        }

        .newstitle, .newstime, .newstext {
            left: 10px;
            padding-left: 10px;
            text-shadow:none;
        }
        .newstitle{
            font-size:16px;
            font-weight:bold;
            padding-top:5px;
            color:white;
            height:30px
            top: 10px;
        }
        .newstime{
            font-size:10px;
            font-weight:bold;
            top: 6px;

        }
        .newstext{
            font-size:12px;
            font-weight:normal;
            padding-top:5px;
            padding-bottom:5px;
            color:grey;
            top: 20px;

        }
    </style>
    <script>

    $( '#pgNews' ).die('pageshow').live( 'pageshow',function() {
        dhx.Touch.disable();


    });

    $( '#pgNews' ).die('pageinit').live( 'pageinit',function() {
        dhx.Touch.disable();
        $('#divNewsScroll').bind('pulled', function() {
            loadNews();
        });
        loadNews();
        $('#btnAddNews').die('click').live('click',function(){
            $('#txtTitle').val('');
            $('#txtDesc').val('');
            $( "#popupNews" ).popup('open');
        });
    });

    function openImage(image){
        imagesrc= $(image).attr('src');
        $('<div>').simpledialog2({
                    mode: 'blank',
                    headerText: 'Some Stuff',
                    headerClose: true,
                    blankContent : 
                      "<div style='padding:10px;'><img width='100%' style='max-height:400px;' src='"+imagesrc+"'>"+
                      // NOTE: the use of rel="close" causes this button to close the dialog.
                      "<a rel='close' data-role='button' href='#'>Close</a></div>"

                 });//simpledialog

    }

    function loadNews(){
        $.mobile.loading( 'show', { theme: "b", text: "Loading...", textonly: false ,textVisible: true});
        url="webservice.php?act=news&clubid="+sessionStorage.clubid+"&callback=?";
        $.ajax({
            url: url,
            async: false,
            dataType: 'json',
            success: function(data) {
                console.log(data);
                $("#tblNews").find("tr").remove();
                $.each(data.items,function(i,item){

                    if(item.image_url.length>2){
                        newsimage='../'+item.image_url;
                    }else{
                        newsimage='../images/club_news_generic_320x240.png';
                    }
                    newstitle=item.text;
                    newsdesc=item.details;
                    newstime=item.date_created.split(' ')[1].substring(0,5);
                    dt=toDate(item.date_created);
                    dtstr=dateFormat(dt,'ddd dd mmm yyyy');

                    //tr='<tr><td colspan=3><img src="images/horizontal_bar.png" width=100% height="10px"></td></tr>';
                    tr='<tr> ';
                    tr+='<td align="center" width="20%"><img class="clsNewsImage" onclick="openImage(this)" src="'+newsimage+'" height="70px" class="newsimage"></a></td>';
                    tr+='<td></td>';
                    tr+='<td> <table border=0 cellpadding=0 cellspacing=0 width="100%">';
                                tr+='<tr><td><div class="newstitle">'+newstitle+'</div></td></tr>';
                                tr+='<tr><td><div class="newstime">['+dtstr+']</div></td></tr>';
                                tr+='<tr><td><div class="newstext">'+newsdesc+'</div></td></tr>';
                            tr+='</table>';
                    tr+='</td>';
                    tr+='</tr>';
                    tr+='<tr><td colspan=3><img src="images/horizontal_bar.png" width=100% height="10px"></td></tr>';

                    $('#tblNews > tbody:last').append(tr);

                });
                setTimeout(function(){
                    $('#divNewsScroll').scrollz('hidePullHeader');

                    $.mobile.loading( 'hide');
                },1000);
            }
        });
    }
<?php /*    function addNews(){
        title=$('#txtNewsTitle').val();
        description=$('#txtNewsDesc').val();
        url="webservice.php?act=addnews&clubid="+sessionStorage.clubid+"&title="+title+"&description="+description+"&callback=?";
        $.ajax({
            url: url,
            async: false,
            dataType: 'json',
            success: function(data) {
                console.log(url);
                loadNews();
            }
        });
        $('#popupNews').popup('close');
    }
    */
    ?>

    </script>
</div> <!--pgNews-->

[zippy1978]

Hi
I tried your application and it works fine on my iPad with Safari on iOS 6.
Maybe it´s a caching issue (happens really often with webclip).
Did you try removing and adding the webclip back ?

Regards
Gilles