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.
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'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.
Cordova 3.3.0, jquery, html, javascript, css
I am creating a mobile application using cordova 3.3.0.
On the second page I need to render a new page (html or url) in the middle of screen with respective to device width.
I need header & footer in fixed position at top & bottom respectively.
Middle part there should be one div or frame in that html or url page should render.
I have tried using iFrame, Cordova's InAppBrowser API both are not working. iframe is not scrollable & its contents are not squeezed. InAPpBrowser opens a new html covering total screen.
Please suggest me any working solution.
Thanks in advance
Use jQueryMobile. http://jquerymobile.com/
It renders pages and has ready-to-work transitions from one page to others. The page definition offers the possibility to have fixed headers and footers. jQueryMobile also offers a wide variety of controls and events suitable for mobile phones.
Be aware that depending on the user group of your software, despite of jQueryMobile you may still encounter the fact that many phones don't behave as expected, especially older phones.
Android phones used to be terrible in rendering transitions, so people came to shut them off or to replace them by simpler ones. Some very old phones had problems because the fixed footer at the bottom appeared suddenly in the middle of the screen or was not put down again after the keyboard disappeared. There will always be such details.
Yet still, jQuerymobile is probably your best option because of the work that has already done for you. Good luck :-)
The menu on this site doesn't show when using an iPad. It's designed so that the menu is hovered on and the ul li list below should show, but it doesn't. When you click the menu, nothing appears.
I need to write some JS using onclick events instead to make the sub menu show. But this needs to be specific for iPad ONLY.
Is it possible to write JS specific to only certain devices?
I just need to get this menu working, it seems iPads will not show hover items even when you click... which renders the entire use of :hover defunct on iPads.
You will need to use browser sniffing to detect the mobile touch devices. Don't do it yourself, use one of the excellent scripts from http://detectmobilebrowsers.com/
You will needs to do this for iphones, androids, phones etc. anything with a touch screen.
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!