언어 설정

Menu
Sites
Language
Jquery mobile swipe event not working

Hi,

I have developed application to implement swipe event.I have written the code but it is not working.Please help me

 

 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>swipeleft demo</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

 
  <style>
  html, body { padding: 0; margin: 0; }
  html, .ui-mobile, .ui-mobile body {
    height: 105px;
  }
  .ui-mobile, .ui-mobile .ui-page {
    min-height: 105px;
  }
  #nav {
    font-size: 200%;
    width:17.1875em;
    margin:17px auto 0 auto;
  }
  #nav a {
    color: #777;
    border: 2px solid #777;
    background-color: #ccc;
    padding: 0.2em 0.6em;
    text-decoration: none;
    float: left;
    margin-right: 0.3em;
  }
  #nav a:hover {
    color: #999;
    border-color: #999;
    background: #eee;
  }
  #nav a.selected,
  #nav a.selected:hover {
    color: #0a0;
    border-color: #0a0;
    background: #afa;
  }
  div.box {
    width: 30em;
    height: 3em;
    background-color: #108040;
  }
  div.box.swipeleft {
    background-color: #7ACEF4;
  }
  </style>
</head>
<body>
 
<h3>Swipe the green rectangle in the left direction to change its color:</h3>
<div class="box"></div>
 
<script>
$(function(){
  // Bind the swipeleftHandler callback function to the swipe event on div.box
  $( "div.box" ).on( "swipeleft", swipeleftHandler );
 
  // Callback function references the event target and adds the 'swipeleft' class to it
  function swipeleftHandler( event ){
    $( event.target ).addClass( "swipeleft" );
  }
});
</script>
 
</body>
</html>

 

Thanks and regards

Mohit Kumar

답변 바로가기
목록

Responses

17 댓글
pius lee

Hey, did you test it on real device? or emulator?

Basically,

Mouse event is appear in this order. 

mousemove -> mousedown -> mouseup

So every custom event like swipe set a flag in the down event and check flag in move and remove flag on up event.

Unfotunately, In my emulator, "move, down, up" event always occur on the up event. 

So custom event like swipe or drag is not working on my emulator.

I don't know It's only my problem yet.

Anyway, If you run it on emulator only, just check on device. or check upper mouse event problem.

mohit kumar

Hi pius lee,

                 My code is not working with real device.I want use mobile swipe event in my application.Please help me if you have any solution.

 

 

 

Thanks in advance

Mohit Kumar

Vikram

Hi,

I tested in real device, may be not working yet.

Palitsyna

Hello,

Something is wrong with <link> and <script>.  I've pasted your method to jQuery project and it works well. The rectangle's colour changes from green to blue after swiping left. But when I copy all your code to .html file, it's not working. 
Try to add internet privilege and <access origin="*" subdomains="true"/> line to your config.xml file . Then check all yor links.

 

mohit kumar

Hi Palitsyna,

My XML file is.

 

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/PhotoCollageEditer" version="1.0.0" viewmodes="maximized">
    <tizen:application id="cAODr4yQS5.PhotoCollageEditer" package="cAODr4yQS5" required_version="2.3"/>
    <content src="swipe2.html"/>
    <feature name="http://tizen.org/feature/screen.size.all"/>
    
   <access origin="*" subdomains="true"></access>
    <tizen:privilege name="http://tizen.org/privilege/internet"/>
    <icon src="icon.png"/>
    <name>PhotoCollageEditer</name>
    <tizen:profile name="mobile"/>
</widget>

Please help me why swipe event is not working.If you have any another way please help me.

 

Thanks in advance

Thanks and regards

Mohit Kumar

pius lee

OK, I think you miss CSP rule in config.xml.

<tizen:content-security-policy>default-src 'self' 'unsafe-inline' data: https://maxcdn.bootstrapcdn.com/ http://code.jquery.com</tizen:content-security-policy>

Insert it into inside of your widget tag in config.xml. and add internet privilege.

If you want to link to your source with scripts or styles or datas thats are outside of local storage, you must add CSP rule for used url.

but anyway, I failed to use mouse event in emulator. but you can use it with on the real device.

 

mohit kumar

Hi puis lee,

I have done with what u told me.It work good,but i want my div to move horizontal when i swipe on div.How can i do this,please help me.

Now swipe event is work but i want my div move horizontal when user swipe the div.My code is same as above.Thanks in advance

 

 

Thanks and regards

Mohit Kumar

 

Marco Buettner

You should improve your skills for google

Here a little snippet! Adapt it to yourself.

http://jsfiddle.net/dZ7dX/543/

mohit kumar

Hi Marco Buettner,

This is not my answer.I think you are not getting what i want to say.Here is a link which tell yoy what is my question.

http://smoothtouchscroll.com/

 

I want scrolls content horizontally left or right when you swipe it with your finger.Please follw the above link.This is same as what i want.I have implemented it but it is not working.

 

 

Thanks and regards

Mohit Kumar

 

 

Marco Buettner

Why you not use the library? o0 LOL... THAT LOGIC...

mohit kumar

Hi,

I have used that library but it is not working.please help me.

 

 

Thanks and regards

Mohit Kumar

mohit kumar

Hi MARCO BUETTNER,

Here my code is running with swipe,but i have one problem.I want horizontal scroll.But now it is vertical.How can i do this.My code is

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <title>jQuery SmoothTouchScroll</title>
        
        <!-- the CSS for Smooth Touch Scroll -->
        <link rel="Stylesheet" type="text/css" href="../css/smoothTouchScroll.css" />
        
        <!-- Styles for my specific scrolling content -->
        <style type="text/css">
            #touchScroller
            {
            
                width:100%;
                height: 50%;
                /* position: relative; */
                position:absolute;
                background-color:red;
            }
            
            /* Replace the last selector for the type(s) of element(s) you have in
               your scroller.
               If you have images use #touchScroller div.scrollableArea img,
               If you have div's use #touchScroller div.scrollableArea div,
               if you have links use #touchScroller div.scrollableArea a,
               or add several selectors if you have mixed content
               ...and so on. */
            #touchScroller div.scrollableArea a
            {
                position: absolute;
                float: left;
                margin: 0;
                padding: 0 5px;
                /* If you don't want the images in the scroller to be selectable, try the following
                   block of code. It's just a nice feature that prevent the images from
                   accidentally becoming selected/inverted when the user interacts with the scroller. */
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
                overflow-x: scroll;
                overflow-y: hidden;
            }
            
        </style>
        <!-- jQuery - Get it from Google API's -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <!-- jQuery UI - contains only widget -->
        <script src="../js/jquery-ui-1.10.3.custom.min.js"></script>
        <!-- jQuery kinetic -->
        <script src="../js/jquery.kinetic.min.js"></script>
        <!-- Smooth Touch Scroll -->
        <script src="../js/jquery.smoothTouchScroll.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
    <h1>hello mohit ji</h1>
    <p style="position:fixed">Welcome to yourStory Pvt Ltd </p>
        <div id="touchScroller">
            <a href="#"><img src="images/field.jpg" alt="Demo image" id="field" /></a>
            <a href="#"><img src="images/gnome.jpg" alt="Demo image" id="gnome" /></a>
            <a href="#"><img src="images/pencils.jpg" alt="Demo image" id="pencils" /></a>
            <a href="#"><img src="images/golf.jpg" alt="Demo image" id="golf" /></a>
            <a href="#"><img src="images/river.jpg" alt="Demo image" id="river" /></a>
            <a href="#"><img src="images/train.jpg" alt="Demo image" id="train" /></a>
            <a href="#"><img src="images/leaf.jpg" alt="Demo image" id="leaf" /></a>
            <a href="#"><img src="images/dog.jpg" alt="Demo image" id="dog" /></a>
        </div>
        
        
        <script>
            $(function() {
                $("#touchScroller").smoothTouchScroll({ continuousScrolling: true });
            });
        </script>
    </body>
</html>

 

Thanks and regards

Mohit Kumar

Palitsyna

Hello,

just FYI, check paths to libraries. I think you've used wrong path.

    <!-- Smooth Touch Scroll -->
    <script src="./js/swipe/jquery.smoothTouchScroll.min.js"></script>
    <!-- the CSS for Smooth Touch Scroll -->
    <link rel="Stylesheet" type="text/css" href="./css/smoothTouchScroll.css" />
    <!-- jQuery UI - contains only widget -->
    <script src="./js/swipe/jquery-ui-1.10.3.custom.min.js"></script>
    <!-- jQuery kinetic -->
    <script src="./js/swipe/jquery.kinetic.min.js"></script>

You can read about absolute and relative links here: http://stackoverflow.com/questions/2005079/absolute-vs-relative-urls

 

mohit kumar

Hi,

Why u not reply my question,please help me.When i scroll the image inside div the entire page is scrolling

 

Thanks and regards

Mohit Kumar

mohit kumar

Hi Marco Buettner,

                              I have developed TIZEN application.Every OS having its forums and every forums are ready to help.If you help me then i can develop application very fast.Please help me.My question is general.

 

 

 

Thanks and regards

Mohit Kumar

Mark as answer
mohit kumar

Hi Marco Buttner,

                       I have done that what i want.Please never underestimate any one.If you are Intelligent it not mean other are LOL.

This type of response is not expected from your side.

 

I have done the task which i asked for here

http://jsfiddle.net/timwhitlock/WM583/

 

 

Thanks and regards

Mohit Kumar

mohit kumar

Hi pius lee,

Here is a link which tell you what is my question.

 

http://smoothtouchscroll.com/

 

I want scrolls content horizontally left or right when you swipe it with your finger.Please follw the above link.This is same as what i want.I have implemented it but it is not working.

 

Please help me

Thanks and regards

Mohit Kumar