javascript - How to Add Rows/ Columns of Divs -


code here: http://jsfiddle.net/jaredasch1/6dhc240q/5/

i know i've asked question before, wasn't able working answer that. i'm working on game starts out 4 4 grid, , when click on 1 of divs, toggles color of divs above, below, , next 2 1 being clicked on. part working fine, , when other color, switch original color. however, i'm trying has presented more of challenge. once second color, want add column , row , reset them original color.

this have run trouble. reason, grid isn't recreated. guys come in. need hep writing function or edits original script make happen. have on jsfiddle here

i'll post of code here.

<!doctype html> <body>     <div id="button" class="on hover"></div> <br>     <div class="block hover"></div>     <div class="block hover"></div>     <div class="block hover"></div>     <div class="block hover"></div> <br>     <div class="block hover"></div>     <div class="block hover"></div>     <div class="block hover"></div>     <div class="block hover"></div> <br>     <div class="block hover"></div>     <div class="block hover"></div>     <div class="block hover"></div>     <div class="block hover"></div> <br>     <div class="block hover"></div>     <div class="block hover"></div>     <div class="block hover"></div>     <div class="block hover"></div> </body>

the css

.block {     height:100px;     width:100px;     border-radius:10px;     display:inline-block;     background-color:#33ccff; } #button {     height:100px;     width:410px;     border-radius:10px;     display:inline-block;     background-color:#ff6666;     margin-bottom:10px; } .on {     background-color:#d633ff; }

the javascript/jquery

var main = function () {     var checkall = function () {         var alldivs = $("div.block");         var classeddivs = $("div.block.on");          var alldivshaveclass = (alldivs.length === classeddivs.length);          if (alldivshaveclass) {             alldivs.removeclass("on");         }     };     $("div").mouseenter(function () {         $(this).fadeto("slow", 0.25);         $(this).css('cursor', 'pointer');     });     $("div").mouseleave(function () {         $(this).fadeto("slow", 1);         $(this).css('cursor', 'default');     });     $(".block").click(function () {         $(this).toggleclass("on");         $(this).prev().toggleclass("on");         $(this).nextall().eq(4).toggleclass("on");         $(this).next().toggleclass("on");         $(this).prevall().eq(4).toggleclass("on");         checkall();     });     $("#button").click(function () {         $(".block").removeclass("on");     });     $(document).keydown(function (key) {         if (event.which === 32) {             $(".block").removeclass("on");         }     }); };  $(document).ready(main);

any welcome!

while think both html , javascript can use lot more improvements, here's bare minimum working:

first of all, because amount of blocks per row (and amount of rows) going change, can't use hardcoded .eq(4) filter anymore. need track variable number , add 1 every new level.

var blocksperrow = 4;

replace hardcoded .eq(4) .eq(blocksperrow) now.

whenever want add new block each row have find <br> element , add new block after it. can create new block cloning random 1 (i chose first one). use true argument when cloning copy events bound it:

var newblock = $('.block:first'); $('br').after( newblock.clone(true) );

you want add entire row, either use variable before , add many blocks, or grab last br plus items follow , clone those. append them after last block.

var newrow = $('br:last').nextall().andself(); $('.block:last').after( newrow.clone(true) );

now time update variable

blocksperrow++;

last thing fix styling. use inline blocks , rely on spaces between elements create whitespace. breaks when clone last row, it's better rely on actual margins spacing anyway. did trick:

.block {     float: left;     display: block;     margin: 3px; } br {     clear: both; }

here see working example: jsfiddle

as can see added "cheat" button can check works.


Comments

Post a Comment

Popular posts from this blog

php - Submit Form Data without Reloading page -

i know question has been asked , answered bunch of times life of me can not solution work on code. believe if redo code, work properly, , in retrospect time i've spent on issue should have redone code...but beyond deadline , have working prototype up... can advise how update multiple forms on single page without reloading page? horrible @ php , complete noob js/jquery/ajax @ best. html/php in single file , believe causing me problems/is largest obstacle @ getting ajax form processing work. basically, want users to: select teams multiple dropdowns in form group 1 (league champs) , on update update db newly selected team without reloadding page. edit team scores per match , on score submit/update, update db new scores. for each requirement there multiple forms (1 each leagues, 1 each per match) have set class on each form id. everything works via php, form submission reloads page each time submitted , not ideal. i have tried ajax code here http://scotch.io/tutoria...
Read more

linux - Rails running on virtual machine in Windows -

the reason why want switch ubuntu people said gems works better on linux on windows. i don't want macbook pro rails development since love windows , cannot stand lack of apps mac. moreover, people saying ubuntu "better" mac: http://www.reddit.com/r/ubuntu/comments/1bgj1s/are_there_advantages_of_ubuntu_over_os_x_for/ does virtual box work enough doesn't have lag @ all? using i7-3517u cpu 8gb memory. need program in environment lag-free , not sluggish. or there alternatives recommend? i unsure permission settings or complicated stuffs regarding terminal. i'll using terminal develop. i'm still quite new here development in linux. please kind me >< thanks. @holyxiaoxin pretty sure should asking on superuser instead. nevertheless, suggest install ubuntu in partition instead of running virtual machine. here's guide https://help.ubuntu.com/community/windowsdualboot also, yes. developing in virtual machine accurate, @ end experiment w...
Read more