Skip to content

Instantly share code, notes, and snippets.

@tzkmx

tzkmx/0. page.html

Last active August 29, 2015 14:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tzkmx/9194f4ef2eb08ba46121 to your computer and use it in GitHub Desktop.
Save tzkmx/9194f4ef2eb08ba46121 to your computer and use it in GitHub Desktop.
Download ZIP
Sections with checkbox hack + yellow fade animation https://jsfiddle.net/0eaLm968
Raw
0. page.html
<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>
Raw
1. page.css
.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; }
}
Raw
2. hashchange.js
/* 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