Can this work for specific layouts?
I only want this to happen for my mobile site, can that be done?
Thanks!
It’s a bit more complicated to do this with only one layout, but we are working on something that should make this much easier. Hopefully it will make it into 3.5, but I can’t promise for sure yet.
The relative distance is not correct and you can't drag the object from A to B, in some cases B is in a wrong position
Thanks for the help @stephen
I made a simple project with an element with the "Control element position" applied to the red circle.
if the window size is the same of the hype project ( in my example 1024x768) I can drag the element correctly. if the window is less or bigger than the original size I can't drag the element correctly.
thanks again.
Thanks for the sample project! Unfortunately I don’t have a workaround at the moment, but this is something we will consider as we add scaling natively to Hype.
Thanks @stephen. The thing about size is that i have 4 scenes, each with a video, and this increases the load time since it is one big document to load. The user navigates to every scene trough buttons on a house - and navigates back to this house from each scene.
In order to decrease the loadtime, I’m thinking about splitting the scenes up into documents, so the buttons just points to a new url on the site where the scene loads.
But is there a way to make the same smooth transition from thw function “jump to scene” -“top down”?
Thanks in advance.
Jacob
I posted a way of getting notified with the layout name.
I am unable to test this at the mo. But I am wondering if this can be used with your code as @wadhi wants. By posting the notification into a global var.
And using it in and if clause that surrounds your code in the head.
This does depend on sequence of events I know...
2 Likes
@MarkHunte thats a really good idea. I think you could actually use On Layout Load and On Layout Unload to selectively apply/remove the transform on the hype container and set/unset the window.resize function.
There isn’t an easy way to get our animated scene transitions when loading a new url, but if you just want to use an action to jump to a different page you can use the Go to URL… action.
Ta.
Yep. I had put your code in the javascript that got called by the behaviours in the Layout Load. (The behaviours never got called on document load that I called see)
window.deviceName = event.customBehaviorName;
console.log("JS " + event.type);
hypeDocument.getElementById("device").innerHTML = event.customBehaviorName;
if (isScalePossible()){
if (window.deviceName == "iPhone Landscape" ){
console.log("js " + window.deviceName);
window.myHypeContainerId = hypeDocument.documentId();
$('#' + window.myHypeContainerId).css({
'-moz-transform-origin': '0% 0%',
'-webkit-transform-origin': '0% 0%',
'-ms-transform-origin': '0% 0%',
'-o-transform-origin': '0% 0%',
'transform-origin': '0% 0%',
margin: 0
});
scaleSite();
$(window).resize(scaleSite);
}
return true;
}
function scaleSite()
{
var hypeContainer = $('#' + window.myHypeContainerId);
var containerWidth = hypeContainer.width();
var containerHeight = hypeContainer.height();
var parentWidth = hypeContainer.parent().width();
var parentHeight = hypeContainer.parent().height();
var scaleWidth = parentWidth / containerWidth;
var scaleHeight = parentHeight / containerHeight;
var scale = Math.min(scaleWidth, scaleHeight);
var left = (containerWidth * scale < parentWidth) ? ((parentWidth - (containerWidth * scale)) / 2) + 'px' : '0px';
var top = (containerHeight * scale < parentHeight) ? ((parentHeight - (containerHeight * scale)) / 2) + 'px' : '0px' ;
hypeContainer.css({
"-moz-transform" : "scale("+scale+")",
"-webkit-transform" : "scale("+scale+")",
"-ms-transform" : "scale("+scale+")",
"-o-transform" : "scale("+scale+")",
"transform" : "scale("+scale+")",
"left" : left,
"top" : top
});
}
function isScalePossible()
{
can = 'MozTransform' in document.body.style;
if(!can) can = 'webkitTransform' in document.body.style;
if(!can) can = 'msTransform' in document.body.style;
if(!can) can = 'OTransform' in document.body.style;
if(!can) can = 'transform' in document.body.style;
if(!can) can = 'Transform' in document.body.style;
return can;
}
Works to an extent but I am not sure 100% how well, as my layout set up is very basic. Also I think it needs something else to work with the trigger… Orientation changes on the Mobile did not re trigger it for me, but as I said it may be my basic setup.
You maybe able to set it right and see what I am missing
thanks for your time Stephen
This could be a huge improvement, a final solution for the responsive behaviour.
I've found an interesting discussion about the problem in order to keep the element in that particular position ( in any window size) during the dragging.
regards
Could anyone describe how to get this to work within an iFrame? I see that @roddy147 was able to do it.
I have a lot of things to resize and this would help a great deal.
thank you!
Matt
Ok, I’ve gotten it to work in an iframe by using the process described here:
It works perfectly in a browser but in iOS it does not resize the Hype material small enough. Some of it is still cut off.
Any ideas why??
Thanks!
For the last month this has been working perfectly for me! I have hype content embedded in iFrames.
Suddenly it stop working on iOS but still works perfectly in browsers.
Any idea why this might have happened?
Thank you!
Very nice ! Thank you very much !!
Does it correspond to upgrading to iOS9? Can you send a link / files?
So… what if you only want the Width to scale and not the height?
i’d like to know how to scale with the height !
i know someone whos has a computer with a 13’ screen. She doesn’t see the bottom of my animation…
Thanks
@gthroop: To scale the Width only, change this line:
var scale = Math.min(scaleWidth, scaleHeight);
to:
var scale = scaleWidth;
scale-width-only.zip (11.7 KB)
@BirdyHy: To scale based on the Height only, change the line to:
var scale = scaleHeight;
scale-height-only.zip (11.8 KB)
Thanks a lot
thanks a lot
Le Mercredi 2 décembre 2015 16h57, Daniel <support+forums@tumult.com> a écrit :
| | Daniel Team Tumult
December 2 |
| @gthroop: To scale the Width only, change this line:var scale = Math.min(scaleWidth, scaleHeight);to: var scale = scaleWidth;scale-width-only.zip (11.7 KB)@BirdyHy: To scale based on the Height only, change the line to: var scale = scaleHeight;scale-height-only.zip (11.8 KB) |
To respond, reply to this email or visit Proportionally scaling a Tumult Hype document based on the browser width in your browser.