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.
Related
I am building an application where there would be 3 preview buttons (Desktop, Mobile, Tablet). Users will be able to create their own design (such as card view/accordions) which would inherit bootstrap classes for responsiveness. Once they click on the preview buttons for eg Mobile/Desktop/Tablet, their created components would behave as per the viewport.
The necessary CSS is in place. The scenario can be achieved if we are using an iframe to load the component. When we are using the iframe that time the viewport behaves as a separate element, helping the CSS to render as it's getting the desired width for the breakpoint. But without the iframe it's not able to bring the outer shell, hence the CSS is waiting for the entire browser to resize, and then only it can show the changes.
But I would want to remove the iframe dependency from the project. The project is being built using angular js 11.
For better understanding, it's the same thing that we experience when we do inspect elements and switch on the mobile emulator in chrome.
Any kind of help or another solution way around is highly appreciated.
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 :-)
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.