gsoft
06-06-2005, 09:21 PM
Im making my own color picker which unfortunately isnt working to well in IE. It works fine in Firefox and Opera. However with IE none of the Colors get displayed they show up empty, im not sure on why Ive tried making sure there padding, a margin width set etc none of which even worked.
A small grey dot gets displayed where a box should be appearing, this grey dot is just the popup border. The #colorpicker_popup if set a width and height will show the box, however there are no colors in this box when viewed in Firefox or Opera (all thats tested that I know that works) they display the colors.
This is the code I am currently using
<html>
<head>
<style type="text/css">
#cmd_color {
background: blue;
color: #fff;
padding: 2px;
}
#colorpicker_popup {
border: 1px solid #999;
position: absolute;
background: #fff;
display: none;
}
.colorbox {
border: 1px solid #000;
height: 10px;
width: 10px;
margin: 0px auto;
}
.colorbox_cell {
height: 22px;
width: 20px;
border: 1px solid #fff;
}
.colorbox_hover {
background: #ccd3e1;
border: 1px solid #4464ac;
width: 20px;
height: 22px;
}
</style>
<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();
var is_op = (userAgent.indexOf('opera') != -1); //is opera
var is_saf = (userAgent.indexOf('safari') != -1); //is safari
var is_ie = (userAgent.indexOf('msie') != -1 && (!is_op) && (!is_saf)); //is internet explorer
var is_nn = (userAgent.indexOf('netscape') != -1); //is netscape
var is_moz = ((navigator.product == 'Gecko') && (!is_saf)); //is mozilla
var colors = new Array(new Array("#FF0000", "red"), new Array("#000000", "black"),new Array("#ffff00", "yellow"),new Array("#0000ff", "blue"));
var color_enabled = false;
/* Create the main div cell, position and initiate */
function color_init()
{
var body = document.body;
var color = document.createElement("div");
color.setAttribute("id", "colorpicker_popup");
body.appendChild(color);
var elem = getObject("cmd_color");
var e = getObject("colorpicker_popup");
/* Build Color */
var head = color_createTable(e);
color_createPalette(head);
/* Positioning */
if (!is_ie)
{
var top = elem.offsetTop + elem.offsetHeight + "px";
var left = elem.offsetLeft + "px";
e.style.top = top; e.style.left = left;
}
else
{
var top = elem.offsetTop + elem.offsetHeight + "px";
var left = elem.offsetLeft + "px";
e.style.top = top; e.style.left = left;
}
color_enabled = true;
}
/* Create the Table */
function color_createTable(id)
{
var table = document.createElement("table");
table.setAttribute("cellspacing", 4);
id.appendChild(table);
return table;
}
/* Create the Rows (TR) pass on to other function to create Cells */
function color_createPalette(head)
{
var row;
for (var i = 0; i < colors.length; i = i + 1)
{
if ((i % 6) === 0)
{
row = document.createElement("tr");
head.appendChild(row);
}
color_createCell(row, colors[i]);
}
}
/* Create the Table Cell (Td) with ID, Class and inside it the DIV Tag with the background color */
function color_createCell(row, colorArray)
{
var td = document.createElement("td");
td.setAttribute("id", "cell_palette_" + colorArray[1]);
td.setAttribute("class", "colorbox_cell");
var div = document.createElement("div");
div.setAttribute("id", "palette_"+colorArray[1]);
div.setAttribute("class", "colorbox");
div.setAttribute("style", "background: "+ colorArray[0]);
var divtxt = document.createTextNode(1);
td.appendChild(div);
row.appendChild(td);
var e = getObject("palette_"+colorArray[1]);
if (!is_ie && !is_op)
{
e.addEventListener("mouseover", color_cellHover, true);
e.addEventListener("mouseout", color_cellHover, true);
}
else
{
e.onmouseover = color_cellHover;
e.onmouseout = color_cellHover;
}
}
/* Make the TD Cell hover with a background color */
function color_cellHover(e)
{
e = (window.event ? window.event : e);
var id = (!is_ie ? e.target.id : e.srcElement.id);
var elem = getObject("cell_" + id);
if (elem.className != "colorbox_hover")
{
elem.className = "colorbox_hover";
}
else
{
elem.className = "colorbox_cell";
}
}
/* End Color */
function getObject(id)
{
if (document.getElementById(id) !== null)
{
return document.getElementById(id);
}
}
function showColor()
{
if (color_enabled === true)
getObject("colorpicker_popup").style.display = (getObject("colorpicker_popup").style.display === "none" ? "block" : "none");
}
</script>
</head>
<body onload="color_init();">
Just Testing for Positioning <div onclick="showColor();" id="cmd_color" style="display: inline;">Color</div>
</body>
</html>
Any help is appreciated, apologies for posting all the code.
A small grey dot gets displayed where a box should be appearing, this grey dot is just the popup border. The #colorpicker_popup if set a width and height will show the box, however there are no colors in this box when viewed in Firefox or Opera (all thats tested that I know that works) they display the colors.
This is the code I am currently using
<html>
<head>
<style type="text/css">
#cmd_color {
background: blue;
color: #fff;
padding: 2px;
}
#colorpicker_popup {
border: 1px solid #999;
position: absolute;
background: #fff;
display: none;
}
.colorbox {
border: 1px solid #000;
height: 10px;
width: 10px;
margin: 0px auto;
}
.colorbox_cell {
height: 22px;
width: 20px;
border: 1px solid #fff;
}
.colorbox_hover {
background: #ccd3e1;
border: 1px solid #4464ac;
width: 20px;
height: 22px;
}
</style>
<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();
var is_op = (userAgent.indexOf('opera') != -1); //is opera
var is_saf = (userAgent.indexOf('safari') != -1); //is safari
var is_ie = (userAgent.indexOf('msie') != -1 && (!is_op) && (!is_saf)); //is internet explorer
var is_nn = (userAgent.indexOf('netscape') != -1); //is netscape
var is_moz = ((navigator.product == 'Gecko') && (!is_saf)); //is mozilla
var colors = new Array(new Array("#FF0000", "red"), new Array("#000000", "black"),new Array("#ffff00", "yellow"),new Array("#0000ff", "blue"));
var color_enabled = false;
/* Create the main div cell, position and initiate */
function color_init()
{
var body = document.body;
var color = document.createElement("div");
color.setAttribute("id", "colorpicker_popup");
body.appendChild(color);
var elem = getObject("cmd_color");
var e = getObject("colorpicker_popup");
/* Build Color */
var head = color_createTable(e);
color_createPalette(head);
/* Positioning */
if (!is_ie)
{
var top = elem.offsetTop + elem.offsetHeight + "px";
var left = elem.offsetLeft + "px";
e.style.top = top; e.style.left = left;
}
else
{
var top = elem.offsetTop + elem.offsetHeight + "px";
var left = elem.offsetLeft + "px";
e.style.top = top; e.style.left = left;
}
color_enabled = true;
}
/* Create the Table */
function color_createTable(id)
{
var table = document.createElement("table");
table.setAttribute("cellspacing", 4);
id.appendChild(table);
return table;
}
/* Create the Rows (TR) pass on to other function to create Cells */
function color_createPalette(head)
{
var row;
for (var i = 0; i < colors.length; i = i + 1)
{
if ((i % 6) === 0)
{
row = document.createElement("tr");
head.appendChild(row);
}
color_createCell(row, colors[i]);
}
}
/* Create the Table Cell (Td) with ID, Class and inside it the DIV Tag with the background color */
function color_createCell(row, colorArray)
{
var td = document.createElement("td");
td.setAttribute("id", "cell_palette_" + colorArray[1]);
td.setAttribute("class", "colorbox_cell");
var div = document.createElement("div");
div.setAttribute("id", "palette_"+colorArray[1]);
div.setAttribute("class", "colorbox");
div.setAttribute("style", "background: "+ colorArray[0]);
var divtxt = document.createTextNode(1);
td.appendChild(div);
row.appendChild(td);
var e = getObject("palette_"+colorArray[1]);
if (!is_ie && !is_op)
{
e.addEventListener("mouseover", color_cellHover, true);
e.addEventListener("mouseout", color_cellHover, true);
}
else
{
e.onmouseover = color_cellHover;
e.onmouseout = color_cellHover;
}
}
/* Make the TD Cell hover with a background color */
function color_cellHover(e)
{
e = (window.event ? window.event : e);
var id = (!is_ie ? e.target.id : e.srcElement.id);
var elem = getObject("cell_" + id);
if (elem.className != "colorbox_hover")
{
elem.className = "colorbox_hover";
}
else
{
elem.className = "colorbox_cell";
}
}
/* End Color */
function getObject(id)
{
if (document.getElementById(id) !== null)
{
return document.getElementById(id);
}
}
function showColor()
{
if (color_enabled === true)
getObject("colorpicker_popup").style.display = (getObject("colorpicker_popup").style.display === "none" ? "block" : "none");
}
</script>
</head>
<body onload="color_init();">
Just Testing for Positioning <div onclick="showColor();" id="cmd_color" style="display: inline;">Color</div>
</body>
</html>
Any help is appreciated, apologies for posting all the code.