Portamento.js
Jason
Portamento.js
 Portamento is a jQuery plugin that makes it simple to add sliding panel
functionality to your web page.
 ...
Usage Setp1
 Include portamento.js in your page, just before </body>
<script src="portamento.js"></script>
Usage Setp2
 In your JavaScript, apply the plugin to the element you want to slide - in this
case #example
$('#example')....
Portamento.js
 CSS.
#portamento_container {
float:right;
position:relative;
}
#portamento_container #example {
float:none...
Portamento.js
 Options
 wrapper - The sliding panel won't go out of its wrapper's boundaries, and
respects the wrapper's...
Upcoming SlideShare
Loading in...5
×

Portamento js

277

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
277
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Portamento js

  1. 1. Portamento.js Jason
  2. 2. Portamento.js  Portamento is a jQuery plugin that makes it simple to add sliding panel functionality to your web page.  Aka "floating“.  All that's needed is some simple CSS and one line of JavaScript, and you're away.
  3. 3. Usage Setp1  Include portamento.js in your page, just before </body> <script src="portamento.js"></script>
  4. 4. Usage Setp2  In your JavaScript, apply the plugin to the element you want to slide - in this case #example $('#example').portamento();
  5. 5. Portamento.js  CSS. #portamento_container { float:right; position:relative; } #portamento_container #example { float:none; position:absolute; } #portamento_container #example.fixed { position:fixed; }
  6. 6. Portamento.js  Options  wrapper - The sliding panel won't go out of its wrapper's boundaries, and respects the wrapper's padding. (Default wrapper <body>)  gap - The number of pixels to leave between the top of the viewport and the top of the sliding panel. (default value is 10 px)  disableWorkaround - Disable the workaround for not-quite capable browsers
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×