mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 10:20:08 +00:00
added a fully working CSS experiment (success), now all that is left to do is to make the animation sane...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
8b96454530
commit
859973a2b0
205
ui/experiment-css-only-structure-2.html
Executable file
205
ui/experiment-css-only-structure-2.html
Executable file
@ -0,0 +1,205 @@
|
||||
<!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...
|
||||
|
||||
|
||||
-->
|
||||
|
||||
<script src="jquery.js"></script>
|
||||
<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>
|
||||
Loading…
x
Reference in New Issue
Block a user