1
3lr0n
How to prevent my layout from been broken
  • 2006/5/2 22:09

  • 3lr0n

  • Not too shy to talk

  • Posts: 167

  • Since: 2004/3/13


Hi.. i have a estatic width layout and have notice that, in the forums, if u paste large phrases without an enter you force the layout to have more pixel width and the images in the header seems to be destroyed with spaces.

i tried to install a phpbb hack that i used into another webpage and works fine but with smarty seems not to work at all.

The hack is a javascript and special tags in the variables that content the data you want to fix to an certain width.

The js code is like this:

/*

 ***************************************************************************
 *                               mw3.js
 *                            -------------------
 *   begin                : Saturday, Jan 19, 2005
 *   copyright            : (c) 2005 by spooky2280 - Christian Fecteau
 *   email                : webmaster@christianfecteau.com
 *
 *   $Id: mw3.js, v 1.0.0 2005/02/14 spooky2280 $
 *
 *
 ***************************************************************************

 ***************************************************************************
 *
 *   This program is free software; you can redistribute it and/or modify
 *   it under the terms of the GNU General Public License as published by
 *   the Free Software Foundation; either version 2 of the License, or
 *   (at your option) any later version.
 *
 ***************************************************************************

   mw3 (Prevent Any Layout From Being Broken) 1.0.0
   A phpBB MOD originally created by Christian Fecteau.
   Credits must be given with my full name (Christian Fecteau)
   and a link to my portfolio: http://portfolio.christianfecteau.com/
   Removal or alteration of this notice is strongly prohibited.

*/

//
// don't change anything below
//

function mw3_viewtopic()
{
    
// let's make sure that there are posts in this page
    
mw3_post document.getElementsByTagName('mwthree');
    if (
mw3_post && mw3_post.length && (mw3_post.length 0))
    {
        
mw3_stop_trying 0;
        
mw3_wait();
    }
}
function 
mw3_wait()
{
    
// we need the clientWidth to be set on TDs or DIVs before running the main function
    
if (mw3_stop_trying 100)
    {
         
// 10 seconds after the page loaded
        
if (mw3_debug) { alert("No clientWidth seems to be available for TDs or DIVs"); }
        return;
    }
    
mw3_stop_trying++;
    
mw3_cw 0;
    
mw3_div document.getElementsByTagName("DIV");
    
mw3_tds document.getElementsByTagName("TD");
    
// we'll check what the document has the more: DIVs or TDs
    
if (mw3_div.length mw3_tds.length)
    {
        for (var 
mw3_i 0mw3_i mw3_tds.lengthmw3_i++)
        {
            if (
mw3_tds[mw3_i].clientWidth)
            {
                
mw3_cw += mw3_tds[mw3_i].clientWidth;
            }
        }
    }
    else
    {
        for (var 
mw3_i 0mw3_i mw3_div.lengthmw3_i++)
        {
            if (
mw3_div[mw3_i].clientWidth)
            {
                
mw3_cw += mw3_div[mw3_i].clientWidth;
            }
        }
    }
    if (
mw3_cw == 0)
    {
        
window.setTimeout(mw3_wait,100);
    }
    else
    {
        
mw3_cw mw3_div mw3_tds null;
        
mw3_go();
    }
}
function 
mw3_go()
{
    
//
    // alright let's start...
    // get containers of posts, store them in array, and do checks for possible MOD failing
    //
    
mw3_posts = [] // this array will hold the containers of the posts whether they're DIVs, TDs, etc.
    
for (var mw3_i 0mw3_i mw3_post.lengthmw3_i++)
    {
        
// crawl up to container
        
var mw3_parent_block mw3_post[mw3_i];
        while (!
mw3_parent_block.clientWidth || (mw3_parent_block.clientWidth == 0))
        {
            
mw3_parent_block mw3_parent_block.parentNode;
            if (
mw3_parent_block == document.body)
            {
                if (
mw3_debug) { alert("We reached the top, the MOD won't work."); }
                return;
            }
            
// Opera returns a clientWidth higher than 0 for inline elements
            // and style.display always returns an empty string unless specified by CSS.
            // For the moment, we'll check only for SPAN elements,
            // but they're could be other inline elements before the block container
            
if (    window.opera &&
                (
mw3_parent_block.nodeName == 'SPAN') &&
                (
mw3_parent_block.style.display != 'block')    )
            {
                
mw3_parent_block mw3_parent_block.parentNode;
            }
        }
        
// we got a container, let's make sure that there is only one post in it
        
var mw3_check mw3_parent_block.getElementsByTagName('mwthree');
        if (!
mw3_check || (mw3_check && (mw3_check.length != 1)))
        {
            if (
mw3_debug) { alert("There is 0 or more than 1 post in the container, the MOD won't work."); }
            return;
        }
        
// this container seems valid, let's store it in array
        
mw3_posts[mw3_i] = mw3_parent_block;
        
// let's double check: is it the same container as the previous one?
        
if (mw3_i 0)
        {
            if (
mw3_posts[mw3_i] == mw3_posts[mw3_i-1])
            {
                if (
mw3_debug) { alert("Same parent twice, the MOD won't work."); }
                return;
            }
        }
    }

    
//
    // Move each post into a new DIV container and the new DIV into the original container
    //
    
for (var mw3_i 0mw3_i mw3_posts.lengthmw3_i++)
    {
        var 
mw3_container document.createElement("DIV");
        
// IE has a better overflow property than the W3C one
        
window.showModelessDialog mw3_container.style.overflowX 'auto' mw3_container.style.overflow 'auto';
        
mw3_container.style.visibility 'hidden';
        
mw3_container.style.width '100px';
        
mw3_container.style.height '100px';
        
// move post into DIV
        
while (mw3_posts[mw3_i].hasChildNodes())
        {
            
mw3_container.appendChild(mw3_posts[mw3_i].firstChild);
        }
        
// put DIV into container
        
mw3_posts[mw3_i].appendChild(mw3_container);
    }
    
// we'll wait till the clientWidth is stable.
    
mw3_cw = []
    
mw3_wait_reflow();
}
function 
mw3_wait_reflow()
{
    for (var 
mw3_i 0mw3_i mw3_posts.lengthmw3_i++)
    {
        
mw3_cw[mw3_i] = mw3_posts[mw3_i].clientWidth;
    }
    
window.setTimeout(mw3_check_cw,100);
}
function 
mw3_check_cw()
{
    for (var 
mw3_i 0mw3_i mw3_posts.lengthmw3_i++)
    {
        if (
mw3_cw[mw3_i] != mw3_posts[mw3_i].clientWidth)
        {
            
window.setTimeout(mw3_wait_reflow,100);
            return;
        }
    }
    
mw3_resize_div();
}
function 
mw3_resize_div()
{
    
//
    // the layout has now its natural width let's check what it is, loop through each post, and resize
    //
    
for (var mw3_i 0mw3_i mw3_posts.lengthmw3_i++)
    {
        
mw3_container mw3_posts[mw3_i].firstChild// mw3_container is the new DIV
        
if (window.showModelessDialog// IE needs a different processing.
        
{
            
mw3_container.style.margin '0% -150% 0% 0%'// IE needs a negative right margin
            // rise up the content of the post so the horizontal scrollbar won't hide its bottom (20px)
            
mw3_container.style.padding '0px 5px 20px 0px';
            
// give to the new DIV the current (and now normal) width of the original container
            
mw3_container.style.width mw3_posts[mw3_i].clientWidth 'px';
        }
        else if (!
window.opera && !document.all// Gecko, Safari, etc.
        
{
            
// rise up the content of the post so the horizontal scrollbar won't hide its bottom (3px)
            
mw3_container.style.padding '0px 0px 3px 0px';
            
// give to the new DIV the current (and now normal) width of the original container
            // Gecko needs a little less than the parent width (* 0.99)
            
mw3_container.style.width = (mw3_posts[mw3_i].clientWidth 0.99) + 'px';
        }
        else 
// Opera only I think
        
{
            
mw3_container.style.padding '0px 0px 3px 0px';
            
mw3_container.style.width mw3_posts[mw3_i].clientWidth 'px';
        }
        
mw3_container.style.height 'auto';
    }
    
mw3_rmw_go();
}
// function to resize images within posts
function mw3_rmw_go()
{
    if (!
window.opera)
    {
        
// let's create a dummy object for the not yet existing popup
        
mw3_rmw_pop = new Object();
        
mw3_rmw_pop.closed true;
        
// we need to close the popup onunload of the page for access permission (browser security)
        
mw3_old_onunload null;
        if (
typeof window.onunload == "function")
        {
            
mw3_old_onunload window.onunload;
        }
        
window.onunload = function()
        {
            
// run the aliens onunload
            
if (mw3_old_onunload)
            {
                
mw3_old_onunload();
                
mw3_old_onunload null;
            }
            if (!
mw3_rmw_pop.closed) { mw3_rmw_pop.close(); }
        }
    }
    
mw3_rmw_pop_options 'top=0,left=0,width=' String(window.screen.width-80) + ',height=' String(window.screen.height-190) + ',scrollbars=1,resizable=1';
    
mw3_loop_i:
    for (var 
mw3_i 0mw3_i mw3_posts.lengthmw3_i++)
    {
        
mw3_rmw_imgs mw3_posts[mw3_i].getElementsByTagName("IMG");
        
mw3_loop_j:
        for (var 
mw3_j 0mw3_j mw3_rmw_imgs.lengthmw3_j++)
        {
            
mw3_rmw_img mw3_rmw_imgs[mw3_j];
            
// do we resize it? Let'see if the image is larger than the DIV width
            
if (    mw3_rmw_img.width &&
                !
isNaN(mw3_rmw_img.width) &&
                (
mw3_posts[mw3_i].firstChild).clientWidth &&
                !
isNaN((mw3_posts[mw3_i].firstChild).clientWidth) &&
                (
mw3_rmw_img.width Math.floor(((mw3_posts[mw3_i].firstChild).clientWidth 0.9)) )    )
            {
                
// yes we do resize...
                
mw3_rmw_img.style.width Math.floor(((mw3_posts[mw3_i].firstChild).clientWidth 0.9)) + 'px';
                
// if we are in the Topic Review iframe, we don't make anything 
                // popable because of iframes security restrictions
                
if (window.topr) { continue mw3_loop_j; }
                
// make the popup onclick
                
if (!window.opera)
                {
                    
mw3_rmw_img.onclick = function()
                    {
                        if (!
mw3_rmw_pop.closed) { mw3_rmw_pop.close(); }
                        
mw3_rmw_pop window.open('about:blank','christianfecteaudotcom',mw3_rmw_pop_options);
                        
mw3_rmw_pop.resizeTo(window.screen.availWidth,window.screen.availHeight);
                        
mw3_rmw_pop.moveTo(0,0);
                        
mw3_rmw_pop.focus();
                        
mw3_rmw_pop.location.href this.src;
                    }
                }
                else
                {
                    
mw3_rmw_img.onclick = function()
                    {
                        
mw3_rmw_pop window.open(this.src,'christianfecteaudotcom',mw3_rmw_pop_options);
                        
mw3_rmw_pop.focus();
                    }
                }
                
document.all mw3_rmw_img.style.cursor 'hand' mw3_rmw_img.style.cursor 'pointer';
                
mw3_rmw_img.title mw3_rmw_img.src;
            }
        }
    }
    
window.setTimeout(mw3_adjust,100);
}
function 
mw3_adjust()
{
    
// some adjustments if overflow was not required for a particular post, so reloop!
    
for (var mw3_i 0mw3_i mw3_posts.lengthmw3_i++)
    {
        
mw3_container mw3_posts[mw3_i].firstChild// mw3_container is the new DIV
        
if (window.showModelessDialog// IE needs a different processing
        
{
            
// if there is no overflow for that post, remove the padding
            
if ((mw3_container.scrollWidth mw3_container.clientWidth) == 0)
            {
                
mw3_container.style.padding '0px 0px 0px 0px';
            }
            else if (!
window.topr)
            {
                
mw3_container.ondblclick = function()
                {
                    if (!
mw3_rmw_pop.closed) { mw3_rmw_pop.close(); }
                    
mw3_rmw_pop window.open('about:blank','christianfecteaudotcom',mw3_rmw_pop_options);
                    
mw3_rmw_pop.resizeTo(window.screen.availWidth,window.screen.availHeight);
                    
mw3_rmw_pop.moveTo(0,0);
                    
mw3_rmw_pop.focus();
                    if (
document.fireEvent)
                    {
                        
mw3_rmw_pop.document.body.innerHTML '+ eval("this.innerHTML.replace(//gi,'')") + '
';
                    }
                    else
                    {
                        
mw3_rmw_pop.document.body.innerHTML 'this.innerHTML '
';
                    }
                }
                
mw3_container.style.cursor 'crosshair';
            }
        }
        else if (!
window.opera && !document.all// Gecko, Safari, etc
        
{
            
// if there is no overflow for that post, set back the overflow to 'visible'
            // because Gecko sometimes puts a useless vertical scrollbar otherwise
            
if ((mw3_container.scrollWidth mw3_container.clientWidth) == 0)
            {
                
mw3_container.style.overflow 'visible';
                
mw3_container.style.padding '0px 0px 0px 0px';
            }
            else if (!
window.topr)
            {
                
mw3_container.ondblclick = function()
                {
                    if (!
mw3_rmw_pop.closed) { mw3_rmw_pop.close(); }
                    
mw3_rmw_pop window.open('about:blank','christianfecteaudotcom',mw3_rmw_pop_options);
                    
mw3_rmw_pop.resizeTo(window.screen.availWidth,window.screen.availHeight);
                    
mw3_rmw_pop.moveTo(0,0);
                    
mw3_rmw_pop.focus();
                    
mw3_this = eval("this.innerHTML.replace(//gi,'')");
                    
window.setTimeout('mw3_rmw_pop.document.body.innerHTML = mw3_this',100);
                }
                
mw3_container.style.cursor 'crosshair';
            }
        }
        else 
// Opera only I think
        
{
            if (
mw3_container.scrollWidth <= mw3_container.clientWidth)
            {
                
mw3_container.style.overflow 'visible';
                
mw3_container.style.padding '0px 0px 0px 0px';
            }
            else if (!
window.topr)
            {
                
mw3_container.ondblclick = function()
                {
                    
mw3_rmw_pop window.open('about:blank','christianfecteaudotcom',mw3_rmw_pop_options);
                    
mw3_rmw_pop.focus();
                    
mw3_rmw_pop.document.open();
                    
mw3_rmw_pop.document.write(eval("this.innerHTML.replace(//gi,'')"));
                    
mw3_rmw_pop.document.close();
                }
                
mw3_container.style.cursor 'crosshair';
            }
        }
        
mw3_container.style.visibility 'visible';
    }
}




// let's check that we can run the MOD and... go!!!
if (    document.getElementsByTagName &&
    
document.createElement &&
    
document.body.clientWidth &&
    (
window.screen.width >= 800)    )
{
    
mw3_debug true// output alerts on error
    
mw3_old_onload null;
    if (
typeof window.onload == "function")
    {
        
mw3_old_onload window.onload;
    }
    
window.onload = function()
    {
        
// run the aliens onload
        
if (mw3_old_onload)
        {
            
mw3_old_onload();
            
mw3_old_onload null;
        }
        
mw3_viewtopic();
    }
}


Then i put this code before the variable that contents the post

<mwthree style="display:none">mwthree>


but nothing happens..


the js catch the mwthree tags and try to set to a given td or div width, mine is like this in template
td colspan="2" class="odd" width="500px">
<
div class="comText">    <mwthree style="display:none">mwthree><{$topic_post.post_text}>div>


any help will be apreciated

ta in advance
Spanish Overclocking Community xoops based site : http://www.overclocking.es

2
3lr0n
Re: How to prevent my layout from been broken
  • 2006/5/3 22:02

  • 3lr0n

  • Not too shy to talk

  • Posts: 167

  • Since: 2004/3/13


fixed!!

IE doesnt seem to broke the layout but FF yes, so i set this css code in the container of the text with long lines and this makes an scrool bar to appear.

overflow:auto
Spanish Overclocking Community xoops based site : http://www.overclocking.es

Login

Who's Online

262 user(s) are online (93 user(s) are browsing Support Forums)


Members: 0


Guests: 262


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Nov 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits