Checking the viewport size with <<if>>

Authoring Twine
1

Twine Version: 2.3.14
Story Format: Sugarcube

Hi,
Basically i need to create a “if” statement that can check the user viewport and do A or B depending that viewport value. If viewport width is above 1440px, do A. Else do B.

Media Queries will not help me for this and i already using it. The problem behind why i need to check the viewport of the player is around different map coordinates on different image sizes, specifically two, declared in Media Queries.
Is that possible? JavaScript maybe? If yes, any examples?
Thank you.

2
3

If you’re using an imagemap, then there’s a library to automatically recalculate the coordinates as the viewport dimensions change so you don’t have to worry about it.

After adding the above library to your Story JavaScript, add the following code after it:

$(document).on(':passageend', function () {
	$('map').imageMapResize();
});
1 Like
4

I added the following in to my Java Script passage on Twine.

/* Viewport Image Map Ajustment Start */

/*! Image Map Resizer (imageMapResizer.min.js ) - v1.0.10 - 2019-04-10
 *  Desc: Resize HTML imageMap to scaled image.
 *  Copyright: (c) 2019 David J. Bradshaw - dave@bradshaw.net
 *  License: MIT
 */

!function(){"use strict";function r(){function e(){var r={width:u.width/u.naturalWidth,height:u.height/u.naturalHeight},a={width:parseInt(window.getComputedStyle(u,null).getPropertyValue("padding-left"),10),height:parseInt(window.getComputedStyle(u,null).getPropertyValue("padding-top"),10)};i.forEach(function(e,t){var n=0;o[t].coords=e.split(",").map(function(e){var t=1==(n=1-n)?"width":"height";return a[t]+Math.floor(Number(e)*r[t])}).join(",")})}function t(e){return e.coords.replace(/ *, */g,",").replace(/ +/g,",")}function n(){clearTimeout(d),d=setTimeout(e,250)}function r(e){return document.querySelector('img[usemap="'+e+'"]')}var a=this,o=null,i=null,u=null,d=null;"function"!=typeof a._resize?(o=a.getElementsByTagName("area"),i=Array.prototype.map.call(o,t),u=r("#"+a.name)||r(a.name),a._resize=e,u.addEventListener("load",e,!1),window.addEventListener("focus",e,!1),window.addEventListener("resize",n,!1),window.addEventListener("readystatechange",e,!1),document.addEventListener("fullscreenchange",e,!1),u.width===u.naturalWidth&&u.height===u.naturalHeight||e()):a._resize()}function e(){function t(e){e&&(!function(e){if(!e.tagName)throw new TypeError("Object is not a valid DOM element");if("MAP"!==e.tagName.toUpperCase())throw new TypeError("Expected <MAP> tag, found <"+e.tagName+">.")}(e),r.call(e),n.push(e))}var n;return function(e){switch(n=[],typeof e){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(e||"map"),t);break;case"object":t(e);break;default:throw new TypeError("Unexpected data type ("+typeof e+").")}return n}}"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&"object"==typeof module.exports?module.exports=e():window.imageMapResize=e(),"jQuery"in window&&(window.jQuery.fn.imageMapResize=function(){return this.filter("map").each(r).end()})}();
//# sourceMappingURL=imageMapResizer.map

$(document).on(':passageend', function () {
	$('map').imageMapResize();
});

/* Viewport Image Map Ajustment End */

But, my coordinates stopped working. Now, i can’t click on the image and go to another passage. Idk what i did wrong. It was working before pasting the entire code block.

5

I just noticed another thing. Maybe this code is not working anymore for whatever reason.
In the link you gently suggested with all the library and etc, comes with an example shown here below:

Example

But if we enter to see his demo, it’s messed up.

6

I got help via Discord, with {G𝖜𝖊𝖓[:heart:].T𝖆𝖘𝖙𝖎𝖈}.
Basically it was as simple as:

<<if window.innerWidth > 1440>>

/* Any coordinates you want */

<</if>>

Since he is not here, I will mark my own answer as a solution.