CODEWITHSUNDEEP
jqueryhtml
user541597
user541597

Reputation: 4345

linking to javascript animations with url

I have a page that has a lot of hidden content that I animate into view with jQuery. For example I have a main page that has links with # as the href, on click I animate the matching div to that link and animate it into view.

I want to have a way to be able to get to these divs directly from the url. Currently I am using some javascript code to animate the click of the a tag that matches the div. For example say I want to click am <a> tag with an id of aboutus. My url becomes www.myurl.com/homepage.aspx#aboutus, the javascript then takes everything after # and performs a click on that a tag which in turn clicks the a tag and animates the div I want however, I want something that I can reference by putting for example www.myurl.com/aboutus.

I thought about creating a folder for each div and placing a copy of the main page with the wanted div being displayed but I don't think that is the most efficient way to approach the problem. Does anyone have any good ideas to accomplish this?

Upvotes: 0

Views: 73

Answers (1)

thirdender
thirdender

Reputation: 3951

If you are hosting on an Apache webserver, create the following .htaccess file in the same folder as your content:

<IfModule mod_rewrite.c>
  # Enable rewrite engine
  RewriteEngine on

  # If the condition "file does not exist"…
  RewriteCond %{REQUEST_FILENAME} !-f
  # or the condition "directory does not exist"…
  RewriteCond %{REQUEST_FILENAME} !-d
  # rewrite the request as if it came from index.php
  RewriteRule ^ index.php [L]
</IfModule>

For IIS servers, try the following web.config file:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- Rewrite URLs of the form 'x' to the form 'index.php?q=x'. -->
        <rule name="Short URLs" stopProcessing="true">
          <match url="^(.*)$" ignoreCase="false" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
          </conditions>
          <action type="Rewrite" url="index.php?q={R:1}" appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>

    <httpErrors>
      <remove statusCode="404" subStatusCode="-1" />
      <error statusCode="404" prefixLanguageFilePath="" path="/index.php" responseMode="ExecuteURL" />
    </httpErrors>

    <defaultDocument>
      <!-- Set the default document -->
      <files>
        <remove value="index.php" />
        <add value="index.php" />
      </files>
    </defaultDocument>
  </system.webServer>
</configuration>

Both configurations loosely based off of the Drupal 7 config files. They will make all requests to your webserver that don't match an actual file or directory (eg. /about-us) actually return the output from index.php instead (you could put index.html there instead if you're serving a static HTML file). This all happens server-side… The end-user still sees the URL as they entered it (http://yourdomain.com/about-us). You can capture that URL using Javascript (as location.href) and do whatever display changes you need to do.

Upvotes: 1

Related Questions