This is small and simple sidebar plugin made with HTML,CSS and JQuery.which can be used for many purposes like for ‘Follow me’ link, ‘contact us’ page, or anything you want.It positions itself at Left/Right side of the page, this can be configured easily with config option “position”. You can modify its look and feel by making change in style/style.css file
View DemoDownload Source
View DemoDownload Source
Implimentation
-
1) Include javascript and stylesheet
<script src="js/jquery.js"></script> <script src="js/jquery.sidebar.js"></script>
<link rel="stylesheet" type="text/css" href="styles/style.css">
2) Activate Plugin
$(function() {
$("body").sidebar({
text : "Follow Me", // can be anything
size : "30px", // can be anything in pixels
length : "200px", // can be anything in pixels
margin : "130px", // can be anything in pixels
position: "left", // left / bottom / right / top
fadding : "0.5", // 0.1 to 1.0
openURL : "www.twitter.com/amitspatil"
});
});
3) More Configuration Options
| Option | Description |
|---|---|
| text | This text will be shown on sidebar. |
| size | This is a dynamic configuration option its behavious is dependant on position propery. Ex : If position is set to left/right then size option becomes width of Sidebar. and if its set to bottom/top then it becomes height of sidebar. |
| length | This is again a dynamic configuration option its behavious is dependant on position propery. Ex : If position is set to left/right then length option becomes height of Sidebar. and if its set to bottom/top then it becomes width of sidebar. |
| position | Position of sidebar
|
| fadding | Initial fading of sidebar (ranges from 0.1 to 1.0) |
| openURL | Set url which will get opened when user click on sidebar |
| img | This option is in development and will publish soon |
4) And you are ready to go…!
Comments and suggestions are always welcome, your suggestions will help make this script more useful.so if you have suggestion do contact me at amitpatil 321 (at) gmail.com or follow me on twitter
If you like this plugin then please support it
If you like this plugin then please support it
- Rate it on http://plugins.jquery.com/project/jquery-Sidebar-plugin
- If you are using this plugin then please let me know and send your page url so i can publish it over here on this page
thanks Amit. this is very usable plugin.
Was wondering how can I place this on the BOTTOM of the page instead of left or right?
right now there is no option to set its position to bottom or top…but i will add this option soon.
Way to use the internet to help people solve prboelms!
@Eddie
I have sent you updated plugin. please check ur mail and please let me know if this serve your purpose.
@all
I am adding more features to it which are not yet completed so i have not uploaded the changes live. once its complete i will publish the changes.
Hi
Works well, though can I hook it into a mouseenter and a radiobutton click to open?
Thanks
@Adam – i didnt got what exactly u want ?
Hi Amit
I mean in the js code you have the open option set to mouseenter, I would like the sidebar to open on mouseenter, and also to expand if a certain radiobutton is checked by the user.
Thanks
@adam : got ur point. I have seen that feature on some websites for “feedback” and “contact us” page. SORRY, but, this plugin is not meant for this. it will simple open your link in another tab.