LinuxQuestions.org
Help answer threads with 0 replies.
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices

Reply
 
Search this Thread
Old 04-15-2008, 11:37 AM   #1
jettachamp26
Member
 
Registered: Feb 2008
Location: Florida
Distribution: ubuntu
Posts: 30

Rep: Reputation: 15
Javascript show/hide container issue


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
 
Old 04-15-2008, 11:56 AM   #2
forrestt
Senior Member
 
Registered: Mar 2004
Location: Cary, NC, USA
Distribution: Fedora, Kubuntu, RedHat, CentOS, SuSe
Posts: 1,288

Rep: Reputation: 99
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
 
Old 04-15-2008, 12:31 PM   #3
jettachamp26
Member
 
Registered: Feb 2008
Location: Florida
Distribution: ubuntu
Posts: 30

Original Poster
Rep: Reputation: 15
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>
 
Old 04-15-2008, 01:10 PM   #4
forrestt
Senior Member
 
Registered: Mar 2004
Location: Cary, NC, USA
Distribution: Fedora, Kubuntu, RedHat, CentOS, SuSe
Posts: 1,288

Rep: Reputation: 99
The problem is that you have heights specified in your .rateInfo descriptions.

HTH

Forrest
 
Old 04-15-2008, 02:04 PM   #5
jettachamp26
Member
 
Registered: Feb 2008
Location: Florida
Distribution: ubuntu
Posts: 30

Original Poster
Rep: Reputation: 15
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... ??
 
Old 04-15-2008, 02:11 PM   #6
forrestt
Senior Member
 
Registered: Mar 2004
Location: Cary, NC, USA
Distribution: Fedora, Kubuntu, RedHat, CentOS, SuSe
Posts: 1,288

Rep: Reputation: 99
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
 
Old 04-15-2008, 03:01 PM   #7
jettachamp26
Member
 
Registered: Feb 2008
Location: Florida
Distribution: ubuntu
Posts: 30

Original Poster
Rep: Reputation: 15
how could I add that to the current size? my box is 350x200 right now
 
Old 04-15-2008, 03:08 PM   #8
forrestt
Senior Member
 
Registered: Mar 2004
Location: Cary, NC, USA
Distribution: Fedora, Kubuntu, RedHat, CentOS, SuSe
Posts: 1,288

Rep: Reputation: 99
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

Last edited by forrestt; 04-15-2008 at 03:12 PM.
 
Old 04-15-2008, 03:10 PM   #9
jettachamp26
Member
 
Registered: Feb 2008
Location: Florida
Distribution: ubuntu
Posts: 30

Original Poster
Rep: Reputation: 15
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>
 
Old 04-15-2008, 03:22 PM   #10
jettachamp26
Member
 
Registered: Feb 2008
Location: Florida
Distribution: ubuntu
Posts: 30

Original Poster
Rep: Reputation: 15
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)

Last edited by jettachamp26; 04-15-2008 at 03:31 PM. Reason: figured it out.
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Show/Hide Gnome-panel on key press. metalx1000 Linux - General 0 03-18-2008 01:08 PM
When hide/show MPlayer and gxine,KDE crash.. darkslack Slackware 23 10-26-2007 07:58 AM
Container l_leonard Solaris / OpenSolaris 2 05-30-2007 11:24 PM
interactive show/hide content 0raven0 Programming 0 01-15-2006 08:00 PM
JavaScript ... Slow Display Issue TotalNoob Linux - General 3 08-15-2003 05:42 PM


All times are GMT -5. The time now is 09:35 AM.

Main Menu
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
identi.ca: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration