loading content into div tags!

ConTRo13R · 12 Apr 2008 at 19:44

Im designing a website and want to create it to just be on one page with all the text on different pages being loaded into the central div tag on the main page! so the user actually never leaves this first page!!!!

so basically i want to load content (plain text) from one page that i have into a div tag on my home page at the click of one of my hyperlinks!

any help please

nickels · 12 Apr 2008 at 20:21

errmmm wouldnt the easiest thing to do is put iframes in? (eeeww)

either that or i think ajax could ? but have no idea how to do it.... ive only skimmed over ajax so dont ask me anything on that

nickels

Vai · 12 Apr 2008 at 20:39

If your using something like PHP could you just put an include statement in the Div tag on the main page referencing the content you want to be displayed?

That's often what I do, for example in the pages have an include("header.php") and include("footer.php").

ChrisB · 12 Apr 2008 at 20:53

javascript (Ajax) and try jquery to make it easier

Paul91 · 12 Apr 2008 at 22:03

If you mean something like this, it's just done with Javascript:

Code:

function page1(){
	document.getElementById('index').innerHTML = 'New content for index div';
	document.getElementById('right').innerHTML = 'New content for right div';
}
function page2(){
	document.getElementById('index').innerHTML = 'New content for index div';
	document.getElementById('right').innerHTML = 'New content for right div';
}

You will have the divs of your front page (which obviously can be styled in your CSS):

Code:

<div id="index">Content for index div</div>
<div id="right">Content for right div</div>

Then, call the function on the hyperlink:

Code:

<a href="#" onclick='page1()'>Page 1</a>
<a href="#" onclick='page2()'>Page 2</a>

I've chosen to demonstrate the change of two divs, just incase - if you have one div that you would like to change to 'loading' while the other div is loading images or something. Be sure to remember to link your HTML file to the Javascript file.

ConTRo13R · 12 Apr 2008 at 22:13

i frames i cant seem to get right! lol js seems to be the way forwards here, Ajax i haven't touched before soooo

ConTRo13R · 12 Apr 2008 at 22:22

Paul91 said:
If you mean something like this, it's just done with Javascript:

Code:

function page1(){ document.getElementById('index').innerHTML = 'New content for index div'; document.getElementById('right').innerHTML = 'New content for right div'; } function page2(){ document.getElementById('index').innerHTML = 'New content for index div'; document.getElementById('right').innerHTML = 'New content for right div'; }

You will have the divs of your front page (which obviously can be styled in your CSS):

Code:

<div id="index">Content for index div</div> <div id="right">Content for right div</div>

Then, call the function on the hyperlink:

Code:

<a href="#" onclick='page1()'>Page 1</a> <a href="#" onclick='page2()'>Page 2</a>

I've chosen to demonstrate the change of two divs, just incase - if you have one div that you would like to change to 'loading' while the other div is loading images or something. Be sure to remember to link your HTML file to the Javascript file.

being a real noob what would i put where? and yea exactly like that site thats perfectly right

zinc · 12 Apr 2008 at 22:26

Paul91 Kinda beat me to it lol but Il post the way I wouild do it. You could write one javascript function that takes a parameter and in the function depending on which argument you receive you display that content in the div, something like this?:

Code:

function showContent(n)
{
var contentString = " "
switch(n)
	{
	case 0: contentString += 'Homepage content';break;
	case 1:	contentString += 'About page content';break;
	case 2:	contentString += 'Another pages content';break;
	case 3:	contentString += 'Another pages content';break;
	case 4:	contentString += 'Another pages content';break;
	case 5:	contentString += 'Another pages content';break;
	}
   document.getElementById("PageDiv").innerHTML = contentString
}

Then as the a href on all your links pass in a different argument for each link:

<a href="#" onClick="showContent(0);">Home Page</a>
<a href="#" onClick="showContent(1);">Home Page</a>
<a href="#" onClick="showContent(3);">Contact Page</a>

Think this should work, might be a bit rusty

Paul91 · 12 Apr 2008 at 22:28

Create a new file named: content.js and store the Javascript in there (the Javascript is in the first code box, in my post above). Once that's done, insert the following code into the head tags of your HTML:

Code:

<script src="content.js" type="text/javascript"></script>

The div tags go into your HTML page (the second code box, in my post above) - where the content needs to be changed, then, the links go where ever you need them.

furnace · 13 Apr 2008 at 11:09

IMO you should use php or something else server-side. Otherwise you have a website that relies completely on the browsers ability to run javascript. I think javascript/ajax should only be used as a nice extra, leaving the main portion of the site available to people regardless of javscript-ness.

Mattus · 13 Apr 2008 at 23:05

furnace said:
IMO you should use php or something else server-side. Otherwise you have a website that relies completely on the browsers ability to run javascript. I think javascript/ajax should only be used as a nice extra, leaving the main portion of the site available to people regardless of javscript-ness.

Yeah... the JS-only option is pretty bad for accessibility. You could have all the <div>s in one page and show and hide them using CSS, but that also requires JS and falls over on browsers without proper CSS support. Server-side is better.

Dj_Jestar · 14 Apr 2008 at 00:55

zinc said:
Paul91 Kinda beat me to it lol but Il post the way I wouild do it. You could write one javascript function that takes a parameter and in the function depending on which argument you receive you display that content in the div, something like this?:

Code:

function showContent(n) { var contentString = " " switch(n) { case 0: contentString += 'Homepage content';break; case 1: contentString += 'About page content';break; case 2: contentString += 'Another pages content';break; case 3: contentString += 'Another pages content';break; case 4: contentString += 'Another pages content';break; case 5: contentString += 'Another pages content';break; } document.getElementById("PageDiv").innerHTML = contentString }

Then as the a href on all your links pass in a different argument for each link:

<a href="#" onClick="showContent(0);">Home Page</a>
<a href="#" onClick="showContent(1);">Home Page</a>
<a href="#" onClick="showContent(3);">Contact Page</a>

Think this should work, might be a bit rusty

don't use href="#" .. it's annoying because the browser will always jump to the top of the page. Just leave it blank, or use onclick="showcontent(x); return false"

Kemik · 14 Apr 2008 at 01:17

Question: Why do you need the page to load inside of another? What's wrong with using php includes for the static content?

ConTRo13R · 15 Apr 2008 at 11:21

trouble is i dont know any php! hehe i do the designing my mate does the hosting and that side!. my limits are html, css and js! any help with this php?

answer tro kemik: cause its the look i want for the site! clean cut and profesional lol

Tripnologist · 15 Apr 2008 at 13:05

ConTRo13R said:
answer tro kemik: cause its the look i want for the site! clean cut and profesional lol

I mean no offense here but I certainly wouldn't call that professional. At least it's not something I (or anyone at the firm I work for) would consider using for an entire site.

ChrisB · 15 Apr 2008 at 13:22

Using jQuery:

Code:

<a href='' onclick='loadHtml("divName")'>Click me to Load</a>

<div id='divName'></div>

<script>
    function loadHtml(div){
        $('#'+div).empty();
        $('#'+div).load('SomePage.html');
    }
</script>

Haven't tested it though, but that's the principle...

ConTRo13R · 15 Apr 2008 at 13:34

Tripnologist said:
I mean no offense here but I certainly wouldn't call that professional. At least it's not something I (or anyone at the firm I work for) would consider using for an entire site.

im only just starting out with web design so no insults lol, i just want a simple small site without moving of the home page! maybe you'd have a lovely solution!

Cuchulain · 15 Apr 2008 at 13:36

ConTRo13R said:
Im designing a website and want to create it to just be on one page with all the text on different pages being loaded into the central div tag on the main page! so the user actually never leaves this first page!!!!

so basically i want to load content (plain text) from one page that i have into a div tag on my home page at the click of one of my hyperlinks!

any help please

Have a look at: http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

There's a few more scripts on there to do the same sort of thing too.

Tripnologist · 15 Apr 2008 at 14:12

ConTRo13R said:
im only just starting out with web design so no insults lol, i just want a simple small site without moving of the home page! maybe you'd have a lovely solution!

Don't get me wrong, I was not trying to insult you. I'm just saying that for a paying client, it's not something most professionals would do. (I'm not saying it's something we would never use - but is definitely not something to base the entire layout around)

What's going to happen if someone has javascript disabled? What if someone is using a screen reader? What if someone is looking at the site on their mobile? Is it still going to display correctly or at least degrade gracefully?
Also, how are the search engines going to like having all the content jumbled on a single page of code?

If you don't want to use a CMS, I don't understand why you can't just create a simple template using php includes? It's incredibly easy to do and for someone with zero php knowledge, a google search followed by a quick bit of reading should give you some results within an hour at most.

In the end, it's your client and your creation so you do what you like. I'm just saying there are better ways of doing it.

ConTRo13R · 15 Apr 2008 at 14:55

Tripnologist said:
Don't get me wrong, I was not trying to insult you. I'm just saying that for a paying client, it's not something most professionals would do. (I'm not saying it's something we would never use - but is definitely not something to base the entire layout around)

What's going to happen if someone has javascript disabled? What if someone is using a screen reader? What if someone is looking at the site on their mobile? Is it still going to display correctly or at least degrade gracefully?
Also, how are the search engines going to like having all the content jumbled on a single page of code?

If you don't want to use a CMS, I don't understand why you can't just create a simple template using php includes? It's incredibly easy to do and for someone with zero php knowledge, a google search followed by a quick bit of reading should give you some results within an hour at most.

In the end, it's your client and your creation so you do what you like. I'm just saying there are better ways of doing it.

lol no offence taken, i understand about the accesability and trouble with search engines, as for mobiles i hadnt thought about lol i just been researching php and am i right in thinking i need to download a package to use it? or can i just write the code straight into notepad?