Cargo home Twitter Devlog

Creating inline anchors

Last Updated: Sep 24, 2016 09:36AM PDT

 

Cargo makes use of hashes in URLs to load content into the browser window, which means that it's not possible to use the name-finding property of anchor tags native to HTML.

However, if you have a text-heavy page or project, it's still useful to have this functionality for a table of contents. Start by adding one of the following scripts into your Custom HTML area, depending on which design you are using:

Polaris, Warhol, Europa, Sirius, Ikonos, Virgo, Cassini, Copernicus, Cassiopeia, Callisto, Betelgeuse, Vega, Kennedy, Counterform-byday, Counterform-bynight, Biblio, Manhattan, Kant, Hegel, SpaceCollective, Elena, Voyager, ozFeed, Turing, Landsat

 <script type="text/javascript">
    function findAnchor(linkID){
        var yPosition= $("#"+linkID).offset().top + "px";
        $('html,body').animate( {scrollTop: yPosition }, 300);
    }
</script>
Change 300 in the above script tag to change how long it takes ( in milliseconds) for the browser to scroll to the destination link.

Rosetta, Neptune
<script type="text/javascript">
    function findAnchor(linkID){
        var xPosition= $("#"+linkID).offset().left + "px";
        $('#slide_container').animate( {scrollLeft: xPosition }, 300);
    }
</script>


Apollo 11, Limelight, Limelight-alt
<script type="text/javascript">
    function findAnchor(linkID){
        var yPosition= $("#"+linkID).offset().top;
        var content = $("#maincontainer_scroll").data('jsp');
        content.scrollTo(0, parseInt(yPosition), true);
    }
</script>

Apollo 12
 <script type="text/javascript">
    function findAnchor(linkID){
        var yPosition= $("#"+linkID).offset().top + $('#maincontainer_scroll').scrollTop();
        $('#maincontainer_scroll').animate({scrollTop: yPosition}, 300);
    }
</script>


Counterform 2012, Tesla, Montessori
<script type="text/javascript">
    function findAnchor(linkID){
        var yPosition= $("#"+linkID).offset().top + "px";
        $('#mainwrapper').animate( {scrollTop: yPosition }, 300);
    }
</script>


nonFeed
<script type="text/javascript">
    function findAnchor(linkID){
        var yPosition= $("#"+linkID).position().top + "px";
        var scrollableElement = $("#"+linkID).parent().parent();
        if ( Cargo.Location.IsDirectLink() ) {
            scrollableElement = $('body, html');
        }
        scrollableElement.animate( {scrollTop: yPosition }, 300);
    }
</script>
In nonFeed you will also have to make a change in your CSS for the function to work. Add a position:relative property to .project_content :
.project_content {
    background: #fff;
    margin: 85px 0 35px;
    overflow: hidden;
    padding: 20px 60px 40px 20px;
    width: 360px;

    position: relative;
}


After you've added the required script tag into your Custom HTML, format your links like this:
 <a href="javascript:void(0)" onclick="findAnchor('text1')">Link to Part 1</a>
<a href="javascript:void(0)" onclick="findAnchor('image1')">Link to Image 1</a>
Use the text inside the parentheses to create destination anchors (or any other element) with corresponding IDs:
  <a id="text1" href="http://en.wikiquote.org/wiki/Jorge_Luis_Borges">Part 1:</a>
A man sets out to draw the world. As the years go by,
he peoples a space with images of provinces, kingdoms,
mountains, bays, ships, islands, fishes, rooms,
instruments, stars, horses, and individuals. A short
time before he dies, he discovers that the patient
labyrinth of lines traces the lineaments of his own face.
 -JLB
<div id="image1">{image 1}</div> 

 Note that this will not work across different pages and projects, but only inside a single page or project. 

tickets@cargocollective.com
http://assets2.desk.com/
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
Invalid characters found
/customer/en/portal/articles/autocomplete