Percentage maxPosition

[hexdesign]

Hi

FIrst off... this is sweet.

Second... Is there any way to set the maxPosition as a percentage? I'm building a responsive site with quite a big font size in the nav that I'd like to scale up and down depending on the browser width... So I need to accomodate wider content in the draw and hence use a percentage as I don't want to end up with a massive draw on mobiles, but I need it nice and wide for desktops...

Any way I can do this?

Thanks in advance!

[prud]

I submitted a pull request earlier today that makes it possible to use a DOM element as maxPosition and always take its current width, which should work for your use case: https://github.com/jakiestfu/Snap.js/pull/

After the pull request is merged or after you implemented it on your own, you could do something like this:

var snapper = new Snap({
    element: document.getElementById('content'),
    maxPosition: document.getElementById('snap-drawer-left')
});

[jakiestfu]

@hexdesign Percentages were something that I was trying to incorporate into Snap.js right at it's inception, but I never got around to it. there is actually a lot that goes into this request.

You could always use snapper.settings() to update your min/max position based on your screen size, that might be the only option you can go with for now.

[hexdesign]

Hi

Thanks for your help guys... I figured it might be a tricky request. Be really sick if I can get it working though.

@prud... Not sure if my JS is good enough to implement that to be honest! @jakiestfu... Do you know how I would go about doing that? No worries if it's super complex...

[prud]

In case you're using jQuery, you could do something like this when initializing your snapper:

var snapper = new Snap({
  element: $('#content'),
  maxPosition: $('#drawer').width(),
});

This will probably break when you resize the screen, because your drawer width is based on the browser width. Therefore you need to refresh the snapper on every resize event:

jQuery(window).on('resize', function() {
  if (snapper) {
    var state = snapper.state();

    // refresh drawer width setting
    snapper.settings({
      maxPosition: $('#drawer').width()
    });

    // refresh snapper in case it is opened right now
    if (state && state.state === 'left') { snapper.open('left'); }
  }
});

[raelcorrales]

var snapper = new Snap({
    element: document.getElementById('content')
  });
  snap(snapper,75);
  $(window).resize(function(){
    snap(snapper,75);
  });

function snap(snapper,percentage){
  var w  = ($(window).width()*percentage)/100;
  var mw = w*(-1);
  snapper.settings({
    //disable: 'right',
    tapToClose: true,
    touchToDrag : false,
    maxPosition: w,
    minPosition: mw  
    });
}