Dynamically changing flipsnap-pane width

[davidrehakcz]

Is there a way to dynamically change width of flipsnap-pane based on the device width? I tried some stuff but withouth success.

[ninjatronic]

Hi @home-bot

Can you post a jsfiddle of what you are trying to achieve, or some code? You should be able to achieve this purely with css quite easily i think

[davidrehakcz]

Hi,
i have following html code:

<div flipsnap flipsnap-id="flipsnap" style="width:320px;margin:0 auto;">
    <div flipsnap-pane ng-style="setWidth()">
        {{detailCalculation.amount}}
    </div>
    <div flipsnap-pane ng-style="setWidth()">
        {{detailCalculation.interest}}
    </div>
    <div flipsnap-pane ng-style="setWidth()">
        {{detailCalculation.years}}
    </div>
</div>

In the angular controller i do following:

$scope.setWidth = function () {
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    console.log("width:" + width + "px;");
    return { "width": width + "px;"};
}

The console out is OK, the value is correct.

[davidrehakcz]

Sorry,
each of the html div has following:

div flipsnap-pane ng-style="setWidth()"

[ninjatronic]

Hi @home-bot

I'll be you're seeing that although the size of the flipsnap elements changes shape the distance that they travel when dragged does not. To achieve this you need to configure the distance option.

You can bind flipsnap to an options object like this:

<div flipsnap="flipsnap" flipsnap-id="flipsnapId" flipsnap-options="options" class="viewport ng-isolate-scope" style="overflow: hidden;"></div>

$scope.options = {
    distance: 320
};

When you change the value of $scope.options.distance the flipsnap element will refresh and the distance that each element travels will be changed. There's more information on the available options here.

Does that help?

[davidrehakcz]

Hi @ninjatronic ,
infact im not concerned about the "distance" but the width of each pane. If i do hardcode the width for each pane as well as the main div of flipsnap, it works just fine. But i dont want to hardcode the value, more like to base it on device it will be deployed (mobiles, tablets, etc..). Is it more clear?

I mean look at this example: http://jsfiddle.net/hokaccha/yL7LR/
(even if its not angular based flipsnap)
And see the width is hardcoded to 500px. THis i would like to avoid. Set it dynamically based on the device width

[ninjatronic]

@home-bot Here's an update to your fiddle using percentages instead of px widths. Another alternative would be to use media queries to select hardcoded widths according to the media size of the device.

[davidrehakcz]

Hi @ninjatronic,
i have tried several solutions (swipe, ng-swipe, swiper, flipsnap, etc..) lately and no success. I mean, it doesnt really work on "mobile" devices so far..
I'll now close this and try to google more. Thanks a lot for beeing helpful.

[ninjatronic]

Hi @home-bot

Did the fiddle not suit your purpose? I'm keen to help you get this working. Can you describe what the problem with the last suggestion was? Perhaps I'm still not understanding the problem properly.

I've used angular-flipsnap successfully in a few mobile projects so it can definitely be done!

Cheers

Pete

[davidrehakcz]

Hi @ninjatronic,
okie once im back home from work, i'll try to be again more precise and see if "we" can achive my needs :-) THanks a bunch!

[ninjatronic]

Good - this project was primarily intended to be used in phonegap/angular apps so if people are having problems using it in production then it's important to get it fixed!

For reference, here is one sample app that uses flipsnap to emulate native swiping functionality, written in Phonegap.

[davidrehakcz]

Okie first question: Do you think it should work in ripple-emulator? Or do you use it at all?

[ninjatronic]

Yes, it should definitely work in Ripple.

[davidrehakcz]

So i have now tested ng-style and ng-class directives from core angular, and still no luck.

1. Based on below URL i have tested ng-style (see below):
   http://stackoverflow.com/questions/22096088/how-to-assign-class-to-an-element-using-scope-variable-in-angular-js

   <div flipsnap flipsnap-id="flipsnap"  ng-style="{ 'width' : '320px;', 'margin' : '0 auto'}">
       <div flipsnap-pane ng-style="{ 'width' : '320px;'}">
           <h1>1</h1>
       </div>
       <div flipsnap-pane ng-style="{ 'width' : '320px;'}">
           <h1>2</h1>
       </div>
       <div flipsnap-pane ng-style="{ 'width' : '320px;'}">
           <h1>3</h1>
       </div>
   </div>
   

2. Based on below URL i have tested ng-class (see below):
   http://stackoverflow.com/questions/22096088/how-to-assign-class-to-an-element-using-scope-variable-in-angular-js

   <div flipsnap flipsnap-id="flipsnap"  ng-class="setWidth()">
       <div flipsnap-pane ng-class="setWidth()">
           <h1>1</h1>
       </div>
       <div flipsnap-pane ng-class="setWidth()">
           <h1>2</h1>
       </div>
       <div flipsnap-pane ng-class="setWidth()">
           <h1>3</h1>
       </div>
   </div>
   

   Where setWidth:
   $scope.setWidth = function() {
   var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
   return width + 'px;';
   }

Cant manage to make it work with ng-directives to set "dynamically" width class parameter based on device width.
Any idea?