Last active
March 31, 2016 22:30
-
-
Save Lwdthe1/ce79c151928a1b2c5569 to your computer and use it in GitHub Desktop.
A jQuery function to add a actionable child element (the hider) to a parent element (the hidee). When clicked, the hider will hide the hidee. Raw
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * ALERT: This function uses (but does not need) but function for checking the parent's background-color | |
| * Get Lincoln W Daniel's parentHasLightBgColor() jQuery function here -> https://gist.github.com/Lwdthe1/6bab83098a68d0128fb3 | |
| **/ | |
| (function($){ | |
| $.fn.showHider = function() { | |
| /*note that "this" in this context | |
| refers to the element that called this method. | |
| This should be the parent element to be hidden when the hider is clicked. | |
| Thus, "this" refers to the hidee | |
| and the hider is one of its child elements*/ | |
| /*set the hider's id. you could. | |
| This function uses the hider's id by doing '"#" + hider', | |
| but if you'd like to use a class to identify your hider instead, | |
| you can simply switch that to '"." + hider' throughout the code.*/ | |
| var hiderId = "hide-parent-c"; | |
| //try to find the hider by the hider's id in this element | |
| var hider = this.find("#" + hiderId); | |
| //check if the hider was found in this element | |
| if(hider.length <= 0) { | |
| //the hider does not exist in this element. construct and add it | |
| /*construct the style for the hider element. | |
| Make it how you want. I have it position in the top right corner of the hidee*/ | |
| var hiderStyle = "style='position: fixed; top: 0; right: 0; \ | |
| margin:10px; font-size:25px; cursor:pointer'"; | |
| /*construct the innerHTML of the hider element. | |
| This is what will be shown on screen, | |
| so make it appropriate and easily visible. | |
| The function of the hider is to hide the hidee so "✖" == "X" works.*/ | |
| var hiderDisplay = "✖"; | |
| /*Construct the onclick functionality for the hider. | |
| Set this to whatever you want the hider to do.*/ | |
| var hiderOnClick = "onclick='this.parentNode.style.display=\"none\";'"; | |
| //put everything together as the hider's html element. | |
| var hiderHTML = "<span id='" + hiderId + "' " + hiderStyle + " " + hiderOnClick + " title='Hide my parent, the Hidee'>\ | |
| " + hiderDisplay + "</span>" | |
| //add the hider's html element to this element. | |
| this.append(hiderHTML); | |
| /*try to find the hider inside the hider again by the id. | |
| It should be there now*/ | |
| hider = this.find("#" + hiderId); | |
| } else { | |
| /*the hider already exists in this element. | |
| Set its onclick function. | |
| Set this to whatever you want the hider to do. | |
| Or if you already implemented functionality for the hider by id elsewhere, | |
| you can omit this block of code*/ | |
| hider.click(function() { | |
| this.parentNode.style.display="none"; | |
| }); | |
| } | |
| //check if the parent of the hider has a light background | |
| var hideeHasLightBgC = hider.parentHasLightBgColor(); | |
| if(hideeHasLightBgC == true) { | |
| //make the hider's display color dark so it shows on its light parent | |
| hiderDisplayColor = "#808080"; | |
| } else if(hideeHasLightBgC == false) { | |
| //make the hider's display color light so it shows on its dark parent | |
| hiderDisplayColor = "#fff"; | |
| } else { | |
| //default to a dark color for the hider's display | |
| hiderDisplayColor = "#808080"; | |
| } | |
| //set the hider's display color | |
| hider.css("color", hiderDisplayColor); | |
| //show the hider in this element, the hidee | |
| hider.show(); | |
| } | |
| })(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| DO WHATEVER YOU WANT TO PUBLIC LICENSE | |
| Version 2, December 2004 | |
| Copyright (C) 2016 Lincoln W Daniel <http://lincolnwdaniel.com> | |
| Everyone is permitted to copy and distribute verbatim or modified | |
| copies of this license document, and changing it is allowed as long | |
| as the name is changed. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <!--ADD YOUR SCRIPT LINK TO jQUERY--> | |
| <script src="js/libs/jquery/jquery.min.js"></script> | |
| <!--ADD THE Script LINK TO Lincoln W Daniel's parentHasLightBgColor jQuery function: | |
| get it here-> https://gist.github.com/Lwdthe1/6bab83098a68d0128fb3--> | |
| <script src="js/jquery.parentHasLightBgColor.js"></script> | |
| <!--ADD THE Script LINK TO THE showHider jQuery function.--> | |
| <script src="js/jquery.showHider.js"></script> | |
| </head> | |
| <body> | |
| <div id"main-container" style="z-index: 1"> | |
| This is the main content div. | |
| <div id="hidee-popup-container" style="width:100%; height:100%; | |
| background-color: black; display: none; position: absolute; z-index: 10000; top:0"> | |
| <p>This is the hidee div. It is usually a div the that is positioned absolutely as a popup above the rest of the page.</p> | |
| </div> | |
| </div> | |
| <button class="show-hidee-popup-container">Show Hidee Popup Div</button> | |
| <script> | |
| $(".show-hidee-popup-container").click(function(){ | |
| var hideePopupDiv = $("#hidee-popup-container"); | |
| //show the popup div that will be hidden when hider is clicked | |
| hideePopupDiv.show(); | |
| //show the hidee's hider | |
| hideePopupDiv.showHider(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment