web page within webpage

[ball420]

here is the situation.. i want to put a box with a scroller that has two tabs one with events and the other bio. when the bio tab is clicked it doesn't jump pages it just changes what is in the box. and vise versa any suggestions if i need to expain better let me know thanks for the help below is wha i'm talking about

[piznac]

Would a iframe within an iframe work?.. Not sure if thats possible but it might work,..

[RichardRotterdam]

you can use a iframe or a div with a scrollbar

the iframe is probably the easiest way.

 

all you have to do is change the iframe source on a click event.

<script>
function changeContent(){
document.getElementById('content').src="http://www.phpfreaks.com";
}
</script>
<button onclick="changeContent()">change iframe</button>
<iframe id="content" src="http://www.google.com">
</iframe>

 

however this method with make the back button useless there are work arounds but i havent looked into that yet

[Stickybomb]

this can also be accomplished via ajax or a number of ways via js.

 

however you will have better seo via the use of an iframe, but if this is little concern to you then try this.

 

the scroll bar is simply a div with an overflow:scoll style applied

 

then for the tabs each one would have an onclick="pageContent(this)" event changing its background color and switching the contents of the div.

 

first create an html file for each of the tabs and lay them out appropriately.

 

then you need the following js

 

var xmlHttp;

//contains all the tabs ids
var tabs = array('tab1','tab2','tab3');

function pageContent(tab){

var currentTab = document.getElementById(tab);

for(i=0; i < tabs.length; i++){
var clear = document.getElementById(tabs[i]);
clear.style.backgroundColor='default tab background color';
clear.style.color='default color of font';
}

var currentTab = document.getElementById(tab);

currentTab.style.backgroundColor='current tab background color';
currentTab.style.color='color of font';

getContent(tab);
}

function getContent(page){ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
} 
var url = page+'.html';
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("the id of the content div").innerHTML=xmlHttp.responseText ;
} 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}
return xmlHttp;
}

 

i have not tested this but it should work for you.