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?

[ninjatronic]

Can you describe the behaviour you are seeing? Does the flipsnap not work at all, or is the distance that it moves on swipe incorrect?

Is there any reason that you can't use units in %'s?

[davidrehakcz]

This is quite odd, as its pretty much same as the hardcoded values, isnt it? Like from the WIKI:

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

[davidrehakcz]

The behaviour is, that unlike the harcoded values are each separated with the screen-width, the values are just next to each other. See below

[davidrehakcz]

I can use the %, but that didnt really help. I may as well be doing it wrong though.

[davidrehakcz]

Is the margin: 0 auto, important?

[ninjatronic]

I think I understand the problem now.

When the flipsnap element is compiled it meddles with the style attributes of some inner elements to inject some extra style attributes.

Can you copy paste the generated source of the flipsnap element from the developer tools console in the browser please?

[davidrehakcz]

If i use following:

        <div flipsnap flipsnap-id="flipsnap" style="width: 100%">
            <div flipsnap-pane style="width: 100%">
                <h1>1</h1>
            </div>
            <div flipsnap-pane style="width: 100%">
                <h1>2</h1>
            </div>
            <div flipsnap-pane style="width: 100%">
                <h1>3</h1>
            </div>
        </div>

It ends up like this:

[davidrehakcz]

@ninjatronic Not sure exactly where to Look. I have a tab "Sources" where i can open the resources added. Is that what you wanted?

[ninjatronic]

Like this:

[davidrehakcz]

Sorry, trying hard to find out where it is actually within the ripple-emulator. Any idea how else to deploy it then in ripple? So i can see the compiled resources..

[ninjatronic]

The bit we want to see is "compiled" at runtime (via $compile). You should just be able to right-click on the flipsnapper and choose 'Inspect Element'

[davidrehakcz]

Here goes:

<div flipsnap="" flipsnap-id="flipsnap" ng-style="{ 'width' : flipsnapWidth, 'margin' : '0 auto'}" class="ng-isolate-scope" style="margin: 0px auto; overflow: hidden;">
  <div ng-transclude="" id="flipsnap" style="width: 900px; transition: -webkit-transform 0ms cubic-bezier(0, 0, 0.25, 1); -webkit-transition: -webkit-transform 0ms cubic-bezier(0, 0, 0.25, 1); -webkit-transform: translate3d(0px, 0px, 0px);">
    <div flipsnap-pane="" ng-style="{ 'width' : flipsnapWidth }" class="ng-scope" style="float: left;">
      <h1>1</h1>
    </div>
    <div flipsnap-pane="" ng-style="{ 'width' : flipsnapWidth }" class="ng-scope" style="float: left;">
      <h1>2</h1>
    </div>
    <div flipsnap-pane="" ng-style="{ 'width' : flipsnapWidth }" class="ng-scope" style="float: left;">
      <h1>3</h1>
    </div>
  </div>
</div>

[davidrehakcz]

So this is the problem? <div ng-transclude="" id="flipsnap" style="width: 900px; .. ?

[ninjatronic]

Try using { 'width' : flipsnapWidth, 'float' : 'left' } in your ng-style directive.

[davidrehakcz]

In panes only? Or even on the main flipsnap div?

[ninjatronic]

No, in the panes only.

[davidrehakcz]

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

console.log(flipsnapWidth); --> 320

[davidrehakcz]

How i set the flipsnapWidth: var width = (window.innerWidth > 0) ? window.innerWidth : screen.width; $scope.flipsnapWidth = width + 'px;';

[ninjatronic]

Can you post the generated html again?

[davidrehakcz]

<div flipsnap="" flipsnap-id="flipsnap" ng-style="{ 'width' : flipsnapWidth, 'margin' : '0 auto' }" class="ng-isolate-scope" style="margin: 0px auto; overflow: hidden;">
  <div ng-transclude="" id="flipsnap" style="width: 39px; transition: -webkit-transform 0ms cubic-bezier(0, 0, 0.25, 1); -webkit-transition: -webkit-transform 0ms cubic-bezier(0, 0, 0.25, 1); -webkit-transform: translate3d(0px, 0px, 0px);">
    <div flipsnap-pane="" ng-style="{ 'width' : flipsnapWidth, 'float' : 'left' }" class="ng-scope" style="float: left;">
      <h1>1</h1>
    </div>
    <div flipsnap-pane="" ng-style="{ 'width' : flipsnapWidth, 'float' : 'left' }" class="ng-scope" style="float: left;">
      <h1>2</h1>
    </div>
    <div flipsnap-pane="" ng-style="{ 'width' : flipsnapWidth, 'float' : 'left' }" class="ng-scope" style="float: left;">
      <h1>3</h1>
    </div>
  </div>
</div>

[ninjatronic]

OK. I've got enough to go on here. I'm going to reproduce this and do some investigation and get back to you. Thanks

[davidrehakcz]

Hi, well glad to help. I would appreciate your feedback :-) So i can use it in my project :-)

[ninjatronic]

Hi @home-bot

Apologies for the delay on this one. It's still on my radar, but I've been at a hackathon which explains the delay. I'll answer this shortly