div woes

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

div woes

Post 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?
foobar
Forum Regular
Posts: 613
Joined: Wed Sep 28, 2005 10:08 am

Re: div whoas

Post 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.
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Post 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?
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post 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...
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Post 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?
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

OK, Replies...

1. For this one, I have to see the code myself
2. document.frm.rad1.checked == true
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Post 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.
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Post 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?
foobar
Forum Regular
Posts: 613
Joined: Wed Sep 28, 2005 10:08 am

Post 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.
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Post 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?
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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.
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Post 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
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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. :(
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post 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
User avatar
neophyte
DevNet Resident
Posts: 1537
Joined: Tue Jan 20, 2004 4:58 pm
Location: Minnesota

Post 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?
Post Reply