Vinvar Posted June 18, 2011 Share Posted June 18, 2011 Hello, I once (anno 2002) build a site using php. I used php in combination with a <iframe>. If a user clicked on a link, the content of the link was loaded in the iframe. As for my new site I want to use the same trick but the <iframe> tag is being replaced. Therefore I tried to build it within a <div> tag. Hereby my code. (This is a reduced version of my code on http://starlitsea.com/test/index(php).php?page=link1. Normally I have five links but to save lines I reduced the total to 2 in this example.) <?php header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1 header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past //Better use $_GET instead of http_get_vars, is deprecated if(isset($_GET['page'])) { $page = $_GET['page']; } else { $page = 'default'; } switch ($page) { case 'link1': $content = file_get_contents('./content/lorem_ipsum.html'); //Use @ to supress warnings when the file is not found $pageTitle = 'Pagina 1'; break; case 'link2': $content = @file_get_contents("./content/presskit.html"); $pageTitle = 'Pagina 2'; break; default: //If an invalid page is requested: show page 1 (link1) $content = include("/content/lorem_ipsum.html"); $pageTitle = 'Pagina 1'; } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title><?php echo $pageTitle; ?></title> <!-- Javascript to center main item on page --> <script type="text/javascript" src="./js/screensize.js"></script> <!-- Javascripts for slider/scrollbar in main item --> <script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="./js/jquery-ui-1.8.2.custom.min.js"></script> <script type="text/javascript" src="./js/jquery.mousewheel.min.js"></script> <script type="text/javascript" src="./js/tabcontent.js"> </script> <!-- If linking to an external css stylesheet, use link rel --> <link rel="stylesheet" type="text/css" href="css/ie7.css" media="screen"></link> </head> <body> <!-- Apparentely this has to be in the <body> tag --> <!-- Otherwise it does not work in firefox and chrome --> <script type="text/javascript" src="./js/vertical_slider.js"></script> <!-- Main item --> <div id="content"> <!-- Prikbord: main --> <div id="scroll-pane"> <div id="scroll-content"> <?php echo $content; ?> </div> </div> <!-- Main item: menu --> <div class="prikbord_main_menu"> <div class="prikbord_main_menu_home" style="background-color: red;"> <p><a href="?page=link1">Home</a></p> </div> <div class="prikbord_main_menu_menu2" style="background-color: yellow;"> <p><a href="?page=link2">Link 2</a></p> </div> </div> </div> </body> </html> It works, that is not the problem. It is working by refreshes the total page and that is the problem. (In IE and chrome) the refresh makes the site 'flicker' as all images are reloaded. I was wondering if there is a way to reload the <div id="scroll-pane"> without the phased <iframe> tag, only? Quote Link to comment https://forums.phpfreaks.com/topic/239711-successor-iframe-vs-no-page-refresh/ Share on other sites More sharing options...
pornophobic Posted June 18, 2011 Share Posted June 18, 2011 You would want to load the contents of what your iframe would normally be using xmlhttprequest in javascript. Here is an example javascript that will do this. remote = false; if (window.XMLHttpRequest) { remote = new XMLHttpRequest(); } else if (window.ActiveXObject) { //Thanks, Microsoft. try { remote = new ActiveXObject("MSXML2.XMLHTTP"); } catch(exception2) { try { remote = new ActiveXObject("Microsoft.XMLHTTP"); } catch (error) { alert("Your browser is most likely out of date. Why not try updating?"); }}} function getData(source, divId) { if (remote) { var div = document.getElementById(divId); remote.open("GET", source); remote.onreadystatechange = function() { if (remote.readyState === 4 && remote.status == 200) { div.innerHTML = remote.responseText; } } remote.send(null); } } To use this, you will have to replace the href in your links to "#" and add in onClick="getData('index.php?link=1', 'scroll-content');" into each a tag. This will load the frame into the div when a user clicks on a link without refreshing the page. example: <a href="#" onClick="getData('index.php?link=1', 'scroll-content');">Link 2</a> If you want to have scrolling in that div still, because by default I don't think it will have that, add a css property to your scroll-content div: #scroll-content{ overflow:scroll;} Quote Link to comment https://forums.phpfreaks.com/topic/239711-successor-iframe-vs-no-page-refresh/#findComment-1231378 Share on other sites More sharing options...
xyph Posted June 18, 2011 Share Posted June 18, 2011 Use something like http://code.google.com/p/reallysimplehistory/ as well. I hate AJAX sites that don't let me use my mouse's back button Quote Link to comment https://forums.phpfreaks.com/topic/239711-successor-iframe-vs-no-page-refresh/#findComment-1231389 Share on other sites More sharing options...
pornophobic Posted June 18, 2011 Share Posted June 18, 2011 Use something like http://code.google.com/p/reallysimplehistory/ as well. I hate AJAX sites that don't let me use my mouse's back button He's not loading entire pages, just a div and there are only five links. I don't know if a history would be needed? It's up to the coder, ultimately but IMHO if it's just five links it would be a bit much to add a history for five pages. Then again, I code with the KISS principle in mind. Quote Link to comment https://forums.phpfreaks.com/topic/239711-successor-iframe-vs-no-page-refresh/#findComment-1231392 Share on other sites More sharing options...
Vinvar Posted June 18, 2011 Author Share Posted June 18, 2011 Thx, pornophobic! I have it working now. As I use a modifed js slider as scrollbar, the only problem is the removal / add new of the slider in 'starlitsea.com/test/js/load-div.js'. (See http://www.starlitsea.com/test/index(php).php and click multiple times on 'home') But this problem is for an other forum if I do not find the solution . @xyph: thx for the suggestion. As pornophobic says, my page has five links only. Still a good suggestion. First I want to fix the slider problem and maybe then I shall pay attention to your suggestion. Quote Link to comment https://forums.phpfreaks.com/topic/239711-successor-iframe-vs-no-page-refresh/#findComment-1231413 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.