Databases
StackOverflow2013
Postsdbo
POConverted the checkboxes into images, need to add a drag function to change images
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POConverted the checkboxes into images, need to add a drag function to change images
    text
    copied!<p>I actually converted the html checkboxes into images(below is the code), now the checkboxes have 3 states one for checked, one for unchecked and one for null, </p> <p>now i want to add a DRAG feature to it like if we select unchecked and drag on other checkboxes, the other checkboxes should get this value, i meam the image must be changed. </p> <p>Here is an example on this link <a href="http://cross-browser.com/x/examples/clickndrag_checkboxes.php" rel="nofollow">http://cross-browser.com/x/examples/clickndrag_checkboxes.php</a> , this example is without images but i want the same thing to happen with images.</p> <p>Any help will really make my day, Thanks!</p> <p>here is the code:</p> <pre><code> &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;script type="text/javascript"&gt; var inputs; var checked = 'checked.jpg'; var unchecked = 'unchecked.jpg'; var na = 'na.jpg'; function replaceChecks() { //get all the input fields on the funky_set inside of the funky_form inputs = document.funky_form.getElementsByTagName('input'); //cycle trough the input fields for(var i=0; i &lt; inputs.length; i++) { //check if the input is a funky_box if(inputs[i].className == 'funky_box') { //create a new image var img = document.createElement('img'); //check if the checkbox is checked if(inputs[i].value == 0 ) { img.src = unchecked; inputs[i].checked = false; } else if(inputs[i].value = 1 ) { img.src = checked; inputs[i].checked = true; } else if(inputs[i].value = 2 ) { img.src = na; inputs[i].checked = true; } //set image ID and onclick action img.id = 'checkImage'+i; //set name img.name = 'checkImage'+i; //set image img.onclick = new Function('checkChange('+i+')'); //place image in front of the checkbox inputs[i].parentNode.insertBefore(img, inputs[i]); //hide the checkbox inputs[i].style.display='none'; } } } //change the checkbox status and the replacement image function checkChange(i) { if(inputs[i].value==0) { inputs[i].checked = true; inputs[i].value = 2; document.getElementById('checkImage'+i).src=na; } else if(inputs[i].value==1) { inputs[i].checked = false; inputs[i].value = 0; document.getElementById('checkImage'+i).src=unchecked; } else if(inputs[i].value==2) { inputs[i].checked = true; inputs[i].value = 1; document.getElementById('checkImage'+i).src=checked; } } setTimeout(function(){replaceChecks();}, 0); &lt;/script&gt; &lt;/head&gt; &lt;form name="funky_form" action='checkkkkkkkkkkkkkkkkkkkkkkkkk.php' method='POST'&gt; &lt;table id="table1" border=1px cellpadding=1px cellspacing=1px&gt; &lt;tr&gt; &lt;th&gt;D/T&lt;/th&gt; &lt;th&gt;1&lt;/th&gt; &lt;th&gt;2&lt;/th&gt; &lt;th&gt;3&lt;/th&gt; &lt;th&gt;4&lt;/th&gt; &lt;th&gt;5&lt;/th&gt; &lt;th&gt;6&lt;/th&gt; &lt;th&gt;7&lt;/th&gt; &lt;th&gt;8&lt;/th&gt; &lt;th&gt;9&lt;/th&gt; &lt;th&gt;10&lt;/th&gt; &lt;th&gt;11&lt;/th&gt; &lt;th&gt;12&lt;/th&gt; &lt;th&gt;13&lt;/th&gt; &lt;th&gt;14&lt;/th&gt; &lt;th&gt;15&lt;/th&gt; &lt;th&gt;16&lt;/th&gt; &lt;th&gt;17&lt;/th&gt; &lt;th&gt;18&lt;/th&gt; &lt;th&gt;19&lt;/th&gt; &lt;th&gt;20&lt;/th&gt; &lt;th&gt;21&lt;/th&gt; &lt;th&gt;22&lt;/th&gt; &lt;th&gt;23&lt;/th&gt; &lt;th&gt;24&lt;/th&gt; &lt;/tr&gt; &lt;?php $days = array('SUN'); foreach($days as $key=&gt;$val) { print "&lt;tr&gt;"; print"&lt;th&gt;$val&lt;/th&gt;"; for($i=0; $i&lt;24; $i++){ print "&lt;td&gt;"; print " &lt;input type=\"checkbox\" id=\"${val}${i}\" name=\"sun${i}\" class=\"funky_box\" /&gt;"; print "&lt;/td&gt;"; } print "&lt;/tr&gt;"; } $days = array('MON'); foreach($days as $key=&gt;$val) { print "&lt;tr&gt;"; print"&lt;th&gt;$val&lt;/th&gt;"; for($i=0; $i&lt;24; $i++){ print "&lt;td&gt;"; print " &lt;input type=\"checkbox\" id=\"${val}${i}\" name=\"mon${i}\" class=\"funky_box\" /&gt;"; print "&lt;/td&gt;"; } print "&lt;/tr&gt;"; } ?&gt; &lt;/table&gt; &lt;/form&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload