...

View Full Version : Input variable not working with checkbox using Javascript and CSS



RobertKennedy
11-17-2012, 01:58 AM
Hi

I just started working with javascript and have been working on creating a nice looking GUI.

I am using the code from http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

I am having a problem with this part of the code:


<input variable=\"#posttoblogs\" fillwith=\"checked\" type=\"checkbox\" class=\"styled\" name=\"a\">

Specifically:


fillwith=\"checked\"

The way it is the check mark appears and then disappears. If I replace checked with value it works but then when I check the box it isn't showing up as "true". Hope that makes sense.

Thanking you in advance.

:)

[code]<html>
<head>
<META http-equiv="Content-Style-Type" content="text/css">
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>gui</title>
<style>body {
font: 0.8em/21px arial,sans-serif;
}

.checkbox, .radio {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(http://www.dynamitelistbuilder.com/Dynamite-Traffic-Blaster/images/checkbox.png) no-repeat;
display: block;
clear: left;
float: left;
}
.radio {
background: url(http://www.dynamitelistbuilder.com/Dynamite-Traffic-Blaster/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(http://www.dynamitelistbuilder.com/Dynamite-Traffic-Blaster/images/select.png) no-repeat;
overflow: hidden;
}</style>

<script type="text/javascript">window.onload = ubot.runScript('change settings()')
/*


CUSTOM FORM ELEMENTS

Created by Ryan Fait
www.ryanfait.com

The only things you may need to change in this file are the following
variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)

The numbers you set for checkboxHeight and radioHeight should be one quarter
of the total height of the image want to use for checkboxes and radio
buttons. Both images should contain the four stages of both inputs stacked
on top of each other in this order: unchecked, unchecked-clicked, checked,
checked-clicked.

You may need to adjust your images a bit if there is a slight vertical
movement during the different stages of the button activation.

The value of selectWidth should be the width of your select list image.

Visit http://ryanfait.com/ for more information.

*/

var checkboxHeight = "25";
var radioHeight = "25";
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;</script>
</head>
<body>
<p><input variable="#posttoblogs" fillwith="value" type="checkbox" class="styled" name="a">
Post To
Blogs</p>
</body>
</html>[\code]

abduraooft
11-17-2012, 10:06 AM
<input variable="#posttoblogs" fillwith="value" type="checkbox" class="styled" name="a">
There's no attribute named fillwith. I assume you need something like

<input variable="#posttoblogs" checked="checked" value="some-value" type="checkbox" class="styled" name="a">.

PS: the closing of
tag is , not [\code]. You may edit your post to correct it.

RobertKennedy
11-19-2012, 02:33 AM
Thanks. I'll try it out.

At the bottom of the page here where it has posting rules it says I can edit my posts but I don't see the edit button. Am I going blind from being on the computer so much?

abduraooft
11-19-2012, 05:58 AM
There's a certain time limit , from the datetime of posting, for a user to get the edit option.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum