flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 02:10:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

did and experiment with CSS-only structure and animations -- partial fail, but close and fun to watch with animations on.

Browse Source 
will still try again.

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-06-19 17:17:49 +04:00
parent f6b62ad114
commit 8b96454530
1 changed files with 164 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
ui/experiment-css-only-structure.html Executable file
View File

@ -0,0 +1,164 @@
<!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.
-->
<script src="jquery.js"></script>
<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>