[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

why this  jquery script is not working IE ? (working in Mozilla)

Posted on 2011-05-10
2
Medium Priority
?
254 Views
Last Modified: 2012-05-11
       var collapseIcon = 'bullet_toggle_minus1.png';
        var collapseText = 'Collapse this section';
        var expandIcon =   'bullet_toggle_plus1.png';
        var expandText =  'Expand this section';
        
        var $countrycells = $('table th');
        $countrycells.addClass('clickablep');
        
        $('table.collapsible tbody').each(function() {
              var $section = $(this);
              if ($section.is('.first'))
              {
                          $section.removeClass('first')
                            .find('tr:not(:has(th))')
                            .fadeOut('fast', function() {
                            $(this).css('display', 'none');
                                  });
            }      
            $('<img />').attr('src', expandIcon)
                  .attr('alt', expandText).css('padding','5px 5px 0 0')
                  .prependTo($section.find('th'))
                  .addClass('clickablep').parent().click(function() {
                   if ($section.is('.collapsed')) {
                         $section.removeClass('collapsed')
                         .find('tr:not(:has(th)):not(.filtered)')
                         .fadeIn('fast');
                $(this).children().attr('src', collapseIcon)
                  .attr('alt', collapseText);
                   }
              else {
                $section.addClass('collapsed')
                  .find('tr:not(:has(th))')
                  .fadeOut('fast', function() {
                    $(this).css('display', 'none');
                  });
                $(this).children().attr('src', expandIcon)
                  .attr('alt', expandText);
              }
              $section.parent().trigger('stripe');
                        });
          
          $('<img />').css('padding','5px 5px 0 0');
          
           if ($section.is('.collapsed'))
           {       
                
           }      else {  $('<img />').css('padding','5px 5px 0 0'); }
                 
                    });      
0
Comment
Question by:Rozamunda
2 Comments
 
LVL 4

Accepted Solution

by:
LAMASE earned 2000 total points
ID: 35732214
Can you specify "is not working"? Can we see the page in wich this code is running?
0
 

Author Comment

by:Rozamunda
ID: 35732625
it is not collapsing table rows, unfortunately it is behind firewall. Here is the table definition:

<div id = "tabelka">

   <table class="collapsible"> <thead> <tr>
   <th> xxx </th>

       
  <th>10 May</th><th>10 Jun</th><th>10 Jul</th><th>10 Aug</th><th>10 Sep</th><th>10 Oct</th><th>10 Nov</th><th>10 Dec</th><th>11 Jan</th><th>11 Feb</th><th>11 Mar</th><th>11 Apr</th><th>11 May</th></tr><tbody  class='first collapsed'><tr><th> Country 1            </th><td> 0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Sales  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Comps  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Returns </td> <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr></tbody><tbody  class='first collapsed'><tr><th> Country 2    </th><td> 0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Sales  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Comps  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Returns </td> <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr></tbody><tbody  class='first collapsed'><tr><th>
 Country 3     </th><td> 0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Sales  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Comps  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Returns </td> <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr></tbody><tbody  class='first collapsed'><tr><th>CAN CDC                           </th><td> 0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Sales  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Comps  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Returns </td> <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr></tbody><tbody  class='first collapsed'><tr><th> Country 4                          </th><td> 0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Sales  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Comps  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Returns </td> <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr></tbody><tbody  class='first collapsed'><tr><th> Country 5    </th><td> 0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Sales  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Comps  </td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td> Returns </td> <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr></tbody>
                 
   </table>
 

and css:


#tabs th,
#tabs td {
  padding: 3px 6px;
  vertical-align: top;
  font-size: 14px;
  text-align: right;
}
#tabs th {
  text-align: left;
  color: #fff;
}

#tabs thead th  {
  background-color: #bbbbbb;    
}
#tabs .sortable thead th {
  padding-left: 18px;
}
#tabs tbody th {
  background-color: #666;
  padding-left: 6px;
}

 #tabs tbody td {
       
 background-color: #bbb;      
}
 #tabs tbody td.netsales {
       
 background-color: #ddd;      
       
}
#tabs .date-column {
  width: 40px;
}
th img {
  float: left;
}

tr.even,
tr.first {
  background-color: #eee;
}
tr.odd,
tr.second {
  background-color: #ddd;
}
tr.third {
  background-color: #ccc;  
}

td.sorted {
      background: #ffd;
}
th.clickable {
  background: transparent url(images/sort-arrows.png) no-repeat 0 0;
}
th.sorted-asc {
 background-position: 0 -20px;
}
th.sorted-desc {
  background-position: 0 -40px;
}

.filtered {
  display: none;
}

/* filterable table */

#tabs table.filterable {
  width: 78%;
 
}
#tabs .filters {
 float: right;
 width: 19%;
 padding-left:5px;
}

#tabs .filterable thead th {
  padding-left: 6px;
}
div.pager {
  margin-bottom: .25em;
}

#tabs .page-number,
#tabs .filter {
  padding: .2em;
}
#tabs .page-number {
  border: 1px solid #ccc;
  margin-right: 2px;
}
#tabs .active {
  background: #ccf;
  border: 1px solid #006;
}


#tabs tr.highlight {
  background: #ff6;
}
#tabs tr.plain {
  background: #fff;
}
#tooltip {
  position: absolute;
  z-index: 2;
  background: #efd;
  border: 1px solid #ccc;
  padding: 3px;
}

.clickablep {
      
 cursor: pointer;      
}
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question