User:Supacalafrglstic/scrolltest

From 2010.igem.org

< User:Supacalafrglstic(Difference between revisions)
(Replacing page with 'Let the morning come.')
 
Line 1: Line 1:
Let the morning come.
Let the morning come.
 +
<html>
 +
<head>
 +
 +
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
 +
<script>
 +
google.load("jquery", "1.4.2");
 +
</script>
 +
 +
<script language="javascript" src="jquery.dimensions.js"></script>
 +
<script src="jquery.localscroll-1.4.2-min.js" type="text/javascript"></script>
 +
<script src="jquery.scrollTo-min.js" type="text/javascript"></script>
 +
 +
<script type="text/javascript">
 +
$(document).ready(function() {
 +
 +
//get all link with class panel
 +
$('a.panel').click(function () {
 +
 +
                //reset and highlight the clicked link
 +
$('a.panel').removeClass('selected');
 +
$(this).addClass('selected');
 +
 +
//grab the current item, to be used in resize function
 +
current = $(this);
 +
 +
                //scroll it to the destination
 +
$('#wrapper').scrollTo($(this).attr('href'), 800);
 +
 +
                //cancel the link default behavior
 +
return false;
 +
});
 +
 +
 +
//resize all the items according to the new browser size
 +
$(window).resize(function () {
 +
 +
//call the resizePanel function
 +
resizePanel();
 +
});
 +
 +
});
 +
 +
function resizePanel() {
 +
 +
//get the browser width and height
 +
width = $(window).width();
 +
height = $(window).height();
 +
 +
//get the mask height: height * total of items
 +
mask_height = height * $('.item').length;
 +
 +
//set the dimension
 +
$('#wrapper, .item').css({width: width, height: height});
 +
$('#mask').css({width: width, height: mask_height});
 +
 +
//if the item is displayed incorrectly, set it to the corrent pos
 +
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
 +
 +
}
 +
 +
</script>
 +
 +
</head>
 +
<body>
 +
<style>
 +
vbody {
 +
height:100%;
 +
width:100%;
 +
margin:0;padding:0;
 +
}
 +
 +
#wrapper {
 +
width:100%;
 +
height:100%;
 +
position:absolute;
 +
top:0;left:0;
 +
background-color:#ccc;
 +
overflow:hidden;
 +
}
 +
 +
#mask {
 +
width:500%;
 +
height:100%;
 +
 +
background-color:#eee;
 +
}
 +
 +
.item {
 +
width:20%;
 +
height:100%;
 +
float:left;
 +
background-color:#ddd;
 +
}
 +
 +
 +
.content {
 +
width:400px;
 +
height:300px;
 +
top:20%;
 +
margin:0 auto;
 +
background-color:#aaa;
 +
position:relative;
 +
}
 +
 +
.selected {
 +
background:#fff;
 +
font-weight:700;
 +
}
 +
 +
.clear {
 +
clear:both;
 +
}
 +
 +
#mask {
 +
width:100%;
 +
height:500%;
 +
background-color:#eee;
 +
}
 +
 +
.item {
 +
width:100%;
 +
height:20%;
 +
float:left;
 +
background-color:#ddd;
 +
}
 +
 +
</style>
 +
 +
<div id="wrapper">
 +
<div id="mask">
 +
 +
<div id="item1" class="item">
 +
<a name="item1"></a>
 +
<div class="content">item1
 +
<a href="#item1" class="panel">1</a> |
 +
<a href="#item2" class="panel">2</a> |
 +
<a href="#item3" class="panel">3</a> |
 +
<a href="#item4" class="panel">4</a> |
 +
<a href="#item5" class="panel">5</a>
 +
</div>
 +
</div>
 +
 +
<div id="item2" class="item">
 +
<a name="item2"></a>
 +
<div class="content">item2 <a href="#item1" class="panel">back</a></div>
 +
</div>
 +
 +
<div id="item3" class="item">
 +
<a name="item3"></a>
 +
<div class="content">item3 <a href="#item1" class="panel">back</a></div>
 +
</div>
 +
 +
<div id="item4" class="item">
 +
<a name="item4"></a>
 +
<div class="content">item4 <a href="#item1" class="panel">back</a></div>
 +
</div>
 +
 +
<div id="item5" class="item">
 +
<a name="item5"></a>
 +
<div class="content">item5 <a href="#item1" class="panel">back</a></div>
 +
</div>
 +
 +
</div>
 +
</div>
 +
 +
</body>
 +
</html>

Latest revision as of 04:26, 24 July 2010

Let the morning come.

item1 1 | 2 | 3 | 4 | 5
item2 back
item3 back
item4 back
item5 back

Retrieved from "http://2010.igem.org/User:Supacalafrglstic/scrolltest"