| jQuery(document).ready(function(){ | |
| jQuery('a[href*=#]:not([href=#])').click(function() { | |
| if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') | |
| || location.hostname == this.hostname) { | |
| var target = jQuery(this.hash); | |
| target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']'); | |
| if (target.length) { | |
| jQuery('html, body').animate({ | |
| scrollTop: target.offset().top - 90 }, 1000); | |
| return false; |
Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.
video::webkit-media-controls-timeline {
background-color: lime;
}
video /deep/ input[type=range] {
| <script> | |
| $("#demo01").animatedModal(); | |
| </script> |
| <body> | |
| <!--Call your modal--> | |
| <a id="demo01" href="#animatedModal">DEMO01</a> | |
| <!--DEMO01--> | |
| <div id="animatedModal"> | |
| <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID class="close-animatedModal" --> | |
| <div class="close-animatedModal"> | |
| CLOSE MODAL | |
| </div> |
| <body> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <script src="yourPath/animatedModal.min.js"></script> | |
| </body> |
| <head> | |
| <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css"> | |
| </head> | |