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>
Related
<script type="text/javascript">
$(document).ready(function(){
$(window).resize(function() {
if($(window).width() < 767){
$("#second").insertBefore("#first"); }
else{
$("#first").insertBefore("#second"); }
});
});
</script>
I want to change the html element. In the above code nothing is wrong but when our screen size has already small (< 767) it will not work due to resize() function and when we remove resize function then it will work but it failure when we increase the screen size. It can't change the element.
Actually i am looking a solution like #media css property. We all Know when we use media we can see the effect through inspector. I got a code but it will not working
document.querySelector('style').textContent += "#media screen and (max-width:767px) {"+
$("#second").insertBefore("#first");+" }";
Actually the code was not same. I edited and try to run but not working.
How to change elements like in small screen with media query? or any other solution but must be responsive
<script type="text/javascript">
$(document).ready(function(){
$(window).resize(function() {
change();
});
change();
});
function change(){
if($(window).width() < 767){
$("#second").insertBefore("#first");
}
else
{
$("#first").insertBefore("#second");
}
}
</script>
Do you mean to swap html elements according to screen width? If so, why not use CSS?
<style>
.hidden {
display: none;
}
#media screen and (min-width: 768px) {
#first-copy, #second-copy {
display: block;
}
#first, #second {
display: none;
}
}
</style>
<html>
<div id="first" style="border: 1px solid; width: 100px; text-align: center">
<p>
first element
</p>
</div>
<div id="second" style="border: 1px solid; width: 100px; text-align: center">
<p>
second element
</p>
</div>
<div id="second-copy" class="hidden" style="border: 1px solid; width: 100px; text-align: center">
<p>
second element
</p>
</div>
<div id="first-copy" class="hidden" style="border: 1px solid; width: 100px; text-align: center">
<p>
first element
</p>
</div>
</html>
https://jsfiddle.net/8sug5pws/2/
U can use #media screen
for example:
#media screen and (max-width: 480px) {
#info {
font-size: 0.6em;
}
In CSS Of course
try this code its working fine...
resize_solution();
$(document).ready(function(){
$(window).resize(function() {
resize_solution();
});
});
function resize_solution(){
if($(window).width() < 767){
$("#second").insertBefore("#first");
}
else{
$("#first").insertBefore("#second"); }
}
You must use .trigger(resize);
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();
});
});
Ok, so I am just starting to learn jquery, and I am in a stump. I have this javascript here that I am trying to get working:
$(function(){
$(window).scroll(function() {
if ($(this).scrollTop() > 890) {
$(".mobile-nav:hidden").css('visibility','visible');
$(".mobile-nav:hidden").fadeIn('slow');
}
else {
$(".mobile-nav:visible").fadeOut("slow");
}
if ($(window).width() < 800) {
$('.mobile-nav').hide();
};
});
});
Basically what it is suppose to do is when you scroll down, the element "mobile-nav" will fade in when you scroll down 890px and will stay appeared when you keep scrolling down. When you scroll back to the top and pass that specific position, it will fade out. And that part works great but the part that doesn't work is when the browser hits a width less than 800px, the mobile-nav will stay hidden or not displayed. But it keeps appearing, and won't stay hidden when the browser resizes to 800px. Its a small but annoying problem.
Here is the css for the mobile nav for you check as well:
.mobile-nav{
width:90px;
height: 600px;
float:left;
background-color:#000;
z-index:1;
position:fixed;
visibility:hidden;
top:20px;
left:0;
right:0;
bottom:0;
}
EDIT: Here is my site I'm working on, currently WIP. Here is the link to check out to see what I'm talking about. Just scroll down and you will see the mobile nav to your left appear. http://tronixinteractive.com/jcarter-designs2/
I know you perhaps would prefer a jquery based answer but this could be more easily handled with a media query. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
CSS
.mobile-nav {
//normal styling
}
//now just wrap size specific styling in a media query.
#media (max-width: 800px) {
.mobile-nav {
display: none !important
//!important added to overule jquery adding the style directly on element
}
}
#media screen and (max-width: 800px) {
.mobile-nav{
width:90px;
height: 600px;
float:left;
background-color:#000;
z-index:1;
position:fixed;
visibility:hidden;
top:20px;
left:0;
right:0;
bottom:0;
}
}
You have a mistake in your code. You hide your div and fadeIn at scroll.
$(function(){
$(window).scroll(function() {
if ($(window).width() < 800) {
if ($(this).scrollTop() > 890) {
$(".mobile-nav:hidden").css('visibility','visible');
$(".mobile-nav:hidden").fadeIn('slow');
}
else {
$(".mobile-nav:visible").fadeOut("slow");
}
} else {
$('.mobile-nav').hide();
};
});
});
I have 5 divs next to each other in the desktop view. However, upon resizing to ~640px, these divs should condense into an accordion.
Any ideas or tips on how to accomplish this?
Example >
(On desktop)
| DIV#1 | DIV#2 | DIV#3 | DIV#4 |
(On mobile, at 640px)
–––––––––––
Accordion +
–––––––––––
DIV#1
DIV#2
DIV#3
DIV#4
–––––––––––
You can use css media query alongwith js:
HTML
<div class="accordion">+</div>
<div class="a">A</div>
<div class="a">B</div>
<div class="a">C</div>
<div class="a">D</div>
<div class="a">E</div>
CSS:
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (max-width : 640px) {
/* Styles */
div {
display:block;
padding:10px;
border:1px solid #544454;
margin:5px
}
.a {
display:none;
}
}
/* Desktops and laptops ----------- */
#media only screen and (min-width : 641px) {
/* Styles */
.accordion {
display:none;
}
.a {
display:inline-block;
margin:10px;
width:80px;
height:40px;
border:1px solid green;
}
}
JS:
$(document).ready(function () {
$('.accordion').on('click', function () {
$('.a').slideToggle('fast');
});
});
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/335/
Re-size the window to see the effects. Adjust the media query value according to your needs
try this. listn to window resizing, if height goes below 640, write the jquery/JS code to convert it to accordion.
$(window).on('resize', function() {
if(window.innerHeight < 640)
//change it to accordion here
});
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.