All geek questions in one place

Change the JavaScript code for the page if the user resizes it

1. Summary

I use media queries for CSS and JavaScript code for PC and mobile devices on my site. If the PC user resizes the page size of my site, this width of the active window will be <60rem, CSS to refresh the page, but the JavaScript code does not refresh → the page has errors. I do not find what to do, that JavaScript will be updated in the form of requests in CSS format.

2. Settings

CSS JavaScript , .

3.

( ) → ( , Super+Left_Arrow Super+Right_Arrow Windows Aero Snap). < 60rem.

4.

CSS JavaScript .

5.

CSS, JavaScript . < 60rem, .

< 60rem , .

6.

  • MatchMedia.js,

  • -:

    // media query event handler
if (matchMedia) {
  var mq = window.matchMedia("(min-width: 500px)");
  mq.addListener(WidthChange);
  WidthChange(mq);
}

// media query change
function WidthChange(mq) {
  if (mq.matches) {
    // window width is at least 500px
  } else {
    // window width is less than 500px
  }

}

    - https://www.pastery.net/uxkvma/.

  • : Super+Left_Arrow Super+Right_Arrow, . , Ctrl+Left_Arrow Ctrl+Right_Arrow:

    $(document).keydown(function(e) {
    if (e.keyCode == 37 && e.ctrlKey || e.keyCode == 39 && e.ctrlKey){
    window.location.reload();
    }
});

    ctrlKey metaKey, .

  • window.location.reload(), :

    window.addEventListener('resize', function(event) {
  clearTimeout(resizeTimeout);
  var resizeTimeout = setTimeout(function(){
    window.location.reload();
  }, 1500);
});

    , , , Ctrl+F , .

7.

  • , , , . .
+4
4

window.resize

javascript

(function() {

window.addEventListener("resize", myFunction);

function myFunction() {
    var w = window.outerWidth;
    var h = window.outerHeight;
    var txt = "Window size: width=" + w + ", height=" + h;
    var img = document.querySelector("img");
    var p   = document.querySelector("p[id=size]");    
    
    p.style.float = "right"; // DOM CSS    
    p.innerHTML   = txt; // DOM HTML
    
    if (w > 500) { 
      img.setAttribute("src", "https://www.enfa.co.id/sites/indonesia/files/inline-images/article/si-kecil-belajar-apa-dari-permainan-cilukba_0.jpg");  
      
      // My JavaScript for PC
      anotherFunction("lightgrey");
 
    } else { 
      img.setAttribute("src", "https://pbs.twimg.com/profile_images/574971671183912961/RJ8uis5w.jpeg");
      
      // My JavaScript for mobile devices      
      anotherFunction("yellow");
 
    }    
}

function anotherFunction(color) {
    var p   = document.querySelector("p[id=size]");

    p.style.backgroundColor = color; // DOM CSS    
}

})(); //self executing function
<body> 
  <p id="size">Please click "Full page"</p>
  <p>Please resize the browser</p>
  
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqLQwPshtQVlcV5b9V26btY1zPlX-Egb3Tlnj9T2LNc3jNNPffhQ" />
</body>

event_onresize
innerWidth
css_selectors

+1

jquery? ( js).

-

if($(window).width() >= '60rem') {

     //do one js code

}else{

     //do another js code

}
0

, window.onload - .

, - :

var deregisterScripts = function() {
   // remove scripts.
}
var initScripts = function() {
    deregisterScripts();
    if (window.matchMedia("(min-width: 60rem)").matches) {
        initJavaScriptDesktop();
    } else {
        initJavaScriptMobile();
    }

};
window.onload = initScripts;
window.onresize = initScripts;

init .

, , , .

0

MVC (Model-View-Controller)?

, . HTML, CSS javascript. , "" "". URL,

http: //...../Home/Index

Then the Index action will be executed in the HomeController (this controller works on the server side). In this index action method, we will check the resolution. for instance

if(resolution==300)
then return Full
else
return resized
0
source

Source: https://habr.com/ru/post/1676452/

More articles:


All Articles