Portamento js
-
Upload
learningtech -
Category
Technology
-
view
255 -
download
0
Transcript of Portamento js
![Page 1: Portamento js](https://reader036.fdocuments.in/reader036/viewer/2022082808/5555d2cdd8b42a711f8b4af9/html5/thumbnails/1.jpg)
Portamento.jsJason
![Page 2: Portamento js](https://reader036.fdocuments.in/reader036/viewer/2022082808/5555d2cdd8b42a711f8b4af9/html5/thumbnails/2.jpg)
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.
![Page 3: Portamento js](https://reader036.fdocuments.in/reader036/viewer/2022082808/5555d2cdd8b42a711f8b4af9/html5/thumbnails/3.jpg)
Usage Setp1
Include portamento.js in your page, just before </body>
<script src="portamento.js"></script>
![Page 4: Portamento js](https://reader036.fdocuments.in/reader036/viewer/2022082808/5555d2cdd8b42a711f8b4af9/html5/thumbnails/4.jpg)
Usage Setp2
In your JavaScript, apply the plugin to the element you want to slide - in this case #example
$('#example').portamento();
![Page 5: Portamento js](https://reader036.fdocuments.in/reader036/viewer/2022082808/5555d2cdd8b42a711f8b4af9/html5/thumbnails/5.jpg)
Portamento.js
CSS.
#portamento_container {float:right; position:relative;
}
#portamento_container #example {float:none; position:absolute;
}
#portamento_container #example.fixed {position:fixed;
}
![Page 6: Portamento js](https://reader036.fdocuments.in/reader036/viewer/2022082808/5555d2cdd8b42a711f8b4af9/html5/thumbnails/6.jpg)
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