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.
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 :-)
If the goal is to develop a web app that will currently be used on desktop computers but eventually will also support mobile devices such as smart phone or pads , what strategies is recommended in organizing the code ? Should there be one set of code for desktop clients and then one set of code for mobile clients ? In the past I have used jquery and jquery ui . How does jquery , jquery ui and jquery mobile fit together in a web app ? What are main differences between developing for non mobile web client and mobile web clients ?
I am using asp.net mvc .
my sponsor prefers a single-page web app . So I am looking into Knockout.js . I am also looking into some widgets set such as
dhtmlx
jqwidgets
Please feel free to comment on my choices.
To keep things simple and short - you should use (or consider using) Responsive Web Design. The main idea is you develop your CSS to handle re-sizing / reorganizing depending on the width of your screen. This allows you to handle situations where the screen is wide enough to be recognized as a Desktop screen while simultaneously being able to adjust to Mobile screen sizes - no matter the device.
Having your CSS adjust the size / position of elements on the page allows you to have one set of code for all users (no separate mobile / desktop sites). You will simply have to spend a little more time and effort designing your website to handle the re-sizing of the page width.
The jquery library works the same on mobile as it does on 'traditional' platforms. There are times when you may want to take advantage of mobile-enhanced versions of various jquery libraries though.
An example: When you have nested links on a navigation menu that comes out when you click on say a category like, "shirts", then a sub-category like, "button-up," then a sub-sub-category like, "blue." On a 'traditional' platform the user can hover their mouse cursor over the elements to expand the nesting - on a mobile platform the user may want to tap each category / sub-category to expand the nested navigation buttons.
This is completely dependent on your website's design - when designing responsive websites, I typically have very little variation in the scripts between views intended for 'mobile' and 'desktop' devices - so development for either does not vary for me, I treat new websites as, "responsive," and design it with the re-sizable browser in mind from the beginning.
Also, for further elaboration of the specifics of the jquery, jquery ui, and jquery mobile libraries, see the link that Tats_innit referenced.
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!