JSFiddle - React, Tailwind, and code Playground

by QMaster

HTML

<!-- JavaScript -->
<p>
    <strong>JavaScript resize:</strong>
    <span id="jsWidth">0</span>,
    <span id="jsHeight">0</span>
</p>
<br/>

<!-- jQuery -->
<p>
    <strong>jQuery resize:</strong>
    <span id="jqWidth">0</span>,
    <span id="jqHeight">0</span>
</p>

<img id="imgBaseStored" src="http://www.viraapp.com/Home/GetItemThumbnailImage?entityId=003&itemId=100000000000001&iw=240&ih=240" alt="" style="display: inline-block; vertical-align: middle;">
    
<img id="img2" src="http://www.viraapp.com/Images/testImage.png" alt="" style="display: inline-block; vertical-align: middle; width: 200px; height: 100px;">

JavaScript

// JavaScript
function jsUpdateSize(){
    // Get the dimensions of the viewport
    var width = window.innerWidth ||
                document.documentElement.clientWidth ||
                document.body.clientWidth;
    var height = window.innerHeight ||
                 document.documentElement.clientHeight ||
                 document.body.clientHeight;

    document.getElementById('jsWidth').innerHTML = width;
    document.getElementById('jsHeight').innerHTML = height;
};
window.onload = jsUpdateSize;       // When the page first loads
window.onresize = jsUpdateSize;     // When the browser changes size

// jQuery
function jqUpdateSize(){
    // Get the dimensions of the viewport
    var width = $(window).width();
    var height = $(window).height();

    $('#jqWidth').html(width);
    $('#jqHeight').html(height);
    
    if (width > 700)
    {
        $("#imgBaseStored").attr('src', 'http://www.viraapp.com/Home/GetItemThumbnailImage?entityId=003&itemId=100000000000001&iw=240&ih=240');
        $("#img2").attr('src', 'http://www.viraapp.com/Images/testImage.png');        
    }
    else
     {
        $("#imgBaseStored").attr('src', 'http://www.viraapp.com/Home/GetItemThumbnailImage?entityId=003&itemId=100000000000000&iw=240&ih=240');
         $("#img2").attr('src', 'http://www.viraapp.com/Images/OwnerLogo8.png');
    }
};

$(document).ready(jqUpdateSize);    // When the page first loads
$(window).resize(jqUpdateSize);     // When the browser changes size