• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
150
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Portamento.js Jason
  • 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. Usage Setp1  Include portamento.js in your page, just before </body> <script src="portamento.js"></script>
  • 4. Usage Setp2  In your JavaScript, apply the plugin to the element you want to slide - in this case #example $('#example').portamento();
  • 5. Portamento.js  CSS. #portamento_container { float:right; position:relative; } #portamento_container #example { float:none; position:absolute; } #portamento_container #example.fixed { position:fixed; }
  • 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