MyBB Community Forums

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/...ssibility/

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>

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

MuslimBB

MuslimBB