I'm developing a mobile website for an online apparel website. For the size or color dropdown lists, I want to list options side by side and let users touch the option they want instead of using dropdown lists. This is how it is used in many mobile websites including m.macys.com and m.shopbop.com. I was just curious how to do this with html and javascript.
Thank you.
Seong
You might be better off using a Javascript library that is specifically designed for mobile web development, e.g. jQuery Mobile (check out the demos), JQTouch, XUI (also see the Alternative section at the bottom of their page).
Related
I implemented a navigation menu on this website. While the menu works very well in desktop mode, it will not work in mobile viewing. I think there is an issue with connecting to the JavaScript - https://alexandrachel.org/scripts/script.js
The navigation menu should work like this website
How I can get the navigation menu in mobile viewing to work?
Your whole site is not responsive, so either write media query to make it responsive , or else for minimal responsive you can use bootstrap framework which is lightweight and easy to use and for more responsive mobile menus also you can use smart menus . So, its your choice either you write raw custom code or use the resources.
What the script does, is it changes the CSS for the small displays, so the menu is transformed to become a drop-down on handheld devices. However, the current problem is that the script cannot start, because it cannot find jQuery. And thus, on small displays, the CSS is incorrect and your menu is not visible (however it is there, and functional).
If you load your webpage over HTTPS (as in https://alexandrachel.org/), then the scripts and CSS files should also be requested via a secure protocol.
Try changing a request to jQuery to (note https://):
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
And you can remove the second request of version 1.10.2 from googleapis.com, since you are already pulling the latest version from jquery.com.
Errors in loading your website ref: Chrome Dev Tools
jQuery can't be found plus a lot of your content is being served over http whereas the main website loads on https so just fix those requests and import jQuery.
And this should work
Ref: to the attached image for the errors
Am building mobile app (phonegap) using jquery as a js library. Want to add slide menu that open on either tapping (in corner) or by sliding finger across. I could only find articles on jquery mobile but I dont want to use JQM cause I find all the default styles (theme, data-role ...) messy as I have to overwrite styles with my own CSS.
Is there any library just for sliding menu that open on sliding on touch devices other than JQM?
There are a various open source projects for this out there. Just take Google for a search on "mobile slide menu" and you'll easily find dozens.
I personally prefer Snap.js and use it on multiple apps in production. Its not that actively in development, but it does the job nonetheless.
One of the library allowing to add side menu is AppFramework. The documentation for adding side menu is here: http://app-framework-software.intel.com/documentation.php#afui/afui_side but I would recommend to visit follow page: https://software.intel.com/en-us/html5/articles/templates-to-get-started-with-html5-mobile-app-development it contains demo and code for several features of AppFramework.
I make a website in php at backend and HTML,CSS at frontend.Now the requirement is to make it compatible for also mobile.I am thinking to use JqueryMobile but I am confuse that same layout work for both or make different for both.
Is layout make by JqueryMobile cover both ends?Is I make separately JqueryMobile layout?
According to the jQuery Mobile description:
jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.
Then, the same layout will work in both mobile and desktop browsers. Despite that, you should consider how your website looks in desktop browsers if you want to provide different functionalities in each platform.
See here.
jQuery mobile works for both mobile and desktop, but whether or not it looks good on mobile will also depend on your layout in CSS.
basically I want to create a browser form (it will load an external page by iframe. but around the iframe is something that resembles a desktop operating system actual browser. Complete with icons, addressbar, file menus. ex. IE6 themed browser component inside the browser. Also should be very responsive, almost as if they were using a flash application.
Something like GWT, Vaadin.
It also would be great to have some windows GUI kit to build the ui's by dragging and dropping, double clicking on it to add events and stuff like that.
Trying to build something like http://www.lfsworld.net/. Click on login as Guest and see the desktop in your browser.
If you want to implement drag and drop why don't you check gwt-dnd?
You can add doubleClick,drag and drop handlers. This library is well documented and there are plenty of demos to play with.
So I'm trying to build a mobile and desktop version of a website simultaneously (using a MediaWiki engine, if anybody is interested). Since I don't have much experience with mobile device building, I was looking around for some good mobile development practices. In the end, I feel media queries are good for what I need to do, mostly because double-publishing on separate domains (like m.foo.com vs foo.com) is not possible for this task.
The shortcoming to CSS media queries, it seems, is the apparent inability for phone users to view the site in desktop format whenever they want to (Google or YouTube is a good example of this when accessed using a phone).
Is there any way for me to freely toggle between desktop and mobile stylesheets developed with media queries? Would using javascript be too bulky for a mobile device to download?
I appreciate any suggestions. Thanks!
EDIT: For clarification, yes, I want to click a link or button on the mobile style to switch to a desktop style.
I'm 90% sure that it is not possible with CSS alone but can easily be accomplished with PHP or Javascript. It shouldn't be too bulky to use javascript.
Some examples
PHP Style Switcher.
Javascript Style Switcher
Jquery Style Switcher