I'm having a hard time finding some jQuery or JavaScript to do the following:
btw - I'm using ReactJS but any of the swipe / swipeable NPM modules are still missing features.
My wishlist, this is for a mobile phone & tablet app:
Swipeable panels like Tinder, Snapchat. Must also be programmable so they can be selected from a side menu, see #2 below. I'm currently using swipeJS: https://github.com/thebird/Swipe It's working OK, but the slide(index, duration) doesn't change duration values. And not sure how to get this working with a Side menu that is also swipe to close.
Side menu, must also be swipeable to close it -- the jQuery examples I've seen here only close on a click, not a swipe: http://www.jqueryscript.net
Update: this closes on swipe: http://www.jqueryscript.net/menu/App-Style-Fly-out-Navigation-Menu-Plugin-For-jQuery-iosmenu.html
The swipeable panel must be able to set an area that is NOT affected by the main page swipes, why? I want to do something like Tinder, but instead of people I will have a game that uses swipe, like Angry Birds. Yet still want to be able to swipe outside of the game area to move between main panels/pages. Note, my game will not be full screen.
I'm wondering if this is all too much for an HTML mobile app (will wrap it with Cordova or PhoneGap), and if I should go native. But I'm hoping to leverage HTML, and ReactJS.
Related
Up until now I always tackled the issue of mobile navigation the same way:
Create the menu in php and then manipulate it using css, media queries and js, to act as a mobile menu, when the screen size is narrow, and act as a normal navigation when you are viewing the site on a desktop or a device with as least as much pixels.
But just now I stumbled upon a theme for a cms that is creating the mobile menu on the fly. When I click the mobile menu icon it checks if the mobile menu has already been created and then glues together the menu items with html, checks if there is a search bar, glues that in too if it's necessary, and then appends that to the body.
I was wondering what is the benefit of this?
It would be somewhat reasonable If you were to use a completely another piece of html for the mobile nav, but I would not, and even then, the 170 lines of js is bigger in my opinion than what you would had in a completely separate html menu in size.
I am trying to build a website with the excellent Wordpress theme Minimatica. Problem is, Minimatica uses a Kwicks.js (jQuery) based slider of image links for its main navigation. These are rollover slides and they don't behave nicely on mobile, since touching any of the slides causes a click-through. I want to tweak it so that on mobile/touch devices, the first touch causes the slider to open, and the second touch actually clicks through. I am not sure how to do this.
A working demo of the theme and the Kwicks panel can be found here:
http://demo.onedesigns.com/minimatica/
Opening it on a mobile device should readily demonstrate the problem.
I'm developing a mobile website in HTML/HTML5. This is NOT an iOS app but I would like to provide the look and feel of an app. I found nice toolkits like iWebKit for the CSS.
Now I want to implement to standard sliding view: when you click an item in a list, the viewport slides horizontally to show the details of the item. Then you can move back to the list (without losing your scrolling position, etc.)
Is there a HTML/JS framework I can use the do this ? Thanks !
Do you mean jQuery Mobile collapsibles? Upon clicking, they can expand to reveal more detail.
http://jquerymobile.com/test/docs/content/content-collapsible.html
If you want something more akin to a means of navigating to more specific pages, jQuery Mobile offers support for remembering pages you've been to as well, so users of your mobile app can efficiently navigate back and go to the home page, as detailed here: http://jquerymobile.com/demos/1.0a4.1/docs/toolbars/docs-headers.html. This feature is automatically set in jQuery Mobile websites.
Does anybody know a good horizontal slide menu jquery plugin that could emulate Facebook's relatively new mobile site/app's menu?
Basically you have a view of all the content, and when you click a button, a menu slides from the left, moving the content a little to the right (to the width of the menu sliding in). When a button on the menu is clicked, the menu slides out of view, the content slides back, and then changes corresponding to whatever menu button was clicked.
Aldomatics code doesn't behave well in windows phone and doesn't handle orientation issues
This topic is old but here is a working solution for mobile devices (Build with Jquery) :
it's working on Windows phone, iOs and Android Devices.
I've tried to keep the code as simple as possible, it's easy to understand and modifiy.
http://apptitudes.github.com/SlidingMenuJS/
I was looking for the same thing.
The best example I can find is a paid mobile Wordpress theme:
http://themeforest.net/item/hotcake-mobile-business-html-template/1065437
Pretty slick and you could at least see how it is done.
Cheers,
I find this implementation the best example currently available:
https://github.com/aldomatic/FB-Style-Page-Slide-Menu
It's not a jQuery plug-in, per se, but it should to the trick!
I have a requirement where I need to slide divs in and out of a screen given the users swipe gesture.
I am looking for a javaScript library/decent tutorial that will let me create an effect like the iPhone home screen where you can swipe left and right and have a card/screen slide in/out. It is important it is NOT a framework like Sencha or jqTouch. Essentially I need swipe gesture support and a smooth sliding transition.
Also any effects need to be smooth on the device. (use CSS3 animation (with hardware acceleration) as I need the experience to be smooth.
Targeted devices are Android and iPhone.
Any help or direction would be appreciated.
Here are some jQuery plugins you could use to achieve what you are looking to do without the full overhead of Sencha or jqTouch. These would still require jQuery and the plugin but I imagine if you are doing any reasonable web app or interface you are using jQuery :]
http://plugins.jquery.com/plugin-tags/touch
But here are multiple options, one should work to get the slide effect you are looking for or allow you to handle that gesture appropriately.