![\"npm](\"https://badge.fury.io/js/overhang.svg\"){kind=icon}
\n \n ![](\"https://img.shields.io/github/license/paulkr/overhang.js.svg\")
\n \n\n \n
\n \n \n \n \n
\n A simple jQuery plugin to display sleek, instant notifications, confirmations or prompts inside a given element.\n
\n\n\n See it in action!\n
\n\nInstallation\n------------\n\nYou can install overhang through npm:\n\n```bash\n$ npm install overhang\n```\n\nAlternatively, you can download the files in the `dist/` folder manually.\n\nUsage\n-----\n\nInclude a reference to the latest version of jQuery and jQuery UI. — The specific [jQuery UI components](https://jqueryui.com/download) required are: \"**effect.js**\" *(Effects Core)*\n\n```html\n\n\n```\n\nInclude references to the Javascript and CSS files.\n\n```html\n\n\n```\n\nConfiguration Parameters\n------------------------\n\n`overhang.js` has 3 primary features - notifications, prompts and confirmations. Most of the options are customizable for all of these features.\n\n### Defaults\n\n##### `type`\n\nThis is the type of the notification that you want to display.\nThe preset types are `success`, `error`, `warn`, `info`, `prompt` and `confirm`.\n\nIf you would like to use a custom theme, leave this parameter blank and follow the rules for setting a custom theme.\n\n```javascript\n$(\"body\").overhang({\n custom: true, // Set custom to true\n primary: \"#34495E\", // Your custom primary color\n accent: \"#F4B350\" // Your custom accent color\n});\n```\n\n`primary` - The background color of the alert.\n\n`accent` - The bottom border color.\n\nIf you want to display either a prompt or confirmation alert, set the type to `prompt` or `confirm`, respectively. Prompts and confirmations both have preset themes, but you can customize them by using the `custom` option.\n\n##### `customClasses`\n\nAny additional CSS classes to add to the overhang element, separated by spaces. Useful for specifying fonts and further customizations. The default is `\"\"`.\n\n##### `textColor`\n\nThe color of the text. The default is set to white.\n\n##### `message`\n\nThe message to be displayed in your alert.\n\n##### `duration`\n\nThe duration in seconds to show the alert for. The default is `1.5` seconds.\n\n##### `speed`\n\nThe speed to drop and raise the alert in milliseconds. The default is set to `500`.\n\n##### `closeConfirm`\n\nSet this to `true` if you would like the user to have to close the alert rather than it disappearing by itself. The default is set to `false`.\n\n##### `upper`\n\nSet this to `true` if you would like your message in all uppercase letters. The default is set to `false`.\n\n##### `easing`\n\njQuery UI easing option for the drop effect. The default is set to `\"easeOutBounce\"`\n\n##### `html`\n\nThis is a boolean if the `message` argument should be interpreted as HTML. The default value is set to `false`.\n\n##### `overlay`\n\nSet this to `true` if you would like to have an overlay displayed with your alert. The default value is set to `false`. You can also pass in a value to the `overlayColor` argument to specify the color of the overlay. The default is set to black.\n\n```javascript\n$(\"body\").overhang({\n type: \"confirm\",\n message: \"Do you want to continue?\",\n closeConfirm: \"true\",\n overlay: true,\n overlayColor: \"#1B1B1B\"\n});\n```\n\n#### Basic Alert Notification Example\n\n```javascript\n// Some error notification\n$(\"body\").overhang({\n type: \"error\",\n message: \"You could not be logged in at this time.\",\n closeConfirm: \"true\",\n customClasses: \"class1 class2\"\n});\n```\n\n### Prompts\n\nWhen using prompts, all you need to do is set the `type` parameter to `\"prompt\"`.\n\n#### Prompt Example\n\n```javascript\n// Some prompt notification\n$(\"body\").overhang({\n type: \"prompt\",\n message: \"What is your name\"\n});\n```\n\n### Confirmations\n\nWhen using confirmations, there are additional options that you can customize.\n\n##### `yesMessage`\n\nThis is the text on the \"true\" button that would to display. The default is set to `\"Yes\"`.\n\n##### `noMessage`\n\nThis is the text on the \"false\" button that would to display. The default is set to `\"No\"`.\n\n##### `yesColor`\n\nThis is the color of the \"true\" button. The default is set to `\"#2ECC71\"`.\n\n##### `noColor`\n\nThis is the color of the \"false\" button. The default is set to `\"#E74C3C\"`.\n\n#### Confirmation Example\n\n```javascript\n// Some confirmation\n$(\"body\").overhang({\n type: \"confirm\",\n yesMessage: \"Yes please!\",\n noMessage: \"No thanks.\"\n});\n```\n\nRetrieving Data\n---------------\n\nThe `prompt` and `confirm` features both allow you to get data from the user. The responses are stored as data in the DOM of the target element that `overhang.js` has been applied to.\n\nTo retrieve the data, you simply pass in a callback function with one parameter:\n\n```javascript\n$(\"body\").overhang({\n type: \"prompt\",\n message: \"What is your name\",\n callback: function (value) {\n alert(\"You entered \" + value);\n }\n});\n```\n\nor you manually access the data from the DOM:\n\n```javascript\nalert($(\"target-element\").data(\"overhangPrompt\")); // From a prompt\nalert($(\"target-element\").data(\"overhangConfirm\")); // From a confirmation\n```\n\nIf the user has not yet given a response, the default values will be set to `null`.\n\nCallbacks\n---------\n\nThe option callback argument is a function that will run once the user has made an action on the overhang notification. The callback will run after any of these cases:\n\n- The submission of a prompt\n- The selection on a confirmation\n- The close button on a normal notification with a true `closeConfirm`\n- The raise of a normal notification\n\nNote: For confirmations or prompts, the callback will not run when the close button is clicked and nothing is selected.\n\n#### Example\n```javascript\n$(\"body\").overhang({\n type: \"confirm\",\n message: \"Are you sure?\",\n\n // This code will run once an option is clicked.\n callback: function (selection) {\n alert(\"You made your selection of \" + selection);\n }\n});\n```\n\n","maintainers":[{"name":"paulkr","email":"paul@paulkr.com"}],"time":{"modified":"2022-06-23T04:49:46.069Z","created":"2016-08-08T16:38:45.730Z","1.0.0":"2016-08-08T16:38:45.730Z","1.0.1":"2016-08-25T16:40:47.937Z","1.0.2":"2016-08-27T16:09:00.150Z","1.0.4":"2017-10-06T04:30:04.180Z","1.0.5":"2017-10-07T19:40:46.841Z","1.0.6":"2020-05-05T22:41:10.301Z","1.0.7":"2020-05-12T01:41:38.232Z","1.0.8":"2020-05-12T02:13:10.200Z"},"homepage":"https://github.com/paulkr/overhang.js#readme","keywords":["notifications","prompts","confirmations","alerts"],"repository":{"type":"git","url":"git+https://github.com/paulkr/overhang.js.git"},"author":{"name":"Paul Krishnamurthy","email":"paul@paulkr.com"},"bugs":{"url":"https://github.com/paulkr/overhang.js/issues"},"license":"MIT","readmeFilename":"README.md"}