Snap.js
A Library for creating beautiful mobile shelfs in Javascript (Facebook and Path style side menus)
I'm trying to declare a <snap-dragger> using the angular-snap.js.
The documentation gives this example:
<snap-dragger>
Drag here to open your drawer!
</snap-dragger>
Dragging here does nothing!
Now what I want to achieve is the following:
<snap-dragger>
<div> Dragging here does nothing! </div>
</snap-dragger>
So I want to stop the effect of snap-dragger on all of its children.
Source: (StackOverflow)
I am using snap JS such that I have a drawer on the left and content to the right. However when the drawer is opened, I can still scroll content on the left.
What would be the right way so that I can disable the div on the left. In jQuery:
if (state == 'right')
"disable the left side so you can't scroll' ( $('.idofelement').disable();) ;
Is there something that I am overlooking in snap where within the controller the left can be disabled, without DOM manipulation.
Source: (StackOverflow)
i use the same drawer for left and for right depends on the language:
<div snap-drawer="{{$root.direction=='rtl'?'right':'left'}}">
the problem is when the direction is changed in real time the swipe drawer stays in the same place, i think it needs to be destroyed and reinitialized.
please advice how to continue.
Source: (StackOverflow)
I'm using the Snap.js plugin - (it allows you to create scrolling side drawers/panels).
It works by creating 3 absolutely positioned divs, one of which contains main content.
Is there a way to position a div fixed to the top of the window when it is itself inside the absolutely positioned div.
At the moment i'm just getting the fixed div to pin to the top of the absolutely positioned div, rather than to the top of the browser. When I scroll, the div remains fixed to the top of the main content, but not the window.
For example:
<div style="position:absolute;">
<div style="position:fixed;top:0">
<!-- some content which needs to be pinned to top of window -->
</div>
</div>
At the moment i'm using javascript to track the scroll offset and manually adjust the top position of the child div, which is not ideal for performance.
Any help appreciated!
Source: (StackOverflow)
I have used this https://github.com/jakiestfu/Snap.js/ to create a menu that appears behind the page and when you swipe the page to the right it shows the menu underneath it, everything seems to be working but when I try to add a toggle button to the page so when click on it it actually opens the menu? as in swipe the page without touching it. I tried to follow what is told here: https://github.com/jakiestfu/Snap.js/#--how-do-i-make-a-toggle-button but I just can't get it to work!
Here's What I have so far:
$(function() {
var Button = $('.buttons');
function applySnap(){
var width = window.innerWidth;
if(width<800){
if(window.snap){
window.snap.enable();
} else {
window.snap = new Snap({
element: document.getElementById('Page')
});
}
} else {
if(window.snap){
window.snap.disable();
}
}
}
window.onresize = applySnap;
applySnap();
});
$(Button).on('click', function(a) {
if( snapper.state().state=="right" ){
snapper.close();
} else {
snapper.close('left');
}
});
and this is in the HTML section:
<div id="SecondHeader">
<a class="SecondHeader-button" rel='nofollow' href="#" >Menu</a>
</div>
Thanks lot for any help!
Source: (StackOverflow)
I am working in an app that require snap menu for mobile resolutions and mobile device.
I am using snapjs and angular-snap, snapjs by default set two drawers, left and right, I can disable one of this drawers using the service in the angular-snap directive with snapRemote.globalOptions.disable = 'right'; or using attribute snap-opt-disable="'right'" in snap-content element.
I need to disable all drawers in non mobile resolutions (>= 768px), actualy I have a directive that check this resolutions, but I don't know how disable both drawers, left and right instead only one drawer.
This is my directive:
angular.module('myApp').directive('mobileScreenSwitcher', function ($window, snapRemote) {
return {
restrict: 'E',
link: function (scope) {
$window.onresize = function () {
checkResolution();
};
checkResolution();
function checkResolution() {
var screenWidth = $window.innerWidth;
if (screenWidth >= 768) {
// I need disable all drawers at this line
snapRemote.globalOptions.disable = 'left';
}
}
}
}
});
This is my actual html code
<div ui-view="navBar" snap-drawer="left" ></div>
<div snap-content snap-opt-disable="'right'">
... content here
</div>
<div ui-view="navBar2" snap-drawer="right" ></div>
Source: (StackOverflow)
I often use wow.js or waypoints.js to animate elements while scrolling the page.
For a current project I used snap.js to create a menu drawer. When using snap.js you divide your page like this;
<div class="snap-drawers" id="right">
<div class="snap-drawer-right">
<!-- Menu drawer -->
</div>
</div>
<div class="snap-content" id="content">
<!-- Page content -->
</div>
I might be mistaken but I think the reason why none of the two libraries work is because I scroll inside the #content instead of html, body. I tried to manipulate the libraries but that didn't work out quite well.
I'd like to keep snap.js...
Anyone encountered the same issue or someone who might have a solution? Thanks in advance!
Source: (StackOverflow)
I am using jquery to dynamically enable or disable snap.js like this:
$(window).resize(function () {
if ($(window).width() < 1024) {
snapper.enable();
} else {
snapper.disable();
}
});
But this doesnt seem to work. I think this has something to to with not using the event handler but i have no idea how.
thanks in advance!
edit:
this also doesnt seem to work:
addEvent(window, 'resize', function(){
if ($(window).width() < 1024) {
snapper.on('drag');
} else {
snapper.off('drag');
}
});
Source: (StackOverflow)
I am trying to add a fixed div to the content wrapper in snap.js (https://github.com/jakiestfu/Snap.js/). Everything I've tried has failed because snap.js pushes the entire canvas with all the fixed elements. Is there any hack for this?
I mocked up the effect I'm trying to achieve here 
Update:
After further investigation of the issue, I've came to conclusion that this fixed div would require an event listener that would fire an opposite transform:translate3d. The script works by setting transform:translate3d to the same width as the left drawer. Here's the snippet:
x: function(n) {
if( (settings.disable=='left' && n>0) ||
(settings.disable=='right' && n<0)
){ return; }
n = parseInt(n, 10);
if(isNaN(n)){
n = 0;
}
if( utils.canTransform() ){
var theTranslate = 'translate3d(' + n + 'px, 0,0)';
settings.element.style[cache.vendor+'Transform'] = theTranslate;
} else {
settings.element.style.width = (win.innerWidth || doc.documentElement.clientWidth)+'px';
settings.element.style.left = n+'px';
settings.element.style.right = '';
}
Would anyone know how to write an event listener that would set the transform3d for the fixed div to the opposite amount as content container?
Source: (StackOverflow)
I'm trying to integrate jakiestfu's Snap.js with Twitter Bootstrap.
I've got something that functions (I can get the content to slide, or open a drawer via a click event). However, I'm at the limit of my CSS skills for the final problem: The drawer content is always visible regardless of the state of the drawer.
JSFiddle example
While I could hard-code the visibility of the drawer element on document load and do something on the open/close click event, that doesn't do anything for the drag capability that Snap.js has.
addEvent(document.getElementById('open-left'), 'click', function () {
// Muck with visibility in here
// Added code sample because StackOverflow wants it with a fiddle...
if (snapper.state().state == "left") {
snapper.close();
} else {
snapper.open('left');
}});
Source: (StackOverflow)
I'm working on a web app. This app is using Bootstrap, AngularJS, and Snap.js. I'm just trying to setup the basic layout and drawer of my app. However, I can't seem to get the drawer to behave properly. I'm trying to create a site that looks like the following:
+---------------+-------------------------------------+
+ Hello |
+---------------+-------------------------------------+
| Nav Item 1 | Main content here |
| Nav Item 2 | [toggle] |
| Nav Item 3 | |
| | |
| | |
| | |
| | |
| | |
| | |
+---------------+-------------------------------------+
When a user clicks the [toggle] button, I want to toggle (collapse or expand) the area with the nav items. That area should not cover the main content. Instead, it should push it to the right when it expands. The banner should not move. In an attempt to do this, I'm using snap.js and angular snap. Currently, I have the following HTML, which can be used in this fiddle:
<div ng-controller="MyCtrl">
<header class="header fixed-top clearfix" style="left:0px; right:0px; z-index:5000;" role="navigation">
<div style="float: left; background-color:black; color:white;">
<a rel='nofollow' href="/">Hello</a>
</div>
</header>
<main>
<aside>
<snap-drawer style="background-color:red; width:240px;">
<br /><br /><br /><br /><br />
I'm the navigation!
</snap-drawer>
</aside>
<snap-content id="page-content" snap-id="pageContent">
<br /><br /><br /><br /><br />
Main content here
<button snap-toggle="">Toggle</button>
</snap-content>
</main>
</div>
For some reason, my main content always sits on top of my nav content. In addition, the nav items and main content are not actually below the banner. Its like the banner sits on top of the content. From what I can tell, I have two issues that I believe are related. However, I can't figure out the core issue. Those two issues are:
- The nav and content are not positioned under the banner. Its like the banner floats on top of the nav and content.
- The nav area does not expand and collapse. Its like the nav items stay fixed in position and only the main content moves.
Thank you for any help. Once again the fiddle can be seen here.
Source: (StackOverflow)
I'm having trouble accessing my div elements with jQuery after implementing snap.js in my Ratchet project, does anyone know why and how can I fix this?
document.getElementById('mydivId').innerHTML //THIS WORKS
$('#mydivId').html() //THIS DOESN'T WORK
I've included the jquery.js and implemented $(document).ready(function(){});
I get "Uncaught TypeError: Cannot call method 'ready' of null"
Source: (StackOverflow)
I have this strange issue with web app I am working on. Basically there is a UI error, that after pulling menu from the side and closing it again, the whole DOM is moved half off the screen.
The interesting part is that if I call alert(); after the menu slides out again, something happens with the view and page is displayed correctly again.
I have tried to re-render dom by hiding it and showing again, but it doesnt have the same effect.
Does anyone know what happens when alert window is displayed/closed and if there is any way to simulate it in JS?
Thanks
UPDATE: Just so you can see I didn't make that up: https://github.com/jakiestfu/Snap.js/issues/238
Source: (StackOverflow)
I just got one maybe simple question. I use snap.js to create a slidable menu, but how do I add padding to the contant?
Here is the source: http://runnable.com/UoqMXucPORNzAAIH/how-to-create-a-mobile-shelf-using-snap-js-for-javascript
Source project on GitHub: https://github.com/jakiestfu/Snap.js/
Here is the code for the content:
<div id="content" class="snap-content">
<div id="toolbar">
<a rel='nofollow' href="#" id="open-left"></a>
<h1>Default</h1>
</div>
<!-- Here goes the content I guess, but there is no padding -->
</div>
I need to have all content in the #content to make it slidable with a finger. But I can't get the content to have padding so it looks bad, in my opinion.. If I add padding to #content the menu also gets it. Then i tried to add a new <div> named #main and placed it under #toolbar but then the padding is acting like margin for some reason. #main had 100% width and padding of 10px. The #toolbar displayed like 100% but showed 100% + 10px (left) + 10px (right) so it adds the scroll and look awful.
How have others solved this?
As you can see in this JSFiddle there is no padding: http://jsfiddle.net/TorchMan/MexXY/
Thanks in advance.
Source: (StackOverflow)