Ali -- what you are asking

ali_khatami · ‎10-17-2016

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

Shahab_L_Intel · ‎10-18-2016

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 · ‎10-18-2016

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

Shahab_L_Intel · ‎10-18-2016

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

ali_khatami · ‎10-18-2016

Shahab can not speak Persian?

ali_khatami · ‎10-18-2016

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

can i help me ?

PaulF_IntelCorp · ‎10-19-2016

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.

ali_khatami · ‎10-19-2016

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

PaulF_IntelCorp · ‎10-19-2016

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.

ali_khatami · ‎10-20-2016

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

ali_khatami · ‎10-20-2016

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?

Chris_P_Intel · ‎10-20-2016

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.

ali_khatami · ‎10-20-2016

thanks CHRIS

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

ali_khatami · ‎10-21-2016

Do not you help me?

ali_khatami · ‎10-23-2016

Anyone can not help me?

Shahab_L_Intel · ‎10-25-2016

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

ali_khatami · ‎10-25-2016

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

PaulF_IntelCorp · ‎10-25-2016

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.

ali_khatami · ‎10-25-2016

Thankful
But the correct answer and did not solve my problem

Sidebar closed