I'm trying to build a quiz following this tutorial : https://www.sitepoint.com/simple-javascript-quiz/
I didn't touch much to the logic and added bootstrap integration (+ meta viewport tag). FYI, I tried without theses changes and my issue is still there.
The quiz is quite straight-forward but I'm struggling making it work on mobile devices. The problem is that I'm not sure to understand the real origin of the issue and therefore, I have a hard time describing it precisely.
In that tutorial, the question and its answers are generated by javascript while the navigation/submit buttons below them aren't, meaning that I have to set a minimum height for the container in which the questions/answers will be generated. Without that, the buttons are displayed prior to the js-generated code and the buttons will be display on top of the question/answers container. Quite logical :
<div class="quiz-container">
<div id="quiz">JS generated Questions and Anwsers go here</div>
</div>
<button id="previous"><<</button>
<button id="next">>></button>
<button id="submit">Submit</button>
<button id="reset">Reset</button>
<span id="results"></span>
It works fine on desktop but not so much on mobile : https://i.imgur.com/buu2PBJ.png
The answers and questions are overlapping making the quiz unusable, especially since I'm adding the good answers on submit to their radio element, generating even more overlapping.
I tried to set another min-height on mobile in CSS, I tried using the "vh" units, I tried playing around with margin/padding but no matter what I do, it will always look like that on mobile. Actually, changing margins or padding around the buttons area will have an effect on the desktop view but none on mobile. The elements will always overlap the same way.
I'm fairly sure it's some logic in the structure of the page on mobile that I don't understand but I really can't put my finger on it despite my many researches and attempts.
Do you have any idea ?
Firstly, use percents and vw for measuring units.
Secondly, use box-sizing property in css and set it to border-box.
And the last, read more about #media here and here. This piece of code is very important :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Related
After checking a few dozen articles I am still in the dark how to actually implement a responsive ux-design (I really understood the layout part). A simple example: Bootstrap (CSS framework) collapses toolbar buttons into one drop-down button on mobiles. That's all I need! I'd like to understand just the basics of this very behavior. Does it requires only CSS, or do I need JavaScript too? I actually don't know any other way than JavaScript.
In my apps (IDEs), I usually have lots of toolbar buttons and at a certain breakpoint or width I guess I will have to put them just into a dropdown button, in one way or another, right? The obvious things such as re-arranging layout containers per break-point/width are a piece of cake with CSS; at least this is how it looks.
Update, I am working only with JS based widgets. Mostly generating all HTML.
You can make multiple (for different screen sizes) menus, dropdowns or navbars etc. And then use media queries to just display one of them at a specific screen width ( ie display: none for others). And I think Bootstrap works similarly (It might also use JS).
In this way your design will become responsive, although it will increase file size.
Check GRID. It's a (great) simple guide to responsive design.
http://adamkaplan.me/grid/
After doing lots of research and development; there is basically nothing standard out there for a JS based solution. I checked Dojo, Sencha and some others paid stuff. At the end I did end up with custom JS code. Media queries did only help to some degree, actually just when it comes to moving and sizing layout containers and pictures; but that's pretty much it. Its even better to do it in JS only since calculations become far more accurate and interfere less with your Code.
So to me 'responsive design' has actually no mean at all; its great for regular web-sites but really not for complex ux.
back to square one,
g
I am using Skrollr plugin and it's working fine on desktop.
On iPad though, the height of my document is cutoff. I have tried to remove all skrollr data attributes, but the issue persists, I noticed that just by activating the plugin I get this issue.
I tried to enable/disable the forceHeight option but the issue persists. Any idea?
Many thanks
I had this issue, too, but I fixed it by adding an empty data-top and data-bottom to the #skrollr-body div. (Though depending on how strict your HTML cleaners are, you may need to add data-top="" or data-bottom="")
<body>
<div id="skrollr-body" data-top data-bottom>
Your content here.
</div>
</body>
I'm still looking into the explanation of why this fix works, but I believe it has something to do with setting keyframes. By making sure your #skrollr-body has keyframes for top and bottom, it ensures both are seen in the viewport.
More details here: https://github.com/Prinzhorn/skrollr/issues/576
None of the questions on the subject has any real answer (I've
seen one that says "Just stop the zoom altogether!" and the other that
says "Set the width!" (which isn't the case))
I have a web application that's supposed to work on mobile (Mobile Chrome only is enough). Pinch-to-zoom is a must-have feature.
It all works well, except for the control buttons I have. Standard buttons, fixed position at the bottom left of the page.
When I pinch-to-zoom, those buttons, while remain on bottom left, grow along with the zoom.
Is it possible to have those buttons not grow by zoom somehow?
Here is a potential fix and good read if you are running into this problem.
Here is the website, css fixed position.
How my prototype works
What I’m doing is calculating the zoom level (poorly) with JavaScript
and then applying CSS transforms to scale the fixed element back down
to normal size. As you might expect there is no smooth transition
during zoom. There are a whole host of bugs and edge cases. I’ve not
even attempted cross browser support (hence no code).
This does not seem to provide a script but it gives you the idea of what to do and how to accomplish it.
Another link on this site seems to have a bunch of great info about your problem, more of a proposal.
Here is the website, position: device-fixed;
The only other option I currently know of is disabling zoom. This is not the best approach but is what I currently do if a mobile design needs a fixed header. This will prevent the user from zooming which will then prevent the element to be affected.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
So, I am developing an app using phonegap and jqm. Everything works great and it's all pretty easy thanks to phonegap build. However, I've started to see some 'stutter issues' that are really annoying. My app at the moment only has two pages and the transition effect between them is 'slide'. The first page has a background color set to it and the second one does not. Some of the issues:
When I navigate from page 1 to page 2, half of the page has the background color from the previous page. It goes away after I do some random swipes on screen.
On one of the pages, I have a regular form with some text input fields and a radio button set at the end. When I move from an input box to the radio button the keyboard slides down but it is replaced by a black area for a short period of time.
The fixed header that I have at the top randomly decides to disappear and reappear again.
These are only few of the annoying ones and these only happen on the mobile device and it works fine on the computer. So, I know it's a performance issue.
I've read up about this on the internet and here on SO and different solution have been proposed like writing custom CSS3 transitions (to take advantage of hardware acceleration) or using something like zepto.js.
What in your opinion would be the best 'cross device compatible' method to overcome these? Is there a way to force hardware acceleration with jquery mobile? Is CSS3 performance even across device platforms?
PS. I have been testing on jelly bean 4.2.2. I am not posting any of my code because they are just plain form elements and some input tags and this happens on multiple pages which are totally different so I am pretty sure this isn't code related.
Any help will be much appreciated.
JQuery writes animations using Javascript which dynamically writes inline styles that change quickly. The issue with that, is that it isn't using the hardware acceleration and if you are testing on a retina device, it animates using pixels as they are a unit of measurement. So it is skipping half of your pixels which causes the stutter.
I have written apps using PhoneGap and the best way I came up was to use CSS3 animations/transitions. Super smooth and they feel just like a native app. You will still use JQuery to add/remove classes, etc., but the movement should come from your CSS.
I'm currently working on a responsive style sheet which is live at the moment but looks horrendous on non desktop dvices as it is a work in progress.
Is it possible to use some JavaScript to force the desktop layout to load on every device regardless of viewport size?
add this to your head
<meta name="viewport" content="width=SITE_MIN_WIDTH, initial-scale=1, maximum-scale=1">
Be sure to change the SITE_MIN_WIDTH with your min width of the site. this should force the device to load in to proper sizing.
It sounds like you want to disable some of your media queries with JavaScript.
As far as I know, no, you can’t do this.
You could do the following, although it’s very roundabout:
Add a class to the <html> tag, e.g.responsive
Prefix all the CSS blocks that aren’t currently working as you want with that class, so that they only apply when the class is present.
On page load, use JavaScript to remove that class from the <html> tag.
But then, presumably, you’d need a way to turn them back on when checking them on the devices you’re coding for. Otherwise why have them on your live site in the first place?
Media Queries simply call different CSS files based on the current resolution.
If it is mobile first responsive it starts with the lower sized screen and builds up. Editing your CSS and removing any CSS that affects screens smaller than desktop should do the trick. However, not sure in what system you are using that the site is already built and you need to disable. Their could be hundreds of ways to do this. I do not know what OP is but I would suggest editing your CSS files. You should be able to find what CSS is being loaded by using Firebug on Firefox.