1 reply [Last post]
csuhockey3
csuhockey3's picture
Offline
newbie
Last seen: 9 years 42 weeks ago
Timezone: GMT-5
Joined: 2011-11-21
Posts: 4
Points: 6

Hi Folks,

This is my first post here and there appears to be a wealth of information and great resources. I'm hoping someone can help answer this question. I grabbed a CSS3/HTML5 calculator and styled it up for the purposes I needed. It's a basic calculator I pulled from here (http://calc.hiddentao.com/).

The problem: I have 2 different styles of buttons, off-white for the numbers and "apple-stlye" glassy blue for the functions (add/divide/subtract...). I want those BLUE buttons to have a dark gray gradient on them when clicked (:active state), however it is only working on the SVG I added to the bottom-right corner (I have a specific reason for using SVG, out of scope here). Here is the HTML and CSS...I have ommited the JS but can add that too (or it can be pulled from the link above). I have it over-commented to try and help everyone read it that is willing to help. Also note I changed the HTML from the link above from using a table to using li's instead. This will grow into a scientific calculator down the line.

HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name='HandheldFriendly' content='true' />
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;' />
<title>Calculator</title>
 
    <link href="calculator.css" rel="stylesheet" type="text/css" />   
     <!-- Start JavaScript -->
 
<body onload="Calc.init()" onresize="Calc.redraw()">
 
<div id="container">
<!-- Start Close Button -->
		<div id="close_button"><a href="#" title="Close calculator"><img src="img/close-button.svg" width="20" height="20" alt="close the calculator" /></a></div>
		<!-- /End Close Button -->		
		<ul id="output">
			<li><input id="resultInput" type="text" value="" /><span id="entry">entry</span></li>
			<li><input id="resultAnswer" type="text" value="" /><span id="answer">answer</span></li> 
		</ul>
 
		<ul id="numbers">
 
			<li><button data-keypress="55" data-char="7" onmousedown="Calc.append(this); return false;">7</button></li>
			<li><button data-keypress="56" data-char="8" onmousedown="Calc.append(this); return false;">8</button></li>
			<li><button data-keypress="57" data-char="9" onmousedown="Calc.append(this); return false;">9</button></li>
			<li><button data-keypress="52" data-char="4" onmousedown="Calc.append(this); return false;">4</button></li>
			<li><button data-keypress="53" data-char="5" onmousedown="Calc.append(this); return false;">5</button></li>
			<li><button data-keypress="54" data-char="6" onmousedown="Calc.append(this); return false;">6</button></li>
 
			<li><button data-keypress="49" data-char="1" onmousedown="Calc.append(this); return false;">1</button></li>
			<li><button data-keypress="50" data-char="2" onmousedown="Calc.append(this); return false;">2</button></li>
			<li><button data-keypress="51" data-char="3" onmousedown="Calc.append(this); return false;">3</button></li>
			<li><button data-keypress="48" data-char="0" onmousedown="Calc.append(this); return false;">0</button></li>
			<li><button data-keypress="46" data-char="." onmousedown="Calc.append(this); return false;">.</button></li>
			<li><button data-keypress="" data-char="&#177;" onmousedown="Calc.append(this); return false;">&#177;</button></li> 
			<!-- this is a new function that needs a unique key press number and JS function associated with it for +/- -->
 
		</ul>
 
		<ul id="functions">
			<!-- Divide -->
			<li><button data-keypress="47" data-char="&#247;" onmousedown="Calc.append(this); return false;" id="glassy_blue" class="glassy_button">&#247;<span></span></button></li>
			<!-- Clear Memory -->
			<li><button data-keydown="46" onmousedown="Calc.clear(); return false;">Clr</button></li>
			<!-- Multiply -->
			<li><button data-keypress="42" data-char="&#215;" onmousedown="Calc.append(this); return false;" id="glassy_blue" class="glassy_button">&#215;<span></span></button></li>
 
			<!-- Delete / Backspace -->
			<li><button data-keydown="8" onmousedown="Calc.backspace(); return false;">Del</button></li>
			<!-- Subtract -->
			<li><button data-keypress="45" data-char="&#45;" onmousedown="Calc.append(this); return false;" id="glassy_blue" class="glassy_button">&#151;<span></span></button></li>
			<!-- Square Root -->
			<li><button data-keypress="" data-char="&#8730;" onmousedown="Calc.append(this); return false;">&#8730;</button></li> <!-- this is a new function that needs a unique key press number and JS function associated with it for square root -->
			<!-- Add -->
			<li><button data-keypress="43" data-char="&#43;" onmousedown="Calc.append(this); return false;" id="glassy_blue" class="glassy_button">&#43;<span></span></button></li>
 
			<!-- Equals -->
			<li><button data-keydown="13" onmousedown="Calc.equals(); return false;" id="glassy_blue" class="glassy_button">=<span></span></button></li>
			<!-- Blank Button for Spacer -->	
			<li id="blank"><button></button></li>
			<!-- Maximize Calculator Button -->
			<li id="maximize_calc"><button></button></li> 
			<!-- we need to make a maximaze button that works here. I'm still waiting for the SVG but I will style it once it comes in. -->
		</ul>
 
</div>

Here is the CSS:

html, body {
	font-family: Helvetica, sans-serif;
	padding: 0;
	margin: 0;
}
 
#container {
	position: absolute; /* made container absolute positioned so I could absolute position the text for entry and answer.*/
	top: 0;
	background-color: #000;
	max-width: 225px;
	max-height: 280px;
	-webkit-box-shadow: inset 0px 0px 10px 3px #777;
	-moz-box-shadow: inset 0px 0px 10px 3px #777;
	box-shadow: inset 0px 0px 10px 3px #777;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	padding: 5px 5px 5px 5px;
	border: 15px solid #333;
	-moz-border-bottom-colors: #555 #666 #777 #888 #999 #333 #222 #444 #222;
	-moz-border-top-colors: #555 #666 #777 #888 #999 #333 #222 #444 #222;
	-moz-border-left-colors: #555 #666 #777 #888 #999 #333 #222 #444 #222;
	-moz-border-right-colors: #555 #666 #777 #888 #999 #333 #222 #444 #222;
/* -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#555), to(#666), color-stop(0.5, #777), color-stop(0.5, #888)) 21 30 30 21 repeat repeat;
 
	 -moz-linear-gradient: (top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); */
}
 
 
#resultInput, #resultAnswer {
	display: block;
	height: 40px;
	margin: 0;
	padding: 0;
	font-size: 18px;
	width: 150px;
	margin: 0 0 0 70px;
	border: none;
	text-align: left;
	color: #fff;
	line-height: 50px;
	text-indent: 5px;
}
 
#resultInput {
	background: transparent;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 20px 20px 0px 0px;
	border-radius: 20px 20px 0px 0px;
}
 
#resultAnswer {
 
	background: transparent;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-bottomleft: 20px;
	-webkit-border-radius: 0px 0px 20px 20px;
	border-radius: 0px 0px 20px 20px;
}
 
span#entry, span#answer {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	width: 60px;
	margin: 0;
	padding: 0;
	display: block;
	font-size: 16px;
	color:  #fff;
	text-align: right;
 
}
 
span#entry {
	position: absolute;
	top: 20px;
}
 
span#answer {
	position: absolute;
	top: 55px;
}
 
 
 
#numbers li button {
	width: 35px;
	height: 40px;
	margin: 0 5px 5px 0;
	background: #e5e5e5;
	/* Old browsers */
	background: -moz-linear-gradient(top,  #e5e5e5 0%, #ffffff 48%, #cecece 100%);
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(48%,#ffffff), color-stop(100%,#cecece));
	/* Chrome,Safari4+ */
}
 
 
#functions li button {
	font-size: 16px;
	width: 35px;
	height: 30px;
	margin: 0 5px 6px 0;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
 
#maximize_calc li button {
	width: 30px;
	height: 25px;
}
 
/* This is to push the maximize button to the right while keeping alignment with the buttons above it and disabling all actions on the blank button itself */
 
#blank button, #blank button:active, #blank button:hover {
	border: none;
	background: none;
	-moz-user-select: none;
	user-select: none;
	cursor: auto;
}
 
button {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	display: block;
	font-size: 18px;
	font-weight: bold;
	padding: 0;
	text-align: center;
	vertical-align: middle;
	color: #000;
	border: 1px solid #808080;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
 
button:hover {
	color: #000;
	cursor: pointer;
	border: 3px solid #fff;
}
 
button:active, #numbers li button:active, #functions li button:active{
	color: #fff !important;
	background: -moz-linear-gradient(center top, #4C4C4C 0%, #000000 100%) repeat scroll 0 0 transparent;
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(100%,#000));
	/* Chrome,Safari4+ */
}
 
#container ul {
	list-style-type: none;
	list-style-position: inside;
	margin: 0;
	padding: 0;
}
 
#container li {
	float: left;
	padding: 0;
	margin: 0;
 
}
 
ul#numbers, ul#functions, ul#output {
	float: left;
}
 
ul#output {
	margin: 0 0 10px 0;
	-webkit-box-shadow: inset 12px 13px 12px -12px black;
	-moz-box-shadow: inset 12px 13px 12px -12px black;
	box-shadow: inset 12px 13px 12px -12px black;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-bottomleft: 20px;
	-webkit-border-radius: 20px 20px 20px 20px;
	border-radius: 20px 20px 20px 20px;
	background-image: -moz-radial-gradient(10px 20px 45deg,
farthest-side, #538bef 0%, #216be9 70%, #1c5acc 100%);
	background-image: -webkit-radial-gradient(10px 20px,
farthest-side, #729fef 0%, #216be9 70%, #1c5acc 100%);
}
 
ul#numbers {
	width: 120px;
	margin: 0 0 0 10px;
}
 
ul#functions {
	width: 85px;
	margin: 0 0 0 10px;
}
 
div#close_button {
	position: absolute;
	top: -28px;
	right: -15px;
}
 
#maximize_calc button {
	background-image: url(img/blue_calc_arrows.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
    -moz-background-size: 20px 20px;
}
 
#maximize_calc button:hover, #maximize_calc button:active {
	background-image: url(img/white_calc_arrows.svg);
}
 
/* ====================================================== */
/*                     glassy button                      */
/* ====================================================== */
 
.glassy_button {
 	position:relative;
	background: -moz-linear-gradient(top, #162696 0%, #2640ff 48%, #216bf3 100%);
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#162696), color-stop(48%,#2640ff), color-stop(100%,#216bf3));
	/* Chrome,Safari4+ */
} 
 
.glassy_button span {
	position:absolute;
	display:block;
	width:100%;
	top:0px;
	height:60%;
	-webkit-border-radius:10em;
	-moz-border-radius:10em;
	border-radius:10em;
	background-color:rgba(255,255,255,0.25);
}
 
#glassy_blue:active{ /* IS THIS WHERE THE PROBLEM IS? */
	background-color: #000;
}
 
#glassy_blue {
	font-size: 20px !important;
	font-weight: bold;
	color: #fff;
	border:1px solid #3c3c3c;
	background-color:rgba(64,128,192,0.75);
	background-image:-moz-linear-gradient(top,bottom,from(rgba(16,96,192,0.75)), to(rgba(96,192,255,0.9)));
} 
 
#glassy_blue:hover {
	border: 3px solid #fff;
	background-color: #000;
	/*background-color:rgba(0,97,216,0.75); */
}

Note again, the specifications are for just FireFox5, so -webkit etc are not necessary. I will add the other prefixes once they ask for support across multiple platforms.

Any CSS consolidation/optimization I'm missing are welcomed comments as well. Thanks for your help all!

-CSUhockey3

csuhockey3
csuhockey3's picture
Offline
newbie
Last seen: 9 years 42 weeks ago
Timezone: GMT-5
Joined: 2011-11-21
Posts: 4
Points: 6

Any help?

Hi All,
Is anyone willing to take a look at this? Being my first post, I wonder if I broke some sort of protocol that I didn't see in the T&C...did I post too much code? If anyone has any ideas I would appreciate it. Thanks folks, still stuck on this one Puzzled

___________________
CSUhockey3