Pushpin feature doc

It seems that the docs of Pushpin are not up to date with the demo site itself. Neither is there a class called ‘tabs-wrapper’ in the DOM-Tree, nor is there a valid HTML code example in the docs.

Therefore I struggle to get the following structure running…

<div class="row">
    <div class="col s12 m3 l2">
        <div class="tabs-wrapper">
            <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
            <a href="#">This is a link</a>
            <a href="#">This is a link</a>
        </div>
    </div>
    <div class="col s12 m9 l10">
        <div ui-view class="uiview container"> </div>
    </div>
</div>

Since the docs do not tell how to use that class and where to put it and there is also no reliable code in the HTML itself, please fix that. And keep up the good work 😃

[salmanulfarzy]

This file has an working example, pushpin.html.

Here are the relevant sections.

HTML

<nav>
    <div class="nav-wrapper">
        <a href="#" class="brand-logo">Dynamic Top and Bottom at 500px</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a id="removePushPin" class="waves-effect waves-light btn">Remove PushPin</a></li>
            <li><a id="topTo200" class="waves-effect waves-light btn">Change Top to 200px</a></li>
            <li><a id="bottomTo200" class="waves-effect waves-light btn">Change Bottom to 200px</a></li>
        </ul>
    </div>
</nav>

JS

$( document ).ready(function() {
$('nav').pushpin({
  top: $('nav').offset().top,
  bottom: 500
});

$(window).on('scroll', function() {
  $('#scrollTop').text($(window).scrollTop());
});

$('#removePushPin').on('click', function() {
  $('nav').pushpin('remove');
});

$('#bottomTo200').on('click', function() {
  $('nav').pushpin({
    bottom: 200
  });
});

$('#topTo200').on('click', function() {
  $('nav').pushpin({
    top: 200
  });
});
});

[acburst]

Added a demo to pushpin in 6c1aaaf