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

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?

Answers


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.
}

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...


Need Your Help

Task management tool that can link a task to specific part of code?

git github redmine mantis

I'm looking for a task management tool that would allow me to do something that seems really obvious to me: link a task/issue to a specific part of my code (using Git).