CODEWITHSUNDEEP
jquerycsssvelte
Santhosh Dhaipule Chandrakanth
Santhosh Dhaipule Chandrakanth

Reputation: 1184

Dynamically detection of screen height and screen width to change the height and width of an image in svelte

I was able to display a div tag only in portrait using the code below as mentioned by corrl in this post response

<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>

Worked as intended

But one of image elements dimension(height and width) needs to reduce in portrait mode when the dimension of the viewport to be more specific is height.viewport <= 133% of width.viewport

enter image description here

I tried to get the viewport height and width using code from Inner and Outer window bindings

<script>
    $: outerWidth = 0
    $: outerHeight = 0
</script>

<svelte:window bind:innerWidth bind:outerWidth bind:innerHeight bind:outerHeight />

Tried using jquery to change the width and height of image based on condition viewport.width*1.33 <= viewport.height

imported jquery as mentioned here

<script lang="ts">
  import jQuery from 'jquery';
  import { onMount } from 'svelte';
  onMount(() => {
    window.jQuery = jQuery;
    
  jQuery(window).resize(function(event){
  console.log(outerWidth*1.33,' ',outerHeight);
  if(outerWidth*1.33 <= outerHeight) {
   jQuery(".imageclass").each(function() {
  jQuery(this).attr("width", "78vw");  jQuery(this).attr("height", "78vw/2.81vh");
  });} 

  });

});
</script>
<svelte:window  bind:outerWidth bind:outerHeight />

I am getting this error

File: /home/Documents/sve/svelteDemo/src/App.svelte 29 | import { MetaTags } from 'svelte-meta-tags'; 30 | import 'svelte-viewport-info'; 31 | import jQuery from 'jquery'; | ^ 32 | import { onMount } from 'svelte'; 33 | import image1v from './assets/image1.png'; at formatError (/home/Documents/sve/svelteDemo/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36769:46) at TransformContext.error (/home/Documents/sve/svelteDemo/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36765:19) at normalizeUrl (/home/Documents/sve/svelteDemo/node_modules/vite/dist/node/chunks/dep-f5552faa.js:73703:26) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async TransformContext.transform (/home/Documents/sve/svelteDemo/node_modules/vite/dist/node/chunks/dep-f5552faa.js:73843:57) at async Object.transform (/home/Documents/sve/svelteDemo/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36985:30) at async doTransform (/home/Documents/sve/svelteDemo/node_modules/vite/dist/node/chunks/dep-f5552faa.js:52060:29)

Don't seem to understand what is going wrong here!

How to make this work? or is there a simple solution for this?

Upvotes: 4

Views: 15496

Answers (1)

Corrl
Corrl

Reputation: 7699

As proposed in the comments you can use bindings inside <svelte:window> to track the size. (Note that the variables are just declared let innerHeight = 0, they don't need $:)
Then you can declare a reactive variable (here the $:) based on the two values which results to true or false based on the condition you're after. For resizing the image you can again use a class and the class: directive so the class is added if the condition is true. (Note that the declaration of the conditional class must come after the basic class inside the <style> tag or stylesheet, so the values get overwritten.)

Here's the REPL

<script>
    let innerWidth = 0
    let innerHeight = 0
    
    $: condition = innerWidth*1.33 <= innerHeight
</script>

<svelte:window bind:innerWidth bind:innerHeight />

<p> Inner Width: {innerWidth} </p>
<p> Inner Height: {innerHeight} </p>
<p> condition: {condition} </p>

<img src="https://svelte.dev/svelte-logo-horizontal.svg" alt=""
         class="image-basic"
         class:image-conditional={condition}
         />

<style>
    .image-basic {
        width: 100vw;
    }
    .image-conditional {
        width: 50vw;
    }

</style>

Upvotes: 11

Related Questions