Topcoat Side Menu on swipe - javascript

So I'm working on a phonegap app using topcoat and implemented a fly out menu as seen here. I'm using this script to open/close the menu
$(function () {
var slideMenuButton = document.getElementById('slide-menu-button');
slideMenuButton.onclick = function (e) {
var cl = document.body.classList;
if (cl.contains('left-nav')) {
cl.remove('left-nav');
} else {
cl.add('left-nav');
}
};
});
Now everything is working fine but what I want to add on is the ability to swipe to close the panel and to open it as well. I've seen touch library for jquery that seem to offer a solution (such as TouchSwipe) but I want to try to get this as close as possible to a 1:1 touch movement interaction.
Anyone have an idea on what direction I should go in to get this going or have any ideas? Any help is appreciated.

Found this and with some renaming of classes, I got a touch slide out menu that works how I want. Its called Bamboo.js
Here's a demo of it

Related

Convert slider/carousel to pager while switching from Desktop to Mobile View

I have created a slider/carousel like the one below on left - Desktop view.
I would like it to be switching to Pager based slider on mobile screens - like the one on the right side.
I have used this script for desktop slider -
https://www.jqueryscript.net/rotator/Simplest-3D-Image-Carousel-Plugin-For-jQuery-Carousel-js.html
Any help will be great, Thanks!
You will have to use 2 plugins for this. As far as I can tell there is no "pager" option for the plugin you are using. And then, using JavaScript you should destroy current plugin and initialize new one. Which could also be a problem since I don't see any sort of destroy method for your plugin. So ok, it would look something like this.
function init3DSlider() {
$('.your-container').carousel({
your: 'options'
})
}
function initPagerSlider() {
$('.your-container').somePagerPlugin({
// ...your options
})
}
// Function for checking which slider should turn on.
function turnOnSliderDependingOnResolution () {
if(window.matchMedia('(min-width: 768px)').matches) {
init3DSlider()
// ...somehow destroy pager slider
} else {
initPagerSlider()
// ...somehow destroy 3d slider
}
}
// Run turnOnSliderDependingOnResolution function on window resize.
window.addEventListener('resize', turnOnSliderDependingOnResolution)
Since this 3d slider doesn't have destroy method, try using this: http://ub4.underblob.com/remove-jquery-plugin-instance/
Or you can use a more simple solution, and that is to duplicate your slider, initialize both sliders (3D and pager). And then using CSS media queries you would hide one or the other.
Not exactly optimal but it will work.

AngularJS - Bind to Scroll (Mousewheel, Dragging Bar, and Touch Swiping)

I made a very shabby "Infinite-Scroll" directive, all other solutions were incompatible with a md-grid-list so I went ahead and made my own alternative workaround.
app.directive('scrollTrigger', function($window) {
return {
link : function(scope, element, attrs) {
var e = angular.element(element[0]);
e.bind('mousewheel', function() {
var parent = e.offsetParent()[0];
if (parent.scrollTop + parent.offsetHeight > (70/100*parent.scrollHeight)) {
scope.$apply(attrs.scrollTrigger);
}
});
}
};
});
You simply put scroll-trigger on the html element that will be scrollable. The code checks if it has been scrolled to atleast 70% down, if it has, then it will trigger whatevers called on the scroll-trigger, for example: scroll-trigger="loadMore()"
This works fine but it ONLY works if you use the Mousewheel, but what if users without a mousewheel try using my website? They cant continue loading more items.
The ways that dont work are:
Manually dragging the scrollbar
Swiping/Dragging Up/Down on a Touch Device
Working ways:
Using the Mousewheel
And yes, I do know why, im only binding with e.bind('mousewheel') this is because "scroll" wouldnt actually work for me at all.
So im kinda unsure where to go from here.

Which slide out panel is compatible with bootstrap 3?

I was trying to use this slide out panel with Bootstrap, which give you the option to slide out from the right http://www.building58.com/examples/tabSlideOut.html . but it doesnt seem compatible. can someone recommend which slide out panel I can use that is compatible with bootstrap?
A bit of CSS and jQuery are enough to rebuild this function. Take a look at my jsfiddle.
jQuery Snippet
$('#opener').on('click', function() {
var panel = $('#slide-panel');
if (panel.hasClass("visible")) {
panel.removeClass('visible').animate({'margin-left':'-300px'});
} else {
panel.addClass('visible').animate({'margin-left':'0px'});
}
return false;
});
Full Example: http://jsfiddle.net/9Le8X/2/

Bootstrap Mobile Dropdown menu links not clickable

I am using the latest version of Twitter Bootstrap ( 2.3.2 ) as the framework for my site.
The only issue I have run into with Bootstraps navmenu is that when viewing the site on my phone, the dropdown links are not clickable. When you try to click the link the menu closes. Links outside of the dropdown work just fine though. I checked in my bootstrap-dropdown.js and looked for a recommended line of code I found on a GitHub discussion that is supposed to fix the issue but it was already there. What's the fix for this? I appreciate any help with this matter.
/* APPLY TO STANDARD DROPDOWN ELEMENTS
* =================================== */
$(document)
.on('click.dropdown.data-api', clearMenus)
.on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
}(window.jQuery);
I experienced the same issue. The submenus were not clickable on my mobile. I added the following javascript and it seems to work.
jQuery(document).ready(function($) {
$("li.dropdown a").click(function(e){
$(this).next('ul.dropdown-menu').css("display", "block");
e.stopPropagation();
});
});

appcelerator orientationchange navbar image hide / show

I'm building an app with some tabs for the iPhone.
rephrased the question in the appcelerator website here
When i change from portrait to landscape i want to hide the navbar.
it works fine if i don't switch to another tab.
But when i view 1 tab in portrait,
switch to another tab, change to landscape view,
switch back to the first tab,
and then change to back portrait
the navbar (window.barImage) is all stretched out ( to the size of a landscape navBar )
Also when i remove all my code for hiding the navbar the same problem occurs.
I've tried setting the barImage again on orientationchange but that does not help either.
a site note: I'm using the same image on every tab for the navBar could that be the problem?
I marked in green the navbar image, the blue part is where the image normally should be.
Also note that the image is the right size for a portrait view of the navbar.
code:
var windowWidth = Ti.Platform.displayCaps.platformWidth;
var catWin = Ti.UI.createWindow({
title:'',
barImage: 'images/barImage.png',
url:'vacancies/categories.js',
width: windowWidth
});
catWin.orientationModes = [
Titanium.UI.PORTRAIT,
Titanium.UI.LANDSCAPE_LEFT,
Titanium.UI.LANDSCAPE_RIGHT
];
Titanium.Gesture.addEventListener('orientationchange', function(e) {
if(e.orientation == Titanium.UI.LANDSCAPE_RIGHT){
catWin.hideNavBar();
} else if(e.orientation == Titanium.UI.LANDSCAPE_LEFT){
catWin.hideNavBar();
} else if(e.orientation == Titanium.UI.PORTRAIT){
catWin.showNavBar();
}
});
You really need to post more code, for example I have no idea if you are using Ti.UI.currentWindow.hideNavBar(); or if you are using just the .hide(); and .show();?
From what I can tell you're problem however possibly lies with the the width. Trying setting it to '100%' instead of using the platformWidth. Once again without all the relevant code such as your orientationchange event this is best advice I can give. Hope it helps.
THIRD COMMENT: possibly
Titanium.Gesture.addEventListener('orientationchange', function(e) {
if(e.source.isLandscape()){
catWin.hideNavBar();
} else {
catWin.barImage = 'images/barImage.png';
catWin.showNavBar();
}
});
Just somewhere in there or the tab events. I would play around with that idea and see if it gets you any further?
While this is not the best solution because it still looks a bit odd ( but way better then before, ) this is the best solution until now.
I have found some kind of solution by using the following code:
I've set the barImage in the createWindow code so at least at the beginning it looks OK:
var jbWin = Ti.UI.createWindow({
title: '',
url:'homePage.js',
barImage: 'images/jobbroker_bar.png'
});
Then on orientationchange I unset the barImage and start using the titleImage:
Titanium.Gesture.addEventListener('orientationchange', function(e){
if(e.source.isLandscape()){
catWin.titleImage = '';
catWin.barImage = '';
catWin.hideNavBar();
else if( e.orientation != Ti.UI.FACE_UP && e.orientation != Ti.UI.FACE_DOWN ) {
catWin.titleImage = 'images/jobbroker_bar.png';
catWin.showNavBar();
}
}
have you tried using the "titleControl" on the Navbar to set the image instead of the barImage control?
also can you post a small apps.js file with the associated image somewhere? it is difficult to full grasp the problem without running the project

Categories

Resources