paddyhaig
-
Posts
131 -
Joined
-
Last visited
Never
Everything posted by paddyhaig
-
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.
-
I have embedded a couple of variables in an external css. One of them works the others do not. The mapping to the background_image works fine, however the #color definitions do not. Any thoughts greatly appreciated. Here is a clip from the external css. At the top of the css I have a php include that has the color rules. body { background-repeat: no-repeat; background-color: <?php echo $body_background_color ?>; } #backdrop { position:absolute; width:970px; height:985px; z-index:0; left:50%; top: -1px; margin-left:-485px; background-image: url(../../graphics/<?php echo $_background_image ?>); }
-
I am not really sure how to phrase this question. What's wrong with this variable? Are some of the characters illegal and do I need to cancel them out. If so, how? $_background_image = "url(../../graphics/graphic.png)"; The above is one of the rules from one of my css rulesets. I link to it as so from the css document. #backdrop { position:absolute; width:970px; height:985px; z-index:0; left:50%; top: -1px; margin-left:-485px; /* background-image: url(../../graphics/graphic.png); */ background-image: <?php echo $_background_image ?>; }
-
Thank's haku. Here's what I ended up with after a little help from other groups and a little experimenting. Do you know by any chance how I can make the backdrop graphic somewhat transparent without actually editing the graphic itself hopefully by using css? Or if you know of any way of making this code a little more efficient I would love to know? I don't believe this is the right place to ask, but I also want to know how I can adjust the php time ($time_date= strftime) with an offset of + or -. <?php // Start time variable. $time_date= strftime("%Y/%m/%d %H:%M"); // End time variable. ?> <!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>Form</title> <style type="text/css"> <!-- /*Beginning of page layout css*/ body { background-repeat: no-repeat; background-color: #FFE375; } #backdrop { position:absolute; width:970px; height:985px; z-index:0; left:50%; top: -1px; margin-left:-485px; background-image: url(../../graphics/graphicstar.png); } #container { position:absolute; width:686px; height:310px; z-index:1; left:50%; top:10px; margin-left:-343px; border:solid white 0px; } #row1 { float:left; width:169px; height:20px; z-index:1; border:solid white 0px; background-color:#C1AA24; /* for IE */ filter:alpha(opacity=70); /* CSS3 standard */ opacity:0.70; } #row2 { float:left; width:169px; height:20px; z-index:1; border:solid white 0px; background-color:#F00; text-align:center; font-weight: bolder; color: #FFF; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: medium; /* for IE */ filter:alpha(opacity=90); /* CSS3 standard */ opacity:0.9; } #row3 { float:left; width:169px; height:20px; z-index:1; border:solid white 0px; background-color:#C1AA24; /* for IE */ filter:alpha(opacity=70); /* CSS3 standard */ opacity:0.70; } #row4 { float:left; width:169px; height:20px; z-index:1; border:solid white 0px; background-color:#F00; text-align:center; font-weight: bolder; color: #FFF; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: ; /* for IE */ filter:alpha(opacity=90); /* CSS3 standard */ opacity:0.9; } /*End of page layout css*/ /*Beginning of form css*/ INPUT { background-color: #99ccff; color: black; font-family: Arial, Helvetica, sans-serif; font-weight:600; font-size: 11pt; text-align:center; } .altButtonFormat { background-color: #c0c0c0; font-family: verdana; border: #FFFF00 3px solid; font-size: 12px; font-weight:600; color: #000000; } /*End of form css*/ --> </style> </head> <body onLoad="document.getElementById('id_type').focus()"> <div id="backdrop"></div> <form id="form1" name="form1" method="post" action=""> <div id="container"> <div id="row1"></div> <div id="row1"></div> <div id="row1"></div> <div id="row1"></div> <div id="row2">ID type:</div> <div id="row2"><input name="id_type" type="text" id="id_type" size="15" value=""></div> <div id="row2">ID Number:</div> <div id="row2"><input name="id_number" type="text" size="15" value=""/></div> <div id="row3"></div> <div id="row3"></div> <div id="row3"></div> <div id="row3"></div> <div id="row4">First Name:</div> <div id="row4"><input name="forname" type="text" size="15" value=""/></div> <div id="row4">Second Name:</div> <div id="row4"><input name="surname" type="text" size="15" value=""/></div> <div id="row1"></div> <div id="row1"></div> <div id="row1"></div> <div id="row1"></div> <div id="row2">Nationality:</div> <div id="row2"><input name="nationality" type="text" size="15" value=""/></div> <div id="row2">Emergency #</div> <div id="row2"><input name="emergency_number" type="text" size="15" value=""/></div> <div id="row3"></div> <div id="row3"></div> <div id="row3"></div> <div id="row3"></div> <div id="row4">Email address:</div> <div id="row4"><input name="email_address" type="text" size="15" value=""/></div> <div id="row4">Date - Time</div> <div id="row4"><input name="time_date" type="text" size="15" value="<?php echo $time_date ?>" readonly="readonly"/></div> <div id="row1"></div> <div id="row1"></div> <div id="row1"></div> <div id="row1"></div> <div id="row2">Room number:</div> <div id="row2"><input name="room_number" type="text" size="15" value=""/></div> <div id="row2">Rent:</div> <div id="row2"><input name="rent" type="text" size="15" value=""/></div> <div id="row3"></div> <div id="row3"></div> <div id="row3"></div> <div id="row3"></div> <div id="row4">Deposit:</div> <div id="row4"><input name="deposit" type="text" size="15" value="<?php echo $deposit ?>" readonly="readonly"/></div> <div id="row4">Total:</div> <div id="row4"><input name="total" type="text" size="15" value=""/></div> <div id="row1"></div> <div id="row1"></div> <div id="row1"></div> <div id="row1"></div> <div id="row2">Notes:</div> <div id="row2"><input name="notes" type="text" size="15" value=""/></div> <div id="row2">Press when done >></div> <div id="row2"><input name="Submit" type="submit" class="altButtonFormat" value="----- Submit -----" /></div> <div id="row3"></div> <div id="row3"></div> <div id="row3"></div> <div id="row3"></div> </div> </form> </body> </html>
-
Thanks for your help everyone, I went elsewhere and got a little help. Had to get the job done and not spend all my time bickering. I do sincerely apologize if I upset anyone, I was pretty upset myself. If you want to spend time kicking this can around then you can. If not, I am again sincerely sorry for maybe over reacting. I just felt like I was being set upon by the wanna-be authorities. I felt like the was some kind of aloof snobbery and old school cronyism. Peace! I assume you glean a little free knowledge from this forum or you wouldn't be here! Are you a paying member?
-
Thanks for your help everyone, I went elsewhere and got a little help. Had to get the job done and not spend all my time bickering. I do sincerely apologize if I upset anyone, I was pretty upset myself. If you want to spend time kicking this can around then you can. If not, I am again sincerely sorry for maybe over reacting. I just felt like I was being set upon by the wanna be authorities. I just felt like the was some kind of aloof snobbery and old school cronyism. Peace!
-
No, one person in authority seemed to have an issue with my postings. This issue just seemed to grow and grow and no resolution was found. A number of other people just seemed to jump on the bandwagon.
-
ignace for president. I lived in Bruxelles once. Thank you for your wisdom, and thank you for your help in the past. I hate all this trolling but some people are just B$%##'s I wanna make some cool forms utilizing css. With alternating semi transparent colored rows and 1px lines, is this possible and if so how? With the help of a very cool cat here at PHPfreaks I managed to make a div with div buttons inside. This is very cool. And I have customized it significantly after getting the fundamentals down. Just so y'all know Thorpe, pulled my thread, moved it somewhere else, they moved it back and then he PM's me calling me a Princess. Wonder why I am pissed? Seems you don't like it so much when it happens to you. Oh, and he gave me an official warning actually several official warnings for double posting, which I didn't do. I think he was being a little over zealous. (It was really starting to feel personal.) The bottom line is, my css/form/alternating table rows thing, could of and should of been resolved bye now without any of this trolling. Thanks again Ignace for words of reason. I am sorry if I rocked a few boats, but wait until someone starts to send you warnings, moves your posts and makes inflammatory statements to you via PM. I simply gave a taste to a few people of the medicine that was dished out to me.
-
I want to levy an official complaint against an administrator. Who do I contact? What is the hierarchy here. If no one wants to tell me, I will find out who owns the domain and who hosts the domain.
-
You read the personal messages? Nope!
-
Working my way up the chain until I reach someone that's not an idiot! So far http://www.thewebfreaks.com/