MyBB Community Forums
Resize page (zoom) on load (hopefully helps someone but need some help too) - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Extensions (https://community.mybb.com/forum-201.html)
+--- Forum: Themes (https://community.mybb.com/forum-103.html)
+---- Forum: Theme Support (https://community.mybb.com/forum-10.html)
+---- Thread: Resize page (zoom) on load (hopefully helps someone but need some help too) (/thread-137664.html)



Resize page (zoom) on load (hopefully helps someone but need some help too) - MuslimBB - 2013-04-13

Basically on load this should resize the body to fit the screen viewport. I designed a site for 1024x768 but some users have humangous screens. To make up for that instead of telling the user to zoom in the site can do that automatically via this, but it's not working for me when i try to put in either index and head part or in the header template. A little help? I know this works if i try to put in the firefox scratchpad (javascript tester) and works on my wordpress site header too... although i wpenque the jquery not like the bellow. Help me out?

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {

var currentWidth = $(document.body).width();
    var targetWidth = 1100; // experiment for your self
    var scrollWidth = 10; // need to make it dynamic
    // if the screen is not bigger than the target, then don't mess with zooming
    if (currentWidth > targetWidth) {
      if (typeof document.body.style.zoom != "undefined")
        document.body.style.zoom = currentWidth / targetWidth;
      else if (typeof document.body.style.MozTransform != "undefined") {
        document.body.style.MozTransformOrigin = "left top";
        document.body.style.MozTransform = 'scale(' + currentWidth / targetWidth + ')';
      }
      else if (typeof document.body.style.WebkitTransform != "undefined")
        document.body.style.WebkitTransform = 'scale(' + currentWidth / targetWidth + ')';

      $(document.body).width(targetWidth - scrollWidth);
   }
});
</script>

Source: http://clarkli.wordpress.com/2011/10/10/auto-zooming-browser-for-better-accessibility/

I tried this in include header too and no luck....

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function($)
{
jQuery(document).ready(function(){
    var currentWidth = jQuery(document.body).width();
    var targetWidth = 1050; // experiment for your self
    var scrollWidth = 10; // need to make it dynamic
    // if the screen is not bigger than the target, then don't mess with zooming
    if (currentWidth > targetWidth) {
      if (typeof document.body.style.zoom != "undefined")
        document.body.style.zoom = currentWidth / targetWidth;
      else if (typeof document.body.style.MozTransform != "undefined") {
        document.body.style.MozTransformOrigin = "left top";
        document.body.style.MozTransform = 'scale(' + currentWidth / targetWidth + ')';
      }
      else if (typeof document.body.style.WebkitTransform != "undefined")
        document.body.style.WebkitTransform = 'scale(' + currentWidth / targetWidth + ')';

      jQuery(document.body).width(targetWidth - scrollWidth);
   }
});
</script>



RE: Resize page (zoom) on load (hopefully helps someone but need some help too) - MuslimBB - 2013-04-20

Anyone? Why is this jquery failing to initialize for me? It works when tested in firefox web dev scratchpad...