Hallo
Ik vond een mooi analoog klokje gemaakt in css.
Ik wil dat nu inpassen en centreren in een webpagina gemaakt volgens w3.css.
Het lukt maar niet om het zo te krijgen dat dat klokje zich ook aanpast zowel op groot scherm als op tablet of smartphone.
Iemand een tip?
Hier een voorbeeldje:
Ik vond een mooi analoog klokje gemaakt in css.
Ik wil dat nu inpassen en centreren in een webpagina gemaakt volgens w3.css.
Het lukt maar niet om het zo te krijgen dat dat klokje zich ook aanpast zowel op groot scherm als op tablet of smartphone.
Iemand een tip?
Hier een voorbeeldje:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>klokje</title>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="css3clock.css" />
</head>
<body>
<div id="liveclock" class="outer_face">
<div class="marker oneseven"></div>
<div class="marker twoeight"></div>
<div class="marker fourten"></div>
<div class="marker fiveeleven"></div>
<div class="inner_face">
<div class="hand hour"></div>
<div class="hand minute"></div>
<div class="hand second"></div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
/***********************************************
* CSS3 Analog Clock- by JavaScript Kit (www.javascriptkit.com)
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
var $hands = $('#liveclock div.hand')
window.requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame
|| function(f){setTimeout(f, 60)}
function updateclock(){
var curdate = new Date()
var hour_as_degree = ( curdate.getHours() + curdate.getMinutes()/60 ) / 12 * 360
var minute_as_degree = curdate.getMinutes() / 60 * 360
var second_as_degree = ( curdate.getSeconds() + curdate.getMilliseconds()/1000 ) /60 * 360
$hands.filter('.hour').css({transform: 'rotate(' + hour_as_degree + 'deg)' })
$hands.filter('.minute').css({transform: 'rotate(' + minute_as_degree + 'deg)' })
$hands.filter('.second').css({transform: 'rotate(' + second_as_degree + 'deg)' })
requestAnimationFrame(updateclock)
}
requestAnimationFrame(updateclock)
</script>
<div class="w3-row w3-container" style="margin:5px 0">
<div class="w3-third w3-container">
<div class="w3-topbar w3-border-gray w3-padding-top">
<img src="http://anima.lemerg.com/data/uploads/18/473327.jpg" style="width:100%">
<h2>test1</h2>
</div>
</div>
<div class="w3-third w3-container">
<div class="w3-topbar w3-border-gray w3-padding-top">
<img src="http://anima.lemerg.com/data/uploads/18/473327.jpg" style="width:100%">
<h2>test2</h2>
</div>
</div>
<div class="w3-third w3-container">
<div class="w3-topbar w3-border-gray w3-padding-top">
<img src="http://anima.lemerg.com/data/uploads/18/473327.jpg" style="width:100%">
<h2>test2</h2>
</div>
</div>
</div>
</body>
</html>