CODEWITHSUNDEEP
jqueryhtmlcssswipe
Jaleel Qamar
Jaleel Qamar

Reputation: 19

jquery.touchSwipe issue with link

i am using jquery.touchSwipe plugin, but there is one issue i am facing right now.

if there is any link inside the div it will not work when you try to open that link, but when you swipe it will work fine.

check the code below.

$(function() {			
					//Enable swiping...
					$("#test").swipe( {
						//Generic swipe handler for all directions
						swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
							$(this).html("You swiped " + direction+"<br><a href='http://www.google.com/'>google.com</a>" );	
						},
						//Default is 75px, set to 0 for demo so any distance triggers swipe
					   threshold:0
					});
				});
.box
{
	margin-top:20px;
	margin-bottom:20px;
	max-width:768px;
	height:300px;
	
	padding: 10px;
	background-color: #EEE;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	
	text-align:center;
	font-weight: 300;
	font-size: 20px;
	line-height: 36px;
	
	overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://m.couponi.com.sa/jquery.touchSwipe.js"></script>

<div id="test" class="box">Swipe me
            
            
            <a href="http://www.google.com/">google.com</a>
            
            
            
            </div>

Upvotes: 0

Views: 1215

Answers (1)

Jaleel Qamar
Jaleel Qamar

Reputation: 19

i get the solution for my question.

to be able to click/tap links but also be able to swipe your menu, you need to use a swipe-treshold of maybe 75 (not zero!) AND make sure there isnt a "A" element excluded or you can rest the exclude list.

$(function() {          
                //Enable swiping...
                $("#test").swipe( {
                    //Generic swipe handler for all directions
                    swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
                        $(this).html("You swiped " + direction+"<br><a href='http://www.google.com/'>google.com</a>" ); 
                    },
                    //Default is 75px, set to 0 for demo so any distance triggers swipe
    threshold: 75,
    excludedElements: ""
                });
            });

Upvotes: 1

Related Questions