analoog css klokje centreren in w3.css

Status
Niet open voor verdere reacties.

backnext

Gebruiker
Lid geworden
29 apr 2016
Berichten
176
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:

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>
 
kan je het ook op JSfiddle zetten, zodat we ook even mee kunnen kijken?

En kijk eens naar mediaqueries om aan de hand van de browsermaten een andere CSS in te laden.
 
Op je 1e vraag kan ik een antwoord vinden. Maar op de tweede vraag ben ik gebuisd. Ik weet niet goed wat je bedoelt. Ik hoop dat het met w3.css opdrachten kan geregeld worden.
 
Heb je al gegoogled of gezocht op mediaqueries? Daar is genoeg over te vinden
 
Hier al vast een link naar een jsfiddle:

https://jsfiddle.net/backnext/hhe1rpar/10/

Ik heb de 2 css files in het css vak onder elkaar geplakt.
Het klokje werkt hier echter niet op.
Er is nog een externe file (jquery.min.js) maar als externe file ingeven lukt niet omdat enkel https aanvaard wordt...

EDIT: link aangepast na update
 
Laatst bewerkt:
Hier al vast een link naar een jsfiddle:
Er is nog een externe file (jquery.min.js) maar als externe file ingeven lukt niet omdat enkel https aanvaard wordt...
Dan maak je er toch https van? ;)
 
Ja, voor 1 link lukte dat niet maar kijk: Nu werkt het klokje wel. link aangepast.
 
Hoi,

Zie bestand. Lees eerst w3schools css Reference als je iets niet direct begrijpt.
Vooral het onderwerp @media.
Gebruik in de css in de breedte altijd % tenzij het niet anders kan.

Maak je browser smaller dan zie je wat er gebeurt.

Suc6. Have fun.
 

Bijlagen

  • clock.zip
    2,4 KB · Weergaven: 15
Laatst bewerkt:
Bedankt bron,
Ik bekijk het eens.
Maar waarom heb je de index als php en niet gewoon html?
 
Sorry, gewoonte. Dit komt omdat ik alles op mijn pc maak (xampp webserver).
Verander de extensie in .html en het werkt nog steeds.

Als je de bestanden op een hosting provider heb draaien dan kun je het .php laten.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.

Nieuwste berichten

Terug
Bovenaan Onderaan