I am working on a page for my brother. I am using mainly just Jquery and HTML to build it.
The problem that I am running into is that the page loads fine in IE Chrome and FireFox but when you load it in Safari it blows up. You cant go to the reels link without it all coming apart. When you click on reals it SHOULD expand the 4 videos. Then when you click on another button it should close those and move on. However it just leaves them open. This is ONLY in Safari Mind you.
Here is the link http://anthonyrussell.info/test/jbp/index.html
And here is my source
<!--This site is an RT Applications Inc. Production (http://www.AnthonyRussell.info) -->
<!--None of the content on this site is in the public domain. Anything that is taken from this site must first be approaved by the sites owner-->
<!--http://www.JaysonBernard.com Is owned by JaysonBernard and maintained by RT Applications Inc.-->
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><!-- for 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 you not to 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 and 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/>
" An 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 the 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/>
" The Civil Rights Agenda" "Spokesman" 2011<br/>
<br/>
TRAINING<br/>
Act One 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 up Comedian and Writer.<br/>
Improv Skills and 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 by @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 a 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 at all would be aprreciated.
