Is it possible to make a link to a one page webpage to open and position itself at a specific article?

Question

Is there a way to open a specific artical via an external link and focus on it when the links open on a one page wepage?

I have a webpage that shows content as you click on links by hiding and showing the divs. What i want is to make an external link to my webpage in the form of mywebpage/(div's name) and have the link open my page but showing the content of that div right away, instead of its usual opening content you would get when clicking on just the ordinary mywebpage link.

Is it possible? And how?

Possible duplicate: http://stackoverflow.com/questions/1586341/how-can-i-scroll-to-a-specific-location-on-the-page-using-jquery — AtheistP3ace, Dec 02 '15 at 16:11

score 1 · Accepted Answer · edited Dec 02 '15 at 16:28

Short answer: yes.

Long answer: You will have to examine the URL's hash on page load and manually translate that into hidden or shown divs (or other positioning).

While you're at it, you could include browser history support when your divs are opened and closed.

Pulling apart what I did for http://www.tipmedia.com (Segment starts on line 322 of the page source)

//on page ready
$(document).ready(function() {
    //examine hash
    if(window.location.hash == "#thanks") {
        //scroll to an anchor tag, slight delay to insure correct page height
        setTimeout(function() {
            $('html,body').animate({scrollTop:$("#contact").offset().top}, 0);
        },500);
        //hide and show necessary divs
        $("#contactThanks").css({"display":"block"});
        $("#contactIndex").css({"display":"none"});
        $("#contactGeneral").css({"display":"none"});
        $("#contactMeeting").css({"display":"none"});
        $("#contactCareers").css({"display":"none"});
        //clear the hash (not necessary for your use)
        window.location.hash = "";
    }
}

The history stuff is easy too, I used Modernizer.js for the best cross browser support, but it looks like this (non-Modernizer use is very similar)

//during the hide/show of new content...
    //if history is available
    if(Modernizr.history) {
        //this data is whatever it is you wish to save
        lastPageState = { div:divName, pos:amount, page:lastLoadedPage };
        history.pushState(lastPageState, divName.substring(1,divName.length-6), "index.html");
    }
//...
//then later, the popsate event handler
window.onpopstate = function(event) {
    //examine event.state and do whatever you need to
    //example segment starts line 989
    //Whatever data you saved would be read here and you would do the appropriate action,
    //hiding or showing divs, reloading AJAX content, etc.
}

I see, i went to your page and tried it with the link http://www.tipmedia.com/index.html#products. And it goes there straight away! Thanks a lot, i will look into it even more! — Ivan Horvatin, Dec 02 '15 at 16:30
I'll freely admit that the code isn't the best (as evidenced by @Endless's quick edit), but it does work! I had constantly shifting requirements as to what content would show, where, and when. I believe there is a way to link down into even a specific product. I think tipmedia.com/index.html#p-campus ...? Ah, http://www.tipmedia.com/index.html#prodCAMPUS That section of code isn't terribly robust and I think I'm the only one who knows how to generate those links.... — Draco18s no longer trusts SE, Dec 02 '15 at 16:36
i was to quick to edit and saw that you linked to another source, so i reverted back — Endless, Dec 02 '15 at 16:41
I think my edits were just formatting, getting a few lines to wrap the way I'd intended. Feel free to simplify the jQuery if you'd like, I was just copying from the original source. — Draco18s no longer trusts SE, Dec 02 '15 at 16:44
Well, thanks a lot anyhow. I know linking to a page isnt a problem, or using href to link on the parts of the page when you are already on it, but wasn't quite sure how to do it if its from an external link and everything on the same page. — Ivan Horvatin, Dec 02 '15 at 17:38

score 0 · Answer 2 · answered Dec 02 '15 at 16:23

Yes, you can use an anchor link. So in your target page name the div with an id,say div id="target". Then in the referring page use a link in this form

Referring Page: <a href="/mywebpage#target">GO to Target Info...</a>

Target Page:

<div id="target">
...content...
</div>

FYI-"target" is just an example name, it could be anything...

Is it possible to make a link to a one page webpage to open and position itself at a specific article?

2 Answers2