No replies
featherwebdiva's picture
Last seen: 9 years 28 weeks ago
Timezone: GMT-7
Joined: 2011-03-12
Posts: 1
Points: 2

I'm trying to do a gradient button generator, which is working fantastic in all browsers but IE. Please advise on how to set the CSS gradient for IE, using Javascript. If I belong in a JavaScript forum, please let me know... I wasn't sure.


CSS style:

.button {
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);

.buttoncolor {
    color: #e9e9e9;
    border: solid 1px #555;
    background: #6e6e6e;
    background: -webkit-gradient(linear, left top, left bottom, from(<?php echo $button_grad1; ?>), to(<?php echo $button_grad2; ?>));
    background: -moz-linear-gradient(top,  <?php echo $button_grad1; ?>,  <?php echo $button_grad2; ?>);
    -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='<?php echo $button_grad1; ?>', endColorstr='<?php echo $button_grad2; ?>');
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='<?php echo $button_grad1; ?>', endColorstr='<?php echo $button_grad2; ?>');

heres the javascript:

function swapGradButton(c,b) {
	<!-- x = this c = color b = border g1 = grad1 g2 = grad2 -->
	g1 = document.getElementById('ButtonGrad1Color');
	g2 = document.getElementById('ButtonGrad2Color');
		document.getElementById('GradButton').style.color = "#C0C0C0";
		document.getElementById('GradButton').style.border = "#000000";
		document.getElementById('GradButton').style.background = "#C0C0C0";
		if (document.getElementById('GradButton').filters && document.getElementById('GradButton').filters.length>0) {
			document.getElementByid('GradButton').filter = "-ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='"+g1.value+"', endColorstr='"+g2.value+"')";
			document.getElementById('GradButton').filter = "filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='"+g1.value+"', endColorstr='"+g2.value+"')";
		} else {
		document.getElementById('GradButton').style.background = "-webkit-gradient(linear, left top, left bottom, from("+g1.value+"), to("+g2.value+"))";
		document.getElementById('GradButton').style.background = "-moz-linear-gradient(top,  "+g1.value+",  "+g2.value+")";

and this is the HTML:
<div id="GradButton" class="button buttoncolor" style="display:inline;">Example Button</div>