Comments (5)
That's what happened with me
https://github.com/IIIu6ko/iiiu6ko.github.io/blob/master/meitan/libs/slide-and-swipe-menu/jquery.slideandswipe.js
Replace in jquery.slideandswipe.js file here these lines:
62 - 97 lines
function swipeStatus(event, phase, direction, distance) {
if(phase == 'start') {
if(nav.hasClass('ssm-nav-visible')) {
transInitial = 0;
} else {
transInitial = 0;
}
}
var mDistance;
if (phase == 'move' && (direction == 'left')) {
if(transInitial < 0) {
mDistance = transInitial - distance;
} else {
mDistance = -distance;
}
scrollNav(mDistance, 0);
} else if (phase == 'move' && direction == 'right') {
if(transInitial < 0) {
mDistance = transInitial + distance;
} else {
mDistance = distance;
}
scrollNav(mDistance, 0);
} else if (phase == 'cancel' && (direction == 'right') && transInitial === 0) {
scrollNav(0, settings.speed);
} else if (phase == 'end' && (direction == 'right')) {
hideNavigation();
} else if ((phase == 'end' || phase == 'cancel') && (direction == 'left')) {
console.log('end');
}
}
113 - 133 lines
function scrollNav(distance, duration) {
nav.css('transition-duration', (duration / 1000).toFixed(1) + 's');
if(distance <= 0) {
distance = 0;
}
if(isSafari() || isChrome()) {
nav.css('-webkit-transform', 'translate(' + distance + 'px,0)');
}
else{
nav.css('transform', 'translate(' + distance + 'px,0)');
}
if(distance == '0') {
$('.ssm-toggle-nav').addClass('ssm-nav-visible');
$('html').addClass('is-navOpen');
$('.ssm-overlay').fadeIn();
}
}
138 - 159 lines
var hideNavigation = (function() {
nav.removeClass('ssm-nav-visible');
scrollNav(280, settings.speed);
$('html').removeClass('is-navOpen');
$('.ssm-overlay').fadeOut();
});
var showNavigation = (function() {
nav.addClass('ssm-nav-visible');
scrollNav(0, settings.speed);
});
$('.ssm-toggle-nav').click(function(e) {
if(nav.hasClass('ssm-nav-visible')) {
hideNavigation();
}
else{
showNavigation();
}
e.preventDefault();
});
}
Example can watch here: https://iiiu6ko.github.io/meitan/
If the window width <575px
from slide-and-swipe-menu.
Thank you very much! It did the trick.
Here is the entire plugin code which will verify for the HTML dir attribute and if it is RTL , it will execute your code. In case anybody here will need support for both directions :D as it happend in my case
/**
* Slide and swipe menu (https://github.com/JoanClaret/slide-and-swipe-menu)
*
* @copyright Copyright 2013-2015 Joan claret
* @license MIT
* @author Joan Claret Teruel <dpam23 at gmail dot com>
*
* Licensed under The MIT License (MIT).
* Copyright (c) Joan Claret Teruel <dpam23 at gmail dot com>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the 'Software'), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
;(function($, document, window, undefined) {
'use strict';
var slideAndSwipe =
$.fn.slideAndSwipe = function(options) {
var nav = $(this); // get the element to swipe
var navWidth = -nav.outerWidth();
var transInitial = navWidth;
// get settings
var settings = $.extend({
triggerOnTouchEnd : true,
swipeStatus : swipeStatus,
allowPageScroll : 'vertical',
threshold : 100,
excludedElements : 'label, button, input, select, textarea, .noSwipe',
speed : 250
}, options );
nav.swipe(settings);
/**
* Catch each phase of the swipe.
* move : we drag the navigation
* cancel : open navigation
* end : close navigation
*/
function swipeStatus(event, phase, direction, distance) {
if($('html').attr('dir') == "rtl"){
if(phase == 'start') {
if(nav.hasClass('ssm-nav-visible')) {
transInitial = 0;
} else {
transInitial = 0;
}
}
var mDistance;
if (phase == 'move' && (direction == 'left')) {
if(transInitial < 0) {
mDistance = transInitial - distance;
} else {
mDistance = -distance;
}
scrollNav(mDistance, 0);
} else if (phase == 'move' && direction == 'right') {
if(transInitial < 0) {
mDistance = transInitial + distance;
} else {
mDistance = distance;
}
scrollNav(mDistance, 0);
} else if (phase == 'cancel' && (direction == 'right') && transInitial === 0) {
scrollNav(0, settings.speed);
} else if (phase == 'end' && (direction == 'right')) {
hideNavigation();
} else if ((phase == 'end' || phase == 'cancel') && (direction == 'left')) {
console.log('end');
}
}
else{
if(phase == 'start') {
if(nav.hasClass('ssm-nav-visible')) {
transInitial = 0;
} else {
transInitial = navWidth;
}
}
var mDistance;
if (phase == 'move' && (direction == 'left')) {
if(transInitial < 0) {
mDistance = transInitial - distance;
} else {
mDistance = -distance;
}
scrollNav(mDistance, 0);
} else if (phase == 'move' && direction == 'right') {
if(transInitial < 0) {
mDistance = transInitial + distance;
} else {
mDistance = distance;
}
scrollNav(mDistance, 0);
} else if (phase == 'cancel' && (direction == 'left') && transInitial === 0) {
scrollNav(0, settings.speed);
} else if (phase == 'end' && (direction == 'left')) {
hideNavigation();
} else if ((phase == 'end' || phase == 'cancel') && (direction == 'right')) {
console.log('end');
}
}
}
/**
* Browser detect
*/
function isSafari() {
return /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
}
function isChrome() {
return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
}
/**
* Manually update the position of the nav on drag
*/
function scrollNav(distance, duration) {
if($('html').attr('dir')=="rtl"){
nav.css('transition-duration', (duration / 1000).toFixed(1) + 's');
if(distance <= 0) {
distance = 0;
}
if(isSafari() || isChrome()) {
nav.css('-webkit-transform', 'translate(' + distance + 'px,0)');
}
else{
nav.css('transform', 'translate(' + distance + 'px,0)');
}
if(distance == '0') {
$('.ssm-toggle-nav').addClass('ssm-nav-visible');
$('html').addClass('is-navOpen');
$('.ssm-overlay').fadeIn();
}
}
else{
nav.css('transition-duration', (duration / 1000).toFixed(1) + 's');
if(distance >= 0) {
distance = 0;
}
if(distance <= navWidth) {
distance = navWidth;
}
if(isSafari() || isChrome()) {
nav.css('-webkit-transform', 'translate(' + distance + 'px,0)');
}
else{
nav.css('transform', 'translate(' + distance + 'px,0)');
}
if(distance == '0') {
$('.ssm-toggle-nav').addClass('ssm-nav-visible');
$('html').addClass('is-navOpen');
$('.ssm-overlay').fadeIn();
}
}
}
/**
* Open / close by click on burger icon
*/
var hideNavigation = (function() {
if($('html').attr('dir')=="rtl"){
nav.removeClass('ssm-nav-visible ');
scrollNav(navWidth, settings.speed);
$('html').removeClass('is-navOpen');
$('.ssm-overlay').fadeOut();
}
else{
nav.removeClass('ssm-nav-visible ');
scrollNav(280, settings.speed);
$('html').removeClass('is-navOpen');
$('.ssm-overlay').fadeOut();
}
nav.removeAttr('style');
});
var showNavigation = (function() {
if($('html').attr('dir')=="rtl"){
nav.addClass('ssm-nav-visible ');
scrollNav(0, settings.speed);
}
else{
nav.addClass('ssm-nav-visible ');
scrollNav(0, settings.speed);
}
});
$('.ssm-toggle-nav').click(function(e) {
if($('html').attr('dir') == "rtl"){
if(nav.hasClass('ssm-nav-visible')) {
hideNavigation();
}
else{
showNavigation();
}
e.preventDefault();
}
else{
if(nav.hasClass('ssm-nav-visible')) {
hideNavigation();
}
else{
showNavigation();
}
e.preventDefault();
}
});
}
;
})(window.jQuery || window.$, document, window);
/*
* Export as a CommonJS module
*/
if (typeof module !== 'undefined' && module.exports) {
module.exports = slideAndSwipe;
}
from slide-and-swipe-menu.
awesome!
other users will apreciate that. Thank you guys!
:D
from slide-and-swipe-menu.
Should pin this. Good stuff. Found it by happy accident
from slide-and-swipe-menu.
Tks IIIu6ko JS works well!
Fix more about CSS as this is great
/**
* Sliding swipe menu CSS
*/
nav {
height: 100%;
width: 280px;
background-color: #0a4a3c;
right:0;
top: 0;
z-index: 2;
position: fixed;
overflow-y: auto;
overflow-x: visible;
transform: translate(280px,0);
}
.ssm-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.2);
display: none;
z-index: 1;
}
from slide-and-swipe-menu.
Related Issues (20)
- Open slide with gesture HOT 2
- Positioning the menu on the right side HOT 1
- Fixing widely known bug HOT 1
- Uncaught TypeError: c.swipe is not a function HOT 2
- How to use it with multiple menus on same page HOT 1
- Open menu by swipe HOT 1
- Unable to link within page for one page apps. HOT 1
- Unable to close navigation bar when a menu item (in the nav bar) is clicked. HOT 2
- Please tag a version
- Bug: Click
- Support for Jquery 3.0 HOT 1
- demo doesn't work on tablet, tested on samsung 10.8"
- Vertical swipe ?
- swipe from the right HOT 3
- Problem with re-calc when resize or orientation change HOT 1
- Doesn't work HOT 1
- Remove overflow:hidden from <html> HOT 6
- Duplicate element when have two different kind of menu and events js HOT 6
- Cannot find module 'slideAndSwipe' HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from slide-and-swipe-menu.