I have went all over the web to find a solution for this one ...
i want to create a fixed bottom menu for my web application,
As i learned the support is not cross platform and each device and browser presents a different obstacle,
I have placed an element with
position:fixed;
bottom:0;
left:0;
problem : it is very buggy on some browsers (pops to place after the scroll ends , stays on the center of the screen, etc ' ...)
is there a good solution for this issue , or should i give it a rest :-) ?
thanks
There is no cross-platform solution for this, mainly because many devices still do not support touch events, that's why iScroll fails on WindwsPhone for instance. I predict native position: fixed; won't be implemented for at least one year (even iOS did it recently, other mobile browsers are way behind; we can expect WP8 with IE10 will support it and some other browsers, but that is not enough). I suggest you keep your toolbar at bottom and keep you page height small enough so people do not have to scroll down a lot - your app will look same on all mobile platforms.
Related
I am new in Appcelerator framework, I have developed one application in appcelerator, but that application looks good on IOS but for android its not look good.
I want to develop a screen which is responsive like html.
Is there any way to design appcelerator screen like responsive screen.
Thanks you.
Don't define width, unless calculated. iOS is fairly simple with only a handful different resolutions, on Android you never know what resolutions you might encounter.
Luckily, you can specify widths differently in Titanium than you can in HTML. For example
var view = Ti.UI.createView({
left: 20,
right: 20
});
This will make your view the width of the parent, with 20 padding right and left, the width will be calculated.
Also, always stick to native UI elements. So tabgroups, actionbar/navigationBar should all be used so you don't have to worry about cross platform support, styling and sizing of those elements.
Furthermore, most view should be put in ScrollView's when you don't know how tall the UI is going to be. It could fit on iOS, but not on a small Android device. Putting it in a scrollview will always fix the screen as the scrollview will automatically enable scrolling when the content is taller than what fits.
So conclusion
Width should be defined relative. Either with left/right properties, or calculated
If height of content is not yet known or not designed to be fullscreen wrap it in a scrollview
Stop thinking of apps as websites, start thinking of them as Apps. Layout works differently
Lastly, Appcelerator is the company, Titanium is the technology you're using :)
I have been playing around with creating AirConsole controllers using Construct 2. Construct 2 comes with several scaling modes to ensure that the canvas scales as desired. I have tested every possible combination, and found that the simulator (running in Safari, Edge, Chrome, and Firefox) works correctly, the Nexus 5 works correctly, but the iPhone 7 Plus and iPad (running the iPhone AirConsole app) both do not obey the scaling I have set in Construct 2.
At 1280x720, this means a portion of the controller is always offscreen. I have used both the "AirConsole" and "AirConsoleController" plugins on the screen side, and both have the same issue. When I remove both plugins from my Construct 2 project and load the page using airconsole.com/#[SERVER_URL]/pong, the scaling problem goes away, but I lose the ability to call AirConsole API methods (set orientation to landscape, handshake, messaging, etc.).
I fully understand that this probably not high on the priority list, as the AirConsole team has done a great job putting together the controller generator, but would it be possible to take a look into this problem on iOS devices? Is there something happening on the AirConsole side that would overwrite the Construct 2 screen scaling rules for iOS controllers?
One of our team's goals is to create a controller minigame that a user would play on their device while the main game was in progress on screen.html. It would much simpler to do this in Construct 2, rather than coding it by hand.
Edit:
I reran a quick test of the Pong example using the Phaser.io tank screen as a controller, instead of the pong buttons. In this test, I would expect to see the tank screen loading onto the controller. This is what I see on the simulator and on my Nexus 5. On my iPhone, half of the tank screen is off of the edge of the phone.
Since a similar behavior occurs in both the Construct 2 and Phaser.io projects, I have a hunch that the problem might occur whenever a canvas element is placed on iOS screens for AirConsole controllers.
There seems to be a bug on iOS with iframes.
Applying this CSS to the controller.html fixed it for some developers:
html, body {
height: 100%;
overflow: hidden;
}
While investigating the Google SEO issue with respect to not having a mobile web site. I've learned recently that lack of proper mobile site would reduce the search ratings, and a different content for a mobile and a desktop sites might hurt your SEO as well.
Currently we have a MVC site that wasn't designed to be responsive. I don’t want to create something that will require more maintenance. (IE new mobile site or creating new views for mobile versions..).
I've learned that converting the site to be responsive is technically possible but not recommended for the following two reasons:
The current site might not work well on small screens.(CSS issues, modifying the CSS might be a pain and risky).
We have too much stuff on the current site.
While googling, I found that this would be the best way to go.
Use the same controllers and views for both desktop and mobile browsers, but render the views with different Razor layouts depending on the device type. This option will require new CSS and new _Layout page for mobile devices.
and then modify the _ViewStart to be
Layout = Request.Browser.IsMobileDevice ? "~/Views/Shared/_LayoutMobile.cshtml" :"~/Views/Shared/_Layout.cshtml";
I would like to proceed with above approach, but If any one has any experience in this area, I would like to know the best practices, recommended approaches, and technical possibilities to achieve this.
There are typically three methods for handling Responsive Design :
Using A Responsive Design Framework
Using CSS Media Queries
Using Percentages
The ease of using each of these will ultimately be based on how complex your existing Project is and how much you are willing to do and change to make it responsive.
Consider a Responsive Design Framework (basically revising and updating all of the markup of your existing project)
This will allow your site or application to run on basically any device (and look nice doing so) regardless of platform as long as it had an internet browser to access it and will make it much easier to develop as you will only need to create your page within one area and the beauty of Responsive Design is that it will style your pages appropriately based on the current platform and device.
It isn't really automatic and you will likely have to tinker with it a bit to get everything working and looking just as it should, but it is probably the best method of handling a situation like this (depending on the controls that you are using). There are Reponsive Design frameworks and boilerplates that you can use to implement these into your site such as Twitter Bootstrap.
These could fairly easily be integrated into a Web Forms, MVC or Web Pages and would basically be all that you would need to use :
Great MSDN Article on Responsive Design
Tutorial on Integrating Twitter Boostrap into ASP.NET Web Forms
Beautify your ASP.NET Application with Twitter Bootstrap
The primary issue with using a framework here is that you already have your site designed and up and running. These frameworks work incredibly well when you use them from the beginning of the development of a project, however they will require a great deal more work when attempting to migrate an existing project to use them.
These frameworks have very specific classes and styles that actually do a ton of different things regarding responsive design and you'll have to use these new classes to replace basically all of your existing ones. It won't be the easiest migration, but it is certainly isn't impossible by any means and would be my recommendation.
Using CSS Media Queries (a neccessity if you want to handle creating this responsiveness without a framework, but more work on your part)
You can also accomplish this using CSS Media Queries, which target specific resolutions and screen sizes and style elements accordingly, however this is a bit more manual and you would have to write queries for each of the sizes that you are targeting.
These will take a quite a bit more work than using a framework as you will have to write queries to target all of the different major resolutions that you want and then within each of these actually resize some of your elements manually. You'll have to basically create a mini-stylesheet or media query for each of the resolutions that you want to target and manually enter the values that you want to use for that specific resolution.
I've done this more "hands-on" form of Responsive Design previously, but it is much easier to let something tried and proven like one of the frameworks handle it for you. Check out the very simple example below that will demonstrate how CSS Media Queries work :
<style type='text/css'>
/* Only affects 1600px width */
#media only screen and (max-width: 1600px){ body { background: green; }}
/* Only affects 1200px width */
#media only screen and (max-width: 1200px){ body { background: blue; }}
/* Only affects 900px width */
#media only screen and (max-width: 900px){ body { background: yellow; }}
/* Only affects 600px width */
#media only screen and (max-width: 600px){ body { background: purple; }}
/* Only affects 400px width */
#media only screen and (max-width: 400px){ body { background: orange; }}
</style>
and as you resize your browser / window, the styles will be applied accordingly.
Example (Editable Example)
Using Percentages (another option to provide a "responsive" feel, but it will require CSS Media Queries as well to be truly "responsive")
You could also consider migrating everything to use percentage-based sizing instead of explicit pixel sizes, but this is will be even more work than implementing the above media queries.
This will basically require you to scale everything on your site using percentages and defining minimum and maximum heights and widths for items. You'll likely have to use this in combination with media queries to get a truly effective solution.
ASP.NET MVC applications by default is responsive using Bootstrap.
http://weblogs.asp.net/jongalloway/two-free-video-courses-intro-to-asp-net-mvc-and-responsive-ui-with-bootstrap
I'm using the Google Translate widget ( http://translate.google.com/manager/website/ ) on my website. It works fine on the desktop screen, but it uses the exact same layout on mobile and other small screens, and looks terrible. For one thing, the iframe containing the list of languages has a hard-coded width of 860 pixels. You can't select any languages beyond the 3rd column because they're off the edge of the screen (and you can't scroll to the right to see them because the browser doesn't realize that the iframe is too wide -- I assume it's the same problem as discussed here: Webpage with wide iframe is not scrollable on an iPhone with viewport ).
I've looked into fixing the problem using CSS, but CSS can't "see" inside iframes. I've searched all over stackoverflow and the rest of the internet, and not only have I not found a solution, I haven't been able to find anyone else complaining about the problem. I can't be the only one, can I?
I found a solution: Instead of "Dropdown only" layout, I chose "Horizontal". When you do that, Google uses a simple drop-down list instead of a big iframe.
The little panel that appear at the top of the page is still too wide to display properly, however, but that's a minor issue.
built an app i jquery mobile, it is almost finished, and after deploying the app to phonegap we discovered that the scrolling and the total feeling is not smooth and the scroll is slow and feels weird.
i have tried almost everything,
1) $document.bind("touchstart", function(event){})
2) $.mobile.buttonMarkup.hoverDelay = 0;
3) using scrollview.js
4) removed ul > li and placed divs instead, removed anchors <a>
all of the above and nothing has changed, scroll still stuck. do you have any idea?
try browsing the app in safari in your iphone to see what i'm talking about.
http://saloona.co.il/mobile
thank you
jquery.mobile-1.1.1
removing the content wrapper fixed it for me.
<div data-role='content'> </div>
it scrolls just as smooth as a webpage in safari.
There are a few issues with poor performance and scrollview, especially on android. Generally, the more complicated your DOM gets the less performant scrollview becomes.
The JQM team addresses this in their last major release:
Alternate approaches use JavaScript-based momentum scrollers to achieve true fixed toolbars, but these only work on a small subset of platforms, have non-native scrolling physics, and can introduce performance and usability issues in less capable devices.
Therefore they switched to real fixed toolbars (position:fixed) in the newest release, which is pretty much supported by the most devices in use. I think this is the best way to go.