I grab the size of a slide image using let size = carousel_images[0].clientWidth; and clientWidth varies in different viewports, here, carousel_images is pointing to img within the .carousel and here is how it varies in different viewports:
#media screen and (min-width: 1024px) {
.carousel {
max-width: 994px;
img {
min-width: 994px;
}
}
}
#media screen and (min-width: 1200px) {
.carousel {
max-width: 1150px;
img {
min-width: 1150px;
}
}
}
so when I resize the browser it looks like:
but as I refresh the page, it looks normal again.
here is full code pen link, Thank You.
You need to add this code:
window.addEventListener('resize', ()=>{
size = carousel_images[0].clientWidth
carousel_slide.style.transform = `translateX(${-size}px)`
})
Essentially, you need to listen window resize event, update variable and execute code again wherever that variable is used.
I think you have to assign a new value to your let size. Is it a global variable? Perhaps, putting it inside a function or class is a good idea.
You could use the resize event, which fires when your window changes size.
The following demo is from:
https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event
const heightOutput = document.querySelector('#height');
const widthOutput = document.querySelector('#width');
function reportWindowSize() {
heightOutput.textContent = window.innerHeight;
widthOutput.textContent = window.innerWidth;
}
window.onresize = reportWindowSize;
<p>Resize the browser window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>
Related
Sorry if this is a basic question. I mainly work with design and am not entirely comfortable with JavaScript.
I have a navigation menu which is prompted to display when clicking an SVG using an Event Listener. Based on the size of the screen on which the menu is being displayed I would like to change the function to a function stating a different height for the navigation on click. This way smaller devices will have a certain height navigation, and larger will have a different height as well.
Here is the code as far as I have dabbled into it
// media query event handler
if (matchMedia) {
const mq = window.matchMedia("(min-width: 500px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) {
// at least 500px
document.getElementById("onclick").addEventListener("click", menuSize);
function menuSize() {
document.getElementById("mobilemenu").style.height = "35%";
document.getElementById("mobilemenu").style.opacity = "1";
document.getElementById("movbilenav").style.opacity = "0";
}
} else {
// less than 500px
document.getElementById("onclick").addEventListener("click", menusizeL);
function menusizeL() {
document.getElementById("mobilemenu").style.height = "50%";
document.getElementById("mobilemenu").style.opacity = "1";
document.getElementById("movbilenav").style.opacity = "0";
}
}
}
As of now I get no response at all when clicking the navigation menu. Thank you, and sorry if this is a rudimentary question.
I think you should convert your solution to mainly use css. Generally, the more you can solve with css instead of js, the more the browser will take care of everything and keep everything smooth.
You can just add a media query in your stylesheets to handle the height differences. To hide/show your menu, I'd rely on just adding a class via your js. Sample stylesheet:
#mobilemenu {
height: 50%;
opacity: 0;
}
#mobilmenu.showing {
opacity: 1;
}
#media (min-width: 500px) {
#mobilemenu {
height: 35%;
}
}
Then you can just add your class via js:
document.getElementById('menuopener').addEventListener('click', function() {
document.getElementById('mobilemenu').classList.toggle('showing');
});
On my template, I have 2 divs. one for table view(laptop) and one for list view(mobile view).
In my .ts file, I want to get the window size so that based on this size, I can choose which div i want to call using ngIf.
In the constructor of the .ts file, I have:
let windowSize: number;
this.windowSize = innerWidth + innerHeight;
window.addEventListener("resize", function() {
this.windowSize = innerWidth + innerHeight";
});
But when i console.log() this.windowSize, I dont get the change when the window is resized. What am i missing?
This can be set with simple css:
#media (min-width: 500px) and (max-width: 700px) {
.div1 {
display: none;
}
#media (min-width: 701px) and (max-width: 900px) {
.div2 {
display: none;
}
Resolved this issue by using NgZone. Injected NgZone in my constructor and used it as:
window.onresize = (e) =>
{
this.ngZone.run(() => {
this.width = window.innerWidth;
this.height = window.innerHeight;
});
};
By doing this, I was able to check for the change in window in my components. I couldnt use media queries since I had to execute a funtion inside my .ts file based on window size change.
I'm doing responsivity on my website in JS. How can I change this (normal resolution):
$(".card1_content_arrow").click(function () {
$(".card1_content").css('margin-left', '-45%');
});
Into this, when media width is <860px (in css #media all and (max-width: 860px)):
$(".card1_content_arrow").click(function () {
$(".card1_content").css('margin-left', '-100%');
});
When I click on .card1_content_arrow on big resolution, then margin-left will be changed to -45%', but if I will change the resolution to 860px (and less) I want, that when I click on same .card1_content_arrow, then margin-left will be changed to -100%.
Thanks :)
You can detect the screen resolution as described on this question.
$(".card1_content_arrow").click(function () {
var margin = "-45%";
if (window.screen.availWidth < 860) {
margin = "-100%";
}
$(".card1_content").css('margin-left', margin);
});
I would suggest using media queries instead by specifying another class to control the margin.
.yourClass {
margin-left: -45%;
}
#media (max-width: 859px) {
.yourClass {
margin-left: -100%;
}
}
You can just add the class into your element and let the browser do the checking.
$(".card1_content_arrow").click(function () {
$(".card1_content").addClass('yourClass');
});
Suppose that there is a div element and we are in 760px width. Current margin-top as css property value will be 60px.
CSS:
#media only screen and (min-width: 360px) {
div.me {
margin-top: 30px;
}
}
#media only screen and (min-width: 760px) {
div.me {
margin-top: 60px;
}
}
Then I change the margin-top by jquery to do more stuff. e.g. 80px.
Jquery
$("div.me").css("margin-top", "80px");
I'm searching a solution for: When the user resized the window, Doing reset the element margin-top to first documnet ready value depend on it's media query.
Suppose the user resized to 400px width. So the element should be reset to margin-top: 30px.
I thought to set custom attributes to all elements to save first values in it.
$(document).ready(function () {
var m = $("div.me").css("margin-top");
$("div.me").attr("first-margin-top", m);
});
$(window).resize(function () {
// some stuff to retrieve first value, not important...
});
But There are many elements like this on the page and many media query values for each.. Here I just talked about one element.
Is there a better way to retrieve and reset the element? Any idea?
You set the CSS value inline therefore it trumps your media query. Either do this with jquery or add the !important tag into your css:
#media only screen and (min-width: 760px) {
div.me {
margin-top: 60px !important;
}
}
$(window).resize(function () {
if($(window).width < 760){
$("div.me").css("margin-top", "60px");
}
});
Finally I found the answer of my own question. I just changed inline style to "" or removed it. It makes the browser to set margin-top or other properties (if needed) according to media query values again.
$(window).resize(function () {
$("div.me").css("margin-top", "");
//or
$("div.me").removeAttr("style");
});
JsFiddle
This might not be a simple question, but I try my best.
I have this example site: http://lotvonen.tumblr.com/
I have a little piece of javascript that automatically calculates the height of the inner browser window and sets that number as image wrapper div's height. Height of the image inside the wrapper is 100% of the wrapper, so that I get nice, full screen images on all normal screen sizes.
This works wonderfully on screens that are more wide than tall (desktops, laptops, etc).
But!
With screens that are more tall than wide (smartphones, iPads etc), the images get clipped from sides. I don't want that, so I have a temporary solution to have media query assigning height to auto and width to 100%, when browser screen max-width is 1024, so that no clipping occurs. But it's not a very good solution, and breaks at certain resolutions. It also destroys my JS with lower resolutions (eg. 800x600).
Here's the JS:
<script type="text/javascript">
var elems = document.getElementsByClassName('img'),
size = elems.length;
for (var i = 0; i < size; i++) {
var img = elems[i];
var height = (window.innerHeight) ? window.innerHeight: document.documentElement.clientHeight;
img.style.height=(height)+'px';
}
</script>
and here's my CSS:
.img {
max-width:100%
}
.img img {
width:auto;
}
.img img {
height:100%;
}
#media only screen and (max-width: 1024px) {
.img {
height:auto !important;
}
.img img {
height:auto !important;
max-width:100%;
}
and here's the div:
<li><div class="img"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></div>
How do I get it so, that when the browser window is more tall than wide (eg. 720x1024), the images adjust by width, and when the browser window is more wide than tall (eg. 1024x720) the images adjust like they do now (by height, with the JS).
Is this possible at all? Is there a simple CSS fix to this or do I need to mess more with JS?
Thanks in advance!
You could also get the aspect in javascript on a regular basis and then add a class to the body object that would specify if it was 4:3, widescreen, or portrait. Then make it run on an interval in case the window changes size.
Example
CSS
.43 img { width: auto; }
.widescreen img { width: 100%; }
.portrait img { height: 100%; }
JavaScript
var getAspect = function(){
var h = window.innerHeight;
var w = window.innerWidth;
var aspect = w / h;
var 43 = 4 / 3;
var cssClass = "";
if (aspect > 43) {
cssClass = "widescreen";
}
else if (aspect === 43) {
cssClass = "43";
}
else {
cssClass = "portrait";
}
$("body").addClass(cssClass); // Using jQuery here, but it can be done without it
};
var checkAspect = setInterval(getAspect, 2000);
I would suggest getting the aspect ratio first in javascript. Use window.innerHeight and windows.innerWidth, and make the necessary division. Then, make this a condition. When the screen in wider than its height, set the image in css to width: 100%. Otherwise, set height: 100%.