paddyhaig
-
Posts
131 -
Joined
-
Last visited
Never
paddyhaig's Achievements
Member (2/5)
0
Reputation
-
Ok, I just thought I would post the finished product, in case anyone needs at itt is at present a visual only, virtual keyboard using css div's for key's. Again if someone wants to round the corners off on the buttons and the backdrop and create drop shadows for the keys and highlight the keys in red when pressed, that would be totally cool. I am now looking for a way that the keyboard can be used via Java script to print to form fields as in a kiosk type environment. The whole thing sitting in a single web page. That is, the form and the virtual keyboard. ANy and all ideas greatly appreciated. Please see below. Here's what it looks like: Here's the code so far: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Virtual Keyboard</title> <style type="text/css"> <!-- #keyboard { position:absolute; width:688px; height:284px; z-index:1; left:50%; top:10px; margin-left:-343px; border:solid black 1px; color: #FFF; background-color:#CCC; /* for IE */ filter:alpha(opacity=85); /* CSS3 standard */ opacity:0.89; } #keyboard a { float:left; display:block; height:50px; width:51px; z-index:2; margin-left:4px; margin-top:4px; text-align:center; line-height:50px; border:solid black 1px; font-weight: bolder; color: #FFF; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: large; background-color:#999; /* for IE */ filter:alpha(opacity=90); /* CSS3 standard */ opacity:0.9; } #keyboard a#spacebar { width: 678px; } --> </style> </head> <body> <div id="keyboard"> <a href="@">@</a> <a href="1">1</a> <a href="2">2</a> <a href="3">3</a> <a href="4">4</a> <a href="5">5</a> <a href="6">6</a> <a href="7">7</a> <a href="8">8</a> <a href="9">9</a> <a href="0">0</a> <a href="$">$</a> <a href="Tab">Tab</a> <a href="Q">Q</a> <a href="W">W</a> <a href="E">E</a> <a href="R">R</a> <a href="T">T</a> <a href="Y">Y</a> <a href="U">U</a> <a href="I">I</a> <a href="O">O</a> <a href="P">P</a> <a href="Back">Back</a> <a href="Close">Close</a> <a href="A">A</a> <a href="S">S</a> <a href="D">D</a> <a href="F">F</a> <a href="G">G</a> <a href="H">H</a> <a href="J">J</a> <a href="K">K</a> <a href="L">L</a> <a href=":">:</a> <a href="Enter">Enter</a> <a href="Down">Down</a> <a href="Z">Z</a> <a href="X">X</a> <a href="C">C</a> <a href="V">V</a> <a href="B">B</a> <a href="N">N</a> <a href="M">M</a> <a href=",">,</a> <a href=".">.</a> <a href="?">?</a> <a href="Up">Up</a> <a href="space" id="spacebar">Space</a> </div> </body> </html>
-
Brilliant, I was thinkin, I could take it a whole lot further with rounded edges, drop shadows, and different color borders when the keys are pressed. But for now I need to find the Java script that will make it work on a web form. Thanks for the help everyone involved. If you have any idea's please let me know.
-
Tried that already, doesn't seem to change a thing.
-
Mmmmm, didn't seem to work out so well. It seems like the spacebar has inherited the settings from the above buttons and wont resize. My present html and css: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Virtual Keyboard</title> <style type="text/css"> <!-- #space_bar { position:relative; left:2px; top:2px; width:566px; left:50%; margin-left:-283px; height:50px; z-index:2; text-align:center; line-height:50px; border:solid black 1px; font-weight: bolder; color: #FFF; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: large; background-color:#999; /* for IE */ filter:alpha(opacity=90); /* CSS3 standard */ opacity:0.9; } #keyboard { position:absolute; width:686px; height:290px; z-index:1; left:50%; top:10px; margin-left:-343px; border:solid white 1px; color: #FFF; background-color:#CCC; /* for IE */ filter:alpha(opacity=85); /* CSS3 standard */ opacity:0.89; } #keyboard a { float:left; display:block; height:50px; width:51px; z-index:2; margin-left:4px; margin-top:4px; text-align:center; line-height:50px; border:solid black 1px; font-weight: bolder; color: #FFF; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: large; background-color:#999; /* for IE */ filter:alpha(opacity=90); /* CSS3 standard */ opacity:0.9; } --> </style> </head> <body> <div id="keyboard"> <a href="@">@</a> <a href="1">1</a> <a href="2">2</a> <a href="3">3</a> <a href="4">4</a> <a href="5">5</a> <a href="6">6</a> <a href="7">7</a> <a href="8">8</a> <a href="9">9</a> <a href="0">0</a> <a href="$">$</a> <a href="Tab">Tab</a> <a href="Q">Q</a> <a href="W">W</a> <a href="E">E</a> <a href="R">R</a> <a href="T">T</a> <a href="Y">Y</a> <a href="U">U</a> <a href="I">I</a> <a href="O">O</a> <a href="P">P</a> <a href="Back">Back</a> <a href="Close">Close</a> <a href="A">A</a> <a href="S">S</a> <a href="D">D</a> <a href="F">F</a> <a href="G">G</a> <a href="H">H</a> <a href="J">J</a> <a href="K">K</a> <a href="L">L</a> <a href=":">:</a> <a href="Enter">Enter</a> <a href="Down">Down</a> <a href="Z">Z</a> <a href="X">X</a> <a href="C">C</a> <a href="V">V</a> <a href="B">B</a> <a href="N">N</a> <a href="M">M</a> <a href=",">,</a> <a href=".">.</a> <a href="?">?</a> <a href="Up">Up</a> <a href="#" id="space_bar">Spacebar</a> </div> </body> </html> A graphic of how it looks presently:
-
Fantastic this is great!
-
Thanks for your help again, I will look into this later today as I have to work through the night on a different job.
-
I would like the spacebar to be a long horizontal oblong along the bottom like on a regular keyboard. Using the present ruleset it will be a small button like the other buttons.
-
Superb, got it! I used the Old man solution in the end, I am sure all the solutions are equal valid. Thank you every one. I think at this rate I might even get this application built before I keel over. #element { text-align:center; line-height:50px; } { The greatest art in life is to bring out the best in someone else. -
Like it, I will check it out later. Thanks
-
Hmmmm, I am using mySQL on the backend! I wonder what the syntax is.You wouldnt happen to know where I might find an example of how this is done. I am not even sure how I would term it in google?
-
Certainly. As you can see the space bar is totally in the wrong place. I would also like it to say 'SPACE' on the middle of the bar in the same font and color as the buttons. Any ideas and feedback greatly appreciated. I have yet to make the key's active, I guess that might be a java script thing.
-
Does anyone know what method is used on other large php css projects for introducing specific account customizations. I am sure cookies are involved. For example, you log into your web based email and you can change the layout to your own specific likes. I have also introduced other languages, although I am not sure if I am using a standard method?
-
I tried to save them with the .php extension as opposed to the css ~ with not a lot of luck. I will try again, maybe I screwed something up. There's nothing I can do with the server unless it's a matter of introducing a .htaccess file. The site is with a paid hosting service. Thanks however for your input.
-
I have made something of a virtual QWERTY keyboard using css. I just have a problem with the SPACE bar. Can someone help me place and align the bar in the middle if the keyboard container, or maybe at least give me a pointer on how I may do it? I have tried all kinds of things and believe it can be done. I don't really want to float another div over the top if possible with a different z-index if I can contain the space bar div inside the container div with the rest of the keys that would be great. Here is the code so far: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Virtual Keyboard</title> <style type="text/css"> <!-- #keyboard { position:absolute; width:686px; height:310px; z-index:1; left:50%; top:10px; margin-left:-343px; border:solid white 1px; color: #FFF; /* background-color:<?php echo $container_background_color ?>; */ background-color:#CCC; /* for IE */ filter:alpha(opacity=85); /* CSS3 standard */ opacity:0.89; } #keyboard a { float:left; display:block; height:50px; width:51px; z-index:2; margin-left:4px; margin-top:4px; text-align:center; line-height:50px; border:solid black 1px; font-weight: bolder; color: #FFF; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: large; cursor: auto; background-color:#999; /* for IE */ filter:alpha(opacity=90); /* CSS3 standard */ opacity:0.9; } #apDiv1 { position:relative; left:5px; top:5px; width:568px; height:50px; z-index:3; background-color:#999; } --> </style> </head> <body> <div id="apDiv1">Space</div> <div id="keyboard"> <a href="concierge_setup.php">@</a> <a href="accommodation.php">1</a><a href="concierge_setup.php">2</a> <a href="staff_management.php">3</a><a href="concierge_setup.php">4</a> <a href="staff_management.php">5</a><a href="concierge_setup.php">6</a> <a href="staff_management.php">7</a> <a href="check-in-out_index.php">8</a> <a href="accommodation.php">9</a> <a href="concierge_setup.php">0</a><a href="check-in-out_index.php">$</a> <a href="concierge_setup.php">Tab</a><a href="accommodation.php">Q</a><a href="concierge_setup.php">W</a><a href="check-in-out_index.php">E</a> <a href="accommodation.php">R</a> <a href="concierge_setup.php">T</a> <a href="staff_management.php">Y</a> <a href="check-in-out_index.php">U</a> <a href="accommodation.php">I</a> <a href="concierge_setup.php">O</a> <a href="staff_management.php">P</a><a href="accommodation.php">Back</a> <a href="concierge_setup.php">Close</a> <a href="staff_management.php">A</a> <a href="check-in-out_index.php">S</a> <a href="accommodation.php">D</a> <a href="concierge_setup.php">F</a> <a href="staff_management.php">G</a> <a href="check-in-out_index.php">H</a> <a href="accommodation.php">J </a> <a href="concierge_setup.php">K</a> <a href="staff_management.php">L</a> <a href="check-in-out_index.php">:</a> <a href="accommodation.php">Enter</a> <a href="concierge_setup.php">Down</a> <a href="staff_management.php">Z</a> <a href="check-in-out_index.php">X</a> <a href="accommodation.php">C</a> <a href="concierge_setup.php">V</a> <a href="staff_management.php">B</a> <a href="check-in-out_index.php">N</a> <a href="accommodation.php">M</a> <a href="concierge_setup.php">,</a> <a href="staff_management.php">.</a> <a href="check-in-out_index.php">?</a> <a href="accommodation.php">Up</a> </div> </body> </html>
-
Actually the mapping to the background_image works does not work, seems I had 2 background image mappings. What I am trying to do is create a way that the user can make certain customization to the css unique to their specific account. When they log into their account they can apply unique rules. Although the majority of the rules are static.