SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hding table rows again

    Hi folks,
    I have searched and searched for a solution to hiding table rows that is compatible with Firefox, and while what I have found is pertinent, it has not helped me with my problem.

    I need to use the value from a dynamically populated select box to hide or show table rows depending on which option the user selects. This is not my code, I have been given the task of making this work in Firefox.
    As far as I can tell, it the use of :

    Code:
    <tr id="someValue">
    that is causing the problem. IE is more forgiving and renders the formatting correctly, but Firefox is dying a death here and I'm on a time limit.

    The swapping (visibility/display css) is defined in an external javascript, which i have tried to modify to handle Firefox, i.e. I test fo IE and use
    Code:
    display:inline
    and for Firefox I am using
    Code:
    display:table-row
    but I just can't seem to solve this one.

    If anyone has any suggestions, they would be very gratefully recieved.
    people in glass houses shouldn't walk around naked

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,804
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    Hi Chris, have you got a link to the page in question?
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that's the problem, it's within a secure login system, when I get back to work tomorrow I will post some of the source. Trouble I've only just been employed as a graduate developer (2 weeks) and I am somewhat out of my depth here.
    Last edited by chris davies; Nov 28, 2007 at 13:46.
    people in glass houses shouldn't walk around naked

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is a section of the php code using the <tr id> element

    Code:
    <tr id="rowSMSTo">
      <td class="data_header" width="175px" align="right">{#smsto#}:&nbsp;</td>
    	<td class="data">
    	<select name="lstSMSType" id="lstSMSType" onChange="selectSMSType()">
    		<option value="0">{#customer#}</option>
    		<option value="1">{#actionuser#}</option>
    		<option value="2">{#address#}</option>
    	</select>
    
    	<span id="spSMSNo" class="data_header">&nbsp;&nbsp;{#phonenumber#}:&nbsp;</span>
    	
    	<input type="text" name="phoneNumber" id="phoneNumber" value="" size="12" maxlength="15">
    
    	</td>
    </tr>
    and here is the javascript
    Code:
    function displaySMS(boolShow)
    {
    	if(boolShow == true)
    	{
    		//strDisplay = 'inline';
    		   //strVis = 'visible';
    		
    		   if (isMSIE){	
    		               strDisplay = 'inline';
    		               strVis = 'visible';
    		               //alert ('Internet Explorer');
    		      }
    		      else if(isFirefox){
    			              strDisplay = 'table-row';
    		                  strVis = 'visible';
    		                  //alert('Firefox');
    		                  //alert("the variable strDisplay is set to " + strDisplay);
    		      }
    		
    	}else
    	{
    		strDisplay = 'none';
    		strVis = 'hidden';
    	}
    	
    	document.getElementById('rowSMSTo').style.display = strDisplay;
    	document.getElementById('rowSMSTo').style.visibility = strVis;
    }
    
    I honestly can't see what is wrong and i can't post the entire script due to company policy and all that. Any pointers will be gratefully recieved.
    Thanks in advance for any or all contributions to this thread.
    
    Chris
    people in glass houses shouldn't walk around naked

  5. #5
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,804
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    Hi Chris

    From what I can see you need a show/hide type function.....(?)

    If so then something simple like:
    Code:
    function displaySMS(boolShow)
    {
    	if(document.getElementById('rowSMSTo').style.display == 'block') {
    	document.getElementById('rowSMSTo').style.display = 'none';
    	} else {
    	document.getElementById('rowSMSTo').style.display = 'block';
    	}
    }
    With the id defined in the CSS as:
    Code:
    #rowSMSTo {
    	display: none;
    }
    Should work.

    Try it and let me know.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is such a block of code there, I should have posted that as well, sorry.
    The actual problem I am having is that while it works perfectly in IE
    (ggrr sloppy browser), it refuses to work in Firefox.

    I know that if hiding table rows in Firefox (I have to hide the entire row, and this is just one of many other that have been defined), one has to use display='table-row', but as soon as there is an id element in the table row tag, in Firefox it all goes pear shaped. If I remove the id attribute from the <tr> the formatting works perfectly, but obviously, as a result, I can't hide the row.

    I will try to post more code when I get back to work tomorrow.

    I have just been informed that I have to learn Smarty OO development aswell. I wonder if I have bitten off more than I can chew ;O)

    Just a thought, it is possible to post a screen shot?
    people in glass houses shouldn't walk around naked


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
  •