Ability to apply custom css to close button (e.g. move or hide)

README.md

@@ -3,7 +3,7 @@ EnjoyHint
 **EnjoyHint** is a web-tool that provides the simplest way to create interactive tutorials and hints for your site or web-application. It can also be used to highlight and sign application elements.  
 
 EnjoyHint is free software distributed under the terms of MIT license.
-  
+
 #### Demo
 * [TODO app demo](http://xbsoftware.github.io/enjoyhint/) ([downloadable package](http://xbsoftware.github.io/enjoyhint/enjoyhint_todo_demo.zip))
 * [A small guide on EnjoyHint](http://xbsoftware.github.io/enjoyhint/example1.html)
@@ -34,8 +34,8 @@ Alternative way:
 //initialize instance
 var enjoyhint_instance = new EnjoyHint({});
 
-//simple config. 
-//Only one step - highlighting(with description) "New" button 
+//simple config.
+//Only one step - highlighting(with description) "New" button
 //hide EnjoyHint after a click on the button.
 var enjoyhint_script_steps = [
   {
@@ -53,7 +53,7 @@ enjoyhint_instance.run();
 #### Script Configuration
 The sequence of steps can be only linear for now. So, the script config is an array. Every element of this array is the config for some step.
 
-#### Example of script configuration 
+#### Example of script configuration
 Highlight some button and after you click on it, highlight some panel:
 ```javascript
 var enjoyhint_script_steps = [
@@ -79,14 +79,15 @@ var enjoyhint_script_steps = [
 * `bottom` - bottom margin for the shape of "rect" type  
 * `left` - left margin for the shape of "rect" type
 * `scrollAnimationSpeed` - sets the auto scroll speed (ms).
+* `closeButton` - allows applying its css for the button Close.
 * `nextButton` - allows applying its classes and names for the button Nеxt.
 * `skipButton` - allows applying its classes and names for the button Skip. For the example :
 ```javascript
 	var options = {
                     "next #block": 'Hello.',
                     "nextButton" : {className: "myNext", text: "NEXT"},
                     "skipButton" : {className: "mySkip", text: "SKIP"},
-
+                    "closeButton": {left: 10, top: 10}
                 }
   ```
 * `showSkip` - shows or hides the Skip button (true|false)
@@ -150,13 +151,9 @@ var enjoyhint_script_steps = [
 * New and simplified description of EnjoyHint steps
 * Auto scroll to the element
 * Possibility to hide or display the buttons showNext, showSkip.
-* HTML usage allowed in description 
+* HTML usage allowed in description
 * Destructor
-* Simplified property names 
-* Grunt  to compress and merge files 
+* Simplified property names
+* Grunt  to compress and merge files
 * New examples
 * You can learn the step you are on by the class enjoyhint-step-* ( where * stands for the step number).
-
-
-
-

src/enjoyhint.js

@@ -185,7 +185,8 @@ var EnjoyHint = function (_options) {
                         left: step_data.left,
                         right: step_data.right,
                         margin: step_data.margin,
-                        scroll: step_data.scroll
+                        scroll: step_data.scroll,
+                        close_css: step_data.closeButton
                     };
 
                     if (step_data.shape && step_data.shape == 'circle') {

src/jquery.enjoyhint.js

@@ -548,7 +548,7 @@ CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
                         left: left_skip,
                         top: label_y + label_height + 20
                     });
-                    that.$close_btn.css({
+                    that.$close_btn.css(data.close_css || {
                         right : 10,
                         top: 10
                     });
@@ -752,4 +752,3 @@ CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
         return this;
     };
 })(window.jQuery);
-