PDA

View Full Version : Load another site page into a DIV



Teapott
12-08-2012, 09:43 PM
Hi there,

I'm making my first site in a few years and have a sidebar menu and a content div. I am trying to have it so that if you click a menu link, the div contents are changed to whatever is in "home.php" or "about.php". When I used to make sites I'd wind up copying and remaking every page including the full-layout and the menu, but I really know that's not the way to go and I'm trying to focus on dynamic web development now.

I'm still not too sure if this is the way to go about it but I've spent the past week learning the basics of PHP and MySQL and now it's looking like I'll need some jQuery/AJAX? Any threads mentioning this though jump too far into it. Am I supposed to use PHP, jQuery, JS, AND AJAX? I'm trying to use innerHTML with JS but it looks like this isn't the best way to do it - I also cant' find an innerHTML method that specifically would load "myPage.php" into my content div. I'm just wondering if I'm even doing this the right way? In terms of industry standards, what is the accepted way to dynamically load content these days for a site with a few pages built in Notepad++? I just want to make sure I'm starting off on the right foot as this is the field I'd like to go into. I'm good with the basics of HTML and CSS, I just haven't looked too much at this side of things before.

http://i.imgur.com/5uppM.png

bernie1227
12-08-2012, 10:43 PM
As far as I can tell, you're asking for something like this:
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/
Which can load content from other weboages.

Teapott
12-08-2012, 11:13 PM
As far as I can tell, you're asking for something like this:
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/
Which can load content from other weboages.

Hi Bernie, I've tried this and had no luck unfortunately, just keeps opening in a new page. Do you happen to know what I would have left out in my code below?



<!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" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="author" content="" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<title>Nest</title>


<script type="text/javascript">

function updateContent(page){
document.getElementById('content').innerHTML = "test";
}



var countries=new ddajaxtabs("countrytabs", "content")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

</head>

<body>

<div id="wrapper">
<div id="content">
content
<hr>
test
<?php
echo "Test";
?>

</div> <!-- end #content -->

<div id="sidebar">
<div id="fixed">

<ul id="countrytabs">
<li><a href="#" class="selected" rel="#default">Tab 1</a></li>
<li><a href="home.php" rel="content">Tab 2</a></li>
<li><a href="about.php" rel="content">Tab 3</a></li>
</ul>

<br />
my shoutbox will go here
</div>
</div> <!-- end #sidebar -->
</div> <!-- End #wrapper -->

</body>

</html>




Thanks very much for your help.

Beverleyh
12-09-2012, 12:07 AM
That's a great script.

I also think you can pretty much accomplish what you want with php and the include() command too.

Picture this; you *could* have all your HTML, Upto the opening content <div> tag, stored in a common header file (this could include the DOCTYPE, <head> section opening <body> tag and menu etc), and then everything from the closing </div> tag could be stored in a common footer file (the footer bar and closing </body> and </html> tag). Everything in the middle would be the differing content for each particular page.

It would be like breaking your pages into jigsaw pieces - the header and footer file would be jigsaw pieces that you use on every page, so when you make a change, you only edit one file and the change reflects site-wide. The content however, would be specific to each page, so all of your pages could be laid our like this;


<?php include('header.html');?>

<!-- page content HTML here -->
<p>Hello. This the some information about me. </p>

<?php include('footer.html');?>- here's a tutorial that will hopefully help http://www.tizag.com/phpT/include.php

molendijk
12-09-2012, 12:09 AM
There are many ways to accomplish what you want. Here's one way. Experiment with it. I used html files:
index.html:
<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<script>window.location.replace('home.html')</script>
</head>
<body></body>
</html>
---
menu.html:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
</head>
<body>
<div style="position: absolute; top: 0px; right: 0px; padding-top: 20px; width:200px; bottom:0px; background: #dedede; font-family: verdana; font-size:12px">
<div style="position: relative; text-align: center">
LOGO<br><br><br><br>
<a href="home.html">HOME</a><br><br>
<a href="about.html">ABOUT</a>
</div>
</div>
</body>
</html>
---
menu.js:
$('html').append("<iframe name='framename' src='menu.html' style='position:absolute; width:0px; height:0px; left:-10000px' ></iframe>")
function include()
{$('body').append(frames['framename'].document.documentElement.innerHTML)}
window.onload=include
---
home.html:
<!doctype html>
<html >
<head>
<title>HOME</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="menu.js"></script>
</head>
<body>
<div style="position: absolute; left: 0px; top: 0px; right:200px; bottom: 0px; padding:10px; font-family: verdana; font-size:12px; border:10px solid #dedede">
THIS IS HOME.HTML
<hr>
CONTENT
</div>
</body>
</html>
---
about.html:
<!doctype html>
<html >
<head>
<title>ABOUT</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="menu.js"></script>
</head>
<body>
<div style="position: absolute; left: 0px; top: 0px; right:200px; bottom: 0px; padding:10px; font-family: verdana; font-size:12px; border:10px solid #dedede">
THIS IS ABOUT.HTML
<hr>
CONTENT
</div>
</body>
</html>
---
Although menu.js uses innerHTML, the code you may want to put in menu.html will be preserved thanks to jquery.
Arie.

Teapott
12-09-2012, 12:21 AM
Hi - thanks very much for your replies :) I had tried something similar Beverlyh with include, but was just a bit fed up of copying and pasting and was wondering if there was a more dynamic approach? Is there perhaps a way to change <?php include('contentIWant.html');?> so it would update in place of the DIV?

And thank you molendijk but I probably should have mentioned I wanted to avoid iframes :) A lecturer of ours heavily encouraged us to avoid them these days.

bernie1227
12-09-2012, 12:35 AM
Any thoughts on the Ajax tabs script?

Teapott
12-09-2012, 12:38 AM
Hi Bernie, I thought I'd replied but it looks like my post was held back for moderation for whatever reason? :/

I tried it with the following code and had no joy:

<!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" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="author" content="" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<title>my site</title>


<script type="text/javascript">

function updateContent(page){
document.getElementById('content').innerHTML = "test";
}

var countries=new ddajaxtabs("countrytabs", "content")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>


</head>

<body>
<script src="jquery.js"></script>
<div id="wrapper">
<div id="content">
content
<hr>
test
<?php
echo "Test";
?>

</div> <!-- end #content -->

<div id="sidebar">
<div id="fixed">

<ul id="countrytabs">
<li><a href="#" class="selected" rel="#default">Tab 1</a></li>
<li><a href="home.php" rel="content">Tab 2</a></li>
<li><a href="about.php" rel="content">Tab 3</a></li>
</ul>

<br />
my shoutbox will go here
</div>
</div> <!-- end #sidebar -->
</div> <!-- End #wrapper -->

</body>
</html>




And then it wasn't until I found this code snippet:

<DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="UTF-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(function() {
$("#Menu > li a").each(function() {
var self = $(this);
var href = self.attr("href");
self.attr("href", "javascript: void(0);");
self.click(function() {
$("#Contents").load(href);
});
});
});
</script>
</head>
<body>
<h1>Select!</h1>
<ul id="Menu">
<li><a href="showInfo.php?id=1">First</a></li>
<li><a href="showInfo.php?id=2">Second</a></li>
<li><a href="showInfo.php?id=3">Third</a></li>
</ul>
<div id="Contents"></div>
</body>
</html>



That I realised I'd left out

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>


I guess I should definitely learn how to use Ajax then if I want to do anything useful in the web development world?

Teapott
12-09-2012, 12:40 AM
Hi Bernie, unfortunately any post I try to respond with including code is held back for moderation - I didn't realise this until there now, I thought my previous reply to you from about an hour ago had gone though :/ I tried your link however the links just kept opening in new browser windows - I had left out any reference to including a jQuery.min.js file, I had no idea this was needed as I'd never used it before! However the second post in this thread here (http://www.dreamincode.net/forums/topic/253561-about-the-links/page__p__1474355&#entry1474355) let me know that I did indeed need to have that in - and that code actually works pretty well too. Thanks for your help, bit discouraging for new members though that posts containing code have to be approved D:

bernie1227
12-09-2012, 12:48 AM
Sorry about it being held back for moderating, it must have been caught by the anti-spam filter.

Teapott
12-09-2012, 12:56 AM
Sorry about it being held back for moderating, it must have been caught by the anti-spam filter.

No worries :)

molendijk
12-09-2012, 12:57 AM
And thank you molendijk but I probably should have mentioned I wanted to avoid iframes :) A lecturer of ours heavily encouraged us to avoid them these days.
Your lecturer is right to the degree that iframes may be harmful in certain cases. But that's true for almost everything.
Iframes are harmful if there's a risk that they may destroy the history queue. But that's not the case here.
Iframes are valid elements in html5, and YouTube uses them in their new embeds.
So don't be afraid of iframes if you know what you're doing.
But I agree you shouldn't use them if you aren't aware of certain consequences pertaining to using them.
Arie.

Teapott
12-09-2012, 01:08 AM
Thanks for the advice ;) I've tried a solution using "$("#content").load(href);" which grabs the href from the menu anchors and puts them in my content DIV - however, I'm losing this on refresh. Is there anyway to grab/detect which href is currently within a DIV and code this to persist after refreshing?

At the minute I can get:
window.onbeforeunload = function() {
return "Are you sure you wish to leave the page?";
}

To appear, so I'm just wondering if there's some sort of "#content.getHrefContents" equivalent that I could use when leaving the page, and hopefully put back into #content through some sort of "whenReloading" method? Again I haven't done a lot of web programming so apologies for the stupid method name guessing. Also is this the best way to do this? :/ Or should I give up and try the http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ method that Bernie posted that allows persisting?

bernie1227
12-09-2012, 05:40 AM
It may be better to end up going with my suggestion, however with that method, you could try and retain the current tab using cookies (http://www.w3schools.com/js/js_cookies.asp) and then if the cookie is set open the tab which the cookie refers to.

Beverleyh
12-09-2012, 07:02 AM
Is there perhaps a way to change <?php include('contentIWant.html');?> so it would update in place of the DIV?Yes, with the help of a query string and GET for example;

In your main page (let's say that its called "main.php"), setup your content links like this;
<a href="main.php?c=home">Home</a><br/>
<a href="main.php?c=about">About</a><br/>
<a href="main.php?c=contact">Contact</a>and then also in your main page, put this where you want the div content to appear;
<?php

if (empty($_GET))
{
include('home.html'); // default to showing home content if nothing selected
}
else
{
include($_GET['c'].'.html'); // get page name from 'c' and insert corresponding html content file
}
?>Now for your content, just create a "home.html" page, a "contact.html" page and an "about.html" page with ONLY the HTML for the changing page content inside (no DOCTYPE , <head> or <body> tags, etc - just the fragment of HTML that shows inside the content div).

molendijk
12-09-2012, 03:46 PM
Thanks, Beverleyh, that gave me an idea on how to do it on the client side (using javascript) and WITHOUT IFRAMES.

index.html:

<!doctype html>
<html >
<head>
<title>jQuery Test Demo Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)=='index.html'){window.location.replace('index.html?home.html')}
if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)==''){window.location.replace('index.html?home.html')}
if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)!='index.html'){setTimeout("$('#test').load(document.URL.substring(document.URL.indexOf('?')+1,document.URL.length))",150)}
});
</script>
</head>
<body style="font-family: verdana; font-size: 12px">
INDEX.HTML<br>
<div id="test" style="position: absolute; left:10%; top:10%; right: 20%; bottom: 10%;background: white; border: 10px solid #dedede"></div>
<div style="position: absolute; top: 0px; right: 0px; padding-top: 20px; width:200px; bottom:0px; background: #dedede; font-family: verdana; font-size:12px">
<div style="position: relative; text-align: center">
LOGO<br><br><br><br>
<a href="index.html?home.html">HOME</a><br><br>
<a href="index.html?about.html">ABOUT</a>
</div>
</div>
</body>
</html>
---
about.html:

<!doctype html>
<html >
<head>
<title>ABOUT</title>
<script src="orph.js"></script>
</head>
<body>
<div style="position: absolute; left: 0px; top: 0px; right:0px; bottom: 0px; padding:10px; font-family: verdana; font-size:12px; ">
THIS IS ABOUT.HTML
<hr>
CONTENT
</div>
</body>
</html>
---
home.html:

<!doctype html>
<html >
<head>
<title>HOME</title>
<script src="orph.js"></script>
</head>
<body>
<div style="position: absolute; left: 0px; top: 0px; right:0px; bottom: 0px; padding:10px; font-family: verdana; font-size:12px; ">
THIS IS HOME.HTML
<hr>
CONTENT
</div>
</body>
</html>
---
orph.js (dont't allow pages to show as 'orphans' (without the menu)).

function orph(){//dont't allow pages to show as 'orphans' (without the menu).
if (parent.location == self.location)
parent.location.href="index.html?" + document.URL
}

if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", orph, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", orph );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
orph();
};
}
else
window.onload = orph;
}
---
Arie.

Beverleyh
12-09-2012, 04:39 PM
Hee, hee - don't you just love the way ideas bounce around :)

That's a really useful script Arie - perfect for non-PHP website projects! Thanks for sharing!

Arie's script demo for reference: http://fofwebdesign.co.uk/template/_testing/js-GET-no-frames/index.html

ajfmrf
12-10-2012, 01:06 AM
Hi Arie,can you email me regarding your script mentioned above.I want to understand they way it works and why/how.

I have a website that uses frames and would like to see how your script could possibly improve my site.

My site is

http://www.web-user.info/index.html

Thats if you have a few minutes and are inclined to do so :cool:

djr33
12-10-2012, 01:09 AM
Arie's been developing this and similar methods for a while. There are a few threads in the "submit a script" section, and I believe he has some blog posts on it too. I think that would help.

molendijk
12-10-2012, 10:03 AM
Hi Bud, see this (http://www.dynamicdrive.com/forums/showthread.php?72342-help-with-Arie-s-script).
Arie.