Hi, I'm making an on-screen keyboard (please don't say use the windows one, yada yada yada, I know that this HAS to be done in a web browser), and at the moment, I have each key like this: Code: <td id=q class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">Q</td> <td id=w class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">W</td> <td id=e class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">E</td> <td id=r class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">R</td> <td id=t class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">T</td> <td id=y class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">Y</td> Which as you can see looks kinda inefficient, even though it works absolutely fine. Is there a way I can apply the same onMouse stuff to every thing in my "let" class? I know I can do this using the events handler, but again, I have reasons for not using that. Many thanks for any suggestions, ch424
Well, you can compact it down a bit so you only initialise it all with one function in the cell. As for sticking that in CSS, I've never seen such a thing, but I honestly don't know. Code: <script type="text/javascript"> function mo(objCell) { // mouseover code here // setup for others objCell.onmousedown = function() { md(objCell); } objCell.onmouseup = function() { mu(objCell); } objCell.onmouseout = function() { mo(objCell); } } </script> <td id="Q" class="let" onMouseOver="mo(this);">Q</td> Dunno if that helps at all.
You can use the :hover pseudo class in the style sheet, e.g. td.let:hover { background:#FFF; } However due to our least-favourite but most widespread browser Internet Explorer's lack of support for :hover pseudo classes on non-link elements it will only work in Firefox, Opera, etc. (i.e. any modern standards-compliant browser). -Sam
you could try taking it a step further Code: <script type="text/javascript"> var letters = new Array("q","w","e","r","t","y","u","i","o","p","a","s","d","f","g","h","j","k","l","z","x","c","v","b","n","m"); for (i=0;i<26;i++) { document.write('<td id="' + letters[i] + '" class="let" onMouseOver="mo(this);">' + letters[i] + '</td>'); if (i == 9 || i == 18) document.write('<tr>'); } function mo(objCell) { // mouseover code here // setup for others objCell.onmousedown = function() { md(objCell); } objCell.onmouseup = function() { mu(objCell); } objCell.onmouseout = function() { mo(objCell); } } </script>
Thanks for all the help people! I'm not sure I understand that objCell stuff though: does it just apply the stuff to the one that was mouseOvered, or all of the objects in its class? And is there quick way to see if the things have already been applied so that it doesn't waste time running the code every time the mose passes voer a key? That's a cool trick with "for (i in letters) {}" Hwulex, I thought you could only do that in PHP! Thanks again for the help ch424
Yup. Code: <html> <head> <style type="text/css"> .letOut { width: 15px; border: solid 1px black; margin: 1px; padding: 1px; text-align: center; } .letOver { border: solid 1px red; margin: 1px; padding: 1px; text-align: center; cursor: pointer; } #screen { margin: 20px; } #keyboard { border: solid 1px black; padding: 2px; text-align: center; } </style> <script type="text/javascript"> function init(objTable) { objTable = document.getElementById('keyboard'); // array of keys var letters = new Array("q","w","e","r","t","y","u","i","o","p","a","s","d","f","g","h","j","k","l","z","x","c","v","b","n","m", ",", "."); // iterate through array for (i in letters) { // For each keyboard row, add a table row if (letters[i]=='q' || letters[i]=='a' || letters[i]=='z' || letters[i]==' ') { objRow = document.createElement('tr'); objTable.appendChild(objRow); } // end if // Create letter object objLetter = document.createElement('td'); objLetter.id = i; objLetter.className = 'letOut'; objLetter.innerHTML = letters[i].toUpperCase(); // event handlers objLetter.onmouseover = function() { this.className = 'letOver'; } objLetter.onmouseout = function() { this.className = 'letOut'; } objLetter.onmousedown = function() { objScreen = document.getElementById('screen'); objScreen.innerHTML = objScreen.innerHTML + this.innerHTML; } objLetter.onmouseup = function() { // empty } // Add cell (letter object) to table row objRow.appendChild(objLetter); } // end for } // end function </script> <head> <body onload="init();"> <table id="keyboard"> </table> <div id="screen"> </div> </body> </html> This is my interpretation of what you want to do (onscreen keyboard), and imo work still needed: Space bar Screen box looks ie rendering I have a project using near identical methods to this that works flawlessly in ie. I have no idea why this doesn't. What's more strange is that the code's obviously working in ie, just not rendering 'cause if I do Code: alert(document.body.innerHTML); Then everything's there. It just doesn't show up. Anyway, I hope this has given you a starting block. Let me know how you get on. As for seeing what's been applied and what hasn't and when; FireFox and it's DOM Inspector is your best of friends when working with JS.
No, you can't. I assume ch424 means foreach-ing, as it's similar. As a quick for loop alternative though, I like to use PHP: while (++$i < 10) {
Ok, thanks for the help again! Don't worry about firefox, this is for an IE-based touchscreen media center/ house control thingy for a friend! (crazy.) This is what I have at the moment, and it works fine: Code: <html> <head> <title>Bing!</title> <style type="text/css"> body { font-family:arial; font-size:2em;} .let { width:80; height:80; border-style:solid; color:#ff0000; border-color:#ff0000; text-align:center; cursor:hand; background-color:#ffffff; font-size:3.5em;} .let2 { width:80; height:80; border-style:solid; color:#ffffff; border-color:#ff0000; text-align:center; cursor:hand; background-color:#ff0000; font-size:1.5em;} .sp { width:40; height:80;} .sp2 { width:400; height:80;} .textboxclass { font-size:2em; border-style:solid; border-width:1px; color:#ff0000; width:900} </style> <script language=javascript> var nowOn=0; function disableselect(e){return false} document.onselectstart=new Function ("return false") function md(that) { that.className='let2'; nowOn=that; } function mu(that) { if (that==nowOn){ that.className='let'; nowOn=0; key(that); } } function mo(that) { if (that==nowOn){that.className='let'} } function mover(that) { if (that==nowOn){that.className='let2'} } function mub(){nowOn=0} function key(that) { if (that.id=="backspace") { var temp = document.form1.textbox.value; temp = temp.substring(0,temp.length-1); document.form1.textbox.value = temp; } else if (that.id=="clear") { document.form1.textbox.value=""; } else if (that.id=="search") { alert("You haven\'t written the search code yet dimwit. \n\rBut if it worked, it would search for:\n\r"+document.form1.textbox.value); } else { document.form1.textbox.value+=that.id; } document.form1.textbox.focus(); } </script> </head> <body onMouseUp="mub()"> <table> <tr> <td id=q class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">Q</td> <td id=w class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">W</td> <td id=e class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">E</td> <td id=r class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">R</td> <td id=t class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">T</td> <td id=y class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">Y</td> <td id=u class=let onMouseOver="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">U</td> <td id=i class=let onMouseOver="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">I</td> <td id=o class=let onMouseOver="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">O</td> <td id=p class=let onMouseOver="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">P</td> </tr> </table> <table> <tr> <td class=sp></td> <td id=a class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">A</td> <td id=s class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">S</td> <td id=d class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">D</td> <td id=f class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">F</td> <td id=g class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">G</td> <td id=h class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">H</td> <td id=j class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">J</td> <td id=k class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">K</td> <td id=l class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">L</td> </tr> </table> <table> <tr> <td class=sp></td> <td class=sp></td> <td class=sp></td> <td id=z class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">Z</td> <td id=x class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">X</td> <td id=c class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">C</td> <td id=v class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">V</td> <td id=b class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">B</td> <td id=n class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">N</td> <td id=m class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">M</td> <td class=sp></td> <td class=sp></td> <td class=sp></td> </tr> </table> <table> <tr> <td id="backspace" style="font-size:1.3em" class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">Backspace</td> <td id="clear" style="font-size:1.3em" class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">Clear</td> <td class=sp></td> <td id=" " class=let style="width:400" onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">Space</td> </tr> </table> <br> <form name=form1> <input class=textboxclass type=text name=textbox /> </form> <table> <tr> <td class=sp2></td> <!--<td id="music" style="font-size:1.3em" class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">Search music</td> <td id="porn" style="font-size:1.3em" class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">Search porn</td> --><td id="search" style="font-size:1.3em" class=let onMouseover="mover(this)" onMouseDown="md(this)" onMouseUp="mu(this)" onMouseout="mo(this)">Search</td> </tr> </table> </body> </html> I was just looking for a way to cut down on the crap in the keyboard itself, cos it was a bore to edit every single one if I wanted to change something! I'll try you way and fatal_error's later... And yeah I did mean foreach-ing! Thanks again, ch424
My most recent code post is a working example, if you save it as a .html file, and infact just an extension of mine and fatal's earlier efforts. Everything is generated on the fly from one central place so to make a change to every letter is incredibly simple. Obviously it's still a little limited in that there's no space, backspace, etc etc so things like that would need to be entered.
... then it doesn't work in IE. Grrr. Microsoft are t3h suxx0rs. Oh, well. Thanks for the help people, I've got it sorted now! ch424
