Trigger Javascript with URL parameter

Question

I am using this snippet to fade content into a div when a specific link is clicked....

<script language="JavaScript">
    $(document).ready(function () {
        $('#section1, #section2, #section3').addClass('js');
        $('#content-container a').click(function (e) {
            e.preventDefault();
            var rel = $(this).attr('rel');
            $('#' + rel).fadeIn().siblings('div').fadeOut();
        });
        var link = document.URL.split('#')[1];
        if (link) {
            var el = $('#' + link);
            if (el) el.click();
        }
    });
</script>

Is there a way to load the specified content using a URL instead of clicking? So I can link to www.mydomain.com/mypage.php#section2 or something similar?

UPDATE

Here is a jsfiddle of the simplified code http://jsfiddle.net/k6RhR/

You mean when people open the URL with the # already attached? It looks like you're already doing that by doing el.click(). I.e. Faking a user click. — Gerben Jacobs
– Gerben Jacobs, Commented Mar 6, 2014 at 12:14

Ovidiu Iacomi · Accepted Answer · 2014-03-06 12:30:50Z

3

You can do something like this:

if(window.location.hash && window.location.hash=="#section2") {
    // Do stuff that are meant to happen when this hash is present.
}

answered Mar 6, 2014 at 12:30

Ovidiu Iacomi

7768 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

A J · Accepted Answer · 2014-03-08 09:53:44Z

2

try This

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>mouseover demo</title>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <style>
        .invisible
        {
            display: none;
        }
        .lorem
        {
            height: 300px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            getContent();
        });
        $(window).bind('hashchange', function (e) {
            getContent();
        });

        function getContent() {
            var url = window.location.toString();
            var hash = url.substring(url.indexOf('#'));
            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 2000);
            $(hash).fadeIn();
            $(hash).siblings("div").fadeOut();
        }
    </script>
</head>
<body>
    <div class="lorem">
        <div id="section1" class="invisible">
            Content 1
            <p style="text-align: justify;">
                Content 1 content</p>
        </div>
        <div id="section2" class="invisible">
            Content 2
            <p style="text-align: justify;">
                Content 2 content</p>
        </div>
        <div id="section3" class="invisible">
            Content 3
            <p style="text-align: justify;">
                Content 3 content</p>
        </div>
        <div id="section4" class="invisible">
            Content 4
            <p style="text-align: justify;">
                Content 4 content
            </p>
        </div>
    </div>
    <div id="links">
        <a href="#section1" rel="section1" id="section1">Section 1</a>
        <br />
        <a href="#section2" rel="section2" id="section2">Section 2</a>
        <br />
        <a href="#section3" rel="section3" id="section3">Section 3</a>
        <br />
        <a href="#section4" rel="section4" id="section3">Section 4</a>
    </div>
</body>
</html>

Is this what you are looking for. On load the page will look for the #section to show the content. On click of the anchor the hash link will be changed and the hash change function will load in the required content.

If you have any query please let me know.

edited Mar 8, 2014 at 9:53

answered Mar 6, 2014 at 13:18

A J

2,14015 silver badges24 bronze badges

4 Comments

fightstarr20 Over a year ago

I'm not sure how to incorporate this into what I already have. I have updated the original post with a jsfiddle to better demonstrate

A J Over a year ago

to confirm your requirement .. you want the div "section1" to fade in when the url is invoked as "URL"#section1 ?

A J Over a year ago

Have made some modification .. hope this helps

fightstarr20 Over a year ago

Thanks, that works perfectly. Seems to be a lot simpler than the way I was doing it previously as well

user2571870 · Accepted Answer · 2014-03-06 12:29:16Z

2

jQuery load() allows you to specify the portion of the page like:

$( "#container" ).load( "/mypage.php #section2" );

answered Mar 6, 2014 at 12:29

user2571870

Collectives™ on Stack Overflow

Trigger Javascript with URL parameter

UPDATE

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related