Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Linking without sending to different page

    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. 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!

    Thanks

  • #2
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    Look up iframes, that would be the easiest way to accomplish what you're talking about. Or AJAX.

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I've used iframes and haven't like them, is there a tutorial with AJAX?

  • #4
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    To say that there is a tutorial with AJAX would be an understatement.

    http://www.google.co.uk/#hl=en&sourc...376c673d384194

  • #5
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 :

    Code:
    <!- For Return Jumps ->
    <p>
    <a href = "toc">TOC</a>
    </p>
    
    <!- Link to section 1. below ->
    <p>
    <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>
    The
    Code:
    <a name = " ">
    makes a text an internal link while
    Code:
    <a href = "# ">
    (Note: the # symbol is needed before the name of the link.) activates it. ^_^


    Hope this weird explanation helps you and good luck!

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    Last edited by Rowsdower!; 12-08-2009 at 03:03 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    New Coder
    Join Date
    Jan 2009
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Rowsdower,

    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.
    Last edited by rickfink; 12-08-2009 at 05:52 PM.

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Here's a generic PHP file to get you started:

    PHP Code:
    <!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>
    <title>Sermons<?php
    if(isset($_GET['date'])) { //will print the sermon date if chosen...
        
    print " &raquo; ".$_GET['date'];
    }
    ?></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    </head>
    <body>
    <div id="wrapper">
      <div id="header">
        <img src="image.png" alt="logo" />
      </div>
      <div id="nav">
        <ul>
          <li><a href="/">Home</a></li>
          <li><h1>Sermons</h1>
            <ul>
              <li><a href="?date=feb09">February-April 2009</a></li>
              <li><a href="?date=may09">May-July 2009</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div id="content">
    <?php
    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>
      <div id="footer">
        <p>&copy; Copyright 2009, Whatever Blah Blah Blah</p>
      </div>
    </div>
    </body>
    </html>
    This doesn't involve any MySQL yet. We'll just cover the basics first...
    Last edited by Rowsdower!; 12-08-2009 at 09:14 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •