0

I hope someone can help!

My website: http://www.richardmilne.net

I have a wordpress site set up to use the iinclude plugin to display individual pages all on the front page. This works great but I don't want users to access individual pages, ie "site.com/page". If a user visits "site.com/page" (eg from a search result), I want them to be redirected to "site.com/#location", have the window scroll to the correct location, and trigger the jquery slider. (see link above)

I was planning on using .htaccess to redirect the page. After that from what I've gathered I need to use a bit of javascript trickery to trigger the desired div to slide open. In my case this is simply a case of changing it's class to "toggle_initial", which the jquery script animates after an 800ms delay on page load. (again, see the link above, which already uses this to load the "recent posts" section when you first visit. Just so you know this is a jquery-UI plugin).

It's the bit in the middle I can't get my head round. What I've read so far tells me I can't do this with php which was my first approach, as "PHP_SELF" ignores the "#location" bit of the URL. This leaves javascript up to the task of changing the div's class, I've found these links which I'm sure contain some hints for me, but as a javascript novice I can't make head nor tail of how to apply them to my site:

Adding a class to an a element with a particular href using hash

doing substring in window.location.hash

Any tips would be greatly appreciated, cheers!

Community
  • 1
  • 1
Richard Milne
  • 11
  • 1

3 Answers3

0

You'll probably want to use JQuery window.location.hash to get any values after the hash tag.

See a few tutorials below:
http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html
http://www.using-jquery.com/2011/01/ajax-navigation-window-location-hash/

ckaufman
  • 1,487
  • 9
  • 15
0

Step 1. Get the anchor element from the url using javascript. window.location.href

Step 2. Change the class of your target h2 using jQuery. Code assumes that div id and anchor are identical.

$(document).ready( function() {
    var anchor = yourCodeToFindAnchor;
    $('#' + anchor).addClass('active');
});
mrtsherman
  • 39,342
  • 23
  • 87
  • 111
  • If I understand this correctly, what you're doing is setting a variable based on the contents of the URL, then calling that variable in line 3. The problem is that I don't think you can just plonk something dynamic in there, dreamweaver's code hinting leads me to believe that that bit needs to be in quotes and therefore pre-defined. The second bit I'm not sure about is the "yourCodeToFindAnchor" bit. http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html Can a snippet from here be used? – Richard Milne Apr 06 '11 at 19:17
  • 1
    You have to write code to get the anchor out of the url. Use window.location and other properties to tease out the name of the anchor. For the #anchor bit I made a small change to the code to include the proper quoting. I assumed you were pretty familiar with jQuery syntax and was lazy. – mrtsherman Apr 08 '11 at 15:01
0

I recommend http://benalman.com/projects/jquery-bbq-plugin/

It easily allows you to hook up all kind of jQuery actions to the hash object.

This should get you started: http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/

two7s_clash
  • 5,755
  • 1
  • 27
  • 44