nblackwood Posted September 5, 2009 Share Posted September 5, 2009 I posted a similar post earlier, but my question wasn't fully answered. I am building a site in php/html, and am trying to figure out how to display a web page inside of a table when a user clicks on a link. I also need it to return to default content, or change to the content of another link when that other link is clicked. Thanks for any help. Link to comment https://forums.phpfreaks.com/topic/173230-forwarding-links-to-html-table-on-page/ Share on other sites More sharing options...
Jnerocorp Posted September 5, 2009 Share Posted September 5, 2009 are you looking for something like this? http://jnerocorp.com/tests/ Link to comment https://forums.phpfreaks.com/topic/173230-forwarding-links-to-html-table-on-page/#findComment-913156 Share on other sites More sharing options...
nblackwood Posted September 5, 2009 Author Share Posted September 5, 2009 yes, exactly like that. any code snippets or pointers would be most obliged Link to comment https://forums.phpfreaks.com/topic/173230-forwarding-links-to-html-table-on-page/#findComment-913162 Share on other sites More sharing options...
Jnerocorp Posted September 5, 2009 Share Posted September 5, 2009 OK this script uses ajax/javascript here is the files you would need ========================== index.html (or .php) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Instant Page change Script</title> <script type="text/javascript"> var loadedobjects="" var rootdomain="http://"+window.location.hostname function ajaxpage(url, containerid){ var page_request = false if (window.XMLHttpRequest) // if Mozilla, Safari etc page_request = new XMLHttpRequest() else if (window.ActiveXObject){ // if IE try { page_request = new ActiveXObject("Msxml2.XMLHTTP") } catch (e){ try{ page_request = new ActiveXObject("Microsoft.XMLHTTP") } catch (e){} } } else return false page_request.onreadystatechange=function(){ loadpage(page_request, containerid) } page_request.open('GET', url, true) page_request.send(null) } function loadpage(page_request, containerid){ if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) document.getElementById(containerid).innerHTML=page_request.responseText } function loadobjs(){ if (!document.getElementById) return for (i=0; i<arguments.length; i++){ var file=arguments[i] var fileref="" if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding if (file.indexOf(".js")!=-1){ //If object is a js file fileref=document.createElement('script') fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src", file); } else if (file.indexOf(".css")!=-1){ //If object is a css file fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", file); } } if (fileref!=""){ document.getElementsByTagName("head").item(0).appendChild(fileref) loadedobjects+=file+" " //Remember this object as being already added to page } } } </script> <style type="text/css"> #leftcolumn{ float:left; width:150px; height: 400px; border: 3px solid black; padding: 5px; padding-left: 8px; } #leftcolumn a{ padding: 3px 1px; display: block; width: 100%; text-decoration: none; font-weight: bold; border-bottom: 1px solid gray; } #leftcolumn a:hover{ background-color: #FFFF80; } #rightcolumn{ float:left; width:550px; min-height: 400px; border: 3px solid black; margin-left: 10px; padding: 5px; padding-bottom: 8px; } * html #rightcolumn{ /*IE only style*/ height: 400px; } </style> </head> <body> <div id="leftcolumn"> <a href="javascript:ajaxpage('ajaxfiles/external.htm', 'rightcolumn');">Page1</a> <a href="javascript:ajaxpage('ajaxfiles/external2.htm', 'rightcolumn');">Page2</a> <a href="javascript:ajaxpage('ajaxfiles/external3.htm', 'rightcolumn');">Page3</a> <div style="margin-top: 2em"></div> </div> <div id="rightcolumn"><h3>Choose a page to load.</h3></div> <div style="clear: left; margin-bottom: 1em"></div> </body> </html> Now there will be another directory(folder) called "ajaxfiles" in that folder will be the following files. external.htm external2.htm external3.htm The external files are the files that are loaded when you click a link you can have whatever you want in those files style.css: #rightcolumn{ background-color: #E0FFB3; } Link to comment https://forums.phpfreaks.com/topic/173230-forwarding-links-to-html-table-on-page/#findComment-913166 Share on other sites More sharing options...
nblackwood Posted September 5, 2009 Author Share Posted September 5, 2009 Excellent, thanks. Can I mod the script to include tables I define for the links to be clicked, or does is it dependent on that exact layout? Link to comment https://forums.phpfreaks.com/topic/173230-forwarding-links-to-html-table-on-page/#findComment-913178 Share on other sites More sharing options...
Jnerocorp Posted September 5, 2009 Share Posted September 5, 2009 you would be better off using <div> fields over tables you can do the same stuff as long as u set it up with the style.css Link to comment https://forums.phpfreaks.com/topic/173230-forwarding-links-to-html-table-on-page/#findComment-913186 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.