Overall responsive via EQCSS-Polyfil or similar for embedding within Wordpress


(Steve) #1

Add the same methods attained with the EQCSS-Polyfil js as a built in Responsive option/solution.

This other option for responsiveness has proven to be indispensable for many of the end products I’ve worked on lately and having it embed in the Tumult Hype Wordpress Plugin deployment would be awesome.

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.9.0/EQCSS-polyfills.js"></script>


 
  <script type="text/javascript">
  function myCallback(hypeDocument, element, event) {
    if (isScalePossible()){
      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;
  }
  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});
  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;
  }
</script>

#2

Interesting – do you think you could show me how you use this in Wordpress at the moment?

For others checking this out, it looks like this requires jQuery (but could be converted to vanilla JS button) and needs <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> included at the top (for widest support of older browsers).


(Steve) #3

Sure, here is a work in progress WP page that uses the link and script:

I used a shortcode plugin to allow the scripts to be specific to the page so future WP updated would not over-write any added code to the header.php file.


#4

I think something like this function from @h_classen is more what you need, since it automatically adjusts the height of your Hype document when its width is reduced (and gives you scaling at the same time): Creating a Flexible Tumult Hype Document within a DIV with no set 'height'


(Steve) #5

I could not see any appreciable change in that example when applied to my project.

But with further research I found this post that looks to do the same as the EQCSS methods (full project proportional scaling).

Groups are extremely useful in Hype. While I still think Object Masks would be greatly beneficial for curved mask creation, Groups with overflow hidden works great.


(Steve) #6

Actually I am not finding any solution that resizes a Hype presentation in Wordpress and collapses the lower area to an appropriate proportional size.

For instance, here is a simple export using @h_classen script to truncate and interpret proper Height.

Resizing the browser/viewport properly resizes the Hype presentation and the bottom appropriately resizes.

The same presentation uploaded as an OAM with the Hype Animations Wordpress widget fails to display because of the Height attribute of 100% and does not show the presentation.

To test if Bootstrap 4 is responsible, I’ve added Bootstrap to the same simple export, but that works fine also.

Next I tested an upload to a different Wordpress site and IF all elements are in a Group and that Group has is Scaled to 100% and Flexible Layout is scaled in both directions, the presentation is hidden.

More research to find why and what the solution to follow…


(Steve) #7

PROBLEM SOLVED with Hype Wordpress Widget…

We need to add any additional scripts such as @h_classen 's wonderful script that deals with the Height issue, as a separate addition since these are not carried over in the OAM file. Adding the script separately results in a positive solution as shown here.