Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. elenil
    E
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    elenil

    @elenil

    0
    Reputation
    2
    Posts
    700
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    elenil Follow

    Posts made by elenil

    • RE: Force Onsen-UI splitter-side to be always closed

      @jonas_arkulpa It worked, thank you very much!

      posted in Onsen UI
      E
      elenil
    • Force Onsen-UI splitter-side to be always closed

      I’m currently developing a phonegap app with OnsenUI and I want to use ons-splitter to create a sliding menu without angular. However, I have an issue with splitter-side as it seems to be developed in a way where it is always open in one of the phone orientations (landscape or portrait). According to the docs if “collapse” param is undefined it should be always collapsed by default, but it becomes always open instead. I deployed a workaround in javascript by changing this param on the fly depending on the phone orientation, but it lags a bit and is not satisfying enough.

      The question is this: is it possible to force the splitter-side to open only on swipe? Or is there a better solution to make it work?
      HTML Code:

      <ons-splitter var="splitter">
          <ons-splitter-side id="side_splitter" side="left" swipeable width="200px">
              <ons-page>
                  <ons-toolbar>
                      <div class="center">Menu</div>
                  </ons-toolbar>
                  <ons-list>
                      <ons-list-item modifier="chevron">
                          Page 1
                      </ons-list-item>
                      <ons-list-item modifier="chevron">
                          Page 2
                      </ons-list-item>
                  </ons-list>
              </ons-page>
          </ons-splitter-side>
          <ons-splitter-content page="page1.html">
          </ons-splitter-content>
      </ons-splitter>
      

      JavaScript:

      ons.orientation.on('change', function(e){
              if (e.isPortrait){
                  console.log('portrait');
                  $("#side_splitter").attr('collapse','portrait');
              } else {
                  console.log('landscape');
                  $("#side_splitter").attr('collapse','landscape');
              }
          })
      
      posted in Onsen UI
      E
      elenil