Resizing a div

**James** · August 1st, 2011, 01:44 PM

I'm working on a website and I'm running into a problem. The code is pretty messy (apologies for this).
It's a conglomerate of html, css and javascript.

Basically here is the problem I'm running in to.
I have an iframe setup that auto adjusts to the size of the content. This was a bitch and a half to get working, but I came across a jquery source code that I implemented to get it working with cross browser support.

This works fine, however the problem I'm running into is that when this auto resizes the background for the text, I would also like it to resize the body background so that it doesn't cover up the image.

Easiest way to explain this is if I linked you to the site. Here it is: http://x-null.net/pacrimson/test8

If you toggle between the "Home" & "About Us" links you will see what I mean.

When you click on "About Us", the content fills up and the white background adjusts proportionally to the amount of content (which is what it is supposed to do), however as I mentioned above, it now covers up a part of the city.

If you look at my source code (should be self explanatory (right click view source)), you will see I have a part of a div like this:

Code:

    #bg 
    {
            background-color: #000000;
            position:fixed; 
            top:25%; 
            left:0; 
            width:100%; 
            height:100%;
            background-repeat:repeat-y;
    }

and in the html this

Code:

    <table>
        <tr>
            <td>
                <div id="bg">
                    <img align="bottom" src="./images/background4.png" width="100%" height="75%">
                </div>
            </td>
        </tr>
    </table>

background.png --> this is my background of the city with the gradient sky, however as you can see the height only fills up 75% of the screen. The rest of the 25% is the solid black background as noted in the div. This should be tiled on the y axis.

Now in theory, I would say that I would do something like this:
Take the current height of the black bg and add the height of the iframe expansion.
So if the iframe expanded say 200px, then I would want the black bg to expand an additional 200px as well

The objective is to expand it proportionally to the iframe so that the city is not covered.

I want to make sure I explain this as best as possible so that anyone willing to help out knows exactly what I'm trying to accomplish.

Also, I would like to to be cross platform compatible because what I've been seeing is only specific browser support and that would obviously defeat the purpose.

Thanks in advance.

**James** · August 1st, 2011, 02:33 PM

Here is the full source

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>PA Crimson Fire Risk Services Inc.</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="js/ddsmoothmenu.js"></script> 
<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/jquery.iframe-auto-height.plugin.js"></script>

<link rel="stylesheet" type="text/css" href="styles/ddsmoothmenu.css" />

<script type="text/javascript">

    ddsmoothmenu.init({
    mainmenuid: "smoothmenu1", //menu DIV id
    orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
    classname: 'ddsmoothmenu', //class added to menu's outer DIV
    //customtheme: ["#1c5a80", "#18374a"],
    contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    })

</script>

<SCRIPT LANGUAGE="JavaScript">

function rearrange()
{
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use 
    // window.innerWidth and window.innerHeight

    var windowHeight;

    if (typeof window.innerWidth != 'undefined')
    {
        windowHeight = window.innerHeight;
    }
    // IE6 in standards compliant mode (i.e. with a valid doctype as the first 
    // line in the document)
    else if (typeof document.documentElement != 'undefined'
            && typeof document.documentElement.clientWidth != 'undefined' 
            && document.documentElement.clientWidth != 0)
    {
        windowHeight = document.documentElement.clientHeight;
    }
    // older versions of IE
    else
    {
        windowHeight = document.getElementsByTagName('body')[0].clientHeight;
    }

    document.getElementById("bgg").height = windowHeight - 300 + "px";
}
</script>

<style type="text/css">

    /* pushes the page to the full capacity of the viewing area */
    html 
    {
            height:100%;
    }
    
    body 
    {
            background-color: #000000;
            height:100%; 
            width:100%;
            margin:0; 
            padding:0;
            font: normal 18px "Times New Roman",Georgia,Serif;
            color:#000000;
            line-height: 100%;

    }

    /* prepares the background image to full capacity of the viewing area */
    #bg 
    {
            background-color: #000000;
            position:fixed; 
            top:25%; 
            left:0; 
            width:100%; 
            height:100%;
            background-repeat:repeat-y;
    }

    #bgg
    {
            background-color: #000000;
            position:absolute; 
            top:25%; 
            left:0; 
            width:auto; 
            height:auto;
            background-repeat:repeat-y;
    }

    #whiteBG
    {
            background-color: #ffffff;
            position:fixed; 
            top:0; 
            left:12%; 
            width:75%; 
            height:65%;
            background-repeat:repeat-y;
    }

    #whiteIframe
    {
            background-color: #ffffff;
            position:fixed; 
            top:20%; 
            left:12%; 
            width:75%; 
            height:40%;
            background-repeat:repeat-y;
    }

    /* places the content ontop of the background image */
    #content 
    {
            position:relative; 
            z-index:1;
    }

    #logo
    {
        position:relative; 
        left: 1%;
        top: 1%;
    }

    #navTile
    {
        position:relative; 
        background-color: #000000;
        background-repeat:repeat-x;
        left: 0;
        top: 2%;
        height: 33px;
        width: 100%;
    }

    #Offers
    {
        margin-left: 30px;
        margin-top: 100px;
        font: bold 24px "Times New Roman",Georgia,Serif;
        color: #ffffff;
        text-align: left;
    }

    #OfferLinks
    {
        font: normal 18px "Times New Roman",Georgia,Serif;
        color: #ffffff;
        margin-left: 15px;
        text-align: left;
        text-decoration: none
    }

    #divName {
     border:solid 1px #000;
     text-align:center;
 }

</style>
</head>

<body onload="rearrange()">
</script>

<div id="bgg" class="bgg" height="100%" onload="rearrange()">
    <table>
        <tr>
            <td>
                <div id="bg" class="bg" onload="rearrange()">
                    <img align="bottom" src="./images/background4.png" width="100%" height="75%">
                </div>
            </td>
        </tr>
    </table>

    <div id="content">

        <table align="center" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <!-- Left side -->
                    <img src="images/spacer.png" width="144" height="337" alt="">
                </td>
                    <!-- Main Content Here -->
                <td>
                    <div id="whiteBG">

                        <!-- Logo -->

                        <div id="logo">
                            <img src="images/logo2.png">
                        </div>
                        
                        <!-- Navigation -->
                        <div id="navTile">
                            <table align="center">
                                <tr>
                                    <td>                
                                        <div id="smoothmenu1" class="ddsmoothmenu">
                                            <ul>
                                                <li><a target="myiframe" href="main.html">HOME</a></li>
                                                <!--<li><a target="myiframe" href="about.html">ABOUT US</a></li>-->
                                                <li><a href="about.html" onload="rearrange()" target="myiframe">ABOUT US</a></li>

                                                <li><a href="#">PRODUCTS & SERVICES</a>
                                                      <ul>
                                                          <li><a href="#">Sub Item 1.1</a></li>
                                                          <li><a href="#">Sub Item 1.2</a></li>
                                                          <li><a href="#">Sub Item 1.3</a></li>
                                                          <li><a href="#">Sub Item 1.4</a></li>
                                                          <li><a href="#">Sub Item 1.1</a></li>
                                                          <li><a href="#">Sub Item 1.2</a></li>
                                                          <li><a href="#">Sub Item 1.3</a></li>
                                                          <li><a href="#">Sub Item 1.4</a></li>
                                                          <li><a href="#">Sub Item 1.5</a></li>
                                                      </ul>
                                                </li>
                                                <li><a target="myiframe" href="area.html">AREA OF SERVICE</a></li>
                                                <li><a target="myiframe" href="customer.html">CUSTOMER PORTAL</a></li>
                                                <li><a target="myiframe" href="contact.html">CONTACT US</a></li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>                    

                    <!-- iframe Stuff -->
                            <table id="whiteIframe" width="100%" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                    <!--
                                        <iframe id="blah" name="blah" src="main.html" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>

                                        <iframe width="100%" id="myFrame" src="aliens.htm" scrolling="no" frameborder="0" onload="sizeFrame('myFrame')"></iframe>
                                    
                                        <IFRAME id="myiframe" name="myiframe" src="main.html" width="100%" onload="resizeIframeToFitContent(this)" scrolling="no" frameborder="0">

                                        -->
                                        <!--
                                        <IFRAME id="myiframe" class="column" name="myiframe" src="main.html" width="100%" onload="sizeFrame('myiframe')" scrolling="no" frameborder="0">
                                        -->
                                                <iframe src="main.html" width="100%" id="myiframe" name="myiframe" class="column" scrolling="no" frameborder="0" onload="rearrange()"></iframe>
                                    </td>
                                </tr>
                            </table>
                    </div>

                        <script type="text/javascript">
                          // match all iframes / use jQuery or alias $
                          // jQuery('iframe').iframeAutoHeight({debug: true});
                          //jQuery('iframe').iframeAutoHeight({debug: true});   DEFAULT
                          $('iframe').iframeAutoHeight({heightOffset: 20});
                      
                          // only panoramic.html iframe with some extra height
                          // $('iframe.photo').iframeAutoHeight({heightOffset: 50});
                      
                          // NOTES: you can wrap this in document ready if you like
                          // but IE8 didn't always like it
                        </script>

                    <td>
                        <!-- right side -->
                        <img src="images/spacer.png" width="140" height="337" alt="">
                    </td>
                </tr>

            <tr>
                <td colspan="3">
                    <img src="images/spacer.png" width="1004" height="248" alt="">
                </td>
            </tr>

            <tr>
                <td colspan="3">
                    <img src="images/spacer.png" width="100%" height="25" alt=""></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

**blaz!ng** · August 1st, 2011, 02:37 PM

hey man i will just gather an example website for ya

**James** · August 1st, 2011, 02:40 PM

I've been searching and testing for the past few days now lol. Anything that you can find, please let me know. Thanks in advance!

**blaz!ng** · August 1st, 2011, 02:42 PM

hopefully i understood what u are trying to do

you can use my css in this old website i made at uni

**James** · August 1st, 2011, 02:50 PM

thanks blazing, but it won't work correctly unfortunatly. You can feel free to mess with my code, but the black background tiles from the top not the center that's why it's difficult. I have 2 different things tiling.

I have the white tiling for the iframe and the black tiling at the top. The default is set to 25%, but obviously this will change as the iframe changes. I hope this makes sense.

**blaz!ng** · August 1st, 2011, 03:04 PM

ooh right just changed my resolution and noticed what you on about. my 1080p screen looks perfect for the navigation but lower rez and i see the problem

**James** · August 1st, 2011, 03:07 PM

Yeah, it's really hard to work around.

I think I mentioned it above, but basically if there is a way to find the height of the iframe and then apply that to the div tag "bg" <-- since that's what tiles the black gradient top, then I should be set. I just haven't had any luck finding anything that works. I must have tried about 20 different things and my js isn't very good errr.

**blaz!ng** · August 1st, 2011, 03:11 PM

if you want my opinion i would say you are making things hard for your self. dont use iframe. with correct css you dont need that java to re size the divs unless you have a good reason?.

**James** · August 1st, 2011, 03:14 PM

I don't really have a good reason per se, if you have any suggestions and would like to post your thoughts. Feel free to do so. I'll attach the entire site on here.

Thread: Resizing a div

Thread Tools

Display

Resizing a div

Posting Permissions