Create hashtag url using jquery

Question

Here is my JSFiddle. I want the url as http://example.com/#content-1 and update to next h2 title when i click next. Any help please ?

You should use `anchor links` and `window.onhashchange` event. — Ram, Sep 08 '12 at 13:37
Yeah, you are right. But i got this code in this stackoverflow post. Thanks.. — user1619228, Sep 08 '12 at 13:40

vynx · Accepted Answer · 2012-09-09T12:59:51.530

Here's a really quick solution without changing too much of your codes:

Javascript

$(".next").click(function(){
    var current = $('ul li.selected').index(),
        maxIndex = $('ul li').length - 1,
        next = (current + 1) >  maxIndex ? 0 : (current + 1);

    setActive(next);

    // gets text content wrapped in selected div's h2
    var titleText = $(".selected .sl-title").text(); 

    // replaces the space between "Content" and number with a "-" (dash)
    var hashTag = titleText.replace(/ /g, '-');

    // update url
    window.location.hash = hashTag;
});

~UPDATE01 090912~

OP has asked, "Can you tell me please how to get the same content even after refresh the page ? – user1619228 1 hour ago"

You can do this by adding this right after function setActive(i) { // codes }:

    // apply the following only if the word "Content" is present in URL
    if(url.indexOf('Content') != -1){ 

         // gets current hash value (fragment identifier) of URL
         var url = window.location.hash; 

         // removes the "#" symbol
         var currentHash = window.location.hash.substring(1).split("#"); 

         // replaces the "-" with a space
         var contentTitle = currentHash.toString().replace(/-/g, ' '); 

         // set text string in variable (to be used later)
         var actualContent = "This is " + contentTitle; 

         // remove "selected" class from all "myclass" divs
         $(".myclass").removeClass("selected"); 

         // add "selected" class to div that has the string stored in "actualContent" variable  
         $("div:contains('" + actualContent + "')").addClass('selected'); 
     }

The additional script above simply:

Checks the URL to see if there is the word "Content" present, if so proceed with:
Gets URL's hash tag (fragment identifier)
Removes symbols (# and -)
Places it as a text string into a variable
Runs through the entire document to find for the div containing the same content as the variable, or in an indirect way, the URL's hashtag
Removes the "selected" class from all divs first and then adds it back to the div that contains the same content as the variable, or in an indirect way, the URL's hash tag (fragment identifier)

I have not addressed the updating of the image's background colour yet, but I believe that if you apply the fundamentals demonstrated above, you'd be able to add the "selected" classes to the right images as well. You'd of course be required to tweak the codes a little by adding some additional IDs or classes to the list items holding the images in order to manipulate them via jQuery.

I know the above may not be the prettiest or the best of solutions, but it's the only one that came to mind when I imposed a restriction on myself not to change too much of your HTML structure or jQuery.

Hope this helps further!

UPDATE02 090912

Further reference for OP

Here's how the whole document should look like:

WHOLE DOCUMENT

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js "></script>
</head>
<style>
    .myclass {
        display:none;
    }

    ul li {
        display: inline-block;
    }

    img {
        height: 20px;
        width: 20px;
        padding: 20px;
    }

    .myclass.selected {
        display: block;
    }

    ul li.selected {
        background-color: yellow;
    }

    ul li, .next {
        cursor: pointer;
    }
</style>
<body>
    <div class="myclass">
        <h2 class="sl-title">#Content 1</h2>
        This is Content 1
    </div>
    <div class="myclass">
        <h2 class="sl-title">#Content 2</h2>
        This is Content 2
    </div>
    <div class="myclass">
        <h2 class="sl-title">#Content 3</h2>
        This is Content 3
    </div>
    <ul>
      <li><img src="http://www.lillehammer.com/ImageVault/Images/id_2122/scope_66/ImageVaultHandler.aspx" /></li>
      <li><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Valued_image_seal.svg/40px-Valued_image_seal.svg.png" /></li>
      <li><img src="http://www.iconico.com/i/icoImageFilterPro100.gif" /></li>
    </ul>
    <a class="next">next</a>
</body>
<script type="text/javascript">
    $(document).ready(function(){

        setActive(0);

        $('li').click(function() {
            setActive($(this).index());
        });

        $(".next").click(function(){
            var current = $('ul li.selected').index(),
                maxIndex = $('ul li').length - 1,
                next = (current + 1) >  maxIndex ? 0 : (current + 1);

            setActive(next);

            // gets text content wrapped in selected div's h2
            var titleText = $(".selected .sl-title").text(); 

            // replaces the space between "Content" and number with a "-" (dash)
            var hashTag = titleText.replace(/ /g, '-');

            // update url
            window.location.hash = hashTag;

        });

        function setActive(i) {
            var li = $('ul li').eq(i);

            $('ul li').removeClass('selected');
            li.addClass('selected');
            $('.myclass').removeClass('selected');
            $('.myclass').eq(i).addClass('selected');
        }

        var url = window.location.hash; // retrieve current hash value (fragment identifier)
        if(url.indexOf('Content') != -1){ // do the following if URL's hash contains "Content"
            // remove "#" symbol from retrieved hash value (fragment identifier)
            var currentHash = window.location.hash.substring(1).split("#");
            // remove "-" symbol from retrieved hash value (fragment identifier)
            var contentTitle = currentHash.toString().replace(/-/g, ' ');
            // store hash value in "actualContent" variable
            var actualContent = "This is " + contentTitle;
            // remove "selected" for every instance of "myclass" to hide content first
            $(".myclass").removeClass("selected");
            // find div that contains retrieved hash value's (fragment identifier's) text stored in "actualContent" variable and add "selected" class to that div to display the correct content
            $("div:contains('" + actualContent + "')").addClass("selected");
        }

    });
</script>
</html>

Just copy and paste everything into a new HTML file and open it up in a browser of your choice, click on next and refresh. The page content that is shown should remain the same. Copy the new URL, open up a new tab and throw the copied URL into the address bar - the page loads and shows the correct content based on the hash tag.

I've updated my answer so that you'd get www.domain.com/#content-1 instead of www.domain.com/#content(space)1. The latter is not exactly optimal cos of the space between "content" and it's corresponding number. — vynx, Sep 08 '12 at 13:58
You're most welcome. It'll be nice if you can upvote this even though you've accepted another answer instead =) — vynx, Sep 08 '12 at 14:07
Can you tell me please how to get the same content even after refresh the page ? — user1619228, Sep 09 '12 at 08:17
@user1619228 same content in the URL's hash or on the page itself? — vynx, Sep 09 '12 at 08:36
if the page show #content-2, if i refresh it goes to initial i.e #content-1. I want to keep #content-2 when refresh. — user1619228, Sep 09 '12 at 08:41
I tried that, its not work for me and i am not asking that. I asking if i enter http://example.com/#content-2 in address bar it should show Content 2 ( even i may change any title) . Is this possible ? Thanks for your reply. — user1619228, Sep 09 '12 at 11:05
I just want to retrive the hashtag and show the content when i refresh or enter the url. I think you understand now. — user1619228, Sep 09 '12 at 11:20
@user1619228 i've tested the codes i suggested and it is working for me. is it working for you now? i'm putting up the entire code for your reference so all you gotta do is copy and paste the example and throw it into a new HTML document — vynx, Sep 09 '12 at 11:50
Here you said if hash contains "Content". I am not asking that. I just want to retrive the hash and show the content when i refresh or enter the url. Sorry or my bad english. Thanks.. — user1619228, Sep 09 '12 at 11:54
@user1619228 you should be looking at the codes as a whole and see how one portion relates to another in order to understand the logic behind it. when i indicated that there is a check to see if the URL's hash has the text "Content" in it, it is because the additional script should only fire off based on that condition. if the word is present, do something; if the word is absent, do nothing. copy and paste the entire code into a new HTML file and open it up in your browser to test and you'll see it in action. — vynx, Sep 09 '12 at 11:59
yeah, its working. Thanks for your great help again. :) If i change my content as anything else with paragraph, will it work ? — user1619228, Sep 09 '12 at 12:08
@user1619228 glad it worked for you! =) as i've mentioned, apply the same fundamental logic to the images and you'd should more or less be able to replicate the same thing for the background highlights as well.. — vynx, Sep 09 '12 at 12:10
@user1619228 you can change your content or the text in between the
tags and the script will still work, but if you remove your
tags and its text entirely, the script will break. this is because the script is referencing what is being placed in between your
tags. — vynx, Sep 09 '12 at 12:16
@user1619228 i don't think i'm getting you quite clearly.. if you're asking about whether you can add further content to replace "The is Content 1" etc, the answer is yes. You can also alter whatever text is in between your
tags and the script will still work. all i'm saying is that you need your
tags as a "point of reference" of sorts so that the script will know which section to target and what to update the url's hash tag with.. if you fail to have a "point of reference", the script will break and not work.. — vynx, Sep 09 '12 at 12:27
ok thanks for your precious help. I never forget this. :):):):) — user1619228, Sep 09 '12 at 12:30
@user1619228 no problems. glad to have helped. it is becoming apparent that the scope to your original question is growing wider. as such, i suggest that you play around with the sample i provided first and if anything further crops up, we can take this discussion to a chat or you can create a new question so that the community can also give their valuable input. — vynx, Sep 09 '12 at 12:34

score 2 · Answer 2 · answered Sep 08 '12 at 13:51

This should work, right?

function setActive(i) {
    var li = $('ul li').eq(i);

    $('ul li').removeClass('selected');
    li.addClass('selected');
    $('.myclass').removeClass('selected');
    $('.myclass').eq(i).addClass('selected');

    // add hashtag
    var selectedText = $('.myclass.selected h2').text();
    window.location.hash = selectedText;
}

score 0 · Answer 3 · edited May 23 '17 at 12:27

0

You can do that with a jQuery history/hash change plugin. Like this one. Google it. You will find many more.

Or see this StackOverflow post: What's the best library to do a URL hash/history in JQuery?

edited May 23 '17 at 12:27

Community

1
1

answered Sep 08 '12 at 13:31

Nandeep Mali

4,456
1
25
34

I searched more on google. I can't get the answer for this code. That's why i posted here. – user1619228 Sep 08 '12 at 13:41

Create hashtag url using jquery

3 Answers3

tags and the script will still work, but if you remove your

tags and its text entirely, the script will break. this is because the script is referencing what is being placed in between your

tags.

tags and the script will still work. all i'm saying is that you need your

tags as a "point of reference" of sorts so that the script will know which section to target and what to update the url's hash tag with.. if you fail to have a "point of reference", the script will break and not work..

Linked