Page 1 of 2

div woes

Posted: Fri Nov 25, 2005 4:03 am
by shiznatix
i am trying to make some rows in a table hidden then use javascript to bring them to life. what i have is this

Code: Select all

<div id="inOne" style="visibility:hidden; display:inline;">
  <tr>
    <td class="text">
      Text here:
    </td>
    <td class="text">
      <input type="text" name="cars_month" size="3">
    </td>
  </tr>
</div>
thats a segment of the table i want to be hidden. problem is, its not hidden. the div tags dont work when you put a <tr> or a <td> inside of the divs. any sugestions?

Re: div whoas

Posted: Fri Nov 25, 2005 4:24 am
by foobar
shiznatix wrote: thats a segment of the table i want to be hidden. problem is, its not hidden. the div tags dont work when you put a <tr> or a <td> inside of the divs. any sugestions?
Indeed.

Try this:

Code: Select all

<!-- in <head> -->
<script type="text/javascript">
document.getElementById("inOne").style.display = "table-inline";
</script>
<!-- /in head -->

<div id="inOne" style="visibility:hidden; display:none;">
  <tr>
    <td class="text">
      Text here:
    </td>
    <td class="text">
      <input type="text" name="cars_month" size="3">
    </td>
  </tr>
</div>
If that doesn't work, transform the tr's and td's into div's with display: table-row; and display: table-col; respectively.

Posted: Fri Nov 25, 2005 4:44 am
by shiznatix
ok well humm problems! now the div table rows and whatnot worked but they screwed up the rest of my table and they wouldnt work with widths, there was definatly somthing wrong with that. now display: none; is working for me kinda. here is what i am going to do

Code: Select all

<div id="inOne" style="display: none;">
  <tr style="display: none;">
    <td>
    </td>
  </tr>
</div>
but is there any way that i can change all of the table rows inside div "inOne" style to display: block; or whatever will show them through javascript onclick?

Posted: Fri Nov 25, 2005 7:51 am
by n00b Saibot
n00b Saibot to rescue, again :)

Code: Select all

<table id="tbl">
  <tr> 
    <td class="text"> 
      Text here: 
    </td> 
    <td class="text"> 
      <input type="text" name="cars_month" size="3"> 
    </td> 
  </tr> 
</table>
<script>
Tbl = document.getElementById("tbl");

//suppose want to hide row no. 2
Tbl.rows[1].style.display = "none";
</script>
as simple as that :wink:

Notice that I change/removed div to table...

Posted: Fri Nov 25, 2005 9:17 am
by shiznatix
n00b saitbot you are the 1337. 2 questions to tack on to this. well 1 is a extension.

1) when i show the table rows (i use javascript to unhide) the newly showed rows do now use the same width information that they should be using and even if i manually set the collum width's it still does not listen to them.

2) i have a radio button and i want to call a different javascript function depending on which radio button was selected, how do i check if the radio button is selected or not?

Posted: Sat Nov 26, 2005 12:29 am
by n00b Saibot
OK, Replies...

1. For this one, I have to see the code myself
2. document.frm.rad1.checked == true

Posted: Sat Nov 26, 2005 3:57 pm
by shiznatix

Code: Select all

<table id="info" border="0" align="left" cellpadding="4" cellspacing="0">
                   <tr>
                      <td class="text" colspan="2">
                        <b>Please supply at least 1 verifiable reference.</b><br><br><br>
                      </td>
                    </tr>
                    <tr>
                      <td class="text" colspan="2">
                        <b>Reference #1</b>
                      </td>
                    </tr>
                    <tr>
                      <td class="text" width="33%">
                        Production Company/Studio:
                      </td>
                      <td class="text" width="67%">
                        <input type="text" name="agency1" value="<?= $info1['agency'] ?>">
                      </td>
                    </tr>
                    <!-- START HERE FOR THE INVISIBLE STUFF AND THIS IS WHERE I HAVE PROBLEMS -->
                    <tr>
                      <td class="text" width="33%">
                        <b>Bookers For Vehicles</b>
                      </td>
                      <td class="text" width="67%">
                      </td>
                    </tr>
                    <tr>
                      <td class="text">
                        Approximate number of cars needed per month:
                      </td>
                      <td class="text">
                        <input type="text" name="cars_month" value="<?= $info9['cars_month'] ?>" size="3">
                      </td>
                    </tr>
</table>
that is a shortened version of the table.

Posted: Sun Nov 27, 2005 3:47 am
by shiznatix
also whenever i go back and forth between hidden and viewed with javascript it adds a blank space, 1 space for each time i go back and forth. whats up with that?

Posted: Sun Nov 27, 2005 5:18 am
by foobar
shiznatix wrote:also whenever i go back and forth between hidden and viewed with javascript it adds a blank space, 1 space for each time i go back and forth. whats up with that?
Are you using Firefox? I had that problem when I used AJAX to write incoming posts into a div. If I remember correctly, this could be "solved" by making overflow: visible;. But that meant the text went past the div. One solution was to have a fixed height in pixels; another was to re-set the size after each post was added, or in your case, after each toggling of visibility.

Posted: Mon Nov 28, 2005 8:26 pm
by shiznatix
ok here goes. half of it works in IE and the other half works in firefox. what i need is for the whole thing to work in both!

http://www.carsforfilms.com/test.html

please take a look at that in both browsers. notice how IE just goes crazy with the javascript but firefox does it just fine. But then notice how firefox will put in a extra space or two whenever you go between the "yes" and "no" and the row spacing is messed up, IE does not have those last 2 problems.

PLEASE! im super desperate here. any solutions?

Posted: Mon Nov 28, 2005 9:02 pm
by Roja
shiznatix wrote:ok here goes. half of it works in IE and the other half works in firefox. what i need is for the whole thing to work in both!

http://www.carsforfilms.com/test.html

please take a look at that in both browsers. notice how IE just goes crazy with the javascript but firefox does it just fine. But then notice how firefox will put in a extra space or two whenever you go between the "yes" and "no" and the row spacing is messed up, IE does not have those last 2 problems.

PLEASE! im super desperate here. any solutions?
Okay, seriously, it doesnt even have an html tag!

Take your snippet, and make it into valid html. Until you do, there is absolutely no way to ensure consistent behavior across multiple browsers.

Posted: Mon Nov 28, 2005 11:12 pm
by shiznatix
Roja wrote:Okay, seriously, it doesnt even have an html tag!

Take your snippet, and make it into valid html. Until you do, there is absolutely no way to ensure consistent behavior across multiple browsers.
Ok it was a test page where I just threw a very simple version of it on there. Chill. Second, I made it perfect html passed all the awesome tests, did nothing.

I fixed the IE problems by changing "onchange" to "onclick". Turns out with IE if you do onchange on a radio button, after you click the button you have to click on text or somthing else for it to register.

Now I tried foobars ideas for the Firefox issues but to no avail. Im not sure what he means by resetting the height, but it keeps putting in blank spaces.

Check it out again here

Posted: Mon Nov 28, 2005 11:36 pm
by Roja
shiznatix wrote:Second, I made it perfect html passed all the awesome tests, did nothing.
Using php code tags on the forum doesn't fix your code - it helps us see where the problems are easier. Same thing for fixing the html issues. It just gets the noise out of the way.
shiznatix wrote:Now I tried foobars ideas for the Firefox issues but to no avail. Im not sure what he means by resetting the height, but it keeps putting in blank spaces.
I will admit, I dont see whats causing it. Its definitely something in the javascript (and ff throws an error about myform not being defined), but I don't know what specifically. Sorry I can't help more. :(

Posted: Mon Nov 28, 2005 11:40 pm
by John Cartwright
I get in my js console
Warning: Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.
Source File: http://www.carsforfilms.com/test.html
Line: 1

Posted: Mon Nov 28, 2005 11:50 pm
by neophyte
First make sure you have the right declaration...

I know it seems minor but on a couple of sites where I was using only CSS for layout it solved all my worst nightmares.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
I found out that the url on the end of the doctype makes all the difference.

If that doesn't help try making sure your borders are collapsed.

Code: Select all

table{
border-collapse: collapse;
}
Have you tried doing this using just div tags?