toggle Color divs on and off using checkbox

Question

OK I have the follwing code which will color a string at certain points, using divs inside of divs.

$lines = file("oneModelResults.txt");

$ntArr = array();
$oneHit= array();
// Loop the file data and build an multidimensional associative array
foreach ($lines as $line_num => $columns) {
  $line= explode("\t",$columns);

$allModels[$line[3]] = 1;
$oneHit = array(
  'hit' => $line[2],
  'name' => $line[0],
  'score' => $line[1],
  'end' => $line[2] + 3,
  'model' => $line[3],
  'top' => $line[5],
  'color' => getcolor(rawtransform($line[1]),$line[4]));


for ($i=0;$i<=3; $i++){
        $ntArr[$line[2]+$i][$line[3]][] = $oneHit;
  }
}

 // Close the file
fclose($fp);

// Generate a random sequence
$seqArr = array('A', 'T', 'C', 'G');
$randseq = array();
for ($i = 0; $i < 1000; $i++) {
$randseq[] = $seqArr[array_rand($seqArr)];
}

//main div for results visual
echo'<div id="coltext" style="font-family:monospace;font-size:17px;background-color:#D0D0D0;color:black;">'."\n";   


  // Iterate over $allModels and echo checkboxes
 foreach ($allModels as $modName => $value) {

echo '<input ModelName="'.$modName.'" type="checkbox" checked="checked"
onclick="toggle.apply(this);" />'.$modName.';

 }



// An array to track the current hits
$currentHits = array();
$modelArr=array();
foreach ($randseq as $index => $nuc) {
echo'<div class="seqWrap"title="position:'.($index+1).'">';
// Increment $index
$index++;



// Check whether we are at the start of a new hit
  if (isset($ntArr[$index]) and !empty($ntArr[$index])) {
  $currentHits[$index] = $ntArr[$index];
}

  if (count($currentHits)) {
      foreach($currentHits as $modelNameArr){
        foreach($modelNameArr as $hit){

          $hitCount = count($hit);
          $height=25/$hitCount;
          $counter=0;
          foreach($hit as $hitAttribute){
            $top = $height * $counter;

            $counter++;

            $color=$hitAttribute['color'];

            $op=($hitAttribute['score']/1000);
            $lborder=($index==$hitAttribute['hit']) ?
            "solid white 2px":"solid transparent 2px";
            $rborder=($index==$hitAttribute['end']) ?
            "solid white 2px":"solid transparent 2px";

              echo '<div class="hit" modName="'.$hitAttribute['model'].'"
            title="position:'.$newindex.',score:'.$hitAttribute['score'].'"
            color="'.$color.'" style="background:'.$color.';
            border-right:'.$rborder.';border-left:'.$lborder.';
            opacity:'.$op.';height:'.$height.'px;top:'.$top.'px;">';

            echo "</div>";

          }

        }
      }
  }
  //wrap nucleotide in div. 
  echo'<div class="nucWrap">'.$nuc."</div>"; 

// Split into 50 character chunks        
if (($index % 50 )==0){
  echo"<br />";
}
echo "</div>";

$currentHits=array();
}

 echo "</div>";

I want to saythe following:If the checkbox(which has the classname="ModelName")is unchecked, hide the div which has the attribute"ModName="ModelName"" i.e if classname =Modname, Hide div, however i think my problem is navigating through the document, . Can anyone help please?

Just quietly: http://stackoverflow.com/questions/439110/is-it-alright-to-add-custom-html-attributes — phenomnomnominal, Jun 19 '12 at 10:37

score 1 · Answer 1 · edited May 07 '16 at 14:54

1

You can try this, for client side.

[jQuery] assuming you have a jQuery library loaded to your script place this at the end of your html page before closing body.

<script type="text/javascript">
    $(document).ready(function(){
     if($(".ModelName").attr("checked")=="checked"){
       // is checked
        $("div.ModelName").show();
     }else{
       // not checked
        $("div.ModelName").hide();
     }
    });
</script>

but if you need to not output the the rest of html if .ModelName has attribute checked, you need to process with PHP, make a IF statement to check it.

Edited:
Made some changes to hide the element that has a class ModelName, I'm using jQuery since is more simple and easy to use.

edited May 07 '16 at 14:54

marc_s

732,580
175
1,330
1,459

answered Jun 19 '12 at 10:39

Gntem

6,949
2
35
48

I tried using the above but didn't work, Ive never used Jquery before, so unsure, but do i just add the above to the head of my code and leave it as it is? – user1338194 Jun 19 '12 at 11:44
yes, but might want to work better on selector to target the specific elements, hide(), and , show() explain themselves – Gntem Jun 19 '12 at 11:48
edited, should work, by selectors i mean how you specify which is the elment that you need to hide/show, in the edited jquery code, i target div with class ModelName. take a look at the jquery documentation for more information http://docs.jquery.com/ – Gntem Jun 19 '12 at 12:10
oh sorry yea i understand what you mean, Thanks, im actually on that site the last while ,.. I cannot get that working? ..it makes sense to me, as i tried something almost identical earlier and couldn get it working either? – user1338194 Jun 19 '12 at 12:18
make some debugging to see if the elements have the correct class , use firebug inspect, there should be no reason that it won't work, it looks simple. – Gntem Jun 19 '12 at 12:22

toggle Color divs on and off using checkbox

1 Answers1