Hi,
I'm using Chrono forms to allow users to state their gender. I assume from a functionality perspective the best option would be radio buttons.
Can anyone tell me how I can style on radio button using an icon of a man and another radio button using an icon of a woman? I've been looking up tutorials on how to do this, but I'm not sure how to fit it in with the chronoforms syntax.
Thanks a ton.
I'm using Chrono forms to allow users to state their gender. I assume from a functionality perspective the best option would be radio buttons.
Can anyone tell me how I can style on radio button using an icon of a man and another radio button using an icon of a woman? I've been looking up tutorials on how to do this, but I'm not sure how to fit it in with the chronoforms syntax.
Thanks a ton.
Hi avi,
I don't know, do you have some code that might work? You can pretty much edit anything in the form code in the Form Code boxes.
Bob
I don't know, do you have some code that might work? You can pretty much edit anything in the form code in the Form Code boxes.
Bob
Thanks for the prompt reply!
I was following this tutorial: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
I copied the css from that tutorial to the css box in the Form Code tab in the backend (I'm working off of 3.2, not yet upgraded to 4) and copied the js to the javascript box. I think I modified the HTML accordingly, but it's still not working.
I was following this tutorial: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
I copied the css from that tutorial to the css box in the Form Code tab in the backend (I'm working off of 3.2, not yet upgraded to 4) and copied the js to the javascript box. I think I modified the HTML accordingly, but it's still not working.
This accomplished most of what I wanted:
In your form code, try this:
HTML:
Javascript:
CSS:
This was taken from here: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
And my result is attached.
In your form code, try this:
HTML:
<div class="form_item">
<div class="form_element cf_radiobutton">
<label class="cf_label" style="width: 150px;">Choose gender</label>
<div class="float_left">
<label for="radio00" class="radiom"><input value="Man" title="" class="radiom validate-one-required" id="radio00" name="radio0" type="radio"/></label>
<label for="radio01" class="radiof"><input value="Woman" title="" class="radiof validate-one-required" id="radio01" name="radio0" type="radio"/></label>
</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Choose City</label>
<select class="cf_inputbox validate-selection" id="select_1" size="1" title="" name="select_1">
<option value="">Choose Option</option>
<option value="Boston">Boston</option>
</select>
</div>
<div class="cfclear"> </div>
</div>
Javascript:
var checkboxHeight = "25";
var radioHeight = "65";
var selectWidth = "190";
/* No need to change anything after this */
document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
var Custom = {
init: function() {
var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
for(a = 0; a < inputs.length; a++) {
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
span[a] = document.createElement("span");
span[a].className = inputs[a].type;
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
position = "0 -" + (checkboxHeight*2) + "px";
span[a].style.backgroundPosition = position;
} else {
position = "0 -" + (radioHeight*2) + "px";
span[a].style.backgroundPosition = position;
}
}
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.clear;
if(!inputs[a].getAttribute("disabled")) {
span[a].onmousedown = Custom.pushed;
span[a].onmouseup = Custom.check;
} else {
span[a].className = span[a].className += " disabled";
}
}
}
inputs = document.getElementsByTagName("select");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].className == "styled") {
option = inputs[a].getElementsByTagName("option");
active = option[0].childNodes[0].nodeValue;
textnode = document.createTextNode(active);
for(b = 0; b < option.length; b++) {
if(option[b].selected == true) {
textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
}
}
span[a] = document.createElement("span");
span[a].className = "select";
span[a].id = "select" + inputs[a].name;
span[a].appendChild(textnode);
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
if(!inputs[a].getAttribute("disabled")) {
inputs[a].onchange = Custom.choose;
} else {
inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
}
}
}
document.onmouseup = Custom.clear;
},
pushed: function() {
element = this.nextSibling;
if(element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
} else if(element.checked == true && element.type == "radio") {
this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
} else if(element.checked != true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight + "px";
}
},
check: function() {
element = this.nextSibling;
if(element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 0";
element.checked = false;
} else {
if(element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
group = this.nextSibling.name;
inputs = document.getElementsByTagName("input");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].name == group && inputs[a] != this.nextSibling) {
inputs[a].previousSibling.style.backgroundPosition = "0 0";
}
}
}
element.checked = true;
}
},
clear: function() {
inputs = document.getElementsByTagName("input");
for(var b = 0; b < inputs.length; b++) {
if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
}
}
},
choose: function() {
option = this.getElementsByTagName("option");
for(d = 0; d < option.length; d++) {
if(option[d].selected == true) {
document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
}
}
}
}
window.onload = Custom.init;CSS:
.radiom {
background-image: url("/images/stories/male.png")!important;
width: 65px;
height: 65px;
}
.radiof {
background-image: url("/images/stories/female.png")!important;
width: 65px;
height: 65px;
}This was taken from here: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
And my result is attached.
Hi avi,
Here's a modified version of Ryan Fait's code that seems to work OK with ChronoForms 3.2. I've made a few modifications to the JavaScript file mostly to get the code to work when more than one class is defined for an element e.g. class='radio styled'
[attachment=0]08-05-2011 14-51-56.png[/attachment]
You'll need to do the following.
[list=1]Unzip the attached file and put the three images into the components/com_chronocontact/css/images/ folder; then put the ryanfait.js file into the components/com_chronocontact/js/ folder.
Add the following code to the start of the Form HTML for your form to load the ryanfait.js file:
Add this code to the Form CSS box for your form. Note: this is Ryan's CSS changed only for the image paths. You may need to make other changes:
Add styled to the class attributes of the inputs you want styled. See the example HTML below. [/list:o]
I think that is everything.
Bob
PS Here's the Form HTML for my test form.
Here's a modified version of Ryan Fait's code that seems to work OK with ChronoForms 3.2. I've made a few modifications to the JavaScript file mostly to get the code to work when more than one class is defined for an element e.g. class='radio styled'
[attachment=0]08-05-2011 14-51-56.png[/attachment]
You'll need to do the following.
[list=1]
<?php
$doc =& JFactory::getDocument();
$doc->addScript('components/com_chronocontact/js/ryanfait.js');
?>body {
font: 0.8em/21px arial,sans-serif;
}
.checkbox, .radio {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(components/com_chronocontact/css/images/checkbox.png) no-repeat;
display: block;
clear: left;
float: left;
}
.radio {
background: url(components/com_chronocontact/css/images/radio.png) no-repeat;
}
.select {
position: absolute;
width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
height: 21px;
padding: 0 24px 0 8px;
color: #fff;
font: 12px/21px arial,sans-serif;
background: url(components/com_chronocontact/css/images/select.png) no-repeat;
overflow: hidden;
}I think that is everything.
Bob
PS Here's the Form HTML for my test form.
<?php
$doc =& JFactory::getDocument();
$doc->addScript('components/com_chronocontact/js/ryanfait.js');
?>
<div class="form_item">
<div class="form_element cf_radiobutton">
<label class="cf_label" style="width: 150px;">Click Me to Edit</label>
<div class="float_left">
<input value="radio 1" title="" class="radio styled" id="radio00" name="radio0" type="radio" />
<label for="radio00" class="radio_label">radio 1</label>
<br />
<input value="radio 2" title="" class="radio styled" id="radio01" name="radio0" type="radio" />
<label for="radio01" class="radio_label">radio 2</label>
<br />
<input value="radio 3" title="" class="radio styled validate-one-required" id="radio02" name="radio0" type="radio" />
<label for="radio02" class="radio_label">radio 3</label>
<br />
</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Click Me to Edit</label>
<select class="cf_inputbox styled validate-selection" id="select_2" size="1" title="" name="select_2">
<option value="">Choose Option</option>
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option>
</select>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_checkbox">
<label class="cf_label" style="width: 150px;">Click Me to Edit</label>
<div class="float_left">
<input value="check 1" title="" class="radio styled" id="check10" name="check1[]" type="checkbox" />
<label for="check10" class="check_label">check 1</label>
<br />
<input value="check 2" title="" class="radio styled" id="check11" name="check1[]" type="checkbox" />
<label for="check11" class="check_label">check 2</label>
<br />
<input value="check 3" title="" class="radio styled validate-one-required" id="check12" name="check1[]" type="checkbox" />
<label for="check12" class="check_label">check 3</label>
</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_button">
<input value="Submit" name="button_3" type="submit" />
</div>
<div class="cfclear"> </div>
</div>
Wow, thanks so much for taking the time to respond, especially in such depth!! I hope this thread helps other people trying to accomplish the same. Your support is amazing!
4 down vote favorite
2
I would like to create an HTML form for user feedback. If the overall feedback is good, the user should click on a laughing smiley, if the overall feedback is bad, the user should choose a sad smiley. pondok Cerita
I think this should be done using radio buttons, with the smileys instead of the radio buttons. Maybe I'm wrong though...
Do you know how I can achieve this?
Thanks!
2
I would like to create an HTML form for user feedback. If the overall feedback is good, the user should click on a laughing smiley, if the overall feedback is bad, the user should choose a sad smiley. pondok Cerita
I think this should be done using radio buttons, with the smileys instead of the radio buttons. Maybe I'm wrong though...
Do you know how I can achieve this?
Thanks!
This topic is locked and no more replies can be posted.
