javascript - Dynamic alignment of div with array containing checkbox -
first, apologize grammar i'm french (and said frenchy su** in grammar, i'm trying improve myself)
so, i've table array automatically generated upload of excel list. table generated contain checkboxes. when click on checkboxes you've div appears. in div can wrote text reported in excel document , you've submit validation. summary guest check-list.
the length of table variable , align div checkbox clicked. (you click , right there div appears).
i've try fixed position not enought precise. can tell me how can or i've search ?
<? header('content-type: text/html; charset=utf-8'); ?> <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script type="text/javascript" src="test.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".slidingdiv").hide(); $(".show_hide").show(); $('.show_hide').click(function(){ $(".slidingdiv").slidetoggle(); }); }); <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="test.css" media="all"/> <title>ceci est une page html de test</title> </head> <script type="text/javascript" language="javascript" src="find5.js"> <form action = "check.php" method="get"> <div class="slidingdiv" style="text-align:center; float:right; width : auto;"> <input type="checkbox" name="vestiaire[]" /><label>vestiaire</label> <input type="text" name="commentaire" /> <input type="submit" value="valider" /> <a href="#" class="show_hide">cacher</a></div> <ul> <?php error_reporting(0); include("script.php"); $i = 1; foreach ($invites $invite) { if($invite[0] != '' && $invite[1] == '') { echo ' <li> <div class="circle" style="float:left;"></div> <h4>'.$invite[0].'</h4> <input class="show_hide" name="checkbox[]" id="'.$i.'" value="'.$i.'" type="checkbox" style="visibility:hidden" /> <label for="'.$i.'"><i class="fa fa-check"></i></label> </li>'; } $i++; }
hum don't know if more clear code, div wich want dynamically align "slidingdiv" !
first of all, html structure useful classes.
<form action = "check.php" method="get"> <!-- div never used directly rather cloned--> <div id="originalslidingdiv" class="slidingdiv" style="text-align:center; float:right; width : auto;"> <input type="checkbox" name="vestiaire[]" /> <label>vestiaire</label> <input type="text" name="commentaire" /> <input type="submit" value="valider" /> <!-- add different classes "cacher" button , checkbox must behave bit differently--> <a href="#" class="show_hide_btn">cacher</a> </div> <ul> <li class="item"> <div class="circle"></div> <h4 class="item-name">bla</h4> <input class="show_hide_cb" name="checkbox[]" id="a" value="a" type="checkbox" /> <label for="a"><i class="fa fa-check"></i></label> </li> <li class="item"> <div class="circle"></div> <h4 class="item-name">blo</h4> <input class="show_hide_cb" name="checkbox[]" id="b" value="b" type="checkbox" /> <label for="b"><i class="fa fa-check"></i></label> </li> </ul> </form> then, jquery make work properly:
$(document).ready(function(){ var originalslidingdiv = $('#originalslidingdiv'), slidingdiv; $(".slidingdiv").hide(); $(".show_hide").show(); // when clicking each item's checkbox. $('.show_hide_cb').on('click', function() { // check if appended slidingdiv already. slidingdiv = $(this).parent().find('.slidingdiv'); // if not, clone it, remove id append parent (.item). if (slidingdiv.length === 0) { slidingdiv = originalslidingdiv.clone(true, true) .attr('id', '') .appendto($(this).parent()); } // toggle display. slidingdiv.slidetoggle(); }); // when clicking hide button (cacher). $('.show_hide_btn').on('click', function(e) { e.preventdefault(); // $(this).parent() .slidingdiv element, toggle display. $(this).parent().slidetoggle(); // $(this).parent().siblings('.show_hide_cb') checkbox, want unchecked. $(this).parent().siblings('.show_hide_cb').attr('checked', false); }); }); you can find enough explanations in comments. clone .slidingdiv when necessary, append clicked item, , toggle display, hide slidingdiv when click button "cacher". uncheck checkbox initial state.
finally, little css make wanted:
.slidingdiv { text-align: center; float: left; } .item { margin-top: 1em; /* add margin it's removed h4 */ } .circle { float: left; } .item-name { display: inline-block; margin-top: 0; /* remove margin allow alignment */ } jsfiddle: https://jsfiddle.net/superbiche/fhqcvbpe/
and yeah, i'm french :)
Comments
Post a Comment