SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    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

  2. #2
    SitePoint Addict darkwater23's Avatar
    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

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by darkwater23 View Post
    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
    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..

  4. #4
    SitePoint Enthusiast
    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.
    ---
    Paul S. Smith
    technetic | design & code

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by technetic View Post
    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.
    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

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •