New Topic/Question
Reply
I'm not getting very far because I keep getting search results on how to change the bullet for the list item to a "circle" instead.
I was wondering if this were possible with HTML 4?
I am able to get the elements to display in a circle using Javascript but I was hoping to get away from depending on Javascript in case someone has it disabled.
Here is my current HTML and Javascript (please note that I'm not trying to create a clock using CSS...I kind of got carried away when I was playing with this a while ago...I want to create a menu that is half a circle)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
li{
position:absolute;
list-style:none;
text-align:center;
color:#CCCCCC;
}
</style>
</head>
<body>
<ul>
<li>12</li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>1 </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>2 </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>3 </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>4 </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>5 </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>6 </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>7 </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>8 </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>9 </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>10</li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
<li>11</li>
<li> . </li>
<li> . </li>
<li> . </li>
<li> . </li>
</ul>
<div id="time" style="position:absolute; top:280px;"></div>
<script type="text/javascript">
drawClock();
drawTime();
function drawTime(){
var listElements = document.getElementsByTagName("li");
for(var i=0; i<listElements.length; i++){
listElements[i].style.color="#CCCCCC";
listElements[i].style.fontWeight="normal";
listElements[i].style.border="none";
}
var d = new Date();
var second = d.getSeconds();
var hour = d.getHours();
var minute = d.getMinutes();
document.getElementById("time").innerHTML=hour+":"+minute+":"+second;
if(hour>12){hour -= 12;}
hour=hour*5;
listElements[hour].style.color="blue";
listElements[hour].style.fontWeight="bold";
listElements[hour].style.border="solid 1px blue";
listElements[minute].style.color="green";
listElements[minute].style.fontWeight="bold";
listElements[minute].style.border="solid 1px green";
listElements[second].style.color="orange";
listElements[second].style.border="solid 1px orange";
setTimeout(drawTime,1000);
}
function drawClock(){
var listElements = document.getElementsByTagName("li");
var step = (2*Math.PI)/listElements.length;
var angle=1.5*Math.PI;
var circleCenterX = 120;
var circleCenterY = 120;
var radius = 120;
for(var i = 0; i<listElements.length; i++)
{
var element = listElements[i];
var left=Math.round(circleCenterX+radius*Math.cos(angle));
var top=Math.round(circleCenterY+radius*Math.sin(angle));
element.style.left = left+"px";
element.style.top = top+"px";
angle+=step;
}
}
</script>
</body>
</html>
Thank you for your time!
-Frinny
This post has been edited by Frinavale: 29 June 2010 - 12:50 PM
MultiQuote
| 