Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
166 lines (155 sloc) 5.52 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style>
html {-pie-load-path: "../../build"}
div.box {
position:relative;
float:left;
width:220px;
height:240px;
margin:5px;
padding:0;
}
div.drmbox {
background-color:white;
border:1px solid silver;
-moz-border-radius: 4px; /* Firefox */
-webkit-border-radius: 4px; /* Safari and Chrome */
border-radius: 4px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
-moz-box-shadow: 4px 4px 4px #CCCCCC; /* Firefox */
-webkit-box-shadow: 4px 4px 4px #CCCCCC; /* Safari and Chrome */
box-shadow: 4px 4px 4px #CCCCCC; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(../../build/PIE.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}
.con {
display:none;
clear:left;
}
#con_1 .box {
background-color:green;
}
#con_2 .box {
background-color:yellow;
}
#con_3 .box {
background-color:blue;
}
#con_4 .box {
background-color:silver;
}
ul li {
float:left;
list-style:none;
padding: 3px 6px;
border: 1px solid silver;
cursor:pointer;
}
ul li.active {
background-color:#DDDDDD;
float:left;
list-style:none;
padding: 3px 6px;
border: 1px solid silver;
cursor:pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready (function () {
function refresh(cont) {
//workaround: if($.browser.msie) $( cont + ' .box').each( function() { this.fireEvent('onmove') } );
}
$('.caller').each (function () {
$(this).bind ('click, mouseover', function () {
$('.caller').removeClass('active');
$(this).addClass('active');
});
});
$('#caller_con_1').bind ('click', function () {
$('.con').css ('display', 'none');
$('#con_1').css ('display', 'block');
refresh('#con_1');
});
$('#caller_con_2').bind ('click', function () {
$('.con').css ('display', 'none');
$('#con_2').css ('display', 'block');
refresh('#con_2');
});
$('#caller_con_3').bind ('click', function () {
$('.con').css ('display', 'none');
$('#con_3').css ('display', 'block');
refresh('#con_3');
});
$('#caller_con_4').bind ('click', function () {
$('.con').css ('display', 'none');
$('#con_4').css ('display', 'block');
refresh('#con_4');
});
});
</script>
</head>
<body>
<ul>
<li id="caller_con_1" class="caller">Show container 1</li>
<li id="caller_con_2" class="caller">Show container 2</li>
<li id="caller_con_3" class="caller">Show container 3</li>
<li id="caller_con_4" class="caller">Show container 4</li>
<div style="clear:left;"></div>
</ul>
<div id="con_1" class="con">
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
</div>
<div id="con_2" class="con">
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
</div>
<div id="con_3" class="con">
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
</div>
<div id="con_4" class="con">
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
<div class="box drmbox">hello world</div>
</div>
</body>
</html>
Something went wrong with that request. Please try again.