DoyleChris98 Posted February 20, 2015 Share Posted February 20, 2015 (edited) What i am trying to do is create 3 items 2 are radio buttons and the other is a check box. I would like to give the 3 of them CSS styles and have them change the background and text color when selected or checked. below is the code and examples. first in the pictures are the layout of the Buttons and Checkbox. then below is the css style i want them to look like when done. pay no attention to the label of the css boxes i did that to give a example of selected and unselected. unselected is black background and green text and selected is the reverse. <!doctype html><html><head><meta charset="utf-8"><link href="Button.css" rel="stylesheet" type="text/css"></head><body><input type="radio" id="COM1TX" name="COMTX">COM 1 Tx<br><input type="checkbox" id="COMRX" name="COMRX">COM 1,2 Rx<br><input type="radio" id="COM2TX" name="COMTX">COM 2 Tx<br><div><input class="TEST" id="COM" type="button" name="COM" value="COM"><input class="TEST" id="COM2" type="button" name="COM2" value="COM2"></div><div><input class="TEST" id="COM3" type="button" name="COM3" value="COM3"><input class="TEST" id="COM4" type="button" name="COM4" value="COM4"></div> </body></html> @charset "utf-8";/* CSS Document */#COM{ width: 150px; height: 100px; position: absolute; top: 100px; left: 0px; cursor: crosshair;}#COM2{ width: 150px; height: 100px; position: absolute; top: 200px; left: 0px; cursor: crosshair;}#COM3{ width: 150px; height: 100px; position: absolute; top: 100px; left: 150px; cursor: crosshair;}#COM4{ width: 150px; height: 100px; position: absolute; top: 200px; left: 150px; cursor: crosshair; color: #000000; background-color: #00F349;}.TEST{ background-color: #000000; color: #00F349; text-align: center; border: thin solid #00F349; line-height: 100px; vertical-align: middle; font-size: 50px; cursor:crosshair;}.TEST:active{ background-color: #00F349; color: #000000; text-align: center; border: thin solid #00F349; line-height: 100px; vertical-align: middle; cursor:crosshair;} Edited February 20, 2015 by DoyleChris98 Link to comment Share on other sites More sharing options...
davej Posted February 21, 2015 Share Posted February 21, 2015 Are you saying that each of these seven elements can be individually highlighted or un-highlighted? Link to comment Share on other sites More sharing options...
DoyleChris98 Posted February 21, 2015 Author Share Posted February 21, 2015 What im saying is, I want the radio and checkbox to look like the buttons in the picture. which with some tinkering around i got it to look the right way before being pressed and after being pressed but i cant get them to move to a new location. example I want the buttons left edge at 840px from the left but i cant get them to move there. but i can make them highlight and unhighlight the right way. Link to comment Share on other sites More sharing options...
davej Posted February 22, 2015 Share Posted February 22, 2015 Your use of absolute positioning is not a good idea. In your picture the COM4 button is light green. Is it supposed to toggle to dark when clicked? Link to comment Share on other sites More sharing options...
DoyleChris98 Posted February 22, 2015 Author Share Posted February 22, 2015 Well absolute is all i know how to use right now, and with the way i have things setup i dont know what to reference for relative postition. And the COM 4 is the way it would look if it was selected. This all works with a keypad i made, all the keypad buttons are absolute position and work fine. But i need the Radio Buttons and Check Boxes to turn certain things on and off. I only need 2 radio buttons and the rest are check boxes. Link to comment Share on other sites More sharing options...
davej Posted February 22, 2015 Share Posted February 22, 2015 So I don't understand. Do you want something like this? <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>*{margin:0;padding:0;}#panel{border:1px solid black;width:302px;}#coms{width:300px;font-size:0;border:1px solid #19D119;}#coms [type=button]{display:inline-block;width:150px;height:120px;background-color:black;color:#19D119;font-size:48px;border:1px solid #19D119;}#COM1TX{margin-top:40px;}#COM1TX, #COMRX, #COM2TX{margin-left:15px;}#COM2TX{margin-bottom:40px;}</style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+' Column: '+d);return true;}</script><script>'use strict';var mygreen = null;window.onload = init;function init() {document.getElementById('COM').onclick = comClk;document.getElementById('COM2').onclick = comClk;document.getElementById('COM3').onclick = comClk;document.getElementById('COM4').onclick = comClk;}function comClk(){var lime = '#19D119';if( this.style.backgroundColor == mygreen ){this.style.backgroundColor = 'black';this.style.color = lime;}else{this.style.backgroundColor = lime;mygreen = this.style.backgroundColor;this.style.color = 'black';}}//end of function</script></head><body><div id="panel"><input type="radio" id="COM1TX" name="COMTX"/>COM 1 Tx<br><input type="checkbox" id="COMRX" name="COMRX"/>COM 1,2 Rx<br><input type="radio" id="COM2TX" name="COMTX"/>COM 2 Tx<br><div id="coms"><input class="TEST" id="COM" type="button" name="COM" value="COM"/><input class="TEST" id="COM2" type="button" name="COM2" value="COM2"/><input class="TEST" id="COM3" type="button" name="COM3" value="COM3"/><input class="TEST" id="COM4" type="button" name="COM4" value="COM4"/></div></div></body> </html> Link to comment Share on other sites More sharing options...
DoyleChris98 Posted February 23, 2015 Author Share Posted February 23, 2015 Well your half right, the color when activated is right. But I would like COM and COM2 set up and radio buttons, so whe you click on COM it lights up but when you click COM 2, COM 2 lights up and COM turns off. Ill attach a picture of how and where i want them to go. If you look at the picture the line that the arrow is pointing at its at 840px from the left. That is where the buttons will line up from the left and the height from the top will be solved when when the left is figured out. and in the picture there is COM 1 Tx, COM 1,2 Rx, COM 2 Tx. Where COM 1 Tx and COM 2 Tx will be radio buttons and COM 1,2 Rx is like a checkbox. Link to comment Share on other sites More sharing options...
sandeepm Posted February 24, 2015 Share Posted February 24, 2015 actually <div> tag behave like radio and checkboxes ? Link to comment Share on other sites More sharing options...
davej Posted February 24, 2015 Share Posted February 24, 2015 Ok, your screen-grab image looks quite complex. When you have it finished perhaps you can more clearly explain what it is supposed to do. Link to comment Share on other sites More sharing options...
davej Posted February 24, 2015 Share Posted February 24, 2015 actually <div> tag behave like radio and checkboxes ? Yes and no. Not if the form will be submitted. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 24, 2015 Share Posted February 24, 2015 Because you are limited on changing the design of radio and checkbox, also they are different in each browser, you will probablyy find that divs or anchors are used to produce a better looking design that would more match the websites design with image swapping, or style changing on checking. The radio or checkbox will be hidden in background, and changing the state of being checked would be controlled by javascript. Link to comment Share on other sites More sharing options...
DoyleChris98 Posted February 24, 2015 Author Share Posted February 24, 2015 Its used for a game Microsoft Flight Simulator, its for entering radio frequencies from a webpage. you press the keypad buttons (0-9, ., C, to enter the frequency in the input box then press the bottom XXX.XXX to enter the frequency, then it enters it into FSX. Also i can open the ATC window with the small buttons next to the input box. And the buttons that i need the Radio and Check Boxes for turn on and shut off the radios. The XXX.XXX show up because i dont have FSX running at the time of the picture. I was using the DIV tags because it was either here or at stackoverflow that somebody told me to use the DIV tag to make the grid layout. Link to comment Share on other sites More sharing options...
DoyleChris98 Posted February 25, 2015 Author Share Posted February 25, 2015 Anybody with a idea on this. I wa able to get the Radio Buttons to move but i cant get the checkboxes to Style and also i cant figure out the location with the relative setting. I dont know what the location is relative to. Link to comment Share on other sites More sharing options...
davej Posted February 26, 2015 Share Posted February 26, 2015 Idea on what? I don't think you have been very clear on what you need or how it needs to function. Are your images showing what you have or what you want? Link to comment Share on other sites More sharing options...
DoyleChris98 Posted February 28, 2015 Author Share Posted February 28, 2015 (edited) Ok here is the story. Theirs a program that comes with Microsoft Flight Simulator (FSX) called Simconnect which you can right C++ programs to access FSX though Simconnect. A person made a program that accesses Simconnect through a webpage called Websimconnect (Webpage <-> Websimconnect <-> Simconnect <-> FSX). Things that you can do is change Radios, Display your location on google maps from FSX, and many other things. What i'm trying to create is a LCD radio display that you can enter the Frequency and change radios that shows up on a website. I have the keypad layout done but trying to add a few more buttons. The buttons turn on and off the Radios, Which act like a Checkboox and radio buttons. Buttons-2 picture shows the buttons inside FSX, with COM 1 Active COM 2 off with everything else. Buttons-3 picture shows COM 2 active which shuts off COM 1 (like a Radio Button) and the rest turn on and stay on like a check box. Pad2 shows the way i would like it to look, where the buttons i want to add are on the left side. And all the buttons change background and text color when clicked. Hopefully that explains it enough. Edited February 28, 2015 by DoyleChris98 Link to comment Share on other sites More sharing options...
davej Posted February 28, 2015 Share Posted February 28, 2015 Ok, but are you saying that these three pictures are three separate keypads that you want to create? Or are you saying you want to combine these three into one keypad? What about the COM buttons you started out with? How many of these buttons are toggle buttons? Link to comment Share on other sites More sharing options...
DoyleChris98 Posted February 28, 2015 Author Share Posted February 28, 2015 Alright i through together what it should look like but function isn't all the way there and i have attached a jsfiddle of it to. In the fiddle i use focus to show the change when active. COM 1 Tx and COM 2 Tx (with yellow to ID them in the picture) should act like Radio Buttons turn on on the other shuts off. The rest should act like Check Boxes to turn on and off. Later they will be calling a function when clicked but thats later. https://jsfiddle.net/zxo0myah/ Fullscreen https://jsfiddle.net/zxo0myah/embedded/result/ Link to comment Share on other sites More sharing options...
davej Posted February 28, 2015 Share Posted February 28, 2015 As Dsonesuk suggested above, it might not be advisable to use buttons and checkboxes. How do you submit the data to this program? Link to comment Share on other sites More sharing options...
DoyleChris98 Posted February 28, 2015 Author Share Posted February 28, 2015 The program uses a a webpage function to set items. For example in the picture above Pad2 in post #15 if you click one of the XXX.XXX it calls a function. <div class="DISP2" id="COM1S" name="COM1S" onclick="CONVERT(this)">XXX.XXX</div> Function function CONVERT(event){ FREQ = parseFloat(document.getElementById("INPUT").value); FREQ = FREQ.toFixed(2); var n1 = FREQ.substr(0, FREQ.indexOf(".")); n1 = n1.substr(n1.length-2); var n2 = FREQ.substr(FREQ.indexOf(".")+1,2); var bcd = (parseInt(n1.charCodeAt(0) - 0x30 )<<12) + (parseInt(n1.charCodeAt(1) - 0x30 )<<8) + (parseInt(n2.charCodeAt(0) - 0x30 )<<4) + parseInt(n2.charCodeAt(1) - 0x30 ); document.getElementById("INPUT").value = ""; SETFREQ(event.id, bcd);}function SETFREQ(event, value){ $.ajaxSetup({ cache: false }); // nedeed for IE8 $.support.cors = true; // required if the script is local $.ajaxSetup({ async: false }); var jqXHR = $.getJSON("http://" + location.hostname + "/set_event_value?name=" + event + "&value=" + value, function(dane){}); $.ajaxSetup({ async: true }); } Now with the Buttons i will need a talk back to change the state in the webpage if its changed in FSX, but that is something ill work on later. I know i can change the state of the button with Jquery, but i was seeing if i could use Radio Buttons and Check Boxes. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now