I've pasted the code I'm working on below.
Code:
<html>
<!-- Main Page Script; Name of this Page is "main.html" -->
<script language="JavaScript" type="text/javascript">
function swapDiv(divID)
{
if(divID=='div001') {
document.getElementById('div001').style.display="block";
document.getElementById('div002').style.display="none";
document.getElementById('div003').style.display="none";
document.getElementById('div004').style.display="none";
}
if(divID=='div002') {
document.getElementById('div001').style.display="none";
document.getElementById('div002').style.display="block";
document.getElementById('div003').style.display="none";
document.getElementById('div004').style.display="none";
}
if(divID=='div003') {
document.getElementById('div001').style.display="none";
document.getElementById('div002').style.display="none";
document.getElementById('div003').style.display="block";
document.getElementById('div004').style.display="none";
}
if(divID=='div004') {
document.getElementById('div001').style.display="none";
document.getElementById('div002').style.display="none";
document.getElementById('div003').style.display="none";
document.getElementById('div004').style.display="block";
}
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
#mcont {
margin:0 auto;
border : solid 2px #000;
padding : 0px;
width : 400px;
height : 400px;
text-align:center;
color: #FF0033;
}
#div001 {
display:none
width : 399px;
height : 299px;
overflow-y: auto;
overflow-x: hidden;
text-align:center;
color: #000000;"
}
#div002 {
display:none;
width : 399px;
height : 299px;
overflow-y: auto;
overflow-x: hidden;
text-align:center;
color: #000000;"
}
#div003 {
display:none;
width : 399px;
height : 299px;
overflow-y: auto;
overflow-x: hidden;
text-align:center;
color: #000000;"
}
#div004 {
display:none;
width : 399px;
height : 299px;
overflow-y: auto;
overflow-x: hidden;
text-align:center;
color: #000000;"
}
</style>
<body>
<div id="mcont">
<div style="width:399px; height:44px; text-align:center; border : solid 1px #000; margin:0 auto; padding-top : 5px;">
HEADER
</div>
<div style="width:399px; height:299px; border : solid 1px #000; margin:0 auto;">
<div id="div001">
<h3> Home Content</h3>
<br/>
<p>As you can see by clicking the links below.</p>
<p>Just the content in this DIV changes.</p>
<p>The 'main.html' page, this page does not.</p>
<p>I like this..</p>
</div>
<div id="div002">
<h3> About Content</h3>
<br/>
<p>The 'main.html' page doesn't change.</p>
<p>What I can not figure out is the following.</p>
<p>Lets say the user clicks on a 'target="_blank"' link HERE.</p>
<p>On the new blank page are the same links as below.</p>
</div>
<div id="div003">
<h3> Galleries Content</h3>
<br/>
<p>What can I do to get those links on that entirely diff. page.</p>
<p>...To close itself while at the same time...</p>
<p>... going to the link on this page?</p>
<p>Closing itself won't be a prob coding.</p>
<p>The navigating is.</p>
</div>
<div id="div004">
<h3> Contact Me Content</h3>
<br/>
<p>On a completely different note.</p>
<p> Hope you don't mind my asking a 2nd question.</p>
<p>This div layout works in all my browsers except...</p>
<p>IE. Any idea what I'm missing?</p>
<p>Many thanks for any help</p>
</div>
<div style="width:400px; height:50px; text-align:center; border : solid 0px #000; padding-top : 5px;">
FOOTER MENUS<br/>
<a href="#" onclick="swapDiv('div001')" title="Click here to Go Back Home.">Home</a> |
<a href="#" onclick="swapDiv('div002')" title="Click here to Learn About Me.">About Me</a> |
<a href="#" onclick="swapDiv('div003')" title="Click here to visit Our Photo Galleries.">Galleries</a> |
<a href="#" onclick="swapDiv('div004')" title="Click here to Contact Me.">Contact Me</a>
</div>
</div>
</body>
</html>
As you can see by this layout, clicking the Footer Menus,
changes the content in in the middle DIV.
The 'main.html' page, does not reload.
I like this...
What I can not figure out is this;
Lets say the user clicks on a 'target="_blank"' link.
On this new blank page are the same links that are on the main.html page.
What can I do to get those links on that new blank page,
...To close itself and at the same time...
... navigate to the clicked link on the main.html page?
I know the code to close itself.
Getting the navigation to work I don't know.
The research I've done so far doesn't seem to present a solution.
On a completely different note, I've a 2nd question. Popped up while slapping this together.
Hope you don't mind my asking and that it is simple to answer.
This div layout works in all my browsers except...Internet Explorer.
Any idea what I'm missing?
Many thanks for any help.
Junior Coders
swapDIV on a Different Page
Originally Posted by djr33
Posting Permissions
Reply With Quote
Bookmarks