By Alex Belousov

23 Oct 2013 11:02 English 4 Replies

Hello! I have tryied to use dragend.js library in my app and now i have a problem with that libary. My slider-carousel dont't have any reaction to touch events.

Please, help!

At first, I load a libraries: jquery, hammer.js, dragend.js.

After that i have a markup in index.html#help (#help is a page)

<div id="demo">
    <ul class="demoul">
      <li class="first dragend-page"></li>
      <li class="dragend-page"></li>
      <li class="middle dragend-page"></li>
      <li class="dragend-page"></li>
      <li class="last dragend-page"></li>
    </ul>
</div>

and in the main.js i have a function

var initHelp = function(){
    
	$("#demo").dragend();
	console.log("add dragend!")
	
};

$(document).delegate("#help", "pageinit", initHelp);

And my app has no reaction. and dragend.js carousel fails.

So what i am doing wrong?

Edited on 23 10, 2013

Responses

4 Replies

Raghu Kona

24 Oct 2013 08:18

Hi Alex,

I tested your code and it works fine. I just added text to the list items and I was able to see the page carousel.

<div id="demo">
    <ul class="demoul">
      <li class="first dragend-page">FIrst</li>
      <li class="dragend-page">Second</li>
      <li class="middle dragend-page">Third</li>
      <li class="dragend-page">Fourth</li>
      <li class="last dragend-page">Fifth</li>
    </ul>
</div>

I can see two rows with 1 - 4 on row one and the 5th list item on second row. Was able to traverse through the carousel.

Can you please check, if you are gettig any errors on your console.

Regards,

Raghu Kona

Reply to this post
Mark as answer

Alex Belousov

24 Oct 2013 11:49

Thanks for help!

I had tryied that code in browser(chrome, had copied url from simulator and paste in the browser) and it works! I am able to see the page carousel, swipe pages.

but in simulator slider has no reacton yet.

Maybe you can share your example project with dragend.js and i will try to test its on my computer?

Reply to this post
Mark as answer

Alex Belousov

24 Oct 2013 11:52

P.s There are no errors or warnings in the simulator console, only debug message "add dragend!"

Reply to this post
Mark as answer

Raghu Kona

25 Oct 2013 09:22

Hi Alex,

Please find the below code working on my machine.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="description"
    content="A Tizen Web UI FW single-page template generated by Tizen Web IDE" />
<meta name="viewport" content="width=device-width,user-scalable=no" />

<link rel="stylesheet"
    href="tizen-web-ui-fw/latest/themes/tizen-white/tizen-web-ui-fw-theme.css"
    name="tizen-theme" />
<title>Tizen Web IDE - Template - Tizen - Tizen Web UI Framework
    - Single-Page</title>
<!--NOTE:
        jquery.js and web-ui-fw.js must be included.
        DO NOT REMOVE below code!
    -->
<script src="tizen-web-ui-fw/latest/js/jquery.js"></script>
<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
    data-framework-theme="tizen-white"></script>

<!--NOTE:
        Additional scripts and css files are to be placed here.
        You can use jQuery namespace($) and all functionalities in jQuery
        in your script.  For example:

            <script src="main.js"></script>
            <link rel="stylesheet" href="my.css">
    -->
<script type="text/javascript" src="./js/main.js"></script>
<script type="text/javascript" src="./js/hammer.js"></script>
<script type="text/javascript" src="./js/dragend-0.2.0_rc2.js"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>

<body>
    <div data-role="page">
        <div data-role="header" data-position="fixed">
            <h1>Single-page application</h1>
        </div>
        <!-- /header -->

        <div data-role="content">
            <div id="demo">
                <ul class="demoul">
                    <li class="first dragend-page">One</li>
                    <li class="dragend-page">Two</li>
                    <li class="middle dragend-page">Three</li>
                    <li class="dragend-page">Four</li>
                </ul>
            </div>
        </div>
        <!-- /content -->
    </div>
    <!-- /page -->
</body>
</html>

Regards,

Raghu Kona

Reply to this post
Mark as answer

User Menu

Tizen Forums

Community

Community

Responses

Search form

Responses