npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

slidereference

v1.1.1

Published

Ultra simple jQuery plugin that helps you link two websites. It adds a sidebar to your page, with an iframe, so you can bring external content (like Dictionaries, Wikipedia, etc) without using annoying popups nor making your visitors leave the page.

Downloads

2

Readme

#slidereference

Try it: http://fabionolasco.github.io/slidereference/

Ultra simple jQuery plugin that helps you link two websites. It adds a sidebar to your page, with an iframe, so you can bring external content (like Dictionaries, Wikipedia, etc) without using annoying popups nor making your visitors leave the page.

Suppose that you have a website with long texts and difficult terminology. Now you want to offer a way for your users to look those terms on Wikipedia. To solve that problem, many people use popups, modal windows or tooltips. But according to some UX specialists those popups and modal windows are too blocking, and cause bad user experience. You could use tooltips, but often that is not enough.

Slide-reference jQuery plugin is a non-obstructive option that allows you to bring any content you want to your website. The sidebar have draggable border, so you can make it smaller or bigger. It can certain profit for code refactory, since it was my first attempt with JQuery plugin development. But I will wait for change requests on GitHub before working with this old project.

Usage

  1. Add jQuery to page
  2. Add slide-reference JS to page
  3. Add attributes to the elements that you desire to use to activate the plugin
    • class = "slidereference"
    • data-url = "YourURL"
    • (optional) data-originaltext = "ElementText"
    • (optional) data-clicktext = "ElementTextAfterClicked"
    • (optional) data-options = "{JS Object Will All Options for Slider}"
  4. Execute plugin after page loads
<html>
<head></head>
<body>
    <div class="container">
        <h1>Main Content</>
        <a href="javascript:void(0)"
            class="slidereference"
            data-originaltext="OriginalText"
            data-clicktext="ClickedText"
            data-url="http://en.m.wikipedia.org/wiki/example">Example</a>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="jquery.slidereference.js"></script>
    <script>
        $(function(){
            $(document).slidereference('start');
            // This command will look for the element with the class .slidereference
            // and add functionality to it. In this case it is an A tag.
            // If you want to add it to a specific container, you can do this:
            // $('.container').slidereference('start');
        });
    </script>
</body>
</html>