{"id":52962,"date":"2021-08-09T03:01:34","date_gmt":"2021-08-08T17:01:34","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=52962"},"modified":"2021-08-09T11:49:00","modified_gmt":"2021-08-09T01:49:00","slug":"emoji-in-sector-game-resize-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-in-sector-game-resize-tutorial\/","title":{"rendered":"Emoji in Sector Game Resize Tutorial"},"content":{"rendered":"
\"Keyboard<\/a>

Emoji in Sector Game Resize Tutorial<\/p><\/div>\n

We find the “onresize” event one of the most interesting to code for with web applications. It can be a minor tweak right through to scenarios where it is just too hard not to …<\/p>\n


\nlocation.href=document.URL; \/\/ the onresize coward's way out
\n<\/code><\/p>\n

. And so, onto yesterday’s Emoji in Sector Game Primer Tutorial<\/a> we have a reasonably complex scenario catering for this “web browser window size change via user means” event (logic) … HTML change<\/font> …<\/p>\n


\n<body onload='wwt=window.innerHeight; onl();' onkeypress=\"vslast(event);\" onresize=\"pretwf();\"<\/font>>
\n<\/code><\/p>\n

… using Javascript “onresize” event logic …<\/p>\n


\nfunction pretwf() {
\n myt=null;
\n myz=null;
\n thetds=[];
\n thetdareas=[];
\n \/\/thetdids=[];
\n \/\/theclasses=[];
\n thels=[];
\n thets=[];
\n thegridtdareas=[];
\n thegridtdihs=[];
\n obr=true;
\n document.getElementById('emj').innerHTML='';
\n for (var iij=0; iij<numplayers; iij++) {
\n document.getElementById('t' + iij).style.height='calc(60vh ' + ('- ' + eval(wwt - window.innerHeight)).replace('- -','+ ') + 'px)';
\n }
\n setTimeout(twf, 700);
\n}
\n<\/code><\/p>\n

Adding to our interest (and smug satisfaction, let’s face it)<\/font> is anytime we can involve CSS calc<\/a> and the height vh<\/a> unit.<\/p>\n

Again, feel free to try our changed<\/a> emoji_in_sector.html<\/a>‘s live run<\/a> link.<\/p>\n

\n

\n

Previous relevant Emoji in Sector Game Primer Tutorial<\/a> is shown below.<\/p>\n

\"Emoji<\/a>

Emoji in Sector Game Primer Tutorial<\/p><\/div>\n

We’re continuing on with the “style=position:fixed”<\/i> theme of recent times. We’ve got for you a first draft of a “reactions game” called “Emojis in Section” where up to 5 players are presented with …<\/p>\n