Skip to content

Instantly share code, notes, and snippets.

@web20opensource

web20opensource/dabblet.css

Last active August 29, 2015 14:16
Show Gist options
  • Save web20opensource/a1cf3dad108e68d6e722 to your computer and use it in GitHub Desktop.
Save web20opensource/a1cf3dad108e68d6e722 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
.miniSliderContainer{
padding-bottom: 9em;
width: 100%;
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}
.miniSlider{
height: 0;
}
.miniSlider__item{
display: none;
padding: 1em;
position: absolute;
width: 80%;
}
.miniSlider__item.visible{
display: block;
}
.miniSlider__button__trigger.selected img{
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 hack */
filter: alpha(opacity = 50); /* IE 5-7 hack */
}
.ie7 .miniSlider__button__trigger.selected {
}
.miniSlider__button__trigger.unselected img{
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 hack */
filter: alpha(opacity = 100); /* IE 5-7 hack */
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.ie7 .miniSlider__button__trigger.unselected{
}
.miniSlider__buttons{
left: 1.8em;
position: absolute;
top: 8.5em;
text-align: center;
}
.miniSlider__button{
float: left;
display: inline-block;
width: 2em;
cursor: pointer;
}
.miniSlider__button img{
width: 80%;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
https://jsfiddle.net/dahu5j2g/
<div class="miniSliderContainer">
<div class="miniSlider">
<ul class="miniSlider__items">
<li class="miniSlider__item visible">
First item
</li>
<li class="miniSlider__item">
Second item
</li>
<li class="miniSlider__item">
Third item
</li>
</ul>
<ul class="miniSlider__buttons">
<li class="miniSlider__button"><a class="miniSlider__button__trigger selected"><img src="http://colorbynumber.org/numbercoloringpages/new/numbers1.png" /></a></li>
<li class="miniSlider__button"><a class="miniSlider__button__trigger unselected"><img src="http://colorbynumber.org/numbercoloringpages/new/numbers2.png" /></a></li>
<li class="miniSlider__button"><a class="miniSlider__button__trigger unselected"><img src="http://colorbynumber.org/numbercoloringpages/new/numbers3.png" /></a></li>
</ul>
</div>
</div>
Raw
dabblet.js
// alert('Hello world!');
$(document).ready(function(){
if ( $('.miniSlider').length ){
var showThisSlider = function(){
showThisSlideIndex = $(this).parent().index();
$('li.miniSlider__item').not(':eq'+'('+showThisSlideIndex+')').fadeOut(function(){
$('li.miniSlider__item').filter(':eq'+'('+showThisSlideIndex+')').fadeIn('slow');
});
// add and remove select and unselect class to the button 1,2 and 3 from the slider
$('.miniSlider__button').not(':eq'+'('+showThisSlideIndex+')').find("a").addClass('unselected').removeClass('selected');
$('.miniSlider__button').filter(':eq'+'('+showThisSlideIndex+')').find("a").addClass('selected').removeClass('unselected');
}
// attach the handler to the <a> elements
$('.miniSlider__button__trigger').click(showThisSlider);
}
});
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment