{"id":22273388,"url":"https://github.com/pete-rai/jquery-slidein","last_synced_at":"2025-07-28T14:32:06.245Z","repository":{"id":202116263,"uuid":"87550919","full_name":"pete-rai/jquery-slidein","owner":"pete-rai","description":"A slide-in panel for jQueryUI that works from all four sides","archived":false,"fork":false,"pushed_at":"2017-10-29T21:29:15.000Z","size":16,"stargazers_count":4,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2023-10-20T07:45:01.965Z","etag":null,"topics":["jquery","jquery-plugin","jquery-ui","slider","slider-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pete-rai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-04-07T13:49:38.000Z","updated_at":"2023-10-20T09:33:27.087Z","dependencies_parsed_at":null,"dependency_job_id":"2621a215-ea97-4237-88f4-9076ffd7c1a9","html_url":"https://github.com/pete-rai/jquery-slidein","commit_stats":null,"previous_names":["pete-rai/jquery-slidein"],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pete-rai%2Fjquery-slidein","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pete-rai%2Fjquery-slidein/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pete-rai%2Fjquery-slidein/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pete-rai%2Fjquery-slidein/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pete-rai","download_url":"https://codeload.github.com/pete-rai/jquery-slidein/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227922957,"owners_count":17840940,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jquery","jquery-plugin","jquery-ui","slider","slider-plugin"],"created_at":"2024-12-03T13:12:07.114Z","updated_at":"2024-12-03T13:12:07.747Z","avatar_url":"https://github.com/pete-rai.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jquery-slidein\n\n\u003e Visit my [Blog](http://www.rai.org.uk) to get in touch or to\nsee demos of this and much more.\n\n## Overview\n\nA slide-in panel for jQueryUI that works from all four sides. The panel overlays\nyour main page and can be slid in on a mouse click or mouse hover. There are lots\nof other options for customisation such as grab handle, slide speed, opacity,\npeeking-in etc. The plugin is excellent for housing user options which are only for occasional use, especially overlaid onto whole screen UIs that demand the entire screen real estate.\n\n### Demos and Example Usage\n\nHere are a couple of examples that you can use to understand how the plugin works\nand what you can do with it:\n\n* Click [here](https://pete-rai.github.io/jquery-slidein/sample-slidein-basic.html) to see a basic example.\n* Click [here](https://pete-rai.github.io/jquery-slidein/sample-slidein-full.html) to see a fuller example, which shows all the options that you can manipulate.\n\n### License\n\nThis plugin is available under [the MIT license](https://github.com/pete-rai/jquery-slidein/blob/master/LICENSE). _Please respect the terms of the license._\n\n### Karmaware\n\nThis software is released with the [karmaware](https://pete-rai.github.io/karmaware) tag\n\n### Disclaimer\n\nI've done best efforts testing on a range of modern browsers. If you find any problems,\ndo let me know by raising an issue [here](https://github.com/pete-rai/jquery-slidein/issues). Better still, create a fix for the problem too and drop\nin the changes; that way everyone can benefit from it.\n\n### Dependencies\n\nThis plug relies on [jQuery](https://jquery.com/) (version 2.2.4+) and [jQueryUI](https://jqueryui.com/) (version 1.12.1+)\n\n## Example Usage\n\nHere is the simplest example of using the slide-in panel.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003ejquery.slidein\u003c/title\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=viewport content=\"width=device-width, initial-scale=1\"\u003e\n\n    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css\"\u003e\n    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"jquery.slidein.css\"\u003e\n\n    \u003cscript type=\"text/javascript\" src=\"//code.jquery.com/jquery-2.2.4.min.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\" src=\"//code.jquery.com/ui/1.12.1/jquery-ui.min.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\" src=\"jquery.slidein.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n\n        $(document).ready (function ()  \n        {\n            $(\"#mypanel\").slidein ({ peek: 12, open: false, speed: 500, opacity: 0.9 });  \n        });\n\n    \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1\u003ejquery.slidein\u003c/h1\u003e\n    \u003cp\u003eThis the main page\u003c/p\u003e\n    \u003cdiv id=\"mypanel\"\u003eThis is the panel\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nImportant things to note about this example are:\n\n* The jQueryUI CSS is loaded **before** the slide-in CSS\n* The jQuery and jQueryUI JavaScript is loaded **before** the slide-in JavaScript\n* The slide-in plugin is instantiated **on document.ready**, so that the host element is definitely present\n* The desired slide-in options can be set at plugin creation time\n\n### Options\n\nHere are all the slide-in options that you can use to modify appearance and behaviour:\n\n| Option | Values | Default | Description |\n| --- | --- | --- | --- |\n| breadth | int | 250 | the panel width or height depending on where it is docked |\n| curve | int | 10 | the curve of the grab handle edges |\n| disabled | bool | false | disable all panel behaviour |\n| dock | top, left, bottom, right | left | panel docking edge |\n| hidden | bool | false | show or hide the panel and grab handle |\n| opacity | float | 1 | panel and grab handle opacity |\n| open | bool | true | true is open, false is closed |\n| peek | int | 10 | how far the panel \"peeks\" into the main window |\n| position | int | 10 | percentage position of the grab handle, 0 for top, 50 for middle, 100 for bottom |\n| prompt | string |  | text to show in the grab handle - no text will show a three-line strip |\n| speed | int | 400 | animation speed for opening and closing in millisecs |\n| toggle | | | toggles the open and closed state |\n| toOpen | click, hover | click | the action that opens the panel |\n| toClose | click, hover | click | the action that closes the panel |\n\nHere is an example of how to read and set the plugin options:\n\n```js\nvar speed = $(\"#mypanel\").slidein (\"speed\");\n$(\"#mypanel\").slidein (\"speed\", 600);\n```\n\n### Styling\n\nYou can re-style the slide-in plugin by including custom CSS **after** the main plugin CSS. The CSS classes are:\n\n| Class | Description |\n| --- | --- |\n| .slidein  | the panel and grab handle |\n| .slidein-panel  | the panel only |\n| .slidein-handle | the grab handle only |\n\nHere is an example of some custom CSS to set some panel appearance.\n\n```css\n.slidein\n{\n    background : yellow;\n}\n\n.slidein-panel\n{\n    padding : 20px;\n}\n\n.slidein-handle\n{\n    color : navy;\n}\n```\n\nNote some important points about styling:\n\n* Don't add _width_ or _height_ to the panel, use the 'breadth' widget option instead - as this works for horizontal and vertical docking\n* For _right_ or _bottom_ docked panels, you may need to disable the relevant scroll bar using “overflow-x: hidden\" or \"overflow-y: hidden\" on the _html_ selector.\n\n_– [Pete Rai](http://www.rai.org.uk)_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpete-rai%2Fjquery-slidein","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpete-rai%2Fjquery-slidein","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpete-rai%2Fjquery-slidein/lists"}