I wouldike to remove or hide an image when I run the application in mobile version or if max-width is set :
<ImageWrapper key={image.src}>
<img src={getImageUrl(path, image.src)} srcSet={getSrcSet(path, image.src)} alt={image.alt} />
</ImageWrapper>
try these two steps:
in your js file add className to your component as follow:
<ImageWrapper key={image.src} className="YourClass">
<img src={getImageUrl(path, image.src)} srcSet={getSrcSet(path, image.src)} alt={image.alt} />
</ImageWrapper>
Then, set display parameter based on screen size in your CSS file:
.YourClass {
display:block;
/* other properties */
}
#media only screen and (max-width: 768px) {
.YourClass {
display:none;
}
}
You can get the width of the content in javascript if you like to do this in javascript for some reason.
cons: you have to populate your code with aditional javascript
pro: if the user is using only mobile, it will not request the image which is good to prevent aditional requests. If you use css display:none it will request the image anyway.
import { useState, useEffect } from 'react';
//
const [width, setWidth] = useState(window.innerWidth);
// method to update the width size
const handleWindowSizeChange = () => {
setWidth(window.innerWidth);
};
// create a eventListener to update the width every time the user resize the window
useEffect(() => {
handleWindowSizeChange();
window.addEventListener('resize', handleWindowSizeChange);
return () => {
window.removeEventListener('resize', handleWindowSizeChange);
};
}, []);
Now you can use the width to check the size and check if the size is mobile or not.
if(width < 700) { // isMobile }
TIP: Hide the image in the render:
{width < 700 && <img src="image.jpg" />}
Related
I'm showing and hiding different headings depending on the device screen width. As react allows me to mount and unmount a component depending on a state I sometimes used the event listener addEventLister("resize", handleResize) to show and hide elements.
But with this method on a new page refresh, some flickering appeared as the default value of state was replaced by the actual evaluated value of the screen width, which caused the bigger typo to be shown for a millisecond before it was hidden again.
I discovered this won't happen with #media screen and display: none.
Why is it so slow? And is there any workaround for cases where I can't solve it in CSS, so a way to prioritize the event listener to evaluate before showing the wrong heading?
What's the go-to way for these scenarios, as this must be a basic issue on all responsive sites?
Example for a custom hook to listen for window changes:
const [screenSize, setScreenSize] = useState<Size>({
width: 0,
height: 0,
});
useEffect(() => {
const handleResize = () => {
setScreenSize({ width: window.innerWidth, height: window.innerHeight });
};
addEventListener("resize", handleResize);
handleResize();
return () => removeEventListener("resize", handleResize);
}, []);
Css example to do the same:
.title {
display: flex;
}
#media screen and (max-width: 768px) {
.title {
display: none;
}
}
I want to display a message with a black background whenever the viewport orientation is portrait mode in svelte.
I used svelte-viewport-info to get the orientation of the viewport.
<script lang="ts">
import Viewport from 'svelte-viewport-info'
console.log('standard Screen Orientation: ',Viewport.Orientation)
</script>
<svelte:body
on:orientationchangeend={() => { console.log(
'Screen Orientation changed to: ', Viewport.Orientation + (
Viewport.detailledOrientation == null
? ''
: '(' + Viewport.detailledOrientation + ')'
)
) }}
/>
I want to change the display property of a div
When in landscape mode, display set to none
When in portrait mode, display set to block
I found a js syntax to call function after a certain amount of time interval
var test = 0;
var interval;
function check_test() {
if( test == 1 ){
clearInterval( interval );
console.log( "Test is 1 now!" );
}
}
interval = window.setInterval( check_test, 1000 );
So inside this above function that is called every 1000 millisecond/1 second.
I found a syntax to use if statement in svelte here in #template-syntax-if
How do I perform all this in svelte it's along confusing
I have to repeatedly call function using window.setInterval after certain interval
Function needs to check the viewport Orientation from on:orientationchangeend inside svelte:body
Use the if in svelte to set the display property of a div to block or none depending on the viewport Orientation from step 2
From the svelte-viewport-info docs
CSS Classes
In addition, the package also adds or removes the following CSS classes depending on the current device orientation:
Portrait - indicates that the device is currently in any "Portrait" orientation
Landscape - indicates that the device is currently in any "Landscape" orientation
So you don't even have to track any event, you can simply use these classes to change the display of the div >> REPL
(The compiler doesn't see any elements with the classes Landscape and Portrait, so the :global() modifier must be added so that they get compiled)
<script context="module">
import Viewport from 'svelte-viewport-info'
</script>
<div class="only-portrait">
only visible in Portrait Mode
</div>
<style>
:global(.Landscape .only-portrait) {
display: none;
}
:global(.Portrait .only-portrait) {
display: block;
background: black;
color: white;
padding: 2rem;
}
</style>
I am making a todo app that has a sidebar and a todo page. I would like to make the page height to full screen and not put a fixed height.
Is it possible to do that with simplebar-react?
Use useLayoutEffect() in React, the final code for updating should look like this:
const [dimensions, setDimensions] = useState([0, 0]);
useLayoutEffect(() => {
function updateSize() {
setDimensions([window.innerWidth, window.innerHeight]);
}
window.addEventListener("resize", updateSize);
updateSize();
return () => window.removeEventListener("resize", updateSize);
}, []);
and then call dimensions for getting the height and width.
I'm following a guide that allows Google Map screen to disable scrolling depending on the screen size. The only part i'm struggling is to write a code that dynamically changes the True/False value when i resize the screen manually.
This is the website that I followed the instruction but I can't seem to write the correct syntax code to produce the dynamic true false value depending on the screen size https://coderwall.com/p/pgm8xa/disable-google-maps-scrolling-on-mobile-layout
Part of the code that i need to use:
$(window).resize()
And then:
setOptions()
So I'm struggling to combine them together.
I have tried something like this:
var dragging = $(window).width(function resize() {
if (dragging > 560) {
return true;
} else {
return false;
}
});
The article you linked to is lacking important information as it fails to mention that $ is (presumably) jQuery. But you don't need jQuery at all.
What you can use instead is the MediaQueryList. It is similar to media queries in CSS, but it is a JavaScript API.
The following is an untested example of how you might use it with a MediaQueryList event listener. It sets the initial value and listens to changes to your media query with a handler that uses setOptions from the Google Maps API.
var mql = window.matchMedia('(min-width: 560px)');
var isDraggable = mql.matches;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
draggable: isDraggable
});
}
function mqChange(e) {
map.setOptions({draggable: !!e.matches});
}
mql.addListener(mqChange);
You could add an event listener to the resize event and set a value of your variable whenever the size of the window is changed:
var dragging = false;
window.addEventListener('resize', function(event) {
dragging = window.innerWidth > 560;
});
Since you mentioned that you want to disable scrolling when the windows size extends a certain value, it might be easier to just do this. If you try it you can see in the console that the value changes whenever you resize your window):
window.addEventListener('resize', function(event) {
console.log(window.innerWidth);
if (window.innerWidth > 560) {
// disable scrolling or do whatever you want to do
}
});
BTW, in your code you do this:
if (dragging > 560) {
return true;
} else {
return false;
}
You can simplify this to:
return dragging > 560
Which is exactly the same.
You can use this function to get the width and height on a resize of the screen.
$(window).resize(function() {
$windowWidth = $(window).width();
$windowHeight = $(window).height();
// run other functions or code
});
But, if you want to only show/hide a html element based on the screen size, you can also use plain html/css.
<div id="maps"></div>
Css:
#media only screen and (max-width: 560px) {
#maps {
display: none;
}
}
you can use the matchMedia function to run a callback whenever the media query status is changing
var mql = window.matchMedia('(min-width: 700px)');
function mediaHandler(e) {
if (e.matches) {
/* the viewport is more than 700 pixels wide */
} else {
/* the viewport is 700 pixels wide or less */
}
}
mql.addListener(mediaHandler);
I am using HostListener for changing the height depending on the screen size this is working but during the load of the page the "event.target.innerHeight" give undefined later i will get the value as i change the browser height, so i have initialize the value. Initially if the user browse on a big screen the value will not change
Here is the code
myInnerHeight = 524; //Laptop screen
mypaletteHeight = 471; //Laptop screen
#HostListener('window:resize', ['$event'])
onResize(event) {
if (event.target.innerHeight > 680) {
this.myInnerHeight = 727; //bigger screen
this.mypaletteHeight = 674; //bigger screen
} else {
this.myInnerHeight = 524; //Laptop screen
this.mypaletteHeight = 471; //Laptop screen
}
}
HTML
<div class="card h-100" [style.min-height.px]="myInnerHeight" >
....
<div class="sub2" id="sub2" [style.height.px] = "mypaletteHeight">
.
.
</div>
</div>
I am using Angular 6 and bootstrap 4.
how to get the value of the screen size on the load of the page.Please help me with this issue
Did you try window.screen.height & window.screen.width
To get the document client width & Height, document.documentElement.clientWidth & document.documentElement.clientHeight