• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 175
  • Last Modified:

How do I return to anchor #home when using server side includes (SSI)?

I am using Apache 2.2 and have just turned on SSI. SSI is working from html out to various anchor tag include locations (e.g. #about). However, I am not able to return using (#home). Please view the snipets and let me know how to return to the main/home page via an anchor tag. I do not want to use absolute or relative paths in the anchor tage. Thanks.

within index.html:

<div id="home" class="current page">

<div class="toolbar">
   <h1>TITLE</h1>
   <a href="#about" class="button leftButton flip">About</a>
   <a href="#settings" class="button flip">Settings</a>
</div>

other code

<!--#include virtual="settings.html"-->
<!--#include virtual="about.html"-->


within about.html:

<div id="about">
  <div class="toolbar">
      <h1>About</h1>
      <a href="#home" class="back">Back</a>
   </div>

other code
</div>
0
kbios
Asked:
kbios
  • 8
  • 5
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
This has nothing to do with Apache or SSI.  This is about browser behavior.  This page http://www.w3schools.com/html/html_links.asp says that 'id's are ok for named anchors but I have always used the <a name="home"></a> tags.  I would not put in extra 'div's just to get the 'id's for the named anchors because it becomes part of the layout while the <a name="home"></a> method is just a place on the page.
0
 
kbiosAuthor Commented:
Thanks for the info. I will look into the design change and not use the extra divs. However, in the meantime can you see any reason why the anchor tag that I am using is not working?

Neither option returns to the home division:

<a href="#home" class="back">Back</a>

<a href="#" class="back">Back</a>
0
 
Dave BaldwinFixer of ProblemsCommented:
I would have thought "#home" would work.  "#" doesn't do anything because it just refers to the current page which is essentially no change.  If it did anything it would reload the current page.  "#" is used in forms at times to send the form to the current page.
0
Get your Disaster Recovery as a Service basics

Disaster Recovery as a Service is one go-to solution that revolutionizes DR planning. Implementing DRaaS could be an efficient process, easily accessible to non-DR experts. Learn about monitoring, testing, executing failovers and failbacks to ensure a "healthy" DR environment.

 
Dave BaldwinFixer of ProblemsCommented:
It could be that "#home" doesn't do anything because you are already inside that div.  If you put <div id="home"></div> as a separate element right under the <div class="current page"> it might do something.
0
 
kbiosAuthor Commented:
When I put the div id="home" as a separate element under the div class="current page" it prevented the call to the SSI include program. I too would have thought the #home would work. Any final ideas?
0
 
Dave BaldwinFixer of ProblemsCommented:
I don't see how that would happen.  Those parts do not interact on the server.  The SSI code just looks for the SSI statements and ignores everything else on the page.  And the browser never sees the SSI code.

Try putting a space before the end tag like below.
<!--#include virtual="settings.html" -->
<!--#include virtual="about.html" -->

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
0
 
kbiosAuthor Commented:
added spaces and retried previous suggestion of putting div home beneath div class. same result, the include will not launch. looking at links you provided.
0
 
Dave BaldwinFixer of ProblemsCommented:
Can you post a simple version of the page that does not work so I can check it here?  By the way, typically you need to use the 'shtml' extension for SSI.  Did you modify your Apache to use 'html'?
0
 
kbiosAuthor Commented:

The following is an html not a shtml. It gets called just fine but when I click the Back button it does not return home.



Here is program about.html.


<div id="about">
      <div class="toolbar">
            <h1>About</h1>
            <a href="#home" class="back">Back</a>
      </div>

      <br/>
      <div class="info">
        <p>About Text</p>
      </div>
      
</div>
0
 
Dave BaldwinFixer of ProblemsCommented:
Ok, I took your code and added some phony content to make the page long enough and it acts just like it is supposed to.  Try it and let me know what you get.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<div id="home" class="current page">

<div class="toolbar">
   <h1>TITLE</h1>
   <a href="#about" class="button leftButton flip">About</a>
   <a href="#settings" class="button flip">Settings</a>
</div>

other code

<!--#include virtual="settings.html"-->
<!--#include virtual="about.html"-->

<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv
<br>&nbsp; vvv

within about.html:

<div id="about">
  <div class="toolbar">
      <h1>About</h1>
      <a href="#home" class="back">Back</a>
   </div>

other code
</div>
</div>
</body>
</html>

Open in new window

0
 
kbiosAuthor Commented:
Thanks for all of your help. I appreciate it.
0
 
Dave BaldwinFixer of ProblemsCommented:
You're welcome, glad to help.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 8
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now