"Visible:" CSS selector not working in safari

[tdhsaurabh]

Hi,

I have been working on a Jquery project, my problem is "Visible:" CSS selector is not working in safari.

My code is as follows:

$( 'td:visible:first' ).css('border-left','3px solid #DDD7DD');


this is jquery syntax which says: for the "First" "Visible" TD make border "3px solid #DDD7DD".

This is working fine in IE and FF but safari it is crashing and because of Visible:, is there any alternative in safari of how to detect First Visible cell in a row.

 

[SrWebDeveloper]

Safari's own help PDF mentions full support for the CSS 2.1 visibility property and its values since 1.0. Below is an alternate approach as requested.

I write a simple Javascript function that searches for the first visible cell in a table and changes the border -- just as you're doing with JQuery based on your explanation. Please note this is successfully tested code in Safari 3.2 as well as FFox 3.0.4 and MSIE 7:

First, the native Javascript function, put this in the head area:

<script language="javascript">
<!--//

function ChangeFirstVisibleCell(tableid,property,value) {

    var td_arr = document.getElementById(tableid).getElementsByTagName("td");
    for (var i=0; i<td_arr.length; i++) {
             if (td_arr[i].style.visibility!="hidden") {
                td_arr[i].style[property]=value;
               return;
            }
    }
}

//-->
</script>

HTML that creates a table with 1st cell hidden, 2nd and 3rd visible:

<table id="mytable" width="100%" border="" cellspacing="0" cellpadding="4">
  <tr>
    <td style="visibility: hidden">This is the hidden first cell</td>
  </tr>
  <tr>
    <td>Second cell</td>
  </tr>
  <tr>
    <td>Third cell</td>
  </tr>
</table>

Javascript to call the function, just like JQuery in behavior:

<script language="javascript">
 <!--//
 
 ChangeFirstVisibleCell('mytable','border','3px solid #ddd7dd');
 
 //-->
 </script>

The first parameter is the ID of the table (which is good practice so you can affect cells in specific tables referenced by ID). The second parameter is the CSS property to change, the last is the the value to change it to. Note this function uses DOM techniques so its very cross browser compatible. I wrote this to show you it works just fine outside of JQuery. Since JQuery has its own bug tracker and discussion area where bugs in their core or in third party plugins are reported and discussed, I suggest going there if you wish to continue to use their framework.

Hope this helps you! Please let me know.

-jim