2012-06-21 15:29:14 +04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
|
|
|
|
|
Goals:
|
|
|
|
|
- investigate the posiblity to place the .current element at a
|
|
|
|
|
predefined location.
|
|
|
|
|
- position all other elements relative to .current
|
|
|
|
|
- do the above two cleanly via CSS only - i.e. changing the .current
|
|
|
|
|
class to another element will reposition the whole group.
|
|
|
|
|
|
|
|
|
|
- make the animation natural, preferably CSS-only...
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-->
|
|
|
|
|
|
2012-09-22 02:31:19 +04:00
|
|
|
<script src="jquery.js"></script>
|
2012-06-21 15:29:14 +04:00
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
$(document).ready(function(){
|
|
|
|
|
// setup...
|
|
|
|
|
if($('.current').length > 0){
|
|
|
|
|
var cur = $('.current').first()
|
|
|
|
|
$('.current').removeClass('current')
|
|
|
|
|
cur.addClass('current').prev('.square').addClass('previous')
|
|
|
|
|
} else {
|
|
|
|
|
$('.square').first().addClass('current')
|
|
|
|
|
}
|
|
|
|
|
// HACK: removes text between nodes...
|
|
|
|
|
// XXX a different way to do this is set font-size to 0 in the .container,
|
|
|
|
|
// but will need to reset it back in everything else...
|
|
|
|
|
// XXX us there a better way...
|
|
|
|
|
$('.container')
|
|
|
|
|
.contents()
|
|
|
|
|
.filter(function() {
|
|
|
|
|
// Node.TEXT_NODE && only whitespace
|
|
|
|
|
return (this.nodeType == 3 && $.trim(this.value) == '')
|
|
|
|
|
}).remove();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// handlers...
|
|
|
|
|
$('.square').click(function(e){
|
|
|
|
|
$('.square').removeClass('current previous')
|
|
|
|
|
$(this).addClass('current')
|
|
|
|
|
.prev('.square').addClass('previous')
|
|
|
|
|
|
|
|
|
|
// XXX at this poit of afairs, to fix things will need
|
|
|
|
|
// to reverse the blue squares...
|
|
|
|
|
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
})
|
|
|
|
|
$('.toggle-animation').click(function(e){
|
|
|
|
|
if($('.animated').length > 0){
|
|
|
|
|
$('.animated').removeClass('animated')
|
|
|
|
|
} else {
|
|
|
|
|
$('.square').addClass('animated')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
})
|
|
|
|
|
$('.toggle-overflow').click(function(e){
|
|
|
|
|
if($('.meta-container').css('overflow') == 'visible'){
|
|
|
|
|
$('.meta-container').css({overflow: 'hidden'})
|
|
|
|
|
} else {
|
|
|
|
|
$('.meta-container').css({overflow: 'visible'})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
.button {
|
|
|
|
|
border: solid 2px silver;
|
|
|
|
|
display: inline;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
cursor: hand;
|
|
|
|
|
}
|
|
|
|
|
.meta-container {
|
|
|
|
|
border: solid 3px black;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
height: 66px;
|
|
|
|
|
width: 100px;
|
|
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 100px;
|
|
|
|
|
left: 450px;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* this has to be of with = N * square.width + C where N is number of
|
|
|
|
|
sqares and C is to compensate for margins and borders
|
|
|
|
|
|
|
|
|
|
margin-left = -(n*square.width + C) where n is the number of squares
|
|
|
|
|
left of .current */
|
|
|
|
|
.container {
|
|
|
|
|
border: solid 3px gray;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
height: 50px;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
|
|
|
|
|
width: 1000px;
|
|
|
|
|
|
|
|
|
|
/* one way to go is to move the ribbon with this... */
|
|
|
|
|
/* NOTE: this needs to account for all the margins and borders
|
|
|
|
|
in the stack, in this case:
|
|
|
|
|
-(2*50-3*5)
|
|
|
|
|
|
|
|
|
|
.meta-container.width/2 - .square.width/2 (+/- margins and borders)
|
|
|
|
|
*/
|
|
|
|
|
margin-left: -475px;
|
|
|
|
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* squares before the current */
|
|
|
|
|
.square {
|
|
|
|
|
/* XXX this makes it eccessary to remove whitespace between elements */
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
background: blue;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.animated {
|
|
|
|
|
/* animate */
|
|
|
|
|
-webkit-transition: all 0.5s ease;
|
|
|
|
|
-moz-transition: all 0.5s ease;
|
|
|
|
|
-o-transition: all 0.5s ease;
|
|
|
|
|
-ms-transition: all 0.5s ease;
|
|
|
|
|
transition: all 0.5s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.current {
|
|
|
|
|
background: silver;
|
|
|
|
|
|
|
|
|
|
margin-left: 50%;
|
|
|
|
|
|
|
|
|
|
clear: left;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* squares after the current */
|
|
|
|
|
.current ~ .square {
|
|
|
|
|
background: red;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* squares after the prefious - this incudes current */
|
|
|
|
|
.previous ~ .square {
|
|
|
|
|
/* puts thisngs back into the ribbon */
|
|
|
|
|
top: -50px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.container .square:first-child {
|
|
|
|
|
border-left: solid 5px gray;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* XXX find a honest, CSS-only, way to do this...
|
|
|
|
|
i.e. without needing to set a second class
|
|
|
|
|
...need to select only the element directly before .current (reverse
|
|
|
|
|
of the + combinator)
|
|
|
|
|
*/
|
|
|
|
|
.previous {
|
|
|
|
|
margin-right: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.container .square:last-child {
|
|
|
|
|
border-right: solid 5px gray;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="toggle-animation button">toggle animation</div>
|
|
|
|
|
<div class="toggle-overflow button">toggle overflow</div>
|
|
|
|
|
|
|
|
|
|
<div class="meta-container">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<!-- BUG: when current is first hell breaks lose... -->
|
|
|
|
|
<div class="square">1</div>
|
|
|
|
|
<div class="square">2</div>
|
|
|
|
|
<!--div class="square current">2</div-->
|
|
|
|
|
<div class="square">3</div>
|
|
|
|
|
<div class="square">4</div>
|
|
|
|
|
<div class="square">5</div>
|
|
|
|
|
<div class="square">6</div>
|
|
|
|
|
<div class="square">7</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- this is oddly aligned to the .squares -->
|
|
|
|
|
<!--div class="toggle-animation-button">toggle animation</div-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
