Solved

menu with curves

Posted on 2008-10-29
5
314 Views
Last Modified: 2012-05-05
i have a menu using up and down arrow keys go up and down.
the menu items look rectangular.
how do i make them have slight curves in the edges along with the red border using some radius.
i want the first item to be highlighted when the page loads. pl help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title></title> 
<style type="text/css">
#menu{width:250px;}
.hi{height:35px;line-height:41px;;color:white;background-color:blue;border:2px solid red;}
.no{height:35px;line-height:41px;color:white;background-color:#0099CC;border:2px solid red;}
</style>
 
<script type="text/javascript">
window.onload=init;
function init(){
	menuTable = document.getElementById("menu");
	for( var i=0, limit=menuTable.rows.length; i < limit; ++i)
	menuTable.rows[i].cells[0].className="no";
}
 
function highlight(e){
	var key = (e.keyCode)? e.keyCode : e.which;
	var prev=0;
	for( var i=0, limit=menuTable.rows.length; i < limit; ++i)
	{
		if( menuTable.rows[i].cells[0].className=="hi")
		{
			prev=i;
			menuTable.rows[i].cells[0].className="no";
			break;
		}
	}
	if( key==38)
		prev=(--prev)%menuTable.rows.length;
	else if( key==40)
		prev=(++prev)%menuTable.rows.length;
	prev = (prev < 0 ? menuTable.rows.length-1 : prev)
	menuTable.rows[ prev ].cells[0].className="hi";	
}
</script>
</head>
<body onkeydown="highlight(event)">
	<table id="menu">
		<tbody>
			<tr><td><div>time</div></td></tr>
			<tr><td><div>jump</div></td></tr>
			<tr><td><div>go to room</div></td></tr>
			<tr><td><div>sleep well</div></td></tr>
		</tbody>
	</table>
</body>
</html>

Open in new window

0
Comment
Question by:vidhubala
  • 3
  • 2
5 Comments
 
LVL 16

Expert Comment

by:sh0e
ID: 22838525

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title></title> 
<style type="text/css">
#menu{width:250px;}
tr{height:100px}
.hi{height:35px;line-height:41px;;color:white;background-color:blue;border:2px solid red;}
.no{height:35px;line-height:41px;color:white;background-color:#0099CC;border:2px solid red;}
</style>
<script type="text/JavaScript" src="http://www.curvycorners.net/examples/curvycorners.js"></script>  
<script type="text/javascript">
window.onload=init;
function init(){
        menuTable = document.getElementById("menu");
        for( var i=0, limit=menuTable.rows.length; i < limit; ++i)
        menuTable.rows[i].cells[0].firstChild.className="no";
        
    settings = {
      tl: { radius: 8 },
      tr: { radius: 8 },
      bl: { radius: 8 },
      br: { radius: 8 },
      antiAlias: true,
      autoPad: true
    }
 
    var divObj = document.getElementsByTagName("div");
//for(var i=0;i<divObj.length;i++)
    (new curvyCorners(settings, "no")).applyCornersToAll();
}
 
function highlight(e){
        var key = (e.keyCode)? e.keyCode : e.which;
        var prev=0;
        for( var i=0, limit=menuTable.rows.length; i < limit; ++i)
        {
                if( menuTable.rows[i].cells[0].firstChild.className=="hi")
                {
                        prev=i;
                        menuTable.rows[i].cells[0].firstChild.className="no";
                        break;
                }
        }
        if( key==38)
                prev=(--prev)%menuTable.rows.length;
        else if( key==40)
                prev=(++prev)%menuTable.rows.length;
        prev = (prev < 0 ? menuTable.rows.length-1 : prev)
        menuTable.rows[ prev ].cells[0].firstChild.className="hi"; 
}
</script>
</head>
<body onkeydown="highlight(event)">
        <table id="menu">
                <tbody>
                        <tr><td><div>time</div></td></tr>
                        <tr><td><div>jump</div></td></tr>
                        <tr><td><div>go to room</div></td></tr>
                        <tr><td><div>sleep well</div></td></tr>
                </tbody>
        </table>
</body>
</html>

Open in new window

0
 

Author Comment

by:vidhubala
ID: 22838528
looks great in firefox. is it possible in IE6?
0
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
ID: 22838564

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title></title> 
<style type="text/css">
#menu{width:250px;}
tr{height:100px}
.hi{height:35px;line-height:41px;;color:white;background-color:blue;border:2px solid red;}
.no{height:35px;line-height:41px;color:white;background-color:#0099CC;border:2px solid red;}
</style>
<script type="text/JavaScript" src="http://www.curvycorners.net/examples/curvycorners.js"></script>  
<script type="text/javascript">
window.onload=init;
function init(){
        menuTable = document.getElementById("menu");
        for( var i=0, limit=menuTable.rows.length; i < limit; ++i)
        menuTable.rows[i].cells[0].firstChild.className="no";
        
    settings = {
      tl: { radius: 8 },
      tr: { radius: 8 },
      bl: { radius: 8 },
      br: { radius: 8 },
      antiAlias: false,
      autoPad: false
    }
 
    var divObj = document.getElementsByTagName("div");
//for(var i=0;i<divObj.length;i++)
    (new curvyCorners(settings, "no")).applyCornersToAll();
}
 
function highlight(e){
        var key = (e.keyCode)? e.keyCode : e.which;
        var prev=0;
        for( var i=0, limit=menuTable.rows.length; i < limit; ++i)
        {
                if( menuTable.rows[i].cells[0].firstChild.className=="hi")
                {
                        prev=i;
                        menuTable.rows[i].cells[0].firstChild.className="no";
                        break;
                }
        }
        if( key==38)
                prev=(--prev)%menuTable.rows.length;
        else if( key==40)
                prev=(++prev)%menuTable.rows.length;
        prev = (prev < 0 ? menuTable.rows.length-1 : prev)
        menuTable.rows[ prev ].cells[0].firstChild.className="hi"; 
}
</script>
</head>
<body onkeydown="highlight(event)">
        <table id="menu">
                <tbody>
                        <tr><td><div>time</div></td></tr>
                        <tr><td><div>jump</div></td></tr>
                        <tr><td><div>go to room</div></td></tr>
                        <tr><td><div>sleep well</div></td></tr>
                </tbody>
        </table>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:vidhubala
ID: 31511532
classic. thanks
0
 

Author Comment

by:vidhubala
ID: 22864882
how do i make the first item selected on load?  appreciate ur help. thanks
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question