0

Is it possible to alter the url of a webpage so that it will activate specific click-activated features on the webpage without the user having to do the clicking?

To better illustrate my question I made this fiddle.

The page loads with a red box with information in it. The user can click the box once to see new information. They can click it again to see a third piece of information.

I would like to have urls that load the page with specific information showing. For example, if the main url for my page is http://www.mypage.com, then I would like to have urls http://www.mypage.com/#info2 and http://www.mypage.com/#info3 so that when the user enters the info2 (respectively, info3) url, the page loads with the second (respectively, third) piece of information showing.


Remarks: I have searched some other questions about activating scripts with hashtags, but have not found something I can understand or implement into what I want to do. In particular, I need my hashtag urls to be able to implement a sequence of several actions (e.g. two clicks to get info3 in the above example).

Remark 2: I am open to other solutions too. I just need someone to explain how to accomplish what I am trying to do.

Gabe Conant
  • 367
  • 1
  • 5
  • 13
  • You would probably want to use query string parameters instead. – Travis J Nov 13 '14 at 23:18
  • @TravisJ, why should he use querystrings instead of hashtags? – Ian Hazzard Nov 13 '14 at 23:20
  • 1
    Parse the hash in JavaScript and use conditionals based on the result? If you're asking for more than that, I don't understand the question. – vol7ron Nov 13 '14 at 23:20
  • I am totally open to a solution other than hashtag stuff. It's just the only thing I am vaguely aware of being possible. – Gabe Conant Nov 13 '14 at 23:21
  • @Godisgood - If only one value is needed, hashtags are fine. But if some sort of complex state is passed, a querystring could probably represent that better. – Travis J Nov 13 '14 at 23:21
  • But why are hashtags good for one value and querystrings for multiple? I thought they are used for the same thing . . . – Ian Hazzard Nov 13 '14 at 23:22
  • @vol7ron - I may not be asking for more than that. The reason I'm asking the question is so that someone can explain to me how to accomplish the task. – Gabe Conant Nov 13 '14 at 23:22
  • @Gabe: hash and if-statement is most likely all you need. You should post some code to demonstrate what you've tried. You can access the hash information with `window.location.hash`, just make sure to scrub the `#` off the front if it exists using some regex (I think IE includes it) – vol7ron Nov 13 '14 at 23:26
  • @Godisgood The purpose of query strings is to pass data through a GET request. I don't believe hashtags were made for that purpose. Generally they are used to jump to element ids on the page. Additionally query parameters are setup to pass key value pairs and hashtags are not. – Leeish Nov 13 '14 at 23:29
  • @vol7ron Well I haven't really tried anything because I don't know the first step towards accomplishing this kind of thing. If I could see the necessary code for how to make it happen in this example, I could probably implement it into my site. – Gabe Conant Nov 13 '14 at 23:29
  • Are you trying to chain info pages? – vol7ron Nov 13 '14 at 23:32
  • @vol7ron The fiddle, together with the explanation, illustrates what I am trying to do. – Gabe Conant Nov 14 '14 at 12:26
  • How is the info generated? – vol7ron Nov 14 '14 at 12:32
  • @Gabe: The answer you selected is not cross-browser compliant, but suggests that you will have bad code, or a bad setup. I am sorry to have offered assistance. – vol7ron Nov 14 '14 at 17:23
  • @vol7ron: Could you elaborate on not being cross-browser compliant? I was able to use artm's answer to accomplish what I wanted. And it seems to be working in Chrome, Firefox, IE, and Safari. I do appreciate your assistance and want my code to be good. I hope I didn't offend. I just found your answer confusing and couldn't figure out how to implement it. Perhaps I can comment on it directly to avoid too much back and forth here. – Gabe Conant Nov 15 '14 at 17:30

3 Answers3

2

You could use this after you define your click handlers.

if (window.location.hash == '#1'){
    $("#info1").click();
}

if (window.location.hash == '#2'){
    $("#info1").click();
    $("#info2").click();
}
artm
  • 8,554
  • 3
  • 26
  • 43
0

Not sure if any of this works -- I didn't devote much time on it, given the state of the question, but consider:

var hash_page   = (window.location.hash+'').replace(/^#/,'');   // get hash and parse
var page_number = hash_page.match(/\w+?(\d+)/)[1] || 1;         // get the number
var next_page   = page_number + 1;                              // get next number

$('#info'+page_number).click(function(){
   window.location.hash = 'info' + next_page;
});
vol7ron
  • 40,809
  • 21
  • 119
  • 172
  • I am not sure how to go about implementing this in a more general setting. In particular, what url would the user use to get the, say, info2 div to appear on loading the page? – Gabe Conant Nov 15 '14 at 17:32
0

Assuming that your red box is a div like this:

<div class="redbox">...</div>

and that you have three blocks within it (info 1, 2, and 3):

<div class="redbox">
  <div class="info1">...</div>
  <div class="info2">...</div>
  <div class="info3">...</div>
</div>

With jQuery you could do something simple like this:

jQuery(".redbox").click(function()
  {
     if(jQuery(".redbox .info3").is(":visible"))
     {
        return; // all done already
     }
     if(jQuery(".redbox .info2").is(":visible"))
     {
        jQuery(".redbox .info3").show();
        return;
     }
     jQuery(".redbox .info2").show();
  });

I'm not too sure why you'd like that in the URI. The only reason for such would be in case the user comes back to that same place and you'd want them to see the page in the same state. If that is important, then yes, you should use the window.location.hash to change the URI. That way, if the user comes back you can test the hash and setup the status as required on load. However, note that the hash does not get sent to the server. It is only a client thing.

My solution supposes that info2 and info3 are already loaded. It is also possible to use the load() function to load them dynamically. It depends on their size and whether you do or do not want that information to be visible when the user does "Show Source".

There is the reason why some systems use the "hashbang" feature in their website:

https://developers.google.com/webmasters/ajax-crawling/

Google, at some point, said they would drop that functionality, but it looks like they have not done so and actually continue to encourage people to use that methodology. Twitter has been using it for a while, but from what I can see they don't use it anymore.

Alexis Wilke
  • 19,179
  • 10
  • 84
  • 156