[2.0.11] Prevent Any Layout From Being Broken

The cleanup is complete. This forum is now read only.

Rating:

Excellent!
32
73%
Very Good
9
20%
Good
0
No votes
Fair
1
2%
Poor
2
5%
 
Total votes: 44

Extensions Robot
Extensions Robot
Extensions Robot
Posts: 26352
Joined: Sat Aug 16, 2003 7:36 am

[2.0.11] Prevent Any Layout From Being Broken

Postby Extensions Robot » Mon Feb 14, 2005 8:37 am

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
Last edited by Extensions Robot on Mon Apr 30, 2007 12:29 am, edited 1 time in total.
(this is a non-active account manager for the phpBB Extensions Team)

User avatar
wGEric
Former Team Member
Posts: 8805
Joined: Sun Oct 13, 2002 3:01 am
Location: Friday
Name: Eric Faerber
Contact:

Postby wGEric » Sat Feb 19, 2005 6:37 pm

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.
Eric

spooky2280
Registered User
Posts: 142
Joined: Tue Jul 20, 2004 8:48 pm

Postby spooky2280 » Sat Feb 19, 2005 7:22 pm

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.
Last edited by spooky2280 on Thu Sep 29, 2005 11:38 pm, edited 7 times in total.

reddog
Registered User
Posts: 32
Joined: Wed Jul 21, 2004 3:51 pm
Location: France ^^
Contact:

Postby reddog » Sun Feb 20, 2005 2:47 pm

I love your work spooky2280 :D

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
Registered User
Posts: 142
Joined: Tue Jul 20, 2004 8:48 pm

Postby spooky2280 » Sun Feb 20, 2005 9:47 pm

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!

User avatar
webmacster87
Former Team Member
Posts: 3758
Joined: Fri Jun 11, 2004 2:30 am
Location: San Mateo, CA
Name: Douglas Bell
Contact:

Postby webmacster87 » Sun Feb 20, 2005 10:02 pm

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
Registered User
Posts: 142
Joined: Tue Jul 20, 2004 8:48 pm

Postby spooky2280 » Sun Feb 20, 2005 10:26 pm

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
Registered User
Posts: 9
Joined: Sun Nov 10, 2002 12:02 pm

Postby MrHussein » Sun Feb 20, 2005 10:57 pm

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...)
Last edited by MrHussein on Thu Jan 18, 2007 11:01 pm, edited 1 time in total.

spooky2280
Registered User
Posts: 142
Joined: Tue Jul 20, 2004 8:48 pm

Postby spooky2280 » Sun Feb 20, 2005 11:02 pm

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

MrHussein
Registered User
Posts: 9
Joined: Sun Nov 10, 2002 12:02 pm

Postby MrHussein » Mon Feb 21, 2005 12:02 am

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 :-(
Last edited by MrHussein on Thu Jan 18, 2007 11:00 pm, edited 1 time in total.

spooky2280
Registered User
Posts: 142
Joined: Tue Jul 20, 2004 8:48 pm

Postby spooky2280 » Mon Feb 21, 2005 12:35 am

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
Registered User
Posts: 9
Joined: Sun Nov 10, 2002 12:02 pm

Postby MrHussein » Mon Feb 21, 2005 12:52 am

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?
Last edited by MrHussein on Thu Jan 18, 2007 11:00 pm, edited 1 time in total.

spooky2280
Registered User
Posts: 142
Joined: Tue Jul 20, 2004 8:48 pm

Postby spooky2280 » Mon Feb 21, 2005 1:29 am

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. :roll:

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
Registered User
Posts: 9
Joined: Sun Nov 10, 2002 12:02 pm

Postby MrHussein » Mon Feb 21, 2005 9:44 am

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. ;)
Last edited by MrHussein on Thu Jan 18, 2007 11:00 pm, edited 1 time in total.

reddog
Registered User
Posts: 32
Joined: Wed Jul 21, 2004 3:51 pm
Location: France ^^
Contact:

Postby reddog » Mon Feb 21, 2005 2:01 pm

spooky2280 wrote: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 ;)


Return to “[2.0.x] MOD Database Cleanup”

Who is online

Users browsing this forum: No registered users and 1 guest