topic Thankful in Software Archive

Sidebar closed

ali_khatami — Tue, 18 Oct 2016 06:56:43 GMT

How can it be when Sidebar is open to elsewhere Page beat to be closed?

Hi Ali,

Shahab_L_Intel — Tue, 18 Oct 2016 16:21:20 GMT

Hi Ali,

Please clarify your question, maybe you can attach a picture to show what you mean.

PS: If you happen to speak Persian you can ask your question in Persian as well!

شهاب جان مرسی از اینکه گفتی

ali_khatami — Tue, 18 Oct 2016 16:32:05 GMT

شهاب جان مرسی از اینکه گفتی راحت منظورم رو الان میگم من سایدبار گذاشتم وقتی گزینه ای میزنم که باز بشه درسته ولی مثل تلگرام یا برنامه های دیگه که جای دیگه میزنی رو صفحه گوشی و بسته میشه، بزا من سایدبار بسته نمیشه و حتما باید سایدبار رو نگه دارم و بکشم تا بسته بشه اگه آی دی تلگرام داری بگو اونجا بهت مسیج بدم مرسی

Translation of Ali's post for

Shahab_L_Intel — Tue, 18 Oct 2016 19:42:01 GMT

Translation of Ali's post for everybody else's reference:

"I've implemented a sidebar and can click to open it and it works fine. But I'd like to be able to close it by tapping anywhere on the screen, similar to how 'Telegram' and other apps work. Now I have to drag to close it."

Ali, I'm not sure how you implemented your sidebar, but generally you have to have an event handler for touch or click on the main area of your app that calls to close the sidebar.

Unfortunately we cannot support non-xdk issues here, but depending on how you implemented the sidebar you should be able to find a solution in a forum such as jquery or stack overflow.

This jQuery tutorial might be helpful: http://www.w3schools.com/jquerymobile/jquerymobile_panels.asp

See some bootstrap examples here: http://bootsnipp.com/tags/sidebar

Shahab can not speak Persian?

ali_khatami — Tue, 18 Oct 2016 19:49:13 GMT

Shahab can not speak Persian?

I would like to point except

ali_khatami — Tue, 18 Oct 2016 22:19:38 GMT

I would like to point except when Sidebar is open and touch Elsewhere closed my Sidebar
But Not close

can i help me ?

As Shahab indicated, you need

PaulF_IntelCorp — Wed, 19 Oct 2016 15:27:48 GMT

As Shahab indicated, you need to create a touch handler that will detect a touch anywhere on the display and then activate some JavaScript handler to close the sidebar. This is a general HTML5 programming question. We are here to help with issues directly related to the operation of the XDK, this forum is not a good place to learn how to write HTML5 apps. For that we recommend that you use Stack Overflow, W3C Schools, HTML5 Rocks and the many other sites that can help you learn more about programming in HTML5.

How do I use this menu?

ali_khatami — Wed, 19 Oct 2016 20:33:24 GMT

How do I use this menu?
I'm amateur and I need help
My only request is that the menu that opens easily be closed
For example, the menu but Intel:

http://www.w3schools.com/jquerymobile/jquerymobile_panels.asp

Quote:Paul F. (Intel) wrote:

PaulF_IntelCorp — Wed, 19 Oct 2016 23:28:21 GMT

Paul F. (Intel) wrote:

We are here to help with issues directly related to the operation of the XDK, this forum is not a good place to learn how to write HTML5 apps. For that we recommend that you use Stack Overflow, W3C Schools, HTML5 Rocks and the many other sites that can help you learn more about programming in HTML5.

I must look on the Internet

ali_khatami — Thu, 20 Oct 2016 07:39:03 GMT

I must look on the Internet to answer this question?
This reference does not meet the challenge and help me?

This is an example where the

ali_khatami — Thu, 20 Oct 2016 14:14:04 GMT

This is an example where the Intel projects there

-------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<!--HTML5 doctype-->
<html>

<head>

    <title>App Framework Kitchen Sink</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link rel="stylesheet" type="text/css" href="lib/appframework/icons.css" />
    <link rel="stylesheet" type="text/css" href="lib/appframework/af.ui.css" />

    <script type="text/javascript" charset="utf-8" src="lib/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="lib/fastclick.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="lib/appframework/appframework.ui.min.js"></script>
        
    <script src='cordova.js'></script>


</head>

<body>
    <div id="splashscreen" class='ui-loader heavy'>
        App Framework
        <br>
        <br>
        <span class='ui-icon ui-icon-loading spin'></span>
        <h1>Starting app</h1>
    </div>

    <div class="view splitview">
        
        <header>
            <a class="menuButton" data-left-menu="left" data-transition="cover" style="float:left"></a>
            <h1>Title</h1>
        </header>
        
        <div class="pages">
            <div class="panel" id="main" data-title="Main" data-selected="true">
                This is main page
            </div>
            <div class="panel" id="page2" data-title="Page 2">
                This is Page 2
            </div>
        </div>

        <nav id="left">
            <div class="view active">
                <header>
                    <h1>Left</h1>
                </header>
                <div class="pages">
                    <div class="panel active" id="navPage1" data-title="Foobar">
                        <ul class="list">
                            <li><a href="#main" onclick="$.afui.clearHistory()">Main Page</a></li>
                            <li><a href="#page2" onclick="$.afui.clearHistory()">Page Two</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>

    </div>
</body>

</html>

-------------------------------------------------------------------------------------------------------------------------------------------

Is there a way to do the same menu & sidebar in my project?

If you look at the sidebar.js

Chris_P_Intel — Thu, 20 Oct 2016 18:15:11 GMT

If you look at the sidebar.js file you'll see it has a simple API to close, close all, open, toggle, etc.

I believe that when you hook up a button to a sidebar in the App Designer interactivity pane, you can then go and look a the event handler generated (which is toggle by default) and it has some other options right there for you.

thanks CHRIS

ali_khatami — Thu, 20 Oct 2016 19:19:29 GMT

thanks CHRIS

Where is the event handler choice?
I did not notice and did not see

Do not you help me?

ali_khatami — Fri, 21 Oct 2016 17:48:24 GMT

Do not you help me?

Anyone can not help me?

ali_khatami — Sun, 23 Oct 2016 08:09:51 GMT

Anyone can not help me?

As Paul mentioned you can

Shahab_L_Intel — Tue, 25 Oct 2016 18:07:53 GMT

As Paul mentioned you can refer to other sites for generic help on html/javascript programming.

This is a problem of this

ali_khatami — Tue, 25 Oct 2016 18:35:54 GMT

This is a problem of this program and I support this request for help my reference
There is a way to help?

Ali -- what you are asking

PaulF_IntelCorp — Tue, 25 Oct 2016 19:36:21 GMT

Ali -- what you are asking for is help in understanding how to write JavaScript and HTML5. This forum does have the resources to provide such help. We recommend that you use HTML5 Rocks, Stack Overflow, W3C Schools and the many other sites that are dedicated to learning about JavaScript and HTML5.

To help you with your search, you should know that the Intel XDK creates standard Cordova (aka PhoneGap) apps. So solutions you can find that work for Cordova (or PhoneGap) apps will also work with the XDK.

Thankful

ali_khatami — Tue, 25 Oct 2016 19:59:22 GMT

Thankful
But the correct answer and did not solve my problem