I am really new to HTML and CSS but have created a prototype page to get a reasonable size, look, and feel to fit on a 768x1024 or larger display. I revised it to be used in landscape mode but it's apparent it won't fit in a typical browser window even at full screen with my minimum height and width criteria. The page doesn't contain text; just buttons, check boxes, text, and textarea "widgets". I think that I can fiddle with sizing and make it fit into a window if there is only a top "title" bar with the minimize and close buttons but absent all the other "stuff" such as the navigation bar, tool bar, etc. found in a typical browser.
I do use a couple of web apps that are like this so I know that it is possible. I've searched Google for examples and found popups but none are like this.
My question is: how do I do this, preferably without javascript, and what is this type of window called?
This should help with the minimizing: Is there a good jQuery plugin for a hide effect that looks like minimizing windows in Windows
You're going to have to include jQuery from http://www.jquery.com and call this animate script when the window you want to minimize is clicked.
This will help you with the 'closing'.
https://api.jquery.com/hide/
When you click on an element you can call .hide() on it, effectively closing it from the user's perspective.
Related
I have a problem that seems pretty simple to me, but so far it was impossible to find a simple solution: On my website, whenever the Android soft keyboard pops up, it resizes the window and shrinks the content, instead of just overlaying the page.
See these pictures for reference:
The first two are the current situation, the third is what I want. It works like this on iOS. What can I do to make it work that way?
The screenshots were taken in Firefox - this is a website based on HTML, not a native app.
I tried setting body size and position, but so far, no luck. I've seen some very complicated JS code snippets for similar problems, but I didn't get any of them to work the way I want, and it also seems like there should be an easier way around it. The sizes of all the elements are determined with vh and wv. Setting fixed pixel values seems like it would kill the responsiveness of the design, no?
I'm not a very experienced developer, my page is just very basic HTML and CSS. Is there a way to achieve what I want with only that?
On your manifest.xml you can set android:windowSoftInputMode to adjustPan.
<activity
android:name=".WebActivity"
android:windowSoftInputMode="adjustPan" />
From Android documentation:
Don't resize the window to make room for the soft input area; instead
pan the contents of the window as focus moves inside of it so that the
user can see what they are typing. This is generally less desireable
than panning because the user may need to close the input area to get
at and interact with parts of the window
I need to show certain content in a modal/fullscreen panel on small devices, triggered by a button. On large devices, this same content, is just always shown and the trigger is then hidden.
How do you approach this for accessibility?
Currently, I have this setup
<button type="button" aria-expanded="false" aria-controls="filter-panel">Filter</button>
<div class="o-panel" id="filter-panel">Form</div>
Initially, the o-panel is hidden on small devices via CSS (in a media query that targets small devices). I set aria-expanded to true when the trigger is hit, and add an active class to the panel itself, which shows the fullscreen o-panel via CSS. On large devices, I hide the button and always display the content from o-panel via CSS (in a media query that targets large devices), inline, where it is found in the HTML.
Does this make sense for accessibility? My panel doesn't say role="dialog", becuase on large devices it's just content, not a dialog. Is it a problem that my button is hidden on these large devices?
I'm really stuck at what I should do here. If I add role="dialog" to my o-panel, should I remove this property for large devices, where it is actually not a modal?
Or should I move copy/move the content from my o-panel in a div with role="dialog", in case the trigger is hit? I just don't want two copies of the same content.
On large devices you need to do a couple of things.
Hide the button properly
First make sure the button is display:none, not visibility:hidden or anything else or it will still show up in the accessibility tree.
The main (<main>) problem
A modal should appear outside of your <main>.
This is so you can add aria-hidden="true" to the <main> element when the modal is active, so as to stop people navigating outside of the modal on a screen reader. (Screen reader users use headings, links etc. to navigate a page so you can't just intercept the tab key.)
Now I come from a mobile first philosophy so I would say your markup should be mobile first. That means putting the modal outside of your <main> as discussed earlier.
This obviously causes a huge problem on a desktop. You now have the content sat somewhere it shouldn't be.
Because of this you only really have two options here.
Option 1
Use JavaScript to reposition the modal content in a predefined placeholder <div>.
So you keep your mobile first design, then use JavaScript to find the innerHTML of your modal and move it into the body within your holder. Then delete the modal itself just to be sure.
While you are at it I would also delete the button, just in case someone resizes the screen to a mobile view, we don't want a button leading nowhere.
Alternatively don't delete the second content then people can resize the browser, just means a few extra DOM nodes (so as long as your modal content isn't over 100 DOM elements I would say do this.)
If you decide to keep the modal make sure that is also display: none for the same reason as the button, we don't want people accidentally accessing it.
Option 2
Duplicate content.
I know, I know, duplicate content is just, urgh.
But sometimes you just have to put up with it if it is for the best.
By duplicating the content into a div from the start you do get a few advantages.
Advantages
If the user resizes the screen you can just use CSS to switch between views.
No need for JavaScript, great for if your site functions without JS or when your JavaScript fails.
Although it adds page weight it is likely to be better for performance overall, the potential for layout shifts with the first option resulting in a high Cumulative Layout Shift is quite high (although avoidable). With Google putting so much emphasis on Web Vitals I would start considering them now. Additionally you might find you write nearly as much JavaScript as there is HTML if your modal only contains a couple of elements.
Disadvantages
You would have extra page weight due to duplicated HTML.
You may have to adjust scripts etc. to account for the second duplicate item (although this should be minor).
This would still be my preference, Keep It Simple! This is far more robust
Option 3 (for the future)
Client Hints are one way you could solve this, turning responsive design into a hybrid of mobile vs desktop and responsive.
When client hints has enough of a market share you could simply use the header to decide which version of the page to send from the initial request.
You could possibly implement this today if you are willing for 25% of users to see the mobile version of your information on desktop, depends how important the info is.
Other considerations
There are a few other things to consider that you haven't mentioned so I thought I would add for reference.
I already mentioned adding aria-hidden to all elements outside of the modal when it is active.
To future proof your application use inert on items outside of the modal. Support isn't great (none existent!), but every little helps and it is quite likely to get implemented!
You can polyfill it if you want but I don't think it has moved outside of the draft spec yet so we just use it as is.
Also add aria-modal="true" to your modal.
I covered a lot of these points in a bit more detail in this answer if you want a bit more info.
Make sure you include <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your <head> tag.Then in your style, you can play around with
#media only screen and (max-width:620px) {
/* For mobile phones: */
}
You can learn more about the #media rule here: W3Schools Media Rule.
If you have any more questions be sure to ask!
The accessibilitys properties are only aria-expanded="false" aria-controls="filter-panel" don't change it.
Your class and ID names doesn't have any impact on accessibility.
If you only want to show the content by default on large device, and display a call to action to show it only on smartphone device, you could do that with javascript and media-query.
I have a navigation bar on the mobile version of a website and want it to be always as wide as the screen, i.e. when the user zooms in, the bar is supposed to not zoom in with the rest of the page.
Illustration of the problem:
Without zoom
With zoom
I know this is possible with JavaScript as described in this approach: https://stackoverflow.com/a/14466070/695457
But is there a way without JS? If not, are there any other libraries for this except detect-zoom?
There is no way without JavaScript. I suggest you leave it as it to be honest as those menu items look mighty small on the first screenshot if it was on a phone. You may be introducing an accessibility issue by disabling the functionality to let people with poorer eyesight view the menu text.
So, I made this website (lemiart.com) and depending on the image height (if it's too big), the user has to scroll down to view the entire image, specially when using computers with low res. What I would like to do is implement a button in the website so the user can click it and the website will become smaller, like decreasing the zoom in the browser. But I would like to implement it so the user just click it and it zooms out, without having to access the browser config.
Any idea on how to implement it?
Thanks in advance
What you're describing sounds like 'responsive web design'. Rather than have the user initiate an interaction (button click) to zoom or resize the site and images, consider adding some JQuery or other tools that detect the browser dimensions, and automatically reconfigure the page. This is a common approach when designing for multiple platforms (PC, mobile, tablet, etc).
Check out this presentation
You might want to look at some kind of lightbox plugin for jquery.
Fancybox(http://fancybox.net/) is one I have used that is quite good. With these you can have a smaller image on the site and then use the lightbox to zoom to the biiger one.
I'm wondering if anyone knows a way that you can prevent browser zooming of specific page elements.
This is for the mobile version of a site I'm developing. I have a fixed menu bar that runs full width of the site and remains at the top of the page at all times to provide navigation. I've optimised the button/text sizes to work for touch screens and don't really want it to be affected if a user zooms the page content text.
The only thing I've come across is the following CSS, but this doesn't seem to work when I've tried it:
-webkit-text-size-adjust: none;
I'm do not wish to disable resizing of the whole page via the Viewport meta tag, I just want to target the menu bar html elements.
The zoom mechanism varies across browsers and is not standardized, nor is it scriptable. Any solution would be pretty convoluted in order to work across browsers. There is no easy way to do this.
I wrote a modal dialog based on a similar question, you can find it here.
In essence, the logic is about getting the page scale ratio based on window.innerWidth and maximum page width, applying it as a CSS transform to the element and then repositioning it on screen. If there is interest, I will rewrite it into a library that just takes a position: fixed element as an input and does all this magic to it when the user zooms the page.