[2.0.11] Prevent Any Layout From Being Broken

[Extensions Robot]

MOD Name: Prevent Any Layout From Being Broken
Author: spooky2280
MOD Description: This MOD uses DHTML to check if posts contain anything that would cause your layout to be larger than its normal width, and if so, it adds an horizontal scrollbar under the message and/or resizes large images to fit into the normal intended width for the layout. See the MOD in action: http://christianfecteau.com/mw3d


MOD Version: 1.0.0

Download File: mw3_1.0.0.zip
mods overview page: View
File Size: 6369 Bytes

Security Score: 0

[wGEric]

MOD Validated/Released

Notes:
This MOD uses DHTML to resize posts if they are bigger than the width of the page making it so it doesn't stretch out your page.

[spooky2280]

I love DOM scripting and I'm really proud of this MOD because I've worked hard on the JS file which is the core of the MOD.

The challenge was to make a MOD that would work with any template, without any configuration at all from the admin. So to achieve this, I coded a MOD that doesn't require editing of tpl and css files. Nothing in the "templates" folder is modified. You can add or delete styles for your board, and it doesn't affect the MOD.

Whatever is the width of the layout (fixed, full-screen), whatever is the screen resolution (800*600, 1024*768, 1280*1024, etc), posts and images within posts are always resized in order to fill as much space as possible wihtout stretching the layout at all, and without the admin having to configure anything.

[reddog]

I love your work spooky2280

Resize Posted Images Based on Max Width : the only one MOD which does not slow page loading

Resize Avatars Based on Max Width and Height : plainly excellent.

and this MOD, again an excellent work

Good Work

[spooky2280]

Thank you reddog. I would like to point out that the development of rmw (Resize Posted Images Based on Max Width) is over, unless bugs are found. This new MOD here that I call "mw3" does the resizing that rmw is doing. rmw and mw3 are not compatible as far as I can figure it out. Use either one or the other. I didn't test to see if they could work together, because rmw is included as a feature of mw3. With mw3, there is no max width to set for images though, the image is always resized to 90% of the available width. So you'll tell me why didn't you do the same with rmw? Well, it's because mw3 is not as compatible with old browsers as rmw is. For instance, mw3 doesn't work with NN6 and rmw does. And development of mw3 is just beginning. As soon as bugs will be found, I will try and figure out solutions. Enjoy!

[webmacster87]

I looked at your demo, the page looks exactly the same with and without JavaScript on, the page is HUGE and messes up my browser.

[spooky2280]

You have to wait for the page to be loaded completely. I think the image is 717KB.

Which browser do you use?

The MOD works with:
IE5 (for PC)
IE5.5
IE6
NN7+
Opera 7.54+
Firefox1.0+

I bought a Mac mini and the MOD will be tested with Safari and IE5.2 as soon as I get it. Probably next week. If the MOD is buggy with Safari and/or IE5.2, I will release a new version to fix it.

[MrHussein]

Hi,

I'd love to use your mod, because the Demo looks awsome, but unfortunately it doesn't work on my phpBB.

I installed it with EasyMod, everything went fine. When I open a page with oversized text or oversized images nothing happens.

Firefox says: Error: resize_images is not defined
IE: Line: 300 Character: 1 Error: Object expected Code: 0 (in German...)

[spooky2280]

It doesn't look like something hard to fix. Can you keep your demo topics online a few hours?

[MrHussein]

Hi,

thanks for your quick reply.

I'm sorry, I didn't notice, that the topics were in a non public forum, its fixed now.

Edit: I just checked the Pages with Opera and it works. Still doesn't work with FF and IE though

[spooky2280]

The problem doesn't come from my MOD but from the NoseBleed template which has an onload event in the body tag that points to a non-existing function. It's causing a JavaScript error and IE aborts the execution of a function onerror. The function is present originally in the overall_header.tpl of the NoseBleed style:

Code: Select all

<script language="javascript" type="text/javascript"> 
<!-- 
  function resize_images() 
  { 
    for (i = 1; i < document.images.length; i++) 
    { 
      while ( !document.images[i].complete ) 
      { 
        break;
      } 
      if ( document.images[i].width > 550 ) 
      { 
        document.images[i].width = 550; 
      } 
    } 
  } 
//--> 
</script> 

but you probably deleted it by mistake and forgot to remove the onload event from the BODY tag that was calling the function. With my MOD you don't need this resize_images function so open your overall_header.tpl and remove onload="resize_images()" from the opening BODY tag:

Code: Select all

<body bgcolor="#FFFFFF" text="#111111" link="#9F0002" vlink="#9F0002" leftmargin="0" topmargin="0" onload="resize_images()">

Whenever you have a JavaScript error in your pages, you should always fix it even if the page displays fine. Because now you see with my MOD you added more JavaScript to your board and this error that was not stopping anything from working before, got in the way of my MOD which uses the onload event too.

[MrHussein]

Great, now it works. You're right, i deleted the resize_images function, because i wanted to replace it with your mod.

Two questions left:

Firefox shrinks the images but there's plenty of free space left below the image. This doesn't happen on the Demo-page.

There is some unused space right of the image. Why isn't the image extended to the full aviable width?

Edit, third question: On the Demo-page, the scrollbar is located under the user's signature, whereas in my forum it's above. Why?

[spooky2280]

My demo doesn't include the signature with NoseBleed either:
http://www.christianfecteau.com/mw3/vie ... 1&style=15

It's because the signature with NoseBleed is included in a different container than the message. If you want the signature to be included, you will have to change the HTML so that the signature and the message are in the same container, here we're talking about a table's cell (a TD).

As for the gap, you're not the first one to come to me with this problem. It's the HTML of NoseBleed that is... well to be polite I will say not so good.

I'm really tired of fixing bad HTML in styles approved by phpBB. If a team member reads me, please be a little more severe before approving HTML code in submitted styles. You are severe (too much I think) for server-side code, and way too relaxed for client-side code. I'm sorry but it had to be said.

Subza is another example of really bad HTML:
http://www.christianfecteau.com/mw3/vie ... 1&style=17

For NoseBleed:
Remove all the height="100%" from all the TABLE and TD elements in which messages are enclosed, in all the concerned tpl files. It will solve your problem.

It would be interesting to submit all the styles approved by phpBB to the W3C markup validator:
http://lovejoy.w3.org/
I wonder how many would pass the test with less than 10 errors. And there's the CSS validator too:
http://jigsaw.w3.org/css-validator/

I resize the images to 90% of the available width to prevent eventual margins and paddings from some styles, that would cause the image's box to be larger than the image itself, and therefore breaking the layout. If you want the images to use 100% (or 99%, etc.), open mw3.js and go to line 255:

Code: Select all

(mw3_rmw_img.width > Math.floor(((mw3_posts[mw3_i].firstChild).clientWidth * 0.9)) )	)

Replace 0.9 by 0.99 for 99% of the available width. Do this change to line 258 too:

Code: Select all

mw3_rmw_img.style.width = Math.floor(((mw3_posts[mw3_i].firstChild).clientWidth * 0.9)) + 'px';

Whatever percentage you use, make sure you use the same on both lines.

[MrHussein]

Hi,

everything is working fine now.

There was another little glitch: Whenever there is a table with width=100% in the post, e.g. quotes or code, a additional scrollbar appears. I changed everything to 98% and its gone.

btw: The validator shows 43 errors with nosebleed.

[reddog]

Thank you reddog. I would like to point out that the development of rmw (Resize Posted Images Based on Max Width) is over, unless bugs are found. (...) So you'll tell me why didn't you do the same with rmw? Well, it's because mw3 is not as compatible with old browsers as rmw is. For instance, mw3 doesn't work with NN6 and rmw does. And development of mw3 is just beginning. As soon as bugs will be found, I will try and figure out solutions. Enjoy!

Not Bugs found in RMW for me.

MW3 is not compatible with NN6, as Nestcape ? But it's compatible with Mozilla 1.7.5