javascript - how to create windows 8 look and feel but with expanding divs? -
i'm trying create interactive ui puzzle game have set width container , within 6 square divs (each 150x150px). 1 div expand open on page load. 1 div can open @ time. if click div open div must close first divs slide on make room div clicked open , expand. when slide cannot overlap each other. when div expanded measure 300x300px
any ideas on how started? tried using jquery .animate code got mess when went reverse actions of last click before proceeding actions of new click.
sorry being abstract, lemme know if there clarification needed. here built far...(its lot of spaghetti code). i'm doing - $('.yellow, .blue, .black, .grey, .purple, .pmadbig, .pmadsmall, .cache').attr('style', ''); clear done , reset puzzle. need reverse instead of snapping place.
<!doctype html> <html> <head> <style type="text/css"> .box { color: #222 } .wrap { background: none repeat scroll 0 0 #ffffff; border: 0; width: 750px; margin-right:auto; margin-left:auto; height:400px; border-right:1px red solid; border-left:1px red solid; position:relative; } .wrap1 { background: none repeat scroll 0 0 #ffffff; border: 0; border-right:1px red solid; border-left:1px red solid; width: 750px; margin-right:auto; margin-left:auto; height:75px; position:relative; } .yellow{ background-color:#ffdbac; float: left; font-size: 11px; position:absolute; width: 150px; height:150px; } .blue{ background-color:#007fff; float: left; font-size: 11px; left:150px; position:absolute; top:150px; width: 150px; height:150px; } .purple{ background-color:#4d2177; float: left; font-size: 11px; left:450px; position:absolute; width: 150px; height:150px; } .black{ background-color:#000000; position:absolute; color:white; left:300px; float: left; font-size: 11px; width: 150px; height:150px; } .grey{ background-color:#acacac; float:right; position:absolute; top:150px; left:300px; float: left; font-size: 11px; width: 150px; height:150px; } .green{ background-color:green; float:right; position:absolute; top:150px; left:450px; float: left; font-size: 11px; width: 150px; height:150px; } .red{ background-color:#cc0000; float:right; position:absolute; top:0px; left:600px; float: left; font-size: 11px; width: 150px; height:75px; } .pmadbig{ width:300px; height:100px; background-color:pink; bottom:0px; position:absolute; display:none; } .pmadsmall{ width:150px; height:75px; background-color:pink; bottom:0px; position:absolute; display:block; } .cache{ width:300px; height:75px; background-color:yellow; position:absolute; top:300px; display:none; } </style> <script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.yellow').click(function() { $('.yellow, .blue, .black, .grey, .purple, .pmadbig, .pmadsmall, .cache').attr('style', ''); $('.green').css('left','450px'); $('.yellow').animate({ width: '300', height: '400', top: '0' }, 250, function() { // animation complete. }); $('.pmadsmall').hide(); $('.grey, .black').animate({ left: '450' }, 250, function() { }); $('.blue').animate({ left: '300' }, 250, function() { }); $('.purple, .green').animate({ left: '600' }, 250, function() { $('.pmadbig').show(); }); }); $('.blue').click(function() { $('.yellow, .blue, .black, .grey, .purple, .pmadbig, .pmadsmall, .cache').attr('style', ''); $('.green').css('left','450px'); $('.blue').animate({ width: '300', height: '375', top: '0' }, 250, function() { // animation complete. }); $('.grey, .black').animate({ left: '450' }, 250, function() { }); $('.purple, .green').animate({ left: '600' }, 250, function() { $('.blue').append($('.cache')); $('.cache').slidedown(); }); }); $('.purple').click(function() { $('.yellow, .blue, .black, .grey, .purple, .pmadbig, .pmadsmall, .cache').attr('style', ''); $('.green').css('left','450px'); $('.blue').animate({ left: '0' }, 250, function() { $('.grey').animate({ left: '150' }, 250, function() { $('.green').animate({ left: '300' }, 250, function() { $('.purple').animate({ width: '300', height: '375' }, 250, function() { $('.purple').append($('.cache')); $('.cache').slidedown(); }); }); }); }); }); $('.black').click(function() { $('.yellow, .blue, .black, .grey, .purple, .pmadbig, .pmadsmall, .cache').attr('style', ''); $('.green').css('left','450px'); $('.blue').animate({ left: '0' }, 250, function() { $('.grey').animate({ left: '150' }, 250, function() { $('.purple, .green').animate({ left: '600' }, 250, function() { $('.black').animate({ width: '300', height: '375' }, 250, function() { $('.black').append($('.cache')); $('.cache').slidedown(); }); }); }); }); $('.grey').click(function() { $('.yellow, .blue, .black, .grey, .purple, .pmadbig, .pmadsmall, .cache').attr('style', ''); $('.green').css('left','450px'); $('.black').animate({ left: '150' }, 250, function() { $('.grey').animate({ width: '300', height: '375' }, 250, function() { $('.grey').append($('.cache')); $('.cache').slidedown(); }); }); }); }); $('.grey').click(function() { $('.yellow, .blue, .black, .grey, .purple, .pmadbig, .pmadsmall, .cache').attr('style', ''); $('.green').css('left','450px'); $('.black').animate({ left: '150' }, 250, function() { $('.green, .purple').animate({ left: '600' }, 250, function() { $('.grey').animate({ width: '300', top: '0px', height: '375' }, 250, function() { $('.grey').append($('.cache')); $('.cache').slidedown(); }); }); }); }); $('.green').click(function() { //$('div').attr('style', ''); if(typeof greenopen == "undefined"){ greenopen = false; } if(greenopen == false){ $('.green').animate({ height: '225' }, 250, function() { greenopen = true; }); } else{ $('.green').animate({ height: '150' }, 250, function() { greenopen = false; }); } }); $('.red').click(function() { //$('div').attr('style', ''); if(typeof redopen == "undefined"){ redopen = false; } if(redopen == false){ $('.red').animate({ left: '450', width: '300' }, 250, function() { redopen = true; }); } else{ $('.red').animate({ left: '600', width: '150' }, 250, function() { redopen = false; }); } }); function start(){ $('.blue').trigger('click'); } settimeout(start,500); }); </script> <title></title> </head> <body> <div id="wrapper"> <div class="wrap"> <div> <div class="yellow"> <p>elephant</p> <div class="pmadsmall"> <p>bonus points area</p> </div> <div class="pmadbig"> <p>pm ad big</p> </div> </div> <div class="blue" style="float:righr;"> <p>tiger</p> </div> </div> <div class="black"> <p>giraffe</p> </div> <div class="purple"> <p>monkey</p> </div> <div class="grey"> <p>snake</p> </div> <div class="green"> <p>bird</p> </div> </div> <div class="cache"> <p>bonus points area</p> </div><!-- end wrapper --> </div> </body> </html>
Comments
Post a Comment