Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Input variable not working with checkbox using Javascript and CSS

    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...radio-buttons/

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

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

    Code:
    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]

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,860
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <input variable="#posttoblogs" fillwith="value" type="checkbox" class="styled" name="a">
    There's no attribute named fillwith. I assume you need something like
    Code:
    <input variable="#posttoblogs" checked="checked"  value="some-value" type="checkbox" class="styled" name="a">
    .

    PS: the closing of [code] tag is [/code], not [\code]. You may edit your post to correct it.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    RobertKennedy (11-19-2012)

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,860
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    There's a certain time limit , from the datetime of posting, for a user to get the edit option.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •