javascript - jQuery accordion issues - Hover icon and IE7/8 problems -


i trying use jquery accordion in website , have couple of issues trying address.

firstly, can't seem make cursor hand when user hovers on mouse.

secondly accordion not work in ie8 or ie7, works fine in ie9 , above , in other browsers.

i no means expert in building code , have put there - need these 2 issues sorted , done.

the link test page is:

http://www.micklehamweather.com/test.php

my code is:

<!doctype html> <!-- dc rss feeds css --> <link type="text/css" rel="stylesheet" href="tsc_rssfeed.css" />  <!-- jquery library (skip step if called on page ) --> <script type="text/javascript" src="jquery.min.js"></script> <!-- (do not     call twice) -->  <!-- dc rss feeds js --> <script type="text/javascript" src="tsc_rssfeed.js"></script> <script type="text/javascript" src="tsc_vticker.js"></script>      <script> $(function($) {   var allaccordions = $('.accordion div.data');   var allaccordionitems = $('.accordion .accordion-item');   $('.accordion > .accordion-item').click(function() {     if($(this).hasclass('open'))     {       $(this).removeclass('open');       $(this).next().slideup("slow");     }     else     {     allaccordions.slideup("slow");     allaccordionitems.removeclass('open');     $(this).addclass('open');     $(this).next().slidedown("slow");     return false;     }   }); }) ; </script>  <!-- start bom alert refresh -->      <!-- jquery script -->  <script  type="text/javascript">  var updatebomalertvic = setinterval(function() { $('#bomalertvic').fadeout('fast').load('rss-directbomvic.php').fadein('fast');}, 63000); </script>  <script  type="text/javascript">  var updatebomalertvic = setinterval(function() { $('#firealertvic').fadeout('fast').load('fireincidents.php').fadein('fast');}, 63000); </script>  <div align="center"> <div class="accordion"> <div class="accordion-item"><table width="100%" border="1" cellspacing="1" cellpadding="1"> <tr><td style="text-align:center" class="table-top" colspan="4"<span style="font-size: 100%; text-align:center;">   alerts  <img width="20" height="20" style="vertical-align: middle;" alt="warnings issued bureau of meteorology" src="images/alert-icon-120.png" border="0">  warnings  &nbsp;&nbsp;&nbsp;  fire  <img width="20" height="20" style="vertical-align: middle;" alt="incidents issued cfa" src="images/emergency_warning.png" border="0"> incidents </span></td>  </tr></table><div class="type">  </div> </div>    <tr class="column-dark">     <td colspan="8" align="center"> <div class="data" style="display: none;">  <!-- start bom alert tas -->     <script type="text/javascript">                function sethtml1(type) {                               document.getelementbyid("a0").style.display = "none"                               document.getelementbyid("a1").style.display = "none"                               document.getelementbyid("b1").style.display = "none"                               document.getelementbyid("c1").style.display = "none"                               document.getelementbyid("d1").style.display = "none"                               document.getelementbyid("e1").style.display = "none"                               document.getelementbyid("f1").style.display = "none"                               document.getelementbyid("g1").style.display = "none"                               // using style.display="block" instead of style.display="" leaves carriage return                               document.getelementbyid(type).style.display = ""                }  </script> <table width="100%" cellspacing="1" cellpadding="1"> <table style="background-color:#9f9f9f; border: thin solid; border-color:  #4a4a4a;  " width="100%">   <tr>  <td width="91.428571428571428571428571428571" align="center"><img src="images/vic-thumb.png" width="30" height="30" title="show victoria - warnings" alt="vic"/><a href="http://www.bom.gov.au/vic/warnings/index.shtml" target="_blank" title="show victoria - warnings">vic</a></td> <td width="91.428571428571428571428571428571" align="center"><img src="images/tas-thumb.png" width="30" height="30" title="show tasmania - warnings" alt="tas"/><a href="http://www.bom.gov.au/tas/warnings/index.shtml" target="_blank" title="show tasmania - warnings">tas</a></td> <td width="91.428571428571428571428571428571" align="center"><img src="images/wa-thumb.png" width="30" height="30" title="show western australia - warnings" alt="wa"/><a href="http://www.bom.gov.au/wa/warnings/index.shtml" target="_blank" title="show western australia - warnings">wa</a></td> <td width="91.428571428571428571428571428571" align="center"><img src="images/nt-thumb.png" width="30" height="30" title="show northern territory - warnings" alt="nt"/><a href="http://www.bom.gov.au/nt/warnings/index.shtml" target="_blank" title="show northern territory - warnings">nt</a></td> <td width="91.428571428571428571428571428571" align="center"><img src="images/sa-thumb.png" width="30" height="30" title="show south australia - warnings" alt="sa"/><a href="http://www.bom.gov.au/sa/warnings/index.shtml" target="_blank" title="show south australia - warnings">sa</a></td> <td width="91.428571428571428571428571428571" align="center"><img src="images/act-thumb.png" width="30" height="30" title="show australian capital territory - warnings" alt="act"/><a href="http://www.bom.gov.au/act/warnings/index.shtml" target="_blank" title="show australian capital territory - warnings">act</a></td> <td width="91.428571428571428571428571428571" align="center"><img src="images/nsw-thumb.png" width="30" height="30" title="show new south wales - warnings" alt="nsw"/><a href="http://www.bom.gov.au/nsw/warnings/index.shtml" target="_blank" title="show new south wales - warnings">nsw</a></td> <td width="91.428571428571428571428571428571" align="center"><img src="images/qld-thumb.png" width="30" height="30" title="show queensland - warnings" alt="qld"/><a href="http://www.bom.gov.au/qld/warnings/index.shtml" target="_blank" title="show queensland - warnings">qld</a></td>    </tr> </table>     </td> </tr>   <tr class="column-light"> <!-- start hide -->     <td colspan="8"><span id="a0" style=""></span> <!-- end hide -->  <!-- start bom alert vic --> <span id="e1" style="display:value"> <table style="background-color:#ffe991; border: thin solid; border-color: #4a4a4a;  "  width="100%">   <tr align="left" class="forecasttext">    <td><div id="bomalertvic"><?php include("rss-directbomvic.php");?></div><br/></td> </div>   </tr> </table> </span> <!-- end bom alert vic -->  <!-- fire --> <span id="e1" style="display:value"> <table style="background-color:#ffe991; border: thin solid; border-color: #4a4a4a;  "  width="100%">   <tr align="left" class="forecasttext">    <td><div id="firealertvic"><?php include("fireincidents.php");?></div><br/></td> </div>   </tr> </table> </span> <!-- fire -->          </td> </tr> </table> </div>

first of all, have typo in code:

wrong:

<td style="text-align:center" class="table-top" colspan="4"<span style="font-size: 100%; text-align:center;">

correct:

<td style="text-align:center" class="table-top" colspan="4"><span style="font-size: 100%; text-align:center;">...</span>

hand cursor on mouse hover:

if want hand/pointer cursor show add style:

<td style="text-align:center; cursor: pointer;" class="table-top" colspan="4"><span style="font-size: 100%; text-align:center;">...</span>

browser compatibility:

as ie, it's hard working correctly. ie 9 has support, older versions require more work maximum compatibility. jquery , jquery ui should have of covered. helpfully mentioned @atmd, should check jquery , jquery ui versions. @ end of day features broken on ie that's best developers can do.

hope answers questions. if have more concerns, let me know in comments.


Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -

i rendering jbutton image on simulate jcheckbox behavior. why don't let jtable render jcheckbox? because need bigger checkboxes , there's no way can resize them (as far know). so, have own table cell renderer , editor. both renders jbutton , checkbox images on them. trying change image checked image unchecked image (or vice versa) , update cell value (boolean true or false). however, reason, getcelleditorvalue() not update table. so, release mouse, value goes original one. any appreciated! lot! public class tableexample extends jframe { jscrollpane pane; jpanel panel; jtable table; object[][] data; mytablemodel tm; renderer buttoncolumn; public tableexample(object[][] data) throws ioexception { string[] columns = {"column#1", "column#2", "column#3", "column#4", "column#5", "column#6"}; this.data = data; this.setpreferredsize(new dimension(700, 500));
Read more