Zoom MyBB forum to fit viewport on any resolution

[MuslimBB]

So I designed my website and forum with 1024x768 in mind, some users complained that it's tiny because they ran 2xxx x whatever resolution (lol).

I run 1920x1200 myself on my laptop and 1080p on my computers other than office where I also run a ridiculously high resolution.

That being said, web stats reports that 1024x768 is still the defacto resolution being used worldwide up until now...

So the solution? Jquery!

Go into Ungrouped Templates>headerinclude and place this before {$stylesheets}:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>

Then under Header Templates>header add before anything else this:

<script type="text/javascript">
jQuery(window).load(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>

[FBI]

Have you try default many Smartphone resolution (min) which is 800x480

[MuslimBB]

on mobiles it doesn't matter, it shows full width, its only on desktops that this is an issue.

[ElectricShock]

It does on some Android browsers. Besides, scrolling right to read a full sentence is annoying.

[MuslimBB]

I discovered a problem.. it seems to just have started happening and I need help.

In firefox no issues, but in IE and chrome, the viewport popups (such as the quick edit/edit button, one plugin i have when u click on username it shows options for tha tuser such as send email, send pm) these popups dont popup where they should, they popup off screen, down at bottom, etc.. so in case of edit button it appears all the way at bottom.

Someone help me out with this?

For now I made the quickedit not popup so people can edit posts... this is terrible.

The other problem is the profile username click thing plugin... User Quickmenu In Postbit (1.0)

---

This is the code that the quickmenu in postbit 1.0 used in postbit classic template

<div id="profile_{$post['pid']}_popup" class="popup_menu" style="display: none;"><div class="popup_item_container"><table style="text-align: left;"><tr><td ><a href="{$post['profilelink_plain']}"><img src="{$theme['imgdir']}/uqm/profile.png" alt="" title="" /> {$lang->viewprofile}</a></td><td><a href="private.php?action=send&amp;uid={$post['uid']}"><img src="{$theme['imgdir']}/uqm/pm.png" alt="" title="" /> {$lang->sendpm}</a></td></tr><tr><td><a href="search.php?action=finduserthreads&amp;uid={$post['uid']}"><img src="{$theme['imgdir']}/uqm/thread.png" alt="" title="" /> {$lang->viewthreads}</a></td><td><a href="member.php?action=emailuser&amp;uid={$post['uid']}"><img src="{$theme['imgdir']}/uqm/email.png" alt="" title="" /> {$lang->sendemail}</a></td></tr><tr><td><a href="search.php?action=finduser&amp;uid={$post['uid']}"><img src="{$theme['imgdir']}/uqm/post.png" alt="" title="" /> {$lang->viewposts}</a></td><td>{$post['buddy_post']}</td></tr></table></div></div><script type="text/javascript">if(use_xmlhttprequest == "1"){new PopupMenu("profile_{$post['pid']}");}</script>

That lame javascript

[MuslimBB]

Anyways I've long resolved this with this in header template start:

<script type="text/javascript">
jQuery.noConflict();
jQuery(window).load(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>

Works in Chrome, Firefox and IE.

However some users like this, some dislike it. So I'm stuck in a crock. It would be nice if I Could have this so I can have it a user control panel feature to turn on/off this function on page load.