Javascript show/hide container issue

jettachamp26 · 04-15-2008, 11:37 AM

Hi,

I love the quality of the information at this place, but I haven't been able to find any solutions at the moment anywhere. So... here it is.

I have a containment issue with my show hide div. Like in another post I read I have the first line of text in the table show, then the rest of the paragraph I have stuck in my showHide div. The showhide works, but for some reason, when the div shows, it breaks out of the table and overlaps it. How do I get it to push down the table and make more room to fit?

Most appreciated
-Ryan

forrestt · 04-15-2008, 11:56 AM

You need to make sure the css positioning is set properly as well as the z-index doesn't put it above the other stuff. Code samples would help figure it out.

Forrest

jettachamp26 · 04-15-2008, 12:31 PM

Thats the weird thing css position of parent table and show/Hide div are both relative and both have a z-index of 0.

Here is a watered down version, but the problem is exactly the same.

Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="match.css" />
<script type="text/javascript">
function showHide(elementid){
    var obj = document.getElementById(elementid);
if (obj.style.display == 'none'){
obj.style.display = 'block';
} else {
obj.style.display = 'none';
}
} 
</script>
<style type="text/css">

    .tableRESULTS{
margin-top:20px;
border:1px solid #019999;
background-image: url(../images/general/bckwhiteBOXHeader.jpg);
background-repeat: repeat-x;
background-position: bottom;
background-color:#FFFFFF;
position:relative;
z-index:0;
    }
    
    .PurpleHeader,.OrangeHeader{
background-color:#DFD0FE;
background-image:url(../images/general/bckpurpleBOXHeader.gif);
background-repeat:repeat-x;border-bottom:1px solid #019999;
background-position: top;font-size:14px;
font-weight:bold;
padding:5px;
width:100%;
margin-bottom:15px;
    }
    
    .OrangeHeader{
background-color:#FFEAA6;
background-image:url(../images/general/bck_hotratesBARHeader.jpg);
    }
    
    .PinkHeader, .BlueBox{
background-image:url(../images/general/bckpinkBOXHeader.gif);
background-repeat:repeat-x;
background-position: top;
border-bottom:1px solid #019999;
border-left:1px solid #019999;
vertical-align:middle;
height:30px;
background-color: #FFE6FF;
    }
    .PinkHeader{width:40%}
    .BlueBox{
 width:145px;
background-image:url(../images/general/bck_hotratesBLUEHeader.jpg);
background-color: #E0E0FF;
    }
    
    .PriceBox{
float:right;
width:100%;
border:0;
    }
    .PriceBox .Text1 {font-size: 10px;height:30px;text-align: right; }
    
    .PriceBox .Text2 {font-size:16px;font-style: normal;line-height: normal;font-weight: bold;text-align: center;padding:0 5px;}
    
    .rateInfo{float:right;margin:5px;width:85%;height:135px;position:relative;s-index:0; }
    .rateInfo .in{margin-top:0px;border-left:#DFD0FE 1px solid; height:90%;padding:10px 0 0 12px;position:relative;}
    .rateInfo .in .details{position:relative;z-index:0; }
    .rateInfo .in .checkRates{text-decoration:underline;}
    .rateInfo .in .checkRates:hover{text-decoration:none;}
    .rateInfo .in .bookNow{position:absolute;bottom:0px;right:0px;}
    
    .photoResult{border:1px solid #000033; }
    
    .Text10, .Text11, .Text12, .Text14,.BlueText12, .CSSlice {
        color: #000033;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        line-height: normal;
    }
    
    .Text11{font-size:11px;}
    .Text10,.CSSlice {font-size:10px;}
    .Text12, .BlueText12 {font-size:12px; }
    
    
    
</style>
</head>
<body>
<table class="tableRESULTS" width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td style="width:60%;height:30px;vertical-align:top;"><div class="PurpleHeader">Table Header</div></td>
        
        <td class="PinkHeader">
            <table class="PriceBox" cellpadding="0" cellspacing="0">
                <tr>
                    <td class="Text1"><span id="${match.name}" name="${match.name}">Right Content</span></td>
                    
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="height:auto;vertical-align:top;">
            <table width="100%" height="auto" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td style="width:108px;vertical-align:top;" rowspan="2" >
                        <div name="Opt50953" id="Opt50953" style="margin:0 0 10px 10px;text-align:center;"><a href="javascript:AddOpt('50953');" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image150953','','images/general/btnAddtoOPTIONS-OVER.gif',1)"><img src="images/general/btnAddtoOPTIONS-UP.gif" alt="Add to your Options" name="Image150953" style="width:77;height:28;border:0;"></a></div>
                        <div style="margin:0 0 10px 10px;text-align:center;"><img  class="photoResult" src="http://${match.thumbnailImage}" /></div>
                    </td>
                    <td colspan="2" style="padding:10px;height:94;vertical-align:top;">
                        <span class="Text10">Reserve naturelle indienne, Aeroport de melville ${match.city}, ${match.countryCode}</span>
                        <br /><br />
                        <span class="Text12">${match.shortDescription}</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2"  class="Text10"style="padding:10px; vertical-align:middle;">
                        <strong>Detailed Info: &nbsp;&nbsp; </strong>
                        <br /><a href="somelink">General</a>&nbsp;&nbsp;&nbsp;<a href="">Photos</a>&nbsp;&nbsp;&nbsp;<a href="">Maps</a>&nbsp;&nbsp;&nbsp;
                        <a href="">Activities &amp; Recreation</a>&nbsp;&nbsp;&nbsp;<a href="">Food</a>&nbsp;&nbsp;&nbsp;<a href="">What's Nearby</a>
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <div class="rateInfo">
                <div class="in">
                    <table class="details" border="0" >
                        <tr style="font-weight:bold;">
                            <td colspan="3">details header:</td>
                        </tr>
                        <tr><td>
                            <div>first sentence of details</div>
                            <div id="allDetails" style="display:none;position:relative;z-index:0;height:100%;">
                                details<br />
                                details<br />
                                details<br />
                                details<br />
                                details<br />
                                details<br />
                                details<br />
                                details<br />
                            </div>
                        </td></tr>
                    </table>
                    <div class="checkRates"> 
                        <div onClick="showHide('allDetails');">
                            See All Available Rooms and Rates
                        </div>
                    </div>
                    <div class="bookNow">
                        <a href="?HotelDetails&PID=50953" target="_top" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('mi50953','','images/results/moreINFO_OVER.png',1)">
                            <img src="images/results/moreINFO_UP.png" alt="Book Now" name="mi50953" style="width:79;height:29px;border:0;">
                        </a>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</table>
</body></html>

forrestt · 04-15-2008, 01:10 PM

The problem is that you have heights specified in your .rateInfo descriptions.

HTH

Forrest

jettachamp26 · 04-15-2008, 02:04 PM

Thanks! just tried it and it works! I have a similar problem with a floating, toplevel div (has highest zindex). I am trying ot put an expand and collapse in that too. The height and width has to be set to give it its shape though. Is there a way do the expand and contract? I would assume its like on some navigation boxes... ??

forrestt · 04-15-2008, 02:11 PM

Use the Java Script to change the height and width values for the div. I think it would be like the following:

Code:

obj.style.height = "100px";
obj.style.width = "100px";

HTH

Forrest

jettachamp26 · 04-15-2008, 03:01 PM

how could I add that to the current size? my box is 350x200 right now

forrestt · 04-15-2008, 03:08 PM

Code:

function expandCollapse(elementid) {
    var obj = document.getElementById(elementid);
    if (obj.style.height == '350px'){
        obj.style.height="450px";
        obj.style.width="300px";
    } else {
        obj.style.height="350px";
        obj.style.width="200px";
    }
}

Of course, I don't know how big you want the box when you are done. Replace the numbers above with ones that work for you.

HTH

Forrest

jettachamp26 · 04-15-2008, 03:10 PM

Here is my box. I need both the div class="left" and div class="out" to expand the same amount, lets say 150px, when I click show/hide. I know you can't reference it by class. Could I reference it by DOM ancestry of som kind? or should I create a an I called "leftout" then just reference both? I need the most flexibility... Thanks for the quick replies!

Code:

<div id="left" class="left"> 
        <div class="out" onClick="BringToFront('left'); return false;">
            <div class="hd" onClick="BringToFront('left'); return false;">Target Specific Amenities or Features</div>
            <div class="in" onClick="BringToFront('left'); return false;">
                <div class="showHide" onclick="showHide('extraop');">Show/Hide </div><br />
                <div id="extraop" >
                    <form>
                        Price: give priority to hotels with<br />
                        <input type="checkbox" name="price" class="mopts" /> lowest rates<br />
                        <input type="checkbox" name="price" class="mopts" /> modest rates<br />
                        Quality: give priority to hotels with<br />
                        <input type="checkbox" name="quality" class="mopts" /> highest star rating<br />
                        <input type="checkbox" name="quality" class="mopts" /> modest star rating<br />
                        Value: give priority to hotels with<br />
                        <input type="checkbox" name="value" class="mopts" /> deals and special offers<br />
                        <input type="checkbox" name="value" class="mopts" /> best value for the money<br />
                    </form>
                </div>
            </div>
        </div>
    </div>

jettachamp26 · 04-15-2008, 03:22 PM

I just got a little idea. is there a way to save the elements ID (only the id) to a variable?

EDIT:: just figured it out. just too the variable passed in (the ID and saved it to a variable)