How to choose from different Hype index (desktop / ipad-mobile)

1

I have a "TIMELINE" project, for which I have created two distinct Hype documents:

  • "desktop" document (with mouse wheel)
  • "iPad / mobile" document (this document has two layouts, one for iPad and one for mobile)

There is a way to:

  • recall from the PC only the "TIMELINE" "desktop" document, and
  • recall from iPad and mobile only the “iPad / mobile” document of “TIMELINE”?
2 
<script>

function isTouchDevice() {
  return (
    !!(typeof window !== 'undefined' &&
      ('ontouchstart' in window ||
        (window.DocumentTouch &&
          typeof document !== 'undefined' &&
          document instanceof window.DocumentTouch))) ||
    !!(typeof navigator !== 'undefined' &&
      (navigator.maxTouchPoints || navigator.msMaxTouchPoints))
  );
}

if(isTouchDevice()){
alert('mobile')
//window.location.href = "";
}else{
//window.location.href = "";
alert('NOT mobile')
}
</script>

if i got you right :slight_smile: there'll be a thousand other solutions ... depends on your needs ... it's bveen a bit unclear :slight_smile:

///////

https://www.w3schools.com/Jsref/prop_loc_href.asp

1 Like
3

Hello @h_classen,
thanks for the suggestion :+1:

Do I need to insert this script in the HTML header of both Hype documents?

In the code, do I need to replace "window.DocumentTouch" with the name of my mobile file, for example "window.TimelineMobile"?

4

well it's a basic detectionsnippet which lets it up to you how to progress.

for example you could create a third htmlfile that includes the script and does a redirection ...
window.location.href = "path2yourMobileHTMLFile.html" or vise versa

1 Like
5

Since I can't find a solution, I thought about creating an ipad document with iPhone layout only (320px), thus eliminating the 2388x1668px layout.

At this point I would like the redirect index to say something like "up to 320px width: loads the iPhone index. Over 320px width: loads the Desktop index".

Is there any way to achieve this behavior?

6

Are you aware of Responsive Layouts that are able to change based on a breakpoint width? If so, I'd be curious why you want to avoid them?

7

Good morning @jonathan

simply because in the document that I have set, inexplicably, they do not work.

Despite having set up a document with two layouts, a custom layout of 2388x1668 px (breakpoint: 1024 px) and the preset iPhone layout of 320 px, on iPad horizontal I don't see the custom layout of 2388x1668 px as I would expect, but I see the layout iPhone.

In the HTML header of the double layout document I added the script for automatic adaptation to the browser:

<script>
function layoutRequest(hypeDocument, element, event) {
var hypeDocEl = document.getElementById(hypeDocument.documentId());
//returns [{name: xxx; height:xxx; width:xxx; breakpoint: xxx}, ...]
var _layouts = 
hypeDocument.layoutsForSceneNamed(hypeDocument.currentSceneName());
//current Layoutname
var layoutName = hypeDocument.currentLayoutName();
//get data for current Layout -> {name: xxx; height:xxx; width:xxx; breakpoint: xxx}
var res = null;
for (var i = 0; i < _layouts.length; i++) {
var Obj = _layouts[i];
if (Obj.name === layoutName) {
res = Obj;
break;
}
}
if (res) {
var wWidth =  window.innerWidth ||  (window.document.documentElement.clientWidth || 
window.document.body.clientWidth);
var baseLayoutWidth = res['width'];
var scaleFactor = (wWidth/baseLayoutWidth);
hypeDocEl.style.position = 'absolute';
hypeDocEl.style.transformOrigin = "left top";
hypeDocEl.style.WebkitTransformOrigin = "left top";
hypeDocEl.style.msTransformOrigin = "left top";
hypeDocEl.style.transform = "scaleX(" + scaleFactor +  ") scaleY(" + scaleFactor + ")";
hypeDocEl.style.WebkitTransform = "scaleX(" + scaleFactor +  ") scaleY(" + scaleFactor + 
")";
hypeDocEl.style.msTransform = "scaleX(" + scaleFactor +  ") scaleY(" + scaleFactor + ")";
}
hypeDocument.relayoutIfNecessary()
return false
}
if ("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({
"type": "HypeLayoutRequest",
"callback": layoutRequest
}); 
</script>

to make sure that the custom layout 2388x1668 px would be shown adapted on the iPad device.

8

the script above does not return any layout to show, but scales the actual layout proportionally regarding a windowwidth ... so it does not help distinguishing between two layouts ... just to clearify.

///////////////

it'd would be good practice to offer a link and/or hypefile.

9

this is clear to me. I specified that I used this script in the html header of the document to understand if it could conflict with the redirect index script.

10

The solution I would prefer would be to have the redirect index say: "check the width of the scene (or page, or screen ...) if it is less than or equal to 320 px, load the iPhone index, vice versa, load the Desktop index ".

I'm trying to write it (in the dark, because I don't know anything about Javascript code):

<!DOCTYPE html>
<html>

<script>
function checkScreenWidth() {
	if ($(window).width() ≤ 320) {
	window.location.href = "tec-500k-iphone.html";
	}

	else {
	window.location.href = "tec-500k-desktop.html";
	}
}
</script>

</html>

Any corrections or suggestions are of great help.

11

Hype's got a functionality mentioned by jonathan to do just this... out of the box.

please provide a samplefile and someone may be able to help ...

3 Likes