Portamento.js

Posted byProsoxi.com Webmaster Leave a comment on Portamento.js

Portamento is a jQuery plugin that makes it simple to add sliding (aka "floating") panel functionality to your web page. All that’s needed is some simple CSS and one line of JavaScript, and you’re away!

It works fine with floated and absolutely-positioned layouts, in all modern browsers and some not-so-modern ones too.

Portamento also has sensible behaviour if the user’s viewport is too small to display the whole panel, so you don’t need to worry about users not being able to see your important content.

Demos

In the Wild

Portamento is being used on real websites, right now. Take a look:

Usage

Using Portamento is easy. Just follow the steps below and you’ll have a smooth sliding panel in no time!

  1. Include portamento.js in your page, just before </body>:

    <script src="portamento.js"></script>

  2. In your JavaScript, apply the plugin to the element you want to slide – in this case #example:

    $('#example').portamento();

    Portamento needs to be applied after the page has loaded, so it’s best to put it in your $(document).ready() listener.

  3. Do a bit of CSS. Portamento wraps your sliding panel in an element with the ID portamento_container.#portamento_container takes care of positioning your sliding panel correctly, to avoid any nasty jumping around. Set the panel to have position:absolute when it’s in #portamento_container. The panel will have a class of fixed when it’s sliding, so give thatposition:fixed. For example:

    #portamento_container {
	float:right; 
	position:relative;
}

#portamento_container #example {
	float:none; 
	position:absolute;
}

#portamento_container #example.fixed {
	position:fixed;
}

    This might look scary, but it’s really quite simple. Check out the demo source for real-world examples.

  4. Customize Portamento with any options you want:

    $('#example').portamento({wrapper: $('#example_wrapper'), gap: 50});

  5. Get sliding!

Options

You can customise Portamento with the following options:

wrapper – the element that you want to visually contain the sliding panel. The sliding panel won’t go out of its wrapper’s boundaries, and respects the wrapper’s padding. The default wrapper is the document’s <body>.

gap – the number of pixels to leave between the top of the viewport and the top of the sliding panel. The default value is 10.

disableWorkaround – disable the workaround for not-quite capable browsers. Some users will lose the sliding functionality, but the content will still be there.

The options all have sensible defaults, so in most cases you don’t need to worry about them.

 

http://simianstudios.com/portamento/

Leave a comment