When I resize browser and refresh page if div width greater than browser width the div is displayed none. How to make it without refreshing page. For example when I resize browser and if div width grater than browser width it will automatically without refreshing page displayed none.
var body = document.querySelector('body');
var div = document.querySelector('div');
if (div.scrollWidth > body.clientWidth) {
div.style.display = 'none';
}
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
div {
width: 350px;
height: 60px;
background-color: lightgray;
}
<body>
<div> </div>
<script src="main.js"></script>
</body>
Thanks.
This is not the right way to do it but you can listen to resize event to recheck your conditions.
let body = document.querySelector('body');
var div = document.querySelector('div');
if (div.scrollWidth > body.clientWidth) {
div.style.display = 'none';
}
window.addEventListener("resize", function() {
if (div.scrollWidth > body.clientWidth) {
div.style.display = 'none';
}else div.style.display = '';
});
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
div {
width: 350px;
height: 60px;
background-color: lightgray;
}
<body>
<div> </div>
<script src="main.js"></script>
</body>
For this kind a responsive conditions best way to go is with css media queries. You can find more information here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Why don't you use CSS media rules ?
Media rules can apply different style on different sizes of screen.
For example:
#media screen and (max-width: 600px) {
div.example {
display: none;
}
}
docs for more informations about #media rules: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You can use media query for such requirement. Include below code in css.
#media only screen and (max-width: 600px) {
body {
display: none;
}
}
Related
I have a back-to-top button which appears when users scroll down on the website, however, I would like it if this button only appeared depending on screen size.
As somebody new to javascript, I cannot figure out how to add this in, other than that I am assuming it should be a part of the "if" argument.
HTML:
<button onclick="topFunction()" id="button-top" title="Go to top">Top</button>
CSS code:
#button-top {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: #d46900;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
font-size: 1.5em;
}
#button-top:hover {
color: #1c1c1c;
background-color: #ccc;
}
JS code:
/* BACK TO TOP BUTTON*/
// When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("button-top").style.display = "block";
} else {
document.getElementById("button-top").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
You should use media queries to show or hide your button depending on the screen size:
/* Hide the button if the width is less than 500px */
#media (max-width: 500px) {
#button-top {
display: none;
}
}
<button type="button" id="button-top">Back to top</button>
You can run the snippet above and resize your browser, once the width is below 500px, the button will disappear.
Not sure what you want.
If you want your button-top button to appear on bigger screen like desktop and disappear on smaller screen like tablets or mobile you can do something like this:
#media only screen and (max-width: 768px) {
#button-top {
display: none;
}
}
but if you want your button-top button to appear after scrolling and disappear after scrolling back to top you can do something like this:
css:
#button-top.show {
visibility: visible;
}
js:
$(document).on("scroll", function () {
if ($(window).scrollTop() > 100) {
$("#button-top").addClass("show");
} else {
$("#button-top").removeClass("show");
}
});
I am trying to set the width/height of a canvas element to fill the container it is in. Currently it works, but when it fills the body, scrollbars are added.
let masterCanvas = document.querySelector('canvas');
let parent = masterCanvas.parentElement;
masterCanvas.width = parent.offsetWidth;
masterCanvas.height = parent.offsetHeight;
I have the following styles:
<style>
body, html { padding: 0; margin: 0; width: 100vw; height: 100vh; }
* { box-sizing: border-box; }
</style>
And the following body:
<body>
<canvas></canvas>
</body>
Here is a fiddle that demonstrates this: https://jsfiddle.net/ynkcfsud/
The canvas element behaves like an image, so it is an inline element. You'll need to apply display: block to the canvas.
I have noticed this 'issue' lately when trying some stuff.
Say I want to create a drop-down menu or an accordion.
This is my HTML:
<div class="wrapper" onclick="toggle()">
I want to be animated!
<div class="content">
Was I revealed in a timely fashion?
</div>
</div>
Stylesheets:
.wrapper {
background: red;
color: white;
height: auto;
padding: 12px;
transition: 2s height;
}
.content {
display: none;
}
.content.visible {
display: block;
}
JavaScript:
function toggle () {
var content = document.getElementsByClassName('content')[0];
var test = content.classList.contains('visible');
test ? content.classList.remove('visible') :
content.classList.add('visible');
}
I am trying to achieve a nice, smooth animation when we toggle the state of the content. Obviously this does not work. Anyone can explain to me why it does not work and how to fix it? Many thanks.
Link to the JSFiddle.
First things first, some CSS properties CANNOT be transitioned, display is one of them, additionally only discrete values can be transitioned, so height: auto cannot as well.
In your case the problem is with height: auto, while there are a few hacks for doing this, if you are just showing and hiding stuff, why not add, and use jQuery's toggle instead?
$(".content").toggle("slow");
jsFiddle
--EDIT (without jQuery)--
Because it's the auto that is giving us problems, we can use javascript to replace auto with a value in pixels and then use the css transition normally, if your content doesn't have a scroll, we can easily take that value from the scrollHeight property:
function toggle () {
var content = document.getElementsByClassName('content')[0];
var test = content.classList.contains('visible');
console.log(test);
if (test) {
content.classList.remove('visible')
content.style.height = "0px";
} else {
content.classList.add('visible');
content.style.height = content.scrollHeight + "px";
}
}
Css
.wrapper {
background: red;
color: white;
height: auto;
padding: 12px;
transition: 2s height;
}
.content {
height: 0px;
display: block;
transition: 2s height;
overflow: hidden;
} /* totally removed .content.visible */
jsFiddle
When a user's browser has a width of less than 1160px, a media query is setup to collapse my site's right sidebar. They can get it back by clicking on a little arrow and then it will overlap the content (absolute positioning).
Anyway, I used the following jQuery to achieve this:
$('.right_sidebar_preview').on('click', function() {
$('.right_sidebar_preview').css('display', 'none');
$('.right_sidebar').css('display', 'block');
});
$('.right_sidebar').on('click', function() {
$('.right_sidebar_preview').css('display', 'block');
$('.right_sidebar').css('display', 'none');
});
So basically I already have the preview hidden when the browser is larger than 1160px and the sidebar is visible, in the media query I have it set up so when it's below 1160px, the sidebar becomes invisible and the "sidebar preview" is shown which users can click to make it bigger.
CSS:
.right_sidebar {
width: 242px;
height: 100%;
background-color: #d8e1ef;
float: right;
position: relative;
}
.right_sidebar_preview {
display: none;
}
#media(max-width:1160px) {
.right_sidebar {
position: absolute;
right: 0;
display: none;
}
.right_sidebar_preview {
display: block;
background-color: #d8e1ef;
position: absolute;
right: 0;
width: 15px;
height: 100%;
}
}
My question is, when I use the code above, let's say we're in the less than 1160px media query, I'll open the sidebar then collapse it again, and when I stretch my browser out to go back, it also closed the sidebar on the greater than 1160px media query.
So is there anyway I can use .css() (or an alternative method) to point at a specific media query?
Do not manipulate the CSS display: property. Instead, use CSS classes to control the visibility of sidebar and its handle. This way you can use your media query to control whether an element displays or not.
In the following demo, click the "Full page" button to see how this works on screens > 1160px.
$(function() {
$('.right_sidebar, .right_preview').on('click', function() {
$('.right_sidebar, .right_preview').toggleClass('lt-1160-hide lt-1160-show');
});
});
.right_sidebar {
width: 100px;
height: 100px;
background-color: papayawhip;
float: left;
display: block;
}
.right_preview {
width: 20px;
height: 100px;
background-color: palegoldenrod;
float: left;
display: none;
}
#media(max-width: 1160px) {
/* note: the following rules do not apply on larger screens */
.right_sidebar.lt-1160-show, .right_preview.lt-1160-show {
display: block;
}
.right_sidebar.lt-1160-hide, .right_preview.lt-1160-hide {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="right_sidebar lt-1160-hide">Sidebar</div>
<div class="right_preview lt-1160-show">›</div>
On a recent project, I had to process a single function in jQuery based on the browser size. Initially I was going to check the device width was applicable to a mobile device (320px):
jQuery
$(window).resize(function(){
if ($(window).width() <= 320) {
// your code here
}
});
or
$(window).resize(function(){
if ($('header').width() == 320 ){
// your code here
}
});
Something like this?
$(window).resize(function(){
if ($(window).width() <= 1160){
// lets party
}
});
I am trying to set my logo to display a bigger logo for desktops and a smaller image for smaller devices like smartphones...
This is what i've tried until now, but it doesn't works.
Can somebody help me? What's wrong with my code?
<html>
<head>
<script type="text/javascript">
function load(){
document.getElementById('logo').src = displaylogo();
}
function displaylogo(){
if ($(window).width() < 1024) {// code for small viewports
return "http://i.imgur.com/ozYV740.png"; // small logo
}
else {// code for large viewports
return "http://i.imgur.com/RMV6Af0.png"; //big logo
}
}
</script>
</head>
<body onload="load()">
<img src="http://i.imgur.com/RMV6Af0.png" id="logo" name="logo" title="The original logo is the big logo"/>
</body>
</html>
You should be using CSS media queries to handle how your web page displays on different devices. These queries allow you to apply different styles depending on the width of the user's screen.
For example, to resize your logo for phones, try:
/* Desktops (>480px) */
#logo {
width: 200px;
height: 200px;
}
/* iPhone landscape (480px) */
#media screen and (max-width: 480px) {
#logo {
width: 100px;
height: 100px;
}
}
Tutorial: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Try using media queries
<head>
<style>
.logo {
width: //logo-width
height : //logo-height
background-image : url('http://i.imgur.com/RMV6Af0.png');
}
#media only screen
and (max-device-width : 1024px) {
.logo {
width: //logo-width
height : //logo-height
background-image : url('http://i.imgur.com/ozYV740.png');
}
}
</style>
</head>
<body>
<div class="logo">
</div>
</body>
Because of you do not use jquery Try this in your case :
To work in JS:
if (window.innerWidth < 1024) {// code for small viewports
//^^^^^^^^^^^
If you want to use jquery:
function displaylogo() {
if ($(window).width() < 1024) {
$("#logo").attr("src","http://i.imgur.com/ozYV740.png"); // small logo
}
else {
$("#logo").attr("src","http://i.imgur.com/RMV6Af0.png"); //big logo
}
}
$(window).resize(function () {
displaylogo();
});
$(document).ready(function () {
displaylogo();
});
I suggest to use CSS instead:
<span id="logo"></span>
CSS:
#logo {
display: inline-block;
width: 50px;
height: 50px;
background: url(http://i.imgur.com/ozYV740.png) no-repeat; /* small */
}
#media screen and (min-width: 1024px) {
#logo {
width: 100px;
height: 100px;
background: url(http://i.imgur.com/RMV6Af0.png) no-repeat; /* big */
}
}