2012-06-19 17:17:49 +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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-->
|
|
|
|
|
|
2012-08-14 22:05:05 +04:00
|
|
|
<script src="../jquery.js"></script>
|
2012-06-19 17:17:49 +04:00
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
$(document).ready(function(){
|
|
|
|
|
$('.square').click(function(e){
|
|
|
|
|
$('.square').removeClass('current')
|
|
|
|
|
$(this).addClass('current')
|
|
|
|
|
|
|
|
|
|
// XXX at this poit of afairs, to fix things will need
|
|
|
|
|
// to reverse the blue squares...
|
|
|
|
|
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
})
|
|
|
|
|
$('.toggle-animation-button').click(function(e){
|
|
|
|
|
if($('.animated').length > 0){
|
|
|
|
|
$('.animated').removeClass('animated')
|
|
|
|
|
} else {
|
|
|
|
|
$('.square').addClass('animated')
|
|
|
|
|
}
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
.toggle-animation-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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* XXX figure out a way to place these relative to the last one, PASIVELY!!
|
|
|
|
|
- one obvious way is to float them right and margin-right but
|
|
|
|
|
this will reverse the order of the elements...
|
|
|
|
|
...cen they be re-ordered back?
|
|
|
|
|
- bruteforce: calc left of the first-child (not CSS)...
|
|
|
|
|
*/
|
|
|
|
|
/* squares before the current */
|
|
|
|
|
.square {
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
background: blue;
|
|
|
|
|
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
|
|
|
|
|
top: -50px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* squares after the current */
|
|
|
|
|
.current~.square {
|
|
|
|
|
background: red;
|
|
|
|
|
float: left;
|
|
|
|
|
|
|
|
|
|
/* puts thisngs back into the ribbon */
|
|
|
|
|
top: -50px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.container .square:first-child {
|
|
|
|
|
border-left: solid 5px gray;
|
|
|
|
|
|
|
|
|
|
margin-right: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.container .square:last-child {
|
|
|
|
|
border-right: solid 5px gray;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="toggle-animation-button">toggle animation</div>
|
|
|
|
|
|
|
|
|
|
<div class="meta-container">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<!-- BUG: when current is first hell breaks lose... -->
|
|
|
|
|
<div class="square">1</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>
|
