Community
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Beginner
11 Views

Sidebar closed

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

Tags (2)
0 Kudos
18 Replies
Highlighted
Employee
11 Views

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!

 

0 Kudos
Highlighted
Beginner
11 Views

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

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

 

 

 

0 Kudos
Highlighted
Beginner
11 Views

Shahab can not speak Persian?
0 Kudos
Highlighted
Beginner
11 Views

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

can i help me ?

0 Kudos
Highlighted
11 Views

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.

0 Kudos
Highlighted
Beginner
11 Views

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

0 Kudos
Highlighted
11 Views

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.

0 Kudos
Highlighted
Beginner
11 Views

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

0 Kudos
Highlighted
Beginner
11 Views

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?

0 Kudos
Highlighted
Employee
11 Views

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.

0 Kudos
Highlighted
Beginner
11 Views

thanks CHRIS

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

0 Kudos
Highlighted
Beginner
11 Views

Do not you help me?

0 Kudos
Highlighted
Beginner
11 Views

Anyone can not help me?
0 Kudos
Highlighted
Employee
11 Views

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

0 Kudos
Highlighted
Beginner
11 Views

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

0 Kudos
Highlighted
11 Views

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.

0 Kudos
Highlighted
Beginner
11 Views

Thankful
But the correct answer and did not solve my problem

0 Kudos