Develop Reference

Hide/Show Depending on Screen Size javascript

What I want:
When on PC/MAC:
All content shall be shown.
When on Smartphone or Tablet: the content should be hidden.
I know I have to look at screen size, but how do I do that?
See my code:
$(document).ready(function() {
$("#button-opl").on('click',function(){
$("#views-exposed-form-attraktioner-block").slideToggle();
});
});
button{
background-color:grey;
border:none;
padding:15px 25px;
cursor:pointer;
width:100%;
color:white;
font-size:18px;
}
#views-exposed-form-attraktioner-block{
display:none;
background-color:orange;
width:100%;
color:white;
text-align:center;
padding:15px 25px;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button-opl">
Click here!
</button>
<div id="views-exposed-form-attraktioner-block">
Hello World
</div>

Javascript way
If you want to do it with Javascript, you'll have to check your window size and act upon that.
I chose the breakpoint to be 480px wide, here.
I also added a $(window).on('resize') to update your page when the window is resized :
var vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if (vw <= 480) {
$('div').hide();
}
$(window).on('resize', function() {
vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if (vw <= 480) {
$('div').hide();
}else{
$('div').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm not visible on mobile !</div>
CSS way
You can do it really easily without any Javascript using CSS Mediaqueries :
#media screen and (max-width: 480px){
div{
display: none;
}
}
<div>I'm not visible on mobile !</div>

Difficulty toggling media query using Javascript

Link to site
I'm trying to format the menu on the above site, when it's in sticky mode (i.e. scrolled down), because at certain widths the Request a Quote button is obscured by the screen. I'm using Javascript to action the change only when the screen is scrolled down, and an additional CSS class to move the menu. Unfortunately it's not working - while I can move the menu using just CSS applied directly to the existing class, trying to tie this in with JS to make it scroll specific doesn't any effect.
Is anyone able to tell me where I'm going wrong please?
Thank you in advance.
Javascript
<script type="text/javascript">
$ = jQuery;
$(function() {
//caches a jQuery object containing the header element
var header = $(".header-widget");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 20) {
$(".header-widget").addClass("header-widget-shortheader");
$(".second-header-widget").addClass("second-header-widget-shortheader");
$(".navbar .nav").addClass(".stickyheader-midscreen-cta-fix");
} else {
$(".header-widget").removeClass("header-widget-shortheader");
$(".second-header-widget").removeClass(".second-header-widget-shortheader");
$(".navbar .nav").removeClass(".stickyheader-midscreen-cta-fix");
}
});
});
</script>
CSS
/* -----Moves menu to avoid cutting off CTA button with sticky header on mid-sized screen (toggle with JS in 'Header & Footer')----- */
#media screen and (min-width: 980px) and (max-width: 1189px) {
.stickyheader-midscreen-cta-fix {
margin: 40px 22% 0 0;
float: right;
}
}

Thanks to Marian07 for the support. This is where I ended up:
/* -----Fixes menu CTA button being cut off by mid size screens----- */
#media screen and (min-width: 980px) and (max-width:1084px) {
.sticky-enabled .navbar-wrapper {
margin-left: 0;
}
.sticky-enabled .navbar-wrapper a {
padding-right: 9px!important;
padding-left: 8px!important;
font-size: 95% !important;
}
}
#media screen and (min-width: 1085px) and (max-width:1200px) {
.sticky-enabled .navbar-wrapper {
margin-left: 0;
}
.sticky-enabled .navbar-wrapper a {
padding-right: 3px!important;
padding-left: 25px!important;
}
}

The problem is at line 6:
$(window).scroll(function() {
(did not actually call the function on scroll)
Solution:
$(window).on('scroll', function() {
For your design problem, you can decrease the width of the headers on certain screen sizes by adding the below code at the end of file: /wp-content/themes/customizr-child/style.css
#media screen
and (max-width:1200px)
and (min-width: 980px) {
.sticky-enabled .navbar-wrapper {
margin-left: 0;
}
.sticky-enabled .navbar-wrapper a {
padding-right: 7px!important;
padding-left: 7px!important;
}
}

remove . use only class name
$(".navbar .nav").addClass(".stickyheader-midscreen-cta-fix");
replace
$(".navbar .nav").addClass("stickyheader-midscreen-cta-fix");
$(".navbar .nav").removeClass(".stickyheader-midscreen-cta-fix");
replace
$(".navbar .nav").removeClass("stickyheader-midscreen-cta-fix");

Click one div and goes to another on responsive website

Hi I am trying to get my website to be responsive. I have two different divs one on the left and one on the right on my website like so...
http://jsfiddle.net/1fupx7aa/2/
HTML
<div class="menu"></div>
<div class="view"></div>
CSS
.menu {
width:100px;
height:100px;
float: left;
background-color: red;
}
.view {
width: 200px;
height:300px;
background-color: yellow;
float:left;
}
On the website, when I click on the red div, content appears on the yellow div.
I am now trying to make my website responsive, so what I would like to do is on a smaller screen, the yellow div I set to display:none; and the red div width:100% like so...
http://jsfiddle.net/3jmbxumb/
HTML
<div class="menu"></div>
<div class="view"></div>
CSS
#media (max-width: 600px) {
.menu {
width:100%;
}
.view {
display: none;
}
}
Now what I need to do is, when I click on the red div, I would like the content in the yellow div to appear where I would create a back button that would lead back to the red div.
Is this possible?
I have been looking at the bootstrap carousel option, but I don't think this works for my website.
What would I call this and is this possible? Might there be a way where if I click on the red div on a mobile device the red div becomes hidden and only the yellow div appears?

You can do this using jQuery and having a specific hidden class for small screens - so you don't have to check for screen width in js.
Javascript:
var showContent = function () {
var $yellow = $('#yellow-view'),
$this = $(this);
//Hide red and show yellow
$yellow.removeClass('hidden-small');
$this.addClass('hidden-small');
//Add content to yellow view
$yellow.html('<strong>my content</strong>');
};
$('#menu').click(showContent);
CSS:
.menu {
width:100px;
height:100px;
float: left;
background-color: red;
}
.view {
width: 200px;
height:300px;
background-color: yellow;
float:left;
}
#media (max-width: 600px) {
.menu {
width:100%;
}
.hidden-small {
display: none;
}
}
https://jsfiddle.net/s9wkbL9m/2/

You might want to use jQuery to do this.
$(document).ready(function(){
$('.menu').click(function(){
$('.view').fadeIn();
});
});
Here is the updated Fiddle.

A quick JS writeup that would work for your scenario
$(function(){
$(".back_btn").hide();
if($(window).width() <= 600){
$(".view").hide();
}
$(".menu").click(function(){
if($(window).width() <= 600){
$(".menu").hide();
$(".view").show().text("Some text");
$(".back_btn").show();
}
else {
$(".view").text("Some text");
}
});
$(".back_btn").click(function(){
$(".view").hide();
$(".menu").show();
});
});

Responsive Nav Javascript

I am trying to make a responsive nav. I am using some jquery but I don't know javascript very well. I would like the toggle to take place when the window is a certain width (e.g. 1050px) this is the script
function adaptMenu() {
/* toggle menu on resize */
$('nav').each(function() {
var $width = $(this).css('max-width');
$width = $width.replace('px', '');
if ($(this).parent().width() < $width * 1.05) {
$(this).children('.nav-main-list').hide(0);
$(this).children('.nav-toggled').show(0);
} else {
$(this).children('.nav-main-list').show(0);
$(this).children('.nav-toggled').hide(0);
}
});
}

You can solve this by fixing the given javascript, but javascript is inefficient to handle responsive design. CSS engine is written in c++ and works faster, and automatically when browser is resized.
Better use CSS media query
The following snippet does the same as your javascript but with pure CSS.
<style>
#media (max-width: 1049px) {
nav .nav-main-list {
display: none; /* hide .nav-main-list when browser windows width < 1050px */
}
nav .nav-toggle {
display: initial; /* show */
}
}
#media (min-width: 1050px) {
nav .nav-main-list {
display: initial; /* show .nav-main-list when browser windows width > 1050px */
}
nav .nav-toggle {
display: none; /* hide */
}
}
</style>
EDIT:
As #Roko commented, media query does not work in IE8 and earlier. If you need support that browser, this post may help.

Expand divs to fill parent element but not exceed max width

I'm trying to set minimum and maximum width/height on left floated divs and have them expand to fill the parent element (body). I was wondering if there is a way to achieve this with css, and if not, maybe I could use some JS.
To imagine this effect, start resizing the window and you will notice that there will be an empty space on the right of the divs until the space is large enough for some of the divs to shift into it. What I would like to do is have all the divs expand to fill out the empty space until maximum is reached and it is time to pop in more divs there at which point the size of the divs will readjust based on how many are in the row.
In the end I want to have these divs never to be more than maximum width or less than minimum width but be self adjusting within those limits to fill entire width of the body
Here is the example code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
.imageitem {
background-color: blue;
margin: 0 5px 5px;
min-width: 200px;
min-height: 200px;
max-width: 250px;
max-height: 250px;
float: left;
}
</style>
</head>
<body>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
</body>
</html>

What you're asking is actually a relatively complex layout, though it's basically just responsive. Essentially you want, say, two divs that expand to fill the screen (like two cells in a table would) but once the screen reaches a certain width for a third div to move up into the row.
You won't be able to get both the dimensions you specify and to fill the screen at all possibilities, as Clark says. At 505 pixels wide, two divs will fit (2x 250, with 5 pixels gap). Three won't fit until at least 610 pixels wide (3x 200, with 2x 5 pixels gap), meaning there are 105 pixels of width where your divs won't fill the screen.
Media Queries probably are the best bet for this, but your margin will probably have to be specified as a percentage, rather than 5 pixels (unless you want to do it in jQuery or similar).
Modified from Clark's answer is this fiddle http://jsfiddle.net/UHqWF/2/
body {
background:#edeee6;
}
.imageitem {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
float:left;
max-width:250px;
min-width:200px;
padding:5px;
width:100%;
}
.imageitem div {
background:#4e84a4;
max-height:250px;
min-height:200px;
}
#media all and (min-width:420px) {
.imageitem {
width:50%;
}
}
#media all and (min-width:630px) {
.imageitem {
width:33.33333%;
}
}
#media all and (min-width:840px) {
.imageitem {
width:25%;
}
}
#media all and (min-width:1050px) {
.imageitem {
width:20%;
}
}
However, it's jumpy, as explained above.
A better solution would be to not impose the width restrictions (and thus stop the occasional gaps to the right), such as http://jsfiddle.net/UHqWF/3/
body {
background:#edeee6;
}
.imageitem {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
float:left;
padding:5px;
width:100%;
}
.imageitem div {
background:#4e84a4;
min-height:200px;
text-align:center;
}
#media all and (min-width:420px) {
.imageitem {
width:50%;
}
}
#media all and (min-width:630px) {
.imageitem {
width:33.33333%;
}
}
#media all and (min-width:840px) {
.imageitem {
width:25%;
}
}
#media all and (min-width:1050px) {
.imageitem {
width:20%;
}
}​
Or even have the extra space in the centre, rather than the edges, such as http://jsfiddle.net/UHqWF/4/
body {
background:#edeee6;
}
.imageitem {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
float:left;
padding:5px;
width:100%;
}
.imageitem div {
background:#4e84a4;
max-width:250px;
margin:0 auto;
min-height:200px;
text-align:center;
}
#media all and (min-width:420px) {
.imageitem {
width:50%;
}
}
#media all and (min-width:630px) {
.imageitem {
width:33.33333%;
}
}
#media all and (min-width:840px) {
.imageitem {
width:25%;
}
}
#media all and (min-width:1050px) {
.imageitem {
width:20%;
}
}​

I created a jQuery plugin that uses CSS3 columns in browsers that support them, and wraps elements into floated columns in browsers that don't such as IE 9 and below.
A resize maintains aspect ratio of the items. It is virtually impossible to make the transition look 100% fluid to the eye, but it is reasonably fluid looking depending on browser.
There are a few settings that can be used, they are commented.
Code to initiate is :
$('#container').adjustColumns({/* options*/});
Since part of my motivation was to increase learning curve on CSS3 useage and fallback methods I will be happy to help support this more.
DEMO: http://jsfiddle.net/SbvGJ/show/

Firstly, with a minimum width of 200px and a maximum width of 250px:
when the screen size is between 750px and 800px, there will be a gap of up to 50px
when the screen size is between 500px and 600px, there will be a gap of up to 100px
when the screen size is between 250px and 400px, there will be a gap of up to 150px
Thats just how the maths of your layout works out to be.
As long as you're ok with that, perhaps you could try media queries.
So something like this:
.imageitem {
background-color: blue;
//For the sake of simplicity, i've set the margin to 0.
//You will need to redo the maths or restructure your HTML for margins to work
//Perhaps using an inner div with a margin
margin: 0px;
min-width:200px;
min-height:200px;
max-width:250px;
max-height:250px;
float:left;
}
#media all and (max-width:250px) and (min-width:200px) {
.imageitem {
width:100%;
}
}
#media all and (max-width:500px) and (min-width:400px) {
.imageitem {
width:50%;
}
}
#media all and (max-width:750px) and (min-width:600px) {
.imageitem {
width:33%;
}
}
#media all and (max-width:999px) and (min-width:800px) {
.imageitem {
width:25%;
}
}
#media all and (max-width:1249px) and (min-width:1000px) {
.imageitem {
width:20%;
}
}
If you need the height to resize as well, you could write a similar query for min-height and max-height. Just make sure you set the height on the html, body selector as well.