View Full Version : Linking without sending to different page

12-07-2009, 04:37 PM
Sorry for the weird title, I have no idea what this may be called.

I manage our church site that we post sermons every sunday. We only want about three months of sermons on the main page, then people can go to another month by clicking a link on the left. see here (http://baysidesuperior.org/media). If you click say, "February 2009", you will go to the page http://baysidesuperior.org/media0209-0409. As we get more sermons, we will have to have a bunch of extra pages (4 new pages a year). I've seen sites where you click a link and the address doesn't change, just the content on the page.

I want to find a way where people can click a link, and just that month will pop up on the screen, but without making a whole different page.

Sorry if this is all confusing. Any help would be great!


12-07-2009, 04:59 PM
Look up iframes, that would be the easiest way to accomplish what you're talking about. Or AJAX.

12-07-2009, 06:38 PM
I've used iframes and haven't like them, is there a tutorial with AJAX?

12-08-2009, 12:07 AM
To say that there is a tutorial with AJAX would be an understatement.


12-08-2009, 02:44 AM
Whew! The title is weird, but the answer is also weird! Because you don't have to study AJAX just to do that thingy, its only by the glorious power of divine HTML! (My favorite line!)

Read this example code and it should explain that thingy :

<!- For Return Jumps ->
<a href = "toc">TOC</a>

<!- Link to section 1. below ->
<a href = "#feb08">Section 1</a>
<a href = "#feb09">Section 2</a>

<a name = "feb08">BLABLABLA</a>
<h2>CFR Section 1</h2>
<p> Text of section 1 is here</p>

<a name = "feb09">BLABLABLA</a>
<h2>CFR Section 1</h2>
<p> Text of section 2 is here</p>

<a href = "#toc">(TOC)</a>

<a name = " "> makes a text an internal link while

<a href = "# "> (Note: the # symbol is needed before the name of the link.) activates it. ^_^

Hope this weird explanation helps you and good luck!

12-08-2009, 01:55 PM
That's not exactly what the OP was looking for. As gusblake said, AJAX is the only real way I know of to truly avoid loading another page - but it's completely reliant upon javascript. Also, if the URL never changes then your users can't send links to other people or add bookmarks/favorites to take them to, say, July 2007's sermon page since the standard URL will only dump people onto the main landing page. From there a user will have to re-navigate your pages every time to get to the content they want.

Besides that, my only caution would be to make absolutely certain that if a user has javascript disabled that your links will still work. This means actually typing in the address of the new content's source file in the href for the anchor tag. Don't just use "#" or "#nogo" or "javascript:whatever" because any user not allowing/supporting javascript will have no way to access your content. You'll lose users that way.

It's also bad for SEO to have content accessible only via javascript as most search engines won't crawl javascript.

So, AJAX will work, yes. On the other hand, I would make a case for just using server-side scripting to generate a template that feeds in the sermon blocks with $_GET variables (passed in the url like http://www.mysite.com/sermons?date=feb09). If your HTML structure is good (not table-based) and your CSS is in an external file then the user's cache should allow a page load very very quickly - almost just as quickly as grabbing only new content via AJAX.

This is just my opinion though. Most web hosts support PHP, which is all you would need for this (you could also use MySQL to store sermon content, but it's optional to do that - MySQL is also commonly available with most web hosts). If you want to know more about the server-side method let me know otherwise I'll quit chiming in. :D

12-08-2009, 04:48 PM

Using server-side scripting looks like it would be the right thing, could you explain more on how to do this?

I've tried MySQL in the past and haven't been very successful.

12-08-2009, 08:11 PM
Here's a generic PHP file to get you started:

<!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">
if(isset($_GET['date'])) { //will print the sermon date if chosen...
print " &raquo; ".$_GET['date'];
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<div id="wrapper">
<div id="header">
<img src="image.png" alt="logo" />
<div id="nav">
<li><a href="/">Home</a></li>
<li><a href="?date=feb09">February-April 2009</a></li>
<li><a href="?date=may09">May-July 2009</a></li>
<div id="content">
if(isset($_GET['date'])) { //if a specific date was chosen from the menu...
$file=$_GET['date'].".html"; //will result in "feb09.html" or "may09.html" - these files would need to be created and filled with content within the same directory as this main file unless you change the file path for the include below...
$content=@include($file); //includes a file with a name equal to the value of $file within the current directory
//to change this you can use relative filepaths like this:
// $content=@include("../sermons/content/".$file); // this would go up one folder and then down into sermons->content and look for $file there...
if(!$content) { //if no file was returned we return a page not found message
print "<p>Page not found...</p>";
else { //if no specific date was chosen from the menu...
print "<p>This is the standard landing page. You can print text here or else you can include a default file, such as the current month's sermon. The method of including would be the same as above.</p>";
<div id="footer">
<p>&copy; Copyright 2009, Whatever Blah Blah Blah</p>

This doesn't involve any MySQL yet. We'll just cover the basics first...