Develop Reference

react css sidebar wont close for small window size

I have a react sidebar with pure css for expand/collapse animations that I really like. Except for that by default, every time I open my page / jsfiddle in this case, the sidebar will always be closed by default.
https://jsfiddle.net/martinradio/x1dz80a6/2/
I've collected all the #media queries in my css file, and have changed it so when the window is big, the sidebar turns yellow. if the window becomes small, the sidebar gets colored red.
My sidebar expand/collapse logic is pure css, I want my sidebar to collapse if the window is too small (sidebar color = red), can I add a .sidebar value to collapse the sidebar?
/* ----------------------
#media queries
---------------------- */
/* if screen is big: show sidebar */
#media (min-width: 30em) {
.sidebar {
background:yellow;
color:yellow;
}
}
/* if screen is too small: hide sidebar */
#media (max-width: 31em) {
.sidebar {
background:red;
color:red;
}
/* add something here to toggle sidebar as higgen */
}
is there a way, that by adding css, I can have my sidebar start expanded if the user is viewing the page on say a desktop monitor dimensions? But keep the sidebar hidden for smaller browser windows such as mobile

You want the :checked value of your input to determine the current expanded state of you sidebar.
At the same time, you want the size of the viewport to determine the same state.
This means you have to find a way to allow the size of the viewport to set the :checked value of the checkbox.
The bad news is you can't change or set the value of a checkbox using CSS alone.
The good news is it can be done using JavaScript. And you can link it to a media query.
Here's how to do it in React:
// define media query:
const mediaQuery = window.matchMedia("(min-width: 42rem)");
// track query state (if it applies or not)
const [query, setQuery] = React.useState(mediaQuery);
// keep query state updated (+ cleanup)
React.useEffect(() => {
mediaQuery.addListener(setQuery);
return () => mediaQuery.removeListener(setQuery);
}, [mediaQuery]);
// track sidebar expanded state
const [expanded, setExpanded] = React.useState(query.matches);
// update checkbox value when the query state changes
React.useEffect(() => {
setExpanded(query.matches);
}, [query]);
// everything else stays the same
// (except binding the expanded state to the checkbox)
See it working: https://jsfiddle.net/websiter/td9rgcpq/

You can use CSS Media Queries to determine what action to do based on the screen size. Here, you would want to change the behavior of the sidebar based on the screen size.
#media (max-width: 600px) {
*This is for phones, for example (you might need to find more accurate pixel counts)*
}
#media (min-width: 601px) {
*This is for laptops, for example (you might need to find more accurate pixel counts)*
}

When I worked on my answer, I realized that the requirements were not clear to me.
What do you want to have on a big screen? I can think of two different options.
The sidebar is not shown when you open the page. Instead, it appears with animation when you press the toggle button.
The sidebar is visible when you open the page and disappears when you press a toggle button. Should it appear with animation on page load?
And in both cases, you do not want the sidebar on the small screen.
I still do not understand the following requirement.
I can have my sidebar start expanded if the user is viewing the page on say a desktop monitor dimensions?
When a user opens the page on the big screen, what should it look like? What is the initial state of the sidebar on the big screen? Do you want the sidebar to open with animation on page load?
Anyway, please find my suggestion below.
Main idea
The sidebar becomes visible when they check the #sidebar-checkbox checkbox. I suggest limiting this behaviour to only large enough screens. In other words, we bind the checkbox state with the sidebar visibility only for big screens.
On small screens sidebar is always hidden because we place the rules under the media query for the big screens.
1. Initially hidden but appears when toggled
The code speaks for itself.
#media (min-width: 30em) {
#sidebar-checkbox:checked + .sidebar {
z-index: 10;
visibility: visible;
}
#sidebar-checkbox:checked ~ .sidebar, #sidebar-checkbox:checked ~ .wrap, #sidebar-checkbox:checked ~ .sidebar-toggle {
-webkit-transform: translateX(0rem);
-ms-transform: translateX(0rem);
transform: translateX(0rem);
}
#sidebar-checkbox:checked ~ .wrap {
-webkit-transform: translateX(14rem);
-ms-transform: translateX(14rem);
transform: translateX(14rem);
}
}
I think we also should show the label for the checkbox only on big screens. But I do not want to mess with your styles too much and try to make the minimal working change.
2. Initially shown on the big screen
We must replace the :checked selector with the :not(:checked) selector. In this case, the sidebar is visible by default on the big screen.
We can also show animation for the sidebar sliding from left to right on the page load. You might find some explanation in the answer to the question 'css3 transition animation on load?'.
Please check the updated JSFiddle with the suggestions for the second case.
Please let me know if I have got your requirements right.

How to hide element with jQuery and css?

I want to create mobile menu. This same menu I want to use in desktop amd mobile screen but style is a little bit diffrent. In mobile screen menu is hide but hamburger menu is display. When user click the cross in menu, this's going to close. It's very simple. On desktop screen menu is display all the time. Code look like this:
$('.hamburgermenu').on('click', function(){
$('.menu').fadeIn();
});
$('.close').on('click', function(){
$('.menu').fadeOut();
});
It works correctly but css manage to visibility too. I use #media to hide and display menu
#media(min-width: 1200px){
.menu{
position: relative;
display: block;
}
}
And this is my problem. If user close the menu (click on .close, menu doesn't display after change size of browser. For example - I'm testing my website in small window and I close the menu. After I open fullsize window, the menu won't to display.

The problem is when you use fadeOut() on an element, the display of that element remains hide(look at your console and check the inline style of this element).
use $(window).resize(function() {}) to remove inline styles affected by fadeOut() in sizes that you consider as media breakpoint.

One way would be to detect when the user changes the window size, e.g.:
$(window).resize(function(d){
if (window.innerWidth > 1200) {
$('.menu').fadeIn();
}
})

Eliminate duplicate header tags <h1> on a web page for desktop and mobile

I have a web page and that page can be viewed both on mobile and desktop. However i have two different css classes like below:
<div class=phone-visible>
<h1> .....</h1>
</div>
and
<div class=phone-hidden>
<h1> .....</h1>
</div>
so basically when i open the page on mobile see some content/styles which i write specifically for mobile.
But for SEO purpose, when the page loads i dont want to see the duplicate header tags when i open on a specific device, like i dont want to see the mobile tag when i open my page on desktop.( basically in view source i dont want this to be displayed) I tried doing in CSS( referring to solution in other posts) but that didnt resolve my issue as those still show up on source.
Any particular approach?

You only need one instance of the H1 tag.
<div class="myclass">
<h1> .....</h1>
</div>
Then use your responsive CSS to style according to the viewport size. That's what responsive is all about! All you would need is to edit the smaller view port size.
So, improving on Yubraj's answer, leave your largest screen size CSS in the main section of your CSS and then add your mobile css here:
#media (min-width:750px) {
.myclass h1 {
font-size: 18px;
font-color: #000000;
}
}

Use CSS Media queries to control the UI in different Screen size
below example might help you.
#media (min-width:750px) {
.bigScreen {
display:block !important;
}
}
//tabs and bigger screen
#media (max-width: 600px) {
.smallScreen {
display:block !important;
}
.bigScreen {
display:none !important;
}
}

How To Make A Loading Screen with Material Framework?

I am pretty sure there are many articles on this. In fact, I have seen many that I have used before. The thing is, I am using Material Design by Google. So they have loading elements already in the framework. It looks something like this:
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
Previously I have had trouble with this kinda thing. If someone could help me out, that would be great.
Here is the link to what the loading animation looks like:
https://getmdl.io/components/index.html#loading-section (it is the spinner).

MDL spinner on page load solution
MDL just provides the spinner and it's up to the developer to integrate it into the page for what ever your need's may be. In this case you want to use it on page load.
Placing the spinner
To create a loading spinner you first need to place a <div class="mdl-spinner mdl-js-spinner is-active"> at the top of your document. I suggest right above the closing </head> tag.
Centering the spinner.
To center the spinner you can do it with flex box like so.
Place the spinner inside a container above the closing </head>
HTML
<div class="spinner">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</div>
CSS
Centering the spinner with flexbox. The spinner is set to display:none to hide it from view atm . Adding a class of spinner-on and giving it the display property of flex that we trigger on with jQuery when we want to show it.
$spinner-size:100px;
html, body, .spinner{
height:100%;
overflow: hidden;
}
.mdl-spinner{
height:$spinner-size;
width:$spinner-size;
}
.spinner{
position:relative;
display: none;
align-items: center;
justify-content: center;
}
.spinner-on {
display: flex;
}
Trigger with jQuery
With jQuery we trigger our spinner-on class which brings spinner into view. Then we use fading functions to fade in the spinner and fade it out after a set amount of time. Overflow is also set se we can now scroll the page.
$(function() {
var overflow = $('body,html, .spinner');
$(".spinner").addClass('spinner-on');
$(".spinner").fadeOut(2000, function() {
$("body").fadeIn(2000);
overflow.css('overflow','visible');
});
});
DEMO

Make div fixed only inside another scrollable div

I have the page with structure something like this:
<div id="header"></div>
<div id="messages"></div>
<div class="content">
<div id="sidebar"></div>
<div id="content"></div>
<div id="other_stuff"></div>
</div>
Header is the header of the page.
Messages div is the place where I push messages. Sometimes it filled, sometimes it empty.
Sidebar is navigation menu.
Content is a long scrollable div.
And other stuff is other stuff.
I need to make sidebar be fixed in the page on the left side when content are scrolled. But sidebar should never overlay messages and header.
In other words, when I scroll down the page, header and messages are scrolled with content normally. But when I scroll up the page, sidebar should't overlay messages and header div's.
I've used CSS property position: fixed; for this but with this property sidebar overlays messages. How can I fix this with CSS and javascript/jQuery?

If I got you right, you want the sidebar to be fixed starting from a particular point.
This can be achieved through the jQuery. There are many ways, at least 3 I know. Here is the pure jQuery version i use in the cases like that (if you don't want to embed other external JS libraries)
jQuery(document).ready(function ($) {
$fixed_id = $('#Mod128, #Mod190'); //classess or IDs of the modules you want to stick
$(window).scroll(function(){
if($(window).scrollTop()>254) //amount of pixels from the top of the viewport when the sticky styles applied
{
$fixed_id.css({position:"fixed", top:0, width:"18%"}); //sticky styles items when scroll to a particular place
}
});
});
Other ways of doing that are using other JS libraries, I know 2 of them:
1) jQuery Waypoints
2) stickyjs.com
Hope that helps.

Its good if you can make jsfiddle of it or else I think something like below code can help you.
Fix height of your header and messages and give margin to the sidebar with total height of you header and messages.
#header, #messages {
height:3em;
}
.content #sidebar {
position:fixed;
margin-top:3em;
width:5em;
}
.content #content,.content #other_stuff{
width:3em;
margin-left:5em;
}