Pullout

In this example below you will see how to do a Pullout with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by TVR, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright TVR ©
  • HTML
  • CSS
  • JavaScript
    <p>Standalone</p>
<div class="pulloutContainer">
  <div class="pulloutBackground">
    Lorem ipsum...
  </div>
</div>

<p><a href="#" data-pullout-selector="#pullout1">Toggle-able</a></p>
<div id="pullout1" class="pulloutContainer withArrow">
  <div class="arrow"></div>
  <div class="pulloutBackground">
    Lorem ipsum...
  </div>
</div>

<p>The pointer finds and centers itself on the toggling element.<a href="#" data-pullout-selector="#pullout2" style="margin-left: 100px;">Toggle-able</a></p>
<div id="pullout2" class="pulloutContainer withArrow">
  <div class="arrow"></div>
  <div class="pulloutBackground">
    Lorem ipsum...
  </div>
</div>

/*Downloaded from https://www.codeseek.co/TVR/pullout-MyrNKN */
    .pulloutContainer {
    position: relative;
    clear: both;
    margin: 0 -10px 15px -10px;
    padding-top: 15px;
}
.pulloutBackground {
    padding: 15px;
    border: 2px solid #c5c5c5;
    border-right: 0;
    border-left: 0;
    background-color: #f1f1f1;
}
.withArrow .arrow {
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #c5c5c5;
    border-left: 15px solid transparent;
}
.withArrow .arrow:after {
    position: absolute;
    margin-top: 3px;
    margin-left: -14px;
    width: 0;
    height: 0;
    border-right: 14px solid transparent;
    border-bottom: 14px solid #f1f1f1;
    border-left: 14px solid transparent;
    content: ' ';
}



/*Downloaded from https://www.codeseek.co/TVR/pullout-MyrNKN */
    pullout = (function ($) {

    function applyToDOM (update) {
        $(update).find('a[data-pullout-selector]').each(function (index, anchor) {
            var pullout = $(anchor.getAttribute('data-pullout-selector'))[0],
                arrow = $(pullout).find('.arrow')[0];
            if (arrow && $(pullout).is(':visible')) { // if pullout is left open by default and it uses the arrow
                centerArrowOnAnchor(arrow, anchor, pullout); // go ahead and center the arrow on the anchor element
            }
            $(anchor).on('click', function () {
                togglePullout(anchor);
            });
        });
    }

    function togglePullout (anchor, complete) {
        var pulloutSelector = anchor.getAttribute('data-pullout-selector'),
            pullinSelector = anchor.getAttribute('data-pullin-selector'),
            pullout = $(pulloutSelector)[0],
            arrow = $(pullout).find('.arrow')[0],
            toggleMethods = getToggleMethods();
        if (pullinSelector) {
            $(pullinSelector + ':not(' + pulloutSelector + ')')[toggleMethods.hide]();
        }
        $(pullout)[$(pullout).is(':visible') ? toggleMethods.hide : toggleMethods.show](400, complete);
        toggleAnchorText(anchor);
        if (arrow) {
            centerArrowOnAnchor(arrow, anchor, pullout);
        }
    }

    function toggleAnchorText (anchor) {
        var toggleText = anchor.getAttribute('data-toggle-text'),
            alternateText = anchor.getAttribute('data-alternate-text'),
            html = anchor.innerHTML;
        if (toggleText) {
            toggleText = toggleText.split(',');
            anchor.innerHTML = html.replace.apply(html, toggleText);
            anchor.setAttribute('data-toggle-text', toggleText.reverse().join(','));
        } else if (alternateText) {
            anchor.setAttribute('data-alternate-text', html);
            anchor.innerHTML = alternateText;
        }
    }

    function centerArrowOnAnchor (arrow, anchor, pullout) {
        var anchorOffsetFromPullout = $(anchor).offset().left - $(pullout).offset().left,
            anchorHalfWidth = Math.round($(anchor).outerWidth() / 2),
            arrowHalfWidth = Math.round($(arrow).outerWidth() / 2);
        arrow.style.left = (anchorOffsetFromPullout + anchorHalfWidth - arrowHalfWidth) + 'px';
    }

    function getToggleMethods () {
        var html = document.documentElement,
            useBasicEffects = $(html).hasClass('ie7') || $(html).hasClass('ie8'),
            nameOfShowMethod = useBasicEffects ? 'show' : 'slideDown',
            nameOfHideMethod = useBasicEffects ? 'hide' : 'slideUp';
        return { hide: nameOfHideMethod, show: nameOfShowMethod };
    }

    return {
        applyToDOM: applyToDOM,
        togglePullout: togglePullout,
        /* testOnly methods are only exposed for unit tests */
        testOnly_toggleAnchorText: toggleAnchorText,
        testOnly_centerArrowOnAnchor: centerArrowOnAnchor,
        testOnly_getToggleMethods: getToggleMethods
    };
})(jQuery);

jQuery(function () {
  pullout.applyToDOM(document.body);
});


Comments