html - Safari browser not processing JQuery Right but works in IE|Chrome|FireFox Just fine -
i working on page brother. using jquery , html build it.
the problem running page loads fine in ie chrome , firefox when load in safari blows up. cant go reels link without coming apart. when click on reals should expand 4 videos. when click on button should close , move on. leaves them open. in safari mind you.
here link http://anthonyrussell.info/test/jbp/index.html
and here source
<!--this site rt applications inc. production (http://www.anthonyrussell.info) --> <!--none of content on site in public domain. taken site must first approaved sites owner--> <!--http://www.jaysonbernard.com owned jaysonbernard , maintained rt applications inc.--> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><!-- running live--> <!-- <script src="jquery-1.9.1.min.js"></script> <!--for running local--> <script> $(document).ready(function(){ $("#welcometable").hide(); $("#count").show(); $("#count").text("5").delay(500).fadeout(1000,function(){ $("#count").text("4").show().delay(500).fadeout(1000,function(){ $("#count").text("3").show().delay(500).fadeout(1000,function(){ $("#count").text("2").show().delay(500).fadeout(1000,function(){ $("#count").text("1").show().delay(500).fadeout(1000, function(){ $("#welcometable").fadein(500,function(){ $("#welcomeimage").fadein(500); $("#title").fadein(500,function(){ $("#homebt").fadein(500,function(){ $("#reelbt").fadein(500,function(){ $("#resumebt").fadein(500,function(){ $("#photosbt").fadein(500,function(){ $("#contactbt").fadein(500); }); }); }); }); }); }); }); }); }); }); }); $("#homebt").click(function(){ $("#video").hide(); $(".content").hide(); $("#welcomeimage").slidedown(200); }); $("#reelbt").click(function(){ $("#video").hide(); $(".content").hide(); $("#welcomeimage").slideup(200, function(){ $("#reelpage").slidedown(1000); }); }); $("#resumebt").click(function(){ $("#video").hide(); $(".content").hide(); $("#welcomeimage").slideup(200, function(){ $("#resumepage").slidedown(1000); }); }); $("#photosbt").click(function(){ $("#video").hide(); $(".content").hide(); $("#welcomeimage").slideup(200, function(){ $("#photospage").slidedown(1000); }); }); $("#contactbt").click(function(){ $("#video").hide(); $(".content").hide(); $("#welcomeimage").slideup(200, function(){ $("#contactpage").slidedown(1000); }); }); $("#submit").click(function(){ alert("i told not click me bitch!"); }); $("#img1").mouseover(function(){ $("#img1").css("width","400"); }); $("#img1").mouseout(function(){ $("#img1").css("width","200"); }); $("#img2").mouseover(function(){ $("#img2").css("width","400"); }); $("#img2").mouseout(function(){ $("#img2").css("width","200"); }); $("#img3").mouseover(function(){ $("#img3").css("width","400"); }); $("#img3").mouseout(function(){ $("#img3").css("width","200"); }); $("#img4").mouseover(function(){ $("#img4").css("width","400"); }); $("#img4").mouseout(function(){ $("#img4").css("width","200"); }); $("#img5").mouseover(function(){ $("#img5").css("width","400"); }); $("#img5").mouseout(function(){ $("#img5").css("width","200"); }); $("#img6").mouseover(function(){ $("#img6").css("width","400"); }); $("#img6").mouseout(function(){ $("#img6").css("width","200"); }); $("#img7").mouseover(function(){ $("#img7").css("width","400"); }); $("#img7").mouseout(function(){ $("#img7").css("width","200"); }); $("#img8").mouseover(function(){ $("#img8").css("width","400"); }); $("#img8").mouseout(function(){ $("#img8").css("width","200"); }); $("#img9").mouseover(function(){ $("#img9").css("width","400"); }); $("#img9").mouseout(function(){ $("#img9").css("width","200"); }); $("#img10").mouseover(function(){ $("#img10").css("width","400"); }); $("#img10").mouseout(function(){ $("#img10").css("width","200"); }); $("#img11").mouseover(function(){ $("#img11").css("width","400"); }); $("#img11").mouseout(function(){ $("#img11").css("width","200"); }); $("#img12").mouseover(function(){ $("#img12").css("width","400"); }); $("#img12").mouseout(function(){ $("#img12").css("width","200"); }); $("#img13").mouseover(function(){ $("#img13").css("width","400"); }); $("#img13").mouseout(function(){ $("#img13").css("width","200"); }); }); </script> </head> <body> <!--buttons , landing page logic--> <center> <table border=0 id="welcometable" style="display:none; float:center;"> <td width=350> <!--<p id="title" style="display:none; font-size:70; line-height:55%; margin:2%">jayson bernard</p>--> <img id="title" style="display:none; margin:2%" src="images/jblogo.png"/> <br> <table border=0> <td width=350 height=50> <button id="homebt" style="height:50; width:60; display:none;">home</button> <button id="reelbt" style="height:50; width:60; display:none;">reel</button> <button id="resumebt" style="height:50; width:70; display:none;">resume</button> <button id="photosbt" style="height:50; width:60; display:none;">photos</button> <button id="contactbt" style="height:50; width:70; display:none;">contact</button> </td> </table> </td> <td> <img style="display:none; line-height:70%;" id="welcomeimage" src="images/landingpageimg.png" height=800 > </td> </table> <p id="count" style="font-size:150; margin:10% 45%; display:none;"></p> </center> <!--end--> <!--begining--> <center> <table style="display:none;" id="reelpage" class="content"> <tr> <td> <h1>reel</h1> </td> </tr> <tr> <td> <iframe width="560" height="315" src="http://www.youtube.com/embed/hgc0fbjezr4?rel=0" frameborder="0" allowfullscreen></iframe> <iframe width="560" height="315" src="http://www.youtube.com/embed/zfsow2yy9o8?rel=0" frameborder="0" allowfullscreen></iframe> </td> </tr> <tr> <td> <iframe width="560" height="315" src="http://www.youtube.com/embed/ujo5o78qx54?rel=0" frameborder="0" allowfullscreen></iframe> <iframe width="560" height="315" src="http://www.youtube.com/embed/gr0zfqva0cm?rel=0" frameborder="0" allowfullscreen></iframe> </td> </tr> </table> </center> <!--end--> <!--begining--> <center> <table style="display:none;" id="resumepage" class="content"> <td width=600> <h1>resume</h1> <p>hair: brown<br/> eyes: blue<br/> height: 6'1"<br/> weight: 190 lbs<br/> <br/> film character director<br/> "the landlord" "qvc host" by: emile hyde<br/> " d.i.n.k.'s" " charles" by: robert alaniz<br/> " unfortunate idea" "the clown" by: nick scala<br/> " ill will" "chris" by: t.a. jones<br/> " xyresin" "luke" by: rice omary<br/> <br/> television<br/> "taking lunge" reality show (me) pesent<br/> " chicago fire" "first basemen" 2012<br/> "underemployed" "protective father" 2011<br/> "turks" "leather clad guy" 1999<br/> "er" "school teacher" 1998<br/> <br/> commercials<br/> "green landscaping" " satisfied customer" 2011<br/> " civil rights agenda" "spokesman" 2011<br/> <br/> training<br/> act 1 studio scene study/ advanced o'brian<br/> second city classes a-d & writing upon request<br/> marybeth liss (red twist) acting coach/vocal trainer marybeth liss<br/> <br/> special skills<br/> stand comedian , writer.<br/> improv skills , comedic timing.<br/> training in judo.<br/> broad sword trained.</p> </td> </table> <center> <!--end--> <!--begining--> <table style="display:none;" id="photospage" class="content"> <td width=600> <h1>photos</h1> <table> <tr> <td> <img id="img3" src="photos/3.jpg" width="200"/> <img id="img4" src="photos/4.jpg" width="200"/> <img id="img1" src="photos/1.jpg" width="200"/> <img id="img2" src="photos/2.jpg" width="200"/> <img id="img7" src="photos/7.jpg" width="200"/> <img id="img10" src="photos/10.jpg" width="200"/> <img id="img11" src="photos/11.jpg" width="200"/> </td> <td> <img id="img5" src="photos/5.jpg" width="200"/> <img id="img6" src="photos/6.jpg" width="200"/> <img id="img8" src="photos/8.jpg" width="200"/> <img id="img9" src="photos/9.jpg" width="200"/> <img id="img12" src="photos/12.jpg" width="200"/> <img id="img13" src="photos/13.jpg" width="200"/> </td> </tr> </table> </td> </table> <!--end--> <!--begining--> <center> <table style="display:none;" id="contactpage" class="content"> <tr> <td> <h1>contact</h1> </td> </tr> <tr> <td> <a class="twitter-timeline" data-dnt="true" href="https://twitter.com/mrjaybernard" data-widget-id="319617825352323072">tweets @mrjaybernard</a> <script>!function(d,s,id){var js,fjs=d.getelementsbytagname(s)[0];if(!d.getelementbyid(id)){js=d.createelement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentnode.insertbefore(js,fjs);}}(document,"script","twitter-wjs");</script> </td> <td valign="top"> <table> <tr> <td> <a href="http://www.imdb.com/name/nm3981346/" target=_blank border="0"><img src="images/imdblogo.jpg" width=100 height=100 border="0"/></a> </td> <td> <a href="https://www.facebook.com/jayson.bernard1" target=_blank border="0"><img src="images/facebook_icon.png" width=100 height=100 border="0"/></a> </td> </tr> </table> <form > send me message! <br/> <textarea cols=30 rows=1>subject</textarea> <br/> <textarea cols=30 rows=10>content</textarea> <br/> <button id="submit" style="width:265;">send</button> </form> </td> </tr> </table> </center> <!--end--> </body> </html> any insight @ aprreciated.
i work reduce complexity of code. think of in parts - have part counts down timer, part hides timer , reveals buttons, , maybe part controls delay @ each button revealed.
by reducing complexity, , improving readability, can more troubleshoot code in various browsers , environments. iframe's not hiding along container, this seems have been asked once before.
consider following, viewable on http://jsfiddle.net/jonathansampson/9b39g/:
// important references var countdn = $("#countdown"), buttons = $("#buttons a"), seconds = 5; // interval handle countdown var cinterval = setinterval(function () { countdn.fadeout(250, reducenum); }, 1000); // logic responsible countdown function reducenum () { if ( --seconds ) { $(this).text(seconds).fadein(250); } else { clearinterval(cinterval); transitionlayout(); } } // logic reveal our buttons when time right function revealbuttons () { buttons.each(function (index) { $(this).delay(index * 500).animate({ opacity: 1 }, 1000); }); } // logic handle transition function transitionlayout () { countdn.remove(); revealbuttons(); }
Comments
Post a Comment