Note: I have also posted this on jqueryhelp.com but I havent resolved this issue.
http://www.jqueryhelp.com/viewtopic.php?p=9713 I have just started a new job and am building my first website for them. Im using Jquery to try and impress them but after trying and testing the site in Safari, I am stumped as to why such a basic function its going wrong. The script works fine in ie and firefox so Im pulling my hair out. I have stripped all the non necessary code out of this and placed the css and javascript inside the head. -------------------------------------------------------------------------- CODE -------------------------------------------------------------------------- <html> <head> <style type="text/css"> html { font-size:16px; margin:0; padding:0 } body,div,p { margin:0; padding:0; background: #eee; } div#container { width:70.06em; height:20em; overflow: visible; background:#fff } div#blackContainer { height:20em; background:#000 } div#portfolio { display:none; width:51.75em; height:20em; background:#fc0; } div#blackPanel { width:51.75em; height:20em; background:#000 } div#whitePanel { padding-left:4.19em; height:20em; background:#fff } .panel { float:left } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ ajax/libs/jquery/1.3/jquery.min.js"></script> <script> $(document).ready(function(){ // All Jquery fucntions should reside in here // NEW FUNCTION SHOW PORTFOLIO TAB $(".showPortfolio").click(function () { $("#container").css({'width' : '103.5em', 'overflow' : 'hidden'}); $("#portfolio").show(1000); }); // NEW FUNCTION HIDE PORTFOLIO TAB $(".hidePortfolio").click(function () { $("#portfolio").hide(1000, function(){$ ("#container").css({'width' : '70.06em', 'overflow' : 'visible'});}); }); // End Doc Ready }); </script> </head> <body> <div id="container"> <div id="blackContainer" class="panel"> <div id="portfolio" class="panel" style=""><a class="hidePortfolio" href="#">Hide Portfolio Tab</a></div> <div id="blackPanel" class="panel" style=""><a class="showPortfolio" href="#">Show Portfolio Tab</a></div> </div> <!-- WHITE PANEL --> <div id="whitePanel" class="panel showPages" style="">White Panel</div> <!-- END WHITE PANEL--> </div> </body> </html> ------------------------------------------------------------------------ END CODE ------------------------------------------------------------------------ If you load that code in firefox you will see that by clicking on 'show porfolio', a yellow div slides open and pushes the black div to the right. You click 'hide portfolio' and the black div slides back and the yellow div hides. You can open and close the portfolio div as often as you like and it works a treat. If you try doing the same in safari, it works the first time but then it starts pushing the black div down. I cant for the life of me think what it could be and I have spent ages on it. If one of you kind experts on here could have a quick look at it for me I would more grateful than you can imagine! Thanks in advance, Maffo
