Good evening folks.
I am very much so a newbie at writing webpages, and I will admit I am much stronger in martial arts than coding. But I have spent the last week losing more hair then required trying to get the page I am developing to work as intended.
Primary issue, I have several links they load images into Div's there is something goofy going on when I click on a link for example to load my images works like a champ, but then when I click on my link to load the iframe webpage to display the Shotokan Federation inside my webpage it opens it in a new browser.
But if I reload the page and click on Shotokan Federation link works like a champ loads into same page inside my iframe.
moment I click on any other link and go back to shotokan fed it does not work as intended. loads the webpage on a newly opened browser.
Below is my source and yes I am new so please I am trying really hard to get it right.
Also the only way this looks right is on google chrome too but thats a different issue for the next round of banging head into concrete.
<PS> I commented a lot of my code to make it easier to follow.
<script src="respond.min.js"></script>
<!-- Java Script for diplaying two images on single click Instructors Link in Div4 and Div5 -->
<script type="text/javascript">
function Instructors(){
document.getElementById("div5").style.display="block";
document.getElementById("div4").innerHTML="<img src='Images/Instructors/Instructors.png' alt=''/>";
document.getElementById("div5").innerHTML="<img src='Images/Instructors/Instructor_pics.jpg' alt=''/>";
}
<!-- Java Script for diplaying two images on single click Tang Soo Do Link in Div4 and Div5 -->
function TangSooDo(){
document.getElementById("div5").style.display="block";
document.getElementById("div4").innerHTML="<img src='Images/TangSooDo/TangSooDo_Brief_History.png' alt=''/>";
document.getElementById("div5").innerHTML="<img src='Images/TangSooDo/Hwang_Kee.jpg' alt=''/>";
}
<!-- Java Script for diplaying two images on single click Shotokan Link in Div4 and Div5 -->
function Shotokan(){
document.getElementById("div5").style.display="block";
document.getElementById("div4").innerHTML="<img src='Images/Shotokan/Shotokan_Brief_History.png' alt=''/>";
document.getElementById("div5").innerHTML="<img src='Images/Shotokan/Funakoshi.jpg' alt=''/>";
}
<!-- javascript to load Shotokan Federation into Iframe -->
function ShotokanFed(link){
window.ifrm.location=link;
window.location.hash='ifrm'
window.open("http://www.jka.or.jp/english/e_index.html","ifrm","scrollbars=no");
}
</script>
</head>
<body>
<!-- Header Image -->
<div class="gridContainer clearfix">
<div id="div1" class="fluid" align="center"><img src="Images/Banner/Header_Banner.png" alt="Banner" /></div>
<!-- Top Navigator Div2 -->
<div id="div2" class="fluid"><div align="right" style="margin-bottom: 1em;">
<p class="alignleft"><a href="index.html" target="_self">Home</a> | Sign In</p>
<p class="alignright">Follow Us | Feedback | Contact Us | Join Us</p>
</div>
<div style="clear: both;"></div>
<hr></div>
<!-- Side Navigator -->
<div id="div3" class="fluid">
<p>
<a href="javascript:Instructors();">Instructors</a>
</p>
<p>Events</p>
<p>Class Schedule</p>
<p>Class Locations</p>
<p>
<a href="javascript:TangSooDo();">Tang Soo Do</a>
</p>
<p>
<a href="javascript:Shotokan();">Shotokan</a></p>
<p>
<a id="ShotokanFedLink" title="Click to load Shotokan Federation Page" href="PleaseEnableJavascript.html" onclick="ShotokanFed();return false;">Shotokan Federation</a>
<!--<a href="javascript:ShotokanFed();">Shotokan Federation</a>-->
<!--onClick="$('#ifrm').show();"-->
<!--<a href="javascript:void(0)" onclick="ShotokanFed('http://jka.or.jp/english/e_index.html')">Shotokan Fed</a>-->
</p>
<p>Soo Bak Do Federation</p>
</div>
<!-- Content -->
<div id="div4" class="fluid" align="center"><iframe id="ifrm" frameborder="0" height="750" width="100%" scrolling="no"></iframe></div>
<!-- Side Images -->
<div id="div5" class="fluid"></div>
<!-- Supported site Links -->
<div id="div6" class="fluid"><hr>
<p class="alignright"><a href="http://www.uswka.us" target="new"><img src="Images/Badges/uswkasmalllogo.png" width="65" height="63"></a></p>
</div><div style="clear: both;"></div>
<!-- Footer -->
<div id="div7" class="fluid"><hr></div>
</div>
</body>
</html>