Last active
August 29, 2015 14:27
-
-
Save tzkmx/9194f4ef2eb08ba46121 to your computer and use it in GitHub Desktop.
Sections with checkbox hack + yellow fade animation https://jsfiddle.net/0eaLm968
This file contains hidden or 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
| <body> | |
| <div class="radio_panels"> | |
| <h1>Demo of checkbox hack for panelized sections</h1> | |
| <input type="radio" name="selecta" id="section1_chkbox" /> | |
| <label for="section1_chkbox">My first section</label> | |
| <input type="radio" name="selecta" id="section2_chkbox" /> | |
| <label for="section2_chkbox">My second section</label> | |
| <div id="section1" class="panel"> | |
| <h2>My first section</h2> | |
| <p>The content for my awesome panel 1</p> | |
| </div> | |
| <div id="section2" class="panel"> | |
| <h2>My second section</h2> | |
| <p>The content of panel 2</p> | |
| </div> | |
| </div> | |
| </body> |
This file contains hidden or 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
| .radio_panels [type="radio"] { | |
| position: absolute; | |
| clip: rect(1px, 1px, 1px, 1px); | |
| clip: rect(1px 1px 1px 1px); | |
| } | |
| .radio_panels [type="radio"]:checked + label { | |
| background-color: black; | |
| color: white; | |
| } | |
| .radio_panels .panel { | |
| display: none; | |
| -webkit-animation:yellow-fade 3s; | |
| -moz-animation:yellow-fade 3s; | |
| animation:yellow-fade 3s; | |
| } | |
| .radio_panels #section1_chkbox:checked ~ #section1, | |
| .radio_panels #section2_chkbox:checked ~ #section2 { | |
| display: block; | |
| } | |
| @-webkit-keyframes yellow-fade{ | |
| 5%{ background-color:#ff8; } | |
| } | |
| @-moz-keyframes yellow-fade{ | |
| 5%{ background-color:#ff8; } | |
| } | |
| @keyframes yellow-fade{ | |
| 5%{ background-color:#ff8; } | |
| } |
This file contains hidden or 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
| /* this makes your checkbox sections bookmarkable */ | |
| (function($) { | |
| function changeToHashedSection(hash) { | |
| $(hash + '_chkbox').click(); | |
| document.getElementById('page').scrollTop = 0; | |
| console.log('Moved to section: ' + hash + ' on ' + document.location.pathname); | |
| }; | |
| $(function($) { | |
| var hash = document.location.hash; | |
| if (0 === hash.lastIndexOf('#')) { | |
| changeToHashedSection(hash); | |
| } | |
| }); | |
| $(window).on( 'hashchange', function(e){ | |
| changeToHashedSection(document.location.hash); | |
| }); | |
| $("[name='selecta']").change(function(e) { | |
| var hash = '#' + e.target.id.replace('_chkbox', ''); | |
| if(hash !== document.location.hash) { | |
| if(history.pushState) { | |
| history.pushState(null, null, hash); | |
| } else { | |
| location.hash = hash; | |
| } | |
| } | |
| }); | |
| })(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment