danielepiccone/ng-pageslide

AngularJS sliding panel for serving additional content from off the page

ng-pageslide's Issues

optional key down listener to close sidebar

it might be useful to have the ability to close the sidebar with the 'esc' key, the listener would only be set if a attribute on the directive is set to true.

I can make the pull request if you think this would be useful

No Transitions

I've been playing around with the ng-pageslide directive on a personal project and I can't seem to get the transitions to work. Basically upon showing, there is a delay and then the sidebar is displayed. And upon hiding it, it is immediately hidden.

I've created a plnkr to demonstrate what I'm seeing:

http://plnkr.co/edit/0TaPxAsMZ7DO090WWH6Z?p=preview

Any thoughts on what could be the issue? I've played with different versions of angular, used foundation instead of bootstrap, but all yielded the same results.

can pageslide auto open by simply moving mouse to extreme left of browser window (x=0) w/o any clicks

any advice?

Thank you.

how can i get my pageslide to auto close when my mouse moves outside of the pageslide with no clicking

advice?

psContainer ignored

Hi! Very nice component, thanks a lot! Just wondering about the psContainer property, by the look in the source code, seems like psContainer is ignored at all and appends to body always. Thank you.

opening panel when mouse is at certain point

Here's my code:

<title></title>

<script src="scripts/angular.js"></script>
<script src="scripts/angular-pageSlide-directive.js"></script>
<script src="scripts/jquery-2.1.3.js"></script>


<style>
    .ng-pageslide {
        background: #eee;
    }
</style>

    <div class="row">
        <div class="col-md-12">
            <button class="btn btn-lg" pageslide ps-side="top" ps-speed="0.5" href="#demo-top">Open Demo</button>
            <button class="btn btn-lg" pageslide ps-side="bottom" ps-speed="0.5" href="#demo-bottom">Open Demo</button>
            <pageslide ps-side="bottom" ps-open="vm.showme" ps-size="100px">
                <div>
                    Blah
                </div>
            </pageslide>
        </div>
    </div>

</div>
<div style="padding: 20px;" id="demo-bottom">
    <h2>Hello Pageslide</h2>
    <p>Put here whatever you want</p>
    <a id="demo-bottom-close" i class="button">Close</a>
</div>
<div style="padding: 20px;" id="demo-top">
    <h2>Hello Pageslide</h2>
    <p>Put here whatever you want</p>
    <a id="demo-top-close" i class="button">Close</a>
</div>


<script type="text/javascript">

    (function () {

        angular.module('app', ['pageslide-directive'])
            .controller('testing', testing);
        function testing() {
            var vm = this;

            vm.showme = false;

            $(window).mousemove(function (e) {
                if (e.pageX <= 10) {
                    vm.showme = true;
                } else {
                    vm.showme = false;
                }
                console.log('vm.showme=' + vm.showme);
            });
        }
    })();
</script>

This is of course a test app, but the pageslide referenced by the vm.showme will not open when vm.showme is set to true. Thoughts?

Open panel by swipe

Hello,

Do you have any suggestion to make the panel open by swipe?

Thank you

I am using this directive for hide and show my pane, but getting error

I am using this directive for hide and show my pane, but getting this error

Error: You have to elements inside the or you have not specified a target href.

Please have look at my code

Can you please let me know how do i integrate with this.

Allow passing of function to ps-auto-close

First of all thank you very much for this great directive, and the ps-auto-close functionality is great. I would really appreciate it if it would be possible to pass a function instead of just a boolean true/false to ps-auto-close. If I have a background overlay or variable that needs to be reset on panel close, I would like to be able to pass the function in that resets these variable to their proper values.

dynamic div id

Hi there,
nice directive!
Have you tried making this work with dynamic target div ids?

I mean something like this:

<a pageslide="left" ps-speed="0.5" ps-class="some-pageslide" ps-custom-top="5%" 
     ps-custom-left="0%" ps-parent="foo" href="#{{someId}}" >My slide out</a>

thanks!

Why not as a singleton service?

Just an informative question. I very much like the idea of this being implemented as a service, not unlike the one described here:

http://weblogs.asp.net/dwahlin/building-an-angularjs-modal-service

Please do let me know what you think of this idea because I do like this library very much so far.

Redirect issue

When you redirect to another page and redirect back to the previous page the ng-pageslide directive seems to stop working. Checked firebug console and there's no errors thrown back out. Could you check this one thanks .

How could it be possible to load a partial view (dynamic) content in the panel?

Feature request

JQuery mobile has 3 different expose options. Overlay, reveal and push. Would be cool to see those options here.

http://demos.jquerymobile.com/1.4.2/panel/

Add zIndex parameter

When styling pageslide with ps-class="custom-class" it overriding custom-class z-index (its hard-coded value of 1000). Please add possibility to define z-index eg. ps-zindex="1000".

issue with ps-auto-close=yes and feature request

I'm using ng-pageslide with angular 1.2.16
I have several dead-simple anchors on the page like
<a href="/path/to/content">clickme</a>
When a page is loaded, it loads one of my templates containing <pageslide ps-open="true" ps-auto-close="true"></pageslide> that wraps around my content.
So I'm using ng-pageslide to create a sliding effect for each loaded page.
But, the problem is if I click any link on page, causing the location change, the already opened pageslide isn't closing.. Even better, the new pageslide stacks bellow the previous one (overlaying all pageslide instances..)..
What can cause this ?
Or, is there a way to tell ng-pageslide to "self destroy"..?

Also, ng-pageslide assumes the content inside the pageslide directive has a display:block; which might not always be the case (for me I need display:table), so might be useful to add a ps-container-style setting accepting an object like {display: table}) to the attributes (?) and thus set in in place of content.style.display = 'block';

"on open" callback

As a developer I would like to provide a callback that executes once the slider is open and uncloaked so that I can set the focus on an input inside the slider.

So far I've only found one workaround with the current version: the caller has to watch the "open" variable, set a timeout that runs after param.speed * 1000 (the time it takes for the cloak to be removed), then set the focus. Although this works, it seems brittle.

I'm not having much luck with a focus directive, since the element apparently renders while it's still in display: none. If the slider were changed to opacity: 0 instead of display: none, it works the first time, but not if one were to close and re-open the slider (without an additional ngIf). I also tried watching the "display: block" style on the "content" element without success.

A callback that executes after the slider is opened and the cloak is removed seems like it might offer a relatively clean and straightforward solution.

ps-side unable to get it to open anything other than default

Hi,

I am unable to get the ps-side (or ps-push or ps-squeeze) to work in my project. I tried first with a bootstrap page and thought that bootstrap may be interfering in some way, but tried on just a blank page copying the demo info and still no luck. Only panel I can get is a slide in panel from the right.

This is the demo page, all I did was link the ng-pageslide directive.js to the page, otherwise everything is straight off of the demo site http://dpiccone.github.io/ng-pageslide/examples/

Any hints on how to get panels to push or even come in from a different direct properly?

Thanks in advance!

<!doctype html>

<head>
    <meta charset='utf-8' />
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta name="description" content="Ng-pageslide : AngularJS sliding panel for serving additional content" />

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="bower_components/angular-ng-pageslide/dist/angular-pageslide-directive.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/foundation/5.0.0/css/foundation.min.css"> 
    <title>AngularJS Pageslide directive demo</title>
    <style>
        /* Needed for hiding crollbars when pushing */
        html {
            overflow-x: hidden;
        }

        .ng-pageslide {
            background: #eee;
        }
    </style>
    <script>
        var app = angular.module("app", ["pageslide-directive"]);

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

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

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

        }]);

        angular.element(document).ready(function(){

            c = angular.element(document.querySelector('#controller-demo')).scope();
        });

        // Test
        angular.element(document).ready(function () {
            if (console.assert)
                console.assert(document.querySelectorAll('body > .ng-pageslide').length == 9, 'Made all of them')
        });
    </script>
</head>

<body ng-app="app">


    <!-- 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>

        <div ng-controller="pageslideCtrl">
            <a class="large button" href="" ng-click="toggle()">Open Demo</a>
            <div pageslide ps-open="checked">
                <div style="padding:20px" id="demo-right">
                    <h2>Hello Pageslide</h2>
                    <p>Put here whatever you want</p>
                    <a ng-click="toggle()" class="button" >Close</a>
                </div>
            </div>
        </div>

        <h3>Different speeds</h3>
        <div ng-controller="pageslideCtrl">
            <a class="tiny button" href="" ng-click="toggle()">Slowmo</a>
            <div pageslide ps-open="checked" ps-speed="2">
                <div style="padding:20px" id="demo-right">
                    <h2>Hello Pageslidoo</h2>
                    <p>Put here whatever you want</p>
                    <a ng-click="toggle()" class="button" >Close</a>
                </div>
            </div>
        </div>

        <div ng-controller="pageslideCtrl">
            <a class="tiny button" href="" ng-click="toggle()">Fastbro</a>
            <div pageslide ps-open="checked" ps-speed="0.25">
                <div style="padding:20px" id="demo-right">
                    <h2>Hello Pageslidoy</h2>
                    <p>Put here whatever you want</p>
                    <a ng-click="toggle()" class="button" >Close</a>
                </div>
            </div>
        </div>

        <h3>Different directions</h3>
        <div ng-controller="pageslideCtrl">
            <a class="tiny button" href="" ng-click="toggle()">Up up and above</a>
            <div pageslide ps-open="checked" ps-side="top">
                <div style="padding:20px" id="demo-right">
                    <h2>Hello Pageslide</h2>
                    <p>Put here whatever you want</p>
                    <a ng-click="toggle()" class="button" >Close</a>
                </div>
            </div>
        </div>

        <div ng-controller="pageslideCtrl">
            <a class="tiny button" href="" ng-click="toggle()">Go west</a>
            <div pageslide ps-open="checked" ps-side="left">
                <div style="padding:20px" id="demo-right">
                    <h2>Hello Pageslide</h2>
                    <p>Put here whatever you want</p>
                    <a ng-click="toggle()" class="button" >Close</a>
                </div>
            </div>
        </div>

        <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-pushps-push="true" >
                <div style="padding:20px" id="demo-right">
                    <h2>Hello Pageslide</h2>
                    <p>Put here whatever you want</p>
                    <a ng-click="toggle()" class="button" >Close</a>
                </div>
            </div>
        </div>

        <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="false">
                <div style="padding:20px" id="demo-right">
                    <h2>Hello Pageslide</h2>
                    <p>Put here whatever you want</p>
                    <a ng-click="toggle()" class="button" >Close</a>
                </div>
            </div>
        </div>

        <br/>

        <div ng-controller="pageslideCtrl">
            <h3>As a class</h3>
            <p>Check to open: <input type="checkbox" ng-model="checked" ></p>
            <div class="pageslide" ps-open="checked" >
                <div style="padding:20px" id="demo-ctrl">
                    <h2>Good Pageslide</h2>
                    <p>Put here whatever you want</p>
                </div>
            </div>
        </div>

        <div ng-controller="pageslideCtrl">
            <h3>As an attribute</h3>
            <p>Check to open: <input type="checkbox" ng-model="checked" ></p> 
            <div pageslide ps-open="checked" >
            <div style="padding:20px">
                <h2>Cool Pageslide</h2>
                <p>Put here whatever you want</p>
            </div>
            </div> 
        </div>

        <div ng-controller="pageslideCtrl">
            <h3>As an element</h3>
            <p>Check to open: <input type="checkbox" ng-model="checked" ></p> 
            <pageslide ps-open="checked" >
            <div style="padding:20px">
                <h2>Yes Pageslide</h2>
                <p>Put here whatever you want</p>
            </div>
            </pageslide> 
        </div>

        <!--
        <div ng-controller="pageslideCtrl">
            <h3>With custom styles</h3>
            <p>Check to open: <input type="checkbox" ng-model="checked" ></p> 
            <pageslide ps-class="panel" ps-open="checked" >
            <div>
                <h2>Rad Pageslide</h2>
                <p>Put here whatever you want</p>
            </div>
            </pageslide> 
        </div>
        -->

    </div>

    <script type="text/javascript">
        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
        try {
            var pageTracker = _gat._getTracker("UA-42627434-1");
            pageTracker._trackPageview();
        } catch(err) {}
    </script>


</body>

does this support url navigation with ui-router?

does this support url navigation with ui-router?

Top/Left/Bottom/Right Animation instead of Width/Height Animation

You might need to change the overall animation to top,bottom, left, right because the content of the pageslide always gets squeezed when animating the width or height. This way the content is always pushed instead of scaled up and down. Looks way better in my opinion.

Using with a fixed position navbar, a workaround?

Currently a fixed position navbar with a width of 100% will not work in a responsive manner to sliders with the the squeeze option. Is there a method of making this work with only CSS?

Add option to specify parent container for the pageslide html

Hi,

We've noticed that the directive appends a new DIV out to the very bottom of the page right above the BODY tag - this is causing our HTML to render incorrectly, forcing a footer to occur above the page slide DIV. Is there a way to stop this from happening?

Move to main page on click any link

Hello!

I have very strange issue. In my page there are some links(i.e. <'a ng-href="#">pattern<'/a'>).

I'm using Angular 1.2.27. And when I click any link, I'm moved to main page.
When I comment directive, everything become fine.

ui-router and change of state loose events added to closure ID

Hello,
I use ui-router in my project and when i leave the page with the call to the directive to another state and then get back to it, then the close button (using the -close) does not work anymore, like events are not attached to the object anymore.

Can't find a nice way to readd events to the objects ...
Thanks for the help
Regards

Scope variables not updated in controller but in view

Hey, I like this plugin very much but I have this wired problem where my scope variables are updated in the view part but not in the controller. I have this html from angular-bootstrap

<div class="form-group">
    <label for="traveltime">Travel time: {{ travelTime / 60 }}min</label><br>
    <div class="btn-group">
        <label class="btn btn-r360-1"  ng-model="travelTime"  btn-radio="'300'">5 min</label>
        <label class="btn btn-r360-2"  ng-model="travelTime"  btn-radio="'600'">10 min</label>
        <label class="btn btn-r360-3"   ng-model="travelTime"  btn-radio="'900'">15 min</label>
        <label class="btn btn-r360-4"  ng-model="travelTime"  btn-radio="'1200'">20 min</label>
        <label class="btn btn-r360-5"  ng-model="travelTime"  btn-radio="'1500'">25 min</label>
        <label class="btn btn-r360-6"  ng-model="travelTime"  btn-radio="'1800'">30 min</label>
    </div>
</div>

Travel time is displayed correctly but the variable inside the controller is never updated. Also $scope.$watch('travelTime', function(old, newV){ }) does never fire. If I use this outside of the pageslide everything goes as planned. I've found the workaround with the ng-click="setTravelTime(300)" attribute, but this seems to me a bit hacky. :)

Thank you for this plugin and any help is kindly appreciated,
Daniel

Incorrect filepath listed in bower.json

The latest bower.json has "main": "build/angular-pageslide-directive.min.js",. However, the "build" directory is now dist. Also, I think you should only put the un-minified version here as many of us are using our own build tools.

P.S. Thank you.

ui-view remains empty when used within pageslide element

Hi there,
When I tried to switch to pageslide directive, I lost ui-view content from https://github.com/angular-ui/ui-router
Here is what I did:
My origin code snippet:

<div class="row">
    <div class="col-lg-3">
        <div ui-view="contacts" class="row"></div>
    </div>
    <div class="col-lg-6">
        <div ui-view="calls" class="row"></div>
    </div>

    <div class="col-lg-3 messaging">
        <div ui-view="messaging" class="row"></div>
    </div>
</div>

here all works just fine - after page rendering, all three ui-views have been injected with expected data.
So I decided to put the right ui-view - messaging into pageslide directive. I just amended the code:

<div class="row">
    <div class="col-lg-3">
        <div ui-view="contacts" class="row"></div>
    </div>
    <div class="col-lg-6">
        <div ui-view="calls" class="row"></div>
    </div>

    <pageslide ps-open="chatOpened">
        <div ui-view="messaging"></div>
    </pageslide>
</div>

and expected to see the messaging panel on the right. However when switch on the panel (chatOpened is true), I have completely empty panel. Inspecting ui-view within pageslide showed that the content has not been injected into the view - that explains why I see nothing, but it is not clear to me why the content has not been injected...
How to make it work?

Best Regards,
Angel

Button to animate along with pageslide

Hi there,

Thanks for pageslide.

Do you know of any way to get the button to animate preceding the pageslide?

For example, a button (tab?) exists on the edge of the browser window, clicking opens pageslide but the button/tab is still attached to it. Click the button/tab to close.

Tag latest version

The latest tagged version (the version available through bower) does not support the ps-class attribute.

Pointing to the same target fails

When several links/buttons points to the same target via href or psTarget attributes, only the last one works. The issue is due to the fact that slider.appendChild(content); moves target element to the very last slider created (last directive).

Demonstration of the problem: http://plnkr.co/edit/6nBy0spdpbYN3JXznYpW?p=preview

Panel Overflow

Default overflow is hidden, which makes some issues with big forms.
Just added theses lines:
line 9:
return {
restrict: "EAC",
transclude: false,
scope: {
psOpen: "=?",
psAutoClose: "=?",
psSide: "@",
psSpeed: "@",
psClass: "@",
psSize: "@",
psSqueeze: "@",
psCloak: "@",
psPush: "@",
psContainer: "@",
psOverflow: "@"
}

line 44:
param.overflow = $scope.psOverflow || 'hidden';

line 75
slider.style.overflow = param.overflow;

And in the html i can use this : ps-overflow="scroll"

I think it could be interesting to add it. BTW awesome directive.

closing the open div by javascript

I am using the left slide with id of 'div_dropdown'. This left side has cascading dropdowns to select the options I need.
I would like to close the slide when the last dropdown is selected.
I have a button as per the markdown given below in the slide which works fine.
How can I close the div by using Javascript?

 <a id="div_dropdown-close" class="btn btn-primary" >Close</a>

CSS style change for open/closed

It would be great to be able to have different content for when the slider is collapsed and open. So for example, when open, we show the full content as expected. When closed, we have the ability to show a different set of HTML, such as a button that opens the slider or something else.

Change pageslide="[side]" to normal parameter

Please change this definition of pageslide to normal attribute.

This code:

<pageslide='left' ps-open="checked" ps-class="well">
    ...
</pageslide> 

Is not working properly because

param.side = attrs.pageslide || 'right';

attrs.pageslide is undefined (at least in chrome 36.0.1985.143 and ubuntu). Suggesting change it to ps-side:

<pageslide ps-side="left" ps-open="checked" ps-class="well">
    ...
</pageslide> 

It will make it more intuitive.

Open and close with the same button

How to I open and close a panel with the same button element?

Backdrop

Hi, any plans on including a backdrop overlay when opening the pageslide. This should also be clickable to close the pageslide?

UI router and binding not working?

Hi, tried to navigate to another part of document from slide menu.

However the links are not working. It can work if it is not within the pageslide directive. Seems it is not

I tried opening with two methods.

   <a  class="btn btn-info pull-right" ng-click="checked=!checked">Open</a>
   <a  class="btn btn-info pull-right" pageslide  ps-side="right" ps-speed="1.0" href="#sidemenu" ps-auto-close>MENU</a>

Binding for href, and ui-sref does not work.

For a href, it does not bind with my $scope.loggeduser.usrID. When mouseover it shows the tooltip with url loggedin/posts/{{loggeduser.userID}} instead of a number like was supposed to.
For UI sref it doesn't work.

<pageslide ps-open="checked" ps-target="#sidemenu"></pageslide> 
   <div id='sidemenu'>
    <a id="sidemenu-close" class="btn" >Close</a>
    <ul>
       <li> <a href='#/loggedin/posts/{{loggeduser.userID}}'>Home</a></li>
       <li class='dropdown'><a ui-sref='loggedin.create'>Create</a>
        <ul class='submenu-create'>
            <li class='dropdown'><a ui-sref='loggedin.addalbum' >Add new album</a></li>
           <li class='dropdown'>Playlist</li>
      > </ul>
    </li>
    <li class='dropdown'><a ui-sref='loggedin.create'>Discover</a>
        <ul class='submenu-create'>
            <li class='dropdown'>Artistes</li>
            <li class='dropdown'><a ui-sref='loggedin.users'>Users</a></li>
        </ul>
    </li>


    <li class='dropdown'><a ui-sref='loggedin.create'>Manage</a>
        <ul  class='submenu-create'>
            <li class='dropdown'><a ui-sref='loggedin.report' >Sales report</a></li>
            <li class='dropdown'>Rewards and Payments</li>
             <li class='dropdown'><a ui-sref='loggedin.profile' >Personal Details</a></li>
        </ul>
    </li>

  </ul>

Any one else has this issue?

slide push feature

Hi There,

I want to know if there is a slide-push feature?

Thanx,

Support for Angular 1.4.3

Is there anything pending for support of Angular 1.4.3? There are breaking changes made to ngAnimate.

Here's a link to the changes: http://angularjs.blogspot.mx/2015/05/angular-140-jaracimrman-existence.html

ps-push not working properly

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;
    }


  });

Setting custom z-index

The .js file suggests using custom CSS to set the z-index. I tried setting the z-index in several different places through my app to no avail.

Each time an inline style was placed that clobbered any custom CSS I added.

In order to deal with this I added a variable to the scope at line 23:

return {
    restrict: "EAC",
    transclude: false,
    scope: {
        psOpen: "=?",
        psAutoClose: "=?",
        psSide: "@",
        psSpeed: "@",
        psClass: "@",
        psSize: "@",
        psSqueeze: "@",
        psCloak: "@",
        psPush: "@",
        psContainer: "@",
        psZindex: "@" // <--- my new scope variable
    },

Then at line 38:

    param.zindex = $scope.psZindex || 1000; // Override with custom CSS

Am I doing it wrong or would this be a useful update?

bower install throwing error

Hey, i just tried to install via bower and i am receiving this error.

bower install ng-pageslide
bower not-cached git://github.com/dpiccone/ng-pageslide.git#*
bower resolve git://github.com/dpiccone/ng-pageslide.git#*
bower download https://github.com/dpiccone/ng-pageslide/archive/0.1.2.tar.gz
bower extract ng-pageslide#* archive.tar.gz
bower EMALFORMED Failed to read C:...\AppData\Local\Temp...\bower\ng-pageslide-4724-h6hr8f\bower.json

Additional error details:
Unexpected string

IE 8 error

directive doesn't work in IE8 due to the use of addEventListener and preventDefault functions.

Dynamic sizing of panel

I am trying to make the sizing dynamic by setting ps-size="someFunction()" but the width is always 0. Is there a way to make it work?

Thanks

push option forces content off screen

How do you fix the position of content to avoid it being pushed off screen when using ps-push=true?

E.g. if you change ps-side="right" on the push example like below:

        <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="right" ps-push="true" >
                <div style="padding:20px" id="demo-right">
                    <h2>Hello Pageslide</h2>
                    <p>Put here whatever you want</p>
                    <a ng-click="toggle()" class="button" >Close</a>
                </div>
            </div>
        </div>

When you invoke the button all content is forced off to the left of screen. Is there a way to avoid this and have content resize?

Support for Angular 1.3?

Does this directive work with 1.3? If so can we get the dependency updated in the bower.json?

ps-custom-left dynamically

Hello, can you help with this issue?

I really want to change the percentage of ps-custom-left dynamically, something like:

< pageslide ps-open="hideSearchModule" ps-side="bottom" ps-speed="0.5" ps-size="330px" ps-custom-left="myPercentage" >

How can i do that?

Thanks.

PD: Sorry for my english, greetings from colombia :)

Feature Request [enhancement]

I noticed that if you have more content inside the panel than can fit on the screen, the content just disappears off the end of the page and you can't scroll down

Open two menus (left / right)

Can that be done with this script?

Thanks!

title bar (on-top)

Is there any possibility to put a title bar on top of the pageslider?
Here is an example from an android app: http://www.axure.com/c/attachments/forum/6-x-newbie-questions/1879d1369172569-creating-android-navigation-drawer-navigation_drawer_holo_dark_light.png

So my goal is to add a title bar but still move the body-content within the pageslider. In the photo-example the shown pageslider just overlaps the body-content.

I tried to play with the ps-container - something like this:

<a ng-click="toggle()">Open Sidebar</a>
<h2>nice title here</h2>

<pageslide "some awesome attr" ps-container="maincontent">"nice content"</pageslider>

<div id="maincontent>"the main content of the website"</div>

but it's not gonna work out. Any suggestions?