Jump to content

<a href>link click div image load breaks div iframe webpage laod


Gweebar

Recommended Posts

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'
}
 
 
</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>
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.