Setting HTML5 autofocus attribute with CSS - javascript

I have a website that has one input field (like a search engine) and I use the HTML5 autofocus attribute on it.
But on very small screen sizes the soft keyboard that pops up on many devices obscures too much of the screen.
Is it possible to se the autofocus attribute in a CSS media query, so its only active on larger displays ?
I know I could set the focus with Javascript, but right now the pages doesn't use any Javascript and I would prefer to avoid it if its possible to use CSS for this.

As suggested above in comments: Use two inputs and make the one hidden (display:none;). Then with a #media rule target screens that have a maximum width of 480px and make the hidden input visible (display:block;) and hide the other one.
CSS:
.smscreen {
display: none;
}
#media screen and (max-width: 480px) {
.lgscreen {
display: none;
}
.smscreen {
display: block;
}
}
See Example using CSS.
Otherwise, you can detect the window size with jQuery on page load, and if the screen is larger than 480px to use .focus() function on the input.
See Example using jQuery.

Related

Media Queries or JavaScript to hide an element on certain screens

We have a section on the page that needs to be hidden on small phone screens, and appear on larger screens.
The easiest way to do it would be to use CSS media queries.
.section {
display: none;
}
#media (min-width: 900px) {
.section {
display: block;
}
}
However, this would keep the section in the DOM, thus potentially making it less efficient.
Alternatively, we could toggle the existence of the section using a state in our JavaScript framework (React in our case, but not important for the question).
My Question is: When is it better to use one, and when is it fine to use the other?

Use hover/active CSS by default on mobile devices

On desktop devices, I have designed my elements to be grayed out by default, but become colored when a user hovers over them. On mobile devices, I want them to use the hover state CSS to be colored in by default. Is it possible to do this through JavaScript?
I have lots of elements with different colors, so it would be much easier to simply trigger the state through JavaScript rather than writing new classes and adding them to the elements.
No need for JS! You can use media queries in CSS to accomplish this.
Note: I'm using Bootstrap 4's numbers for screen sizes in this example:
.element:hover {
background-color: gray
}
#media only screen and (max-width: 767px) {
.element {
background-color: gray;
}
}
Bootstrap starts medium screen sizes at 768px, hence my max width of 767. If you want, you can try it out at https://jsfiddle.net/21haxstd/

ParticlesJS component in React is hidden with media queries but not coming back to display

I am using the ParticlesJS package for my ReactJS application. It displays at the beginning. I want to hide it when the screen size is under 600px. It sets the display to none, however when the screen is resized back above 600px, the particles element doesn't set display back to block, so it's not displayed again.
html/jsx:
<div className="particles-container">
<Particles params={particleParams} className="particles" />
<div className="home-banner-content">
<img src="./src/style/img/logo_banner.png" />
</div>
</div>
css:
#media only screen and (max-width: 600px) {
.particles-container .particles {
display: none;
}
}
#media only screen and (min-width: 600px) {
.particles-container .particles {
display: block;
}
}
After digging in a bit I saw that the Canvas's height is set to 0 when display: none; is set via the media query.
I'll have to dig in more to get the correct answer to as to why that might be happening. Will return with an update to this answer with a proper explanation regarding this.
Continuing, when your media query sets display: block; the height of the canvas still remains 0 and thus you are unable to see it.
To fix this you can either listen to window resize events inside the javascript code (in case you're resizing).
But in case you're going to fix this for mobile then you can check for window width inside the javascript itself and conditionally render the Particles component.
Also, if you provide a "fixed" height to the Particles component as a prop, your media query will work.
Here, you can see a demo: https://codesandbox.io/s/rw8666x11o

Check width of viewport on side load, then add class to body if less than X

I'm currently building a portfolio site and i want the sidebar to be hidden by default on mobile devices since its quite big atm, you can check it out here: www.dosh.dk/rofl/
The sidebar will hide if body has the class "sidebar-inactive" and therefore i want to do a single check on the viewport when the site is loaded and then add the class if below X
Im using coffeescript and ive made the following code but it doesnt seem to work, any ideas?
$ ->
$(".inner_content").hide()
$("#myskills").show()
$("#site").addClass 'loaded'
if $(window).width < 600
$("body").addClass 'sidebar-inactive'
How about a non-JavaScript solution using CSS media queries?
#media (max-width: 599px) {
.sidebar {
display: none;
}
}
This will hide elements with the sidebar class when the screen is less than 600px wide and will update as the browser is resized.
More: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Bootstrap - Dynamic height sizing on buttons and text fields, for each environment

I'm using Bootstrap 3 to create some HTML responsive forms, and there's one thing I'm trying to do, about layout.
I want to change dynamically the height of buttons and text fields by following these rules:
On desktop devices, use small buttons / text fields
On mobile devices, use large buttons / text fields
I know that I can do it by using these button and text field classes. But, I want to use these classes only if user is accessing the page from a mobile device, not always.
I know, too, that you can show/hide HTML elements by using these classes from Bootstrap Responsive Utilities, but I need to give an id to all buttons / text fields, so I don't know if I can duplicate these elements and wrap each of then inside a div that will be shown on a specific environment, since two elements with the same id is wrong by HTML specifications.
I tried an approach based on that solution, and I simply add/remove these classes based on each state/environment. It's working, but is there an easier approach to this?
To change specific element style by screen size you can use media queries. for example:
<button class="btn dynamic-button">
css:
#media (max-width: #screen-xs-max) {
.dynamic-button {
height: 20px;
}
}
#media (min-width: #screen-sm-min) and (max-width: #screen-sm-max) {
.dynamic-button {
height: 40px;
}
}

Categories