ps-push not working properly

[orderofout]

The push content feature doesn't appear to work properly. With the code below it works as expected but once you remove the second pageslide block, the ps-push just does the default sliding.

Am I missing something? I was running Angular 1.4 but also reverted and tried 1.3.13 and still the same result.

This is is the code (same as the example minus a bunch of the buttons):

<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer" style="padding:20px">
    <header>
    <h1>
        <a name="angularjs-pageslide-directive" class="anchor" href="#angularjs-pageslide-directive"><span class="octicon octicon-link"></span></a>AngularJS Pageslide directive
    </h1>
    </header>

    <section id="main_content" class="inner">

      <p>
          An <a href="http://angularjs.org/">AngularJS</a> directive which slides another panel over your browser to reveal an additional interaction pane.<br/>
          It does all the css manipulation needed to position your content off canvas with html attibutes and it does not depend on jQuery
      </p>


      <h3>Push content</h3>
      <div ng-controller="pageslideCtrl">
          <a class="tiny button" href="" ng-click="toggle()">Open Sidebar</a>
          <div pageslide ps-open="checked" ps-side="left" ps-push="true" >
              <div style="padding:20px" id="demo-right">
                  <h2>Hello Pagesliderrrr</h2>
                  <p>Put here whatever you want</p>
                  <a ng-click="toggle()" class="button" >Close</a>
              </div>
          </div>
      </div>

    <!-- Remove this block and it no longer pushes the page content -->
      <h3>Squeeze content</h3>
      <div ng-controller="pageslideCtrl">
          <a class="tiny button" href="" ng-click="toggle()">Open Sidebar</a>
          <div pageslide ps-open="checked" ps-side="left" ps-squeeze="true" ps-cloak="true">
              <div style="padding:20px" id="demo-right2">
                  <h2>I Don't Get it</h2>
                  <p>Why does this pageslide element need to be here for the previous one to push content?</p>
              </div>
          </div>
      </div>

      <br/>

    </section>

</div>

nothing fancy in the controller either

.controller('pageslideCtrl', function ($scope) {

    $scope.checked = false; // This will be binded using the ps-open attribute

    $scope.toggle = function() {
        $scope.checked = !$scope.checked;
    }


  });

[leonardofaria]

Try add to your css:

html {
  overflow-x: hidden;
}

body {
  position: absolute;
  transition: all 0.5s ease;
}

[WolfieWerewolf]

Hi guys... great project. I have a small issue with compatibility between pageslide and another component; the other component doesn't like position:absolute; on the body. Is there an alternative? I was hoping to use the push capabilities.

Thanks!

/W

[WolfieWerewolf]

I'm going to answer my own question in case someone else has this issue. Lines 42 & 52 define:

param.container = $scope.psContainer || false; body = param.container ? document.getElementById(param.container) : document.body;

I'm coming over from C# land so new to JS but it looks to me like the intention here is that if the bool param.container is true then body is set by the value of $scope.psContainer which is presumably set in the controller, otherwise default to using the document body. I tried this and it didn't work so as a quick and dirty test I replaced line 52 with:

var body = document.getElementById("menuContainer");

and that worked. menuContainer is the div that I want to push. Being completely new to Angular I can't be sure if I'm doing it wrong or if there's something up with the conditional statement, I'll have to get my head into that. I just thought I would share what I found before I move on and forget to come back to this.

/W

[GenisDiaz]

@leonardofaria It works for me, thanks

[danielepiccone]

@WolfieWerewolf you're right, that's what the ps-container attribute is for. In your case it should just have been

<pageslide ... ps-container='containerId' > ... </pageslide>

and in the controller

$scope.containerId = 'menuContainer'

[danielepiccone]

@orderofout that was a problem that was working in the examples but not in real life, that should be fixed now in > v1.3

[orderofout]

got it... it's been so long I don't even remember what project I was working on at the time. lol But I'll be sure to check it out again, thanks!

//- - - - - Jason M. Hanrahan 201-283-0427 www.ContrastLogic.com

On Sun, Jun 19, 2016 at 5:28 AM, Daniele Piccone [email protected] wrote:

@orderofout https://github.com/orderofout that was a problem that was working in the examples but not in real life, that should be fixed now in > v1.3

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dpiccone/ng-pageslide/issues/51#issuecomment-226987856, or mute the thread https://github.com/notifications/unsubscribe/AASkb2xMkqU9Md3lgFhRMU1Rz7KsRwV2ks5qNQvWgaJpZM4FI8dE .