Title says it, firebug is pointing me to this section of my code $(function(){ // Document is ready $('#sideBarTab').hover( function() { extendContract(); return false; }); }); Code (markup): There is also a firebug issue that pops up with parsing size, no line is mentioned, so I don't know where to point you, all I know is that the size issue is somewhere in my php script? Could be an issue, could be a non-issue I really can't tell you, if you want I can spit out the error codes from the other two browsers I'm testing with which are Chrome and Opera. Here is the full JS of it so you can peruse it. var isExtended = 0; var width = 200; var height = 480; var slideDuration = 1000; var opacityDuration = 1500; function extendContract(){ if(isExtended == 0){ sideBarSlide(0, height, 1, width); sideBarOpacity(0, 1); isExtended = 1; // make expand tab arrow image face left (inwards) $('#sideBarTab').children().get(0).src = $('#sideBarTab').children().get(0).src.replace(/(\.[^.]+)$/, '-active$1'); } else{ sideBarSlide(height, 0, width, 1); sideBarOpacity(1, 0); isExtended = 0; // make expand tab arrow image face right (outwards) $('#sideBarTab').children().get(0).src = $('#sideBarTab').children().get(0).src.replace(/-active(\.[^.]+)$/, '$1'); } } function sideBarSlide(fromHeight, toHeight, fromWidth, toWidth) { $("sideBarContents").css ({'height': fromHeight, 'width': fromWidth}); $("#sideBarContents").animate( { 'height': toHeight, 'width': toWidth }, { 'queue': false, 'duration': slideDuration }, "linear" ); } function sideBarOpacity(from, to){ $("#sideBarContents").animate( { 'opacity': to }, opacityDuration, "linear" ); } $(function(){ // Document is ready $('#sideBarTab').hover( function() { extendContract(); return false; }); }); Code (markup): And here is the full page it is being implemented in just incase.... <?php $hds="layers/"; $lsr="layers/laser/"; $led="layers/led/"; $lit="layers/lighting/"; $cbl="layers/cable/"; $css="layers/case/"; $snd="layers/sound/"; $trs="layers/truss/"; $mrr="layers/mirror/"; $sfx="layers/sfx/"; $elv="layers/elevator/"; $ctl="layers/cntrl/"; $frn="layers/furniture/"; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head profile="http://gmpg.org/xfn/11"> <!-- ... Edited out for length .... --> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cross-slide.js"></script> <script type="text/javascript" src="js/sidebar.js"></script> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/accordion.js"></script> <script type="text/javascript"> // // In my case I want to load them onload, this is how you do it! // Event.observe(window, 'load', loadAccordions, false); // // Set up all accordions // function loadAccordions() { var bottomAccordion = new accordion('vertical_container'); var bottomAccordion = new accordion('vertical_container', { classNames : { toggle : 'vertical_accordion_toggle', toggleActive : 'vertical_accordion_toggle_active', content : 'vertical_accordion_content' } }); } </script> <script type="text/javascript" src="js/divswap.js"></script> <script type="text/javascript" src="js/lytebox.js"></script> <link rel="stylesheet" href="css/sophos.php" type="text/css" media="screen" /> <!-- CSS --> <style type="text/css" > <!-- ... Edited out for length .... --> </style> </head> <body> <div id="wrapper"> <script type='text/javascript' id='source-test3'>//<![CDATA[ $(function() { $('#test3').crossSlide({ fade: 1 }, [ { src: 'lib/first.jpg', from: '100% 80% 1x', to: '100% 0% 1.7x', time: 5 }, { src: 'lib/second.jpg', from: 'top left', to: 'bottom right 1.5x', time: 5 }, { src: 'lib/third.jpg', from: 'bottom right', to: '80% 80% 1.1x', time: 2 }, { src: 'lib/rubber-ring.jpeg', from: '100% 50%', to: '30% 50% 1.5x', time: 2 } ]); }); //]]></script> <div id="sideBar"> <a href="#" id="sideBarTab"><img src="images/main/slide-button.png" alt="sideBar" title="sideBar" /></a> <div id="sideBarContents"> <div id="sideBarContentsInner"> <br /> <div id="container"> <div id="vertical_container" > <!-- ... Edited out for length .... --> <h2 class="accordion_toggle"><b style="color:white">+ </b>Omni Cables</h2> <div class="accordion_content"> <ul> <li><a href="#" onclick="loadDiv('<? echo $cbl; ?>cbl-al.php','iContent');">All Cables</a></li> </ul> </div> <h2 class="accordion_toggle"><b style="color:white">+ </b>Omni Truss</h2> <div class="accordion_content"> <ul> <li><a href="#" onclick="loadDiv('<? echo $trs; ?>trs-al.php','iContent');">All Cases</a></li> <li><a href="#" onclick="loadDiv('<? echo $trs; ?>trs-cl.php','iContent');">Clamps</a></li> <li><a href="#" onclick="loadDiv('<? echo $trs; ?>trs-tr.php','iContent');">Truss</a></li> </ul> </div> <h2 class="accordion_toggle"><b style="color:white">+ </b>Mirror Products</h2> <div class="accordion_content"> <ul> <li><a href="#" onclick="loadDiv('<? echo $mrr; ?>mrr-al.php','iContent');">All Mirror Products</a></li> </ul> </div> </div><!-- ' vertical container ' --> <!-- ... Edited out for length .... --> <script type="text/javascript" > var verticalAccordions = $$('.accordion_toggle'); verticalAccordions.each(function(accordion) { $(accordion.next(0)).setStyle({ height: '0px' }); }); </script> </div> <!-- 'container' --> </div> <!-- 'sbInner' --> </div> <!-- 'sbContents' --> </div> <!-- 'sidebar' --> <div id="build"> <div id="header"> <div id="guts"> <div id="techbar"> <a href="javascript:refresh()">home.</a> <a href="#" onclick="loadDiv('<? echo $hds; ?>products','iContent');">products.</a> <a href="#" onclick="loadDiv('<? echo $hds; ?>faq.html','iContent');">faq.</a> <a href="#" onclick="loadDiv('<? echo $hds; ?>manuals.html','iContent');">manuals.</a> <a href="#" onclick="loadDiv('<? echo $hds; ?>tech.html','iContent');">technical.</a> <a href="#" onclick="loadDiv('<? echo $hds; ?>dealer.html','iContent');">dealer center.</a> <a href="#" onclick="loadDiv('<? echo $hds; ?>contact.html','iContent');">contact.</a> </div><!-- "techbar" --> <script language="JavaScript1.2"> <!-- function refresh() { window.location.reload( false ); } //--> </script> <div name="bodyFRAME" id="iContent" /> <div id="holder"> <!-- <div id='test3'>Loading…</div> --> </div> <!-- ... Edited out for length .... --> </div><!-- 'guts' --> </div><!-- "header" --> <div id="footer"> <div id="footSpace"></div> <div id="foot_info"> <!-- ... Edited out for length .... --> </div><!-- "foot_info" --> </div><!-- "footer" --> </div><!-- 'build' --> </div> </body> </html> Code (markup):
$('#sideBarTab').hover( function() { extendContract(); return false; }); why do you need a return value here anyway? the return false that is... extendContract(); itself returns no values so what do you expect to be not null? best case scenario, you'd get a 'false'. if this is an attempt to prevent the default hover event then you really need something like ... function(e) { ... e.preventDefault(); } although i fail to see why you'd bother on a hover event (not click). anyway - for it to return null here, i think the problem is the selector itself. either $('#sideBarTab') or $('#sideBarTab').children().get(0) may be returning null. could this be a conflict of jquery vs prototype? dunno - for debug add the hover function to do a console.log($('#sideBarTab'), $('#sideBarTab').children().get(0)) and see if its the right data.