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

added a fully working CSS experiment (success), now all that is left to do is to make the animation sane...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-06-21 15:29:14 +04:00
parent 8b96454530
commit 859973a2b0
1 changed files with 205 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

205
ui/experiment-css-only-structure-2.html Executable file
View 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>