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();
}
})

How to live update CSS based on screen size, using JQuery?

I pulled a snippet of JS from a response to:
How can I make content appear beneath a fixed DIV element?
The JS works great but only when the page first loads, if the screen size changes for whatever reason, the rendered page is then in error until refreshed.
I currently have this:
$(document).ready(function() {
var contentPlacement = $('#topMenu').position().top + $('#topMenu').height();
$('body').css('margin-top',contentPlacement);
$('#navWindow, #searchWindow').css('margin-top',-contentPlacement);
});
Is there a way to have the outputted CSS dynamically change at the moment the screen size updates? This will also be helpful while developing the site.
This will be for displaying the content on my page underneath a fixed menu.
UPDATE
The sample of the site is located here: http://wp19.knowgreaterpartnership.com/

Additionally to the ready Callback function you can also use jquery.resize. You just have to execute the same code on the resize callback. Resize will be called every time the window size changes.
For the sake of less code redundancy I introduced a new method adjustContent:
$(document).ready(adjustContent);
$(window).resize(adjustContent);
function adjustContent() {
var contentPlacement = $('#topMenu').position().top + $('#topMenu').height();
$('body').css('margin-top',contentPlacement);
$('#navWindow, #searchWindow').css('margin-top',-contentPlacement);
}

I know you're asking about using jQuery to change CSS, but what you really should be doing is using Media Queries for your css so that it's declarative instead of script/event initiated.
Ex: (https://www.w3schools.com/Css/css3_mediaqueries_ex.asp )
/* Set the background color of body to tan */
body {
background-color: tan;
}
/* On screens that are 992px or less, set the background color to blue */
#media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* On screens that are 600px or less, set the background color to olive */
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}

Issues with scroll on responsive

So this is the problem that i have:
its mobile layout so max-width is 480px, and i am having menu which have login, register, cart where they have dropdown. Their height is dynamic so i need to get height from them and then dont allow to user to scroll below that element.
For example - .class have height 900px and i wont allow users to scroll below that 900px. So when viewport or window comes to end of that .class user cant scroll down.
Here is the code there i tried to do that with scrollTop function.
var limitScroll = false;
$(window).scroll(function() {
if(limitScroll && $(this).scrollTop() > limitScroll) {
$(this).scrollTop(limitScroll);
}
});
// Opening box-container
$('.top-menu li a.links').click(function(event){
event.preventDefault();
$('.box-container, .sub-menu').removeClass('opened');
$(this).next().addClass('opened');
var c = $(this).next();
limitScroll = c.outerHeight()-$(window).height()+c.offset().top + 20;
});
Here is preview of mobile layout and dropdowns.

A better approach would be to trigger that dropdown as a fullscreen div. So show this div on button click:
<div id="login>...</div>
styles
#login{
height:100%;
min-height:100%;
width:100%;
position:absolute;
z-index:999;
}
Now the div overlays the complete site and the user is able to close it with the "close" button. No scrolling issues ;)
EDIT:
You could also style the li of that dropdown to fill the screen size.

How can i do this if statement without refreshing the page?

I'm building a responsive website using css medias and JQuery.
I created a script to check the page width:
if ($(window).width() < 1240) {
$("#menu").toggle(); //hide menu
$('#body-wrap').toggleClass('shifted'); //puts the body width to 100%
$('#navbar').toggleClass('shifted'); //puts the navbar width to 100%
}
But this code only works when I refresh the page.
How can I do it automatically?
Thanks.

Put it in a resize event.
window.addEventListener('resize', function () {
// Your code
});
You may want to consider using CSS to do this instead, though (look at media queries for that)

You have to add it to the onresize event:
https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize
This event will be called each time when you resize the window, so you can respond to those changes.
But I think a better option would be to use CSS media queries, like so:
#media only screen
and (max-device-width : 1240px) {
#menu {
display: none;
}
}
Example and info on: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/