SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: Showing / Hiding table rows
-
Aug 20, 2007, 10:10 #1
- Join Date
- Oct 2005
- Posts
- 38
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Showing / Hiding table rows
Hello,
I have a table on my website that lists lots of items. When I click on an item I want to show a row just below the item with all the details.. Everything works on firefox, but in Internet Explorer it just doesn't work. I have this:
Code CSS:.hiddenImage {display:none;} .visibleImage {display:table-row;}
Code PHP:<a name="<?php echo "item" . $itemId; ?>" href="javascript:showItem('<?php echo "item" . $itemId; ?>');" (...)>
the shoItem function is as follows:
Code JavaScript:var lastItem = null; function showItem(id) { x = "item" + '<?echo $selectedItem;?>'; // coming from the menu, not after clicking thumbnail if (x == "item") { if (lastItem == id) { if (document.getElementById(id).className == "hiddenImage") { document.getElementById(id).className = "visibleImage"; } else { document.getElementById(id).className = "hiddenImage"; } } else { if (lastItem != null) { document.getElementById(lastItem).className = "hiddenImage"; } document.getElementById(id).className = "visibleImage"; } } // coming from clicking a thumbnail else { if (x == id) { if (document.getElementById(id).className == "hiddenImage") { document.getElementById(id).className = "visibleImage"; document.getElementById(lastItem).className = "hiddenImage"; } else { document.getElementById(id).className = "hiddenImage"; } } else { if (lastItem == id) { if (document.getElementById(id).className == "hiddenImage") { document.getElementById(id).className = "visibleImage"; } else { document.getElementById(id).className = "hiddenImage"; } } else { if (lastItem != null) { document.getElementById(lastItem).className = "hiddenImage"; } document.getElementById(x).className = "hiddenImage"; document.getElementById(id).className = "visibleImage"; } } } lastItem = id; }
Can anyone help me? Why isn't this working on Internet Explorer?
Thanks in advance,
Paulo
-
Aug 20, 2007, 10:14 #2
- Join Date
- Nov 2005
- Location
- Omaha, NE
- Posts
- 335
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
IE doesn't support table-row. The site below suggests setting the display to nothing (empty string) and letting the browsers figure it out. That seems to work in both browsers.
http://jszen.blogspot.com/2004/07/ta...srevealed.html
-
Aug 20, 2007, 10:36 #3
- Join Date
- Oct 2005
- Posts
- 38
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I changed my code to:
Code JavaScript:function showItem(id) { x = "item" + '<?echo $selectedItem;?>'; // coming from the menu, not after clicking thumbnail if (x == "item") { if (lastItem == id) { if (document.getElementById(id).className == "hiddenImage") { //document.getElementById(id).className = "visibleImage"; document.getElementById(id).style.display = ''; } else { document.getElementById(id).className = "hiddenImage"; } } else { if (lastItem != null) { document.getElementById(lastItem).className = "hiddenImage"; } //document.getElementById(id).className = "visibleImage"; document.getElementById(id).style.display = ''; } } // coming from clicking a thumbnail else { if (x == id) { if (document.getElementById(id).className == "hiddenImage") { //document.getElementById(id).className = "visibleImage"; document.getElementById(id).style.display = ''; document.getElementById(lastItem).className = "hiddenImage"; } else { document.getElementById(id).className = "hiddenImage"; } } else { if (lastItem == id) { if (document.getElementById(id).className == "hiddenImage") { //document.getElementById(id).className = "visibleImage"; document.getElementById(id).style.display = ''; } else { document.getElementById(id).className = "hiddenImage"; } } else { if (lastItem != null) { document.getElementById(lastItem).className = "hiddenImage"; } document.getElementById(x).className = "hiddenImage"; //document.getElementById(id).className = "visibleImage"; document.getElementById(id).style.display = ''; } } } lastItem = id; }
but unfortunately it's still not working..
-
Aug 20, 2007, 10:47 #4
- Join Date
- Feb 2006
- Location
- Bel Air, Maryland.
- Posts
- 60
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I use Script.aculo.us which gives you a great little fade effect too. It's so simple to implement and you can use it on divs or table rows, just assign the element an ID.
-
Aug 20, 2007, 11:13 #5
- Join Date
- Oct 2005
- Posts
- 38
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Unfortunately, I have no time to check that out, but will as soon as I can.. Right now, I just need to get this working on Internet Explorer.. the funny thing is that this code works:
Code JavaScript:var lastCat = null; var openCat = null; function showImage(id) { if (lastCat == id) { if (document.getElementById(id).className == "hiddenImage") { document.getElementById(id).className = "visibleImage"; } else { document.getElementById(id).className = "hiddenImage"; } } else { if (lastCat != null) { document.getElementById(lastCat).className = "hiddenImage"; } document.getElementById(id).className = "visibleImage"; } lastCat = id; openCat = ""; }
but this does not:
Code JavaScript:function showItem(id) { x = "item" + '<?echo $selectedItem;?>'; // coming from the menu, not after clicking thumbnail if (x == "item") { if (lastItem == id) { if (document.getElementById(id).className == "hiddenImage") { document.getElementById(id).className = "visibleImage"; } else { document.getElementById(id).className = "hiddenImage"; } } else { if (lastItem != null) { document.getElementById(lastItem).className = "hiddenImage"; } document.getElementById(id).className = "visibleImage"; } } // coming from clicking a thumbnail else { if (x == id) { if (document.getElementById(id).className == "hiddenImage") { document.getElementById(id).className = "visibleImage"; document.getElementById(lastItem).className = "hiddenImage"; } else { document.getElementById(id).className = "hiddenImage"; } } else { if (lastItem == id) { if (document.getElementById(id).className == "hiddenImage") { document.getElementById(id).className = "visibleImage"; } else { document.getElementById(id).className = "hiddenImage"; } } else { if (lastItem != null) { document.getElementById(lastItem).className = "hiddenImage"; } document.getElementById(x).className = "hiddenImage"; document.getElementById(id).className = "visibleImage"; } } } lastItem = id; }
the code is the same, and those are the same css classes.. why is one working on IE and the one not?
thanks in advance,
Paulo
-
Aug 20, 2007, 12:46 #6
- Join Date
- Oct 2005
- Posts
- 38
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
anyone?
Bookmarks