Matthew Hagston wrote:
Would be appriciated if ya get it working in Safari too. I don't have a
[...]
Hey, I solved the Safari issue and can offer a couple of
significant enhancements to reduce processor effort.
*The Safari Issue:*
When you create an empty TD in safari and attach a mouseover event,
the area over which you must hover is about 1px high and as wide as the
cell. It seems to be aligned about where the baseline for text would
be. If you put text into the cell, whenever you are over the text then
the TD onmouseover function will not work, so the area that reacts to
the onmouseover is reduced even further.
One issue I can't fix is that when putting the colour into the showClr
cell, I can't get it to reliably fill the cell when clicking on the
table, but when I click the "Go" button it works fine or if I do
anything to cause the window to re-draw - resize window but not scroll.
To make the onmouseover area inside a TD be the entire cell height,
put a div inside the cell the same size as the cell. I couldn't get
bgColor to work on the div, so I left it to color the cell, the result
is the same (a coloured in cell). The relevant part of your code
becomes something like:
oTd = document.create Element("TD");
oTd.width = "4px";
oTd.height = "4px";
oTd.bgColor = "#"+ tmpar1[y];
oTd.border = "0px";
oTd.padding = "0px";
oDiv = document.create Element("DIV");
oDiv.style.widt h = "4px";
oDiv.style.heig ht = "4px";
oDiv.id = tmpar1[y];
oTd.appendChild (oDiv);
oTr.appendChild (oTd);
Note you must use .style with the width and height, but not with the
TD (maybe someone else can answer that one). Also, the id gets put
onto the DIV so you can get the rgb (id) value from that, not the
bgColor.
You must attach the onmouseover to the DIV (the firstChild of the td):
x[i].firstChild.onm ouseover = color_over;
x[i].firstChild.onm ouseout = color_out;
x[i].firstChild.onc lick = ChangeColorSele ct;
Of course, all that may be too much effort...
One significant optimisation I can offer is in the way you get the id
of the cell for the onmouseover, onmouseout and onclick events:
e.g.
function color_over(e) {
targid = (ie)?window.eve nt.toElement.id :e.target.id;
clr = document.getEle mentById(targid ).bgColor;
clr = clr.substr(1);
document.getEle mentById('color sel').value = clr;
}
*Enhancement 1*
Can be signficantly enhanced by creating a global variable that refers
to 'colorsel', then you only have to get a reference for it once and do
not need to do getElementById every time the mouse enters a cell (an
increadible waste of processor power).
*Enhancement 2*
Probably greater enhancement is to change the way you use the reference
to the cell (e.target) to get the id, just so you can use
getElementById to get the reference to the cell that you already had!!
So do this:
// Just after calling InitColorPalett e();
// create a global ref to the colorsel text box
colorSel = document.getEle mentById('color sel');
// Then change color_over to:
function color_over(e) {
if (ie) {
// do whatever IE needs
} else {
colorSel.value = e.target.id;
}
}
Of course you still need to handle IE (maybe, I didn't test) but at
least for all other browsers the work is hugely reduced.
You can make similar changes to wherever you have used e.target then
getElementById.
That's it for me, I think there are a few bugs with Safari 1.0.3 (comes
with OS X 10.2.8), I'll leave it now until I can test the latest
version with OS X 10.4.
Cheers, Fred.
