2012-07-19 00:20:59 +04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
|
|
|
|
|
Goals:
|
|
|
|
|
- design a simple navigation system and structure
|
|
|
|
|
- make it animate correctly only via CSS
|
|
|
|
|
|
2012-07-19 17:42:47 +04:00
|
|
|
XXX zoom animation is odd...
|
2012-07-19 00:20:59 +04:00
|
|
|
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
<script src="jquery.js"></script>
|
2012-07-24 14:40:15 +04:00
|
|
|
<script src="ui.js"></script>
|
|
|
|
|
|
2012-07-19 00:20:59 +04:00
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
$(document).ready(function(){
|
|
|
|
|
$('.square').click(squareClick)
|
|
|
|
|
|
2012-07-24 14:30:43 +04:00
|
|
|
fieldSize(300, 200)
|
2012-07-19 16:16:56 +04:00
|
|
|
|
2012-07-19 00:20:59 +04:00
|
|
|
$('.current.square').click()
|
|
|
|
|
})
|
|
|
|
|
|
2012-07-19 17:56:02 +04:00
|
|
|
function toggleMarkers(){
|
|
|
|
|
var marker = $('.v-marker, .h-marker')
|
|
|
|
|
if(marker.css('display') == 'none'){
|
|
|
|
|
marker.fadeIn()
|
|
|
|
|
} else {
|
|
|
|
|
marker.fadeOut()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2012-07-19 00:20:59 +04:00
|
|
|
function squareClick(){
|
|
|
|
|
// set classes...
|
|
|
|
|
$('.current').removeClass('current')
|
|
|
|
|
$(this)
|
|
|
|
|
.addClass('current')
|
|
|
|
|
.parents('.ribbon')
|
|
|
|
|
.addClass('current')
|
|
|
|
|
|
2012-07-24 14:30:43 +04:00
|
|
|
// position the field and ribbons...
|
2012-07-19 00:20:59 +04:00
|
|
|
centerSquare()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
2012-07-19 16:16:56 +04:00
|
|
|
.animated {
|
|
|
|
|
-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;
|
|
|
|
|
}
|
|
|
|
|
|
2012-07-24 14:30:43 +04:00
|
|
|
.container {
|
2012-07-19 00:20:59 +04:00
|
|
|
position: relative;
|
|
|
|
|
border: solid gray 5px;
|
|
|
|
|
width: 300px;
|
|
|
|
|
height: 200px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
2012-07-19 16:16:56 +04:00
|
|
|
|
2012-07-19 00:20:59 +04:00
|
|
|
.h-marker {
|
|
|
|
|
position: absolute;
|
|
|
|
|
border-top: solid blue 1px;
|
|
|
|
|
height: 0px;
|
2012-07-19 16:16:56 +04:00
|
|
|
width: 100%;
|
|
|
|
|
top: 50%;
|
2012-07-19 00:20:59 +04:00
|
|
|
left: 0px;
|
|
|
|
|
}
|
2012-07-19 16:16:56 +04:00
|
|
|
|
2012-07-19 00:20:59 +04:00
|
|
|
.v-marker {
|
|
|
|
|
position: absolute;
|
|
|
|
|
border-left: solid blue 1px;
|
2012-07-19 16:16:56 +04:00
|
|
|
height: 100%;
|
2012-07-19 00:20:59 +04:00
|
|
|
width: 0px;
|
|
|
|
|
top: 0px;
|
2012-07-19 16:16:56 +04:00
|
|
|
left: 50%;
|
2012-07-19 00:20:59 +04:00
|
|
|
}
|
|
|
|
|
|
2012-07-24 14:30:43 +04:00
|
|
|
.field {
|
2012-07-19 02:34:04 +04:00
|
|
|
position: relative;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 0px;
|
2012-07-19 00:20:59 +04:00
|
|
|
/* set this to adjust the vertical position of the view... */
|
2012-07-24 14:55:10 +04:00
|
|
|
margin-top: 0px;
|
2012-07-19 00:20:59 +04:00
|
|
|
|
|
|
|
|
/* 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;
|
2012-07-19 00:44:00 +04:00
|
|
|
|
|
|
|
|
zoom: 1;
|
2012-07-19 00:20:59 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ribbon {
|
|
|
|
|
height: 50px;
|
|
|
|
|
/* HACK: need to figure out a way to avoid setting the width here... */
|
|
|
|
|
width: 1000px;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
|
|
|
|
|
/* 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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.square {
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
background: silver;
|
2012-07-19 14:29:31 +04:00
|
|
|
color: white;
|
2012-07-19 00:20:59 +04:00
|
|
|
float: left;
|
|
|
|
|
|
|
|
|
|
/* 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;
|
|
|
|
|
}
|
|
|
|
|
|
2012-07-19 14:29:31 +04:00
|
|
|
.image {
|
|
|
|
|
background: no-repeat 50% black;
|
|
|
|
|
background-size: contain;
|
|
|
|
|
background-image: url(images/350px/DSC_3501.jpg);
|
|
|
|
|
}
|
|
|
|
|
|
2012-07-19 00:20:59 +04:00
|
|
|
.current.square {
|
2012-07-19 14:29:31 +04:00
|
|
|
background-color: gray;
|
2012-07-19 00:20:59 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
2012-07-19 17:56:02 +04:00
|
|
|
Guides:
|
|
|
|
|
<button onclick="toggleMarkers()">Toggle Guides</button>
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
|
|
Zoom:
|
|
|
|
|
<button onclick="zoomContainerBy(2)">+</button>
|
2012-07-19 17:35:15 +04:00
|
|
|
<button onclick="zoomContainerBy(0.5)">-</button>
|
|
|
|
|
<button onclick="setContainerZoom(1)">Original</button>
|
|
|
|
|
<button onclick="fitImage()">Image</button>
|
|
|
|
|
<button onclick="fitThreeImages()">Three</button>
|
2012-07-19 00:44:00 +04:00
|
|
|
<br>
|
2012-07-19 17:56:02 +04:00
|
|
|
|
2012-07-19 16:16:56 +04:00
|
|
|
Size:
|
2012-07-24 14:30:43 +04:00
|
|
|
<button onclick="fieldSize($('.container').width()*1.5, $('.container').height()*1.5)">+</button>
|
|
|
|
|
<button onclick="fieldSize($('.container').width()*0.75, $('.container').height()*0.75)">-</button>
|
|
|
|
|
<button onclick="fieldSize(300, 200)">300x200</button>
|
|
|
|
|
<button onclick="fieldSize(600, 400)">600x400</button>
|
2012-07-19 00:44:00 +04:00
|
|
|
<br>
|
|
|
|
|
<br>
|
|
|
|
|
|
2012-07-24 14:30:43 +04:00
|
|
|
<div class="container animated">
|
|
|
|
|
<div class="field">
|
2012-07-19 00:20:59 +04:00
|
|
|
<div class="ribbon">
|
|
|
|
|
<div class="square">1</div>
|
|
|
|
|
<div class="square">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 class="ribbon" style="margin-left: 40px;">
|
|
|
|
|
<div class="square">1</div>
|
|
|
|
|
<div class="square">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 class="ribbon current">
|
|
|
|
|
<div class="square">1</div>
|
|
|
|
|
<div class="square">2</div>
|
|
|
|
|
<div class="square current">3</div>
|
|
|
|
|
<div class="square">4</div>
|
|
|
|
|
<div class="square">5</div>
|
|
|
|
|
<div class="square">6</div>
|
|
|
|
|
<div class="square">7</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ribbon" style="margin-left: -100px;">
|
|
|
|
|
<div class="square">1</div>
|
|
|
|
|
<div class="square">2</div>
|
|
|
|
|
<div class="square">3</div>
|
|
|
|
|
<div class="square">4</div>
|
2012-07-19 14:29:31 +04:00
|
|
|
<div class="square image">5</div>
|
2012-07-19 00:20:59 +04:00
|
|
|
<div class="square">6</div>
|
|
|
|
|
<div class="square">7</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ribbon">
|
|
|
|
|
<div class="square">1</div>
|
|
|
|
|
<div class="square">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 class="ribbon">
|
|
|
|
|
<div class="square">1</div>
|
|
|
|
|
<div class="square">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 class="ribbon">
|
|
|
|
|
<div class="square">1</div>
|
|
|
|
|
<div class="square">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 class="ribbon">
|
|
|
|
|
<div class="square">1</div>
|
|
|
|
|
<div class="square">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>
|
|
|
|
|
<div class="h-marker"></div>
|
|
|
|
|
<div class="v-marker"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
