javascript - div keeps moving when div next to it is removed -
i'm making windows 8 metro styled website , when click 1 of squares bounces jquery .slideup(). when slid up, square next jumps in it's place, not want.
$(document).ready(function() { $(".blok").click(function() { $(this).slideup(1200, "easeoutbounce"); }); });html, body { margin: 0; padding: 0; width: 100%; height: 100%; } .menu { height: 8%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: white; background-color: #363636; font-family: "raleway", sans-serif; font-size: 50px; } .inhoud { height: 84%; width: 100%; } .blok { background-color: #ec1d25; display: flex; float: left; overflow: auto; align-items: center; justify-content: center; box-sizing: border-box; color: white; text-align: center; font-size: 36px; font-family: "raleway", sans-serif; } #blokgroot { height: 100%; width: 50%; background-color: #2d89ef; } #blokmiddel { height: 50%; width: 50%; background-color: #1e7145; } #blokklein1 { height: 50%; width: 25%; background-color: #7e3878; } #blokklein2 { height: 50%; width: 25%; background-color: #da532c; } .footer { height: 8%; box-sizing: border-box; color: white; background-color: #363636; font-family: "raleway", sans-serif; text-align: center; }<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"> <!--dit laadt het raleway lettertype: --> <link href='https://fonts.googleapis.com/css?family=raleway:200,300' rel='stylesheet' type='text/css'> <!--dit laadt jquery: --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> <!--dit laadt jqueryui: --> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"> </script> <!--dit de header: --> <div class="menu"> max </div> <!--dit alle inhoud emt de 4 vakken: --> <div class="inhoud"> <div class="blok" id="blokgroot"> <a href="#" id="overmij-link"> <img src="svg/overmij.svg" alt="over mij" height="150"> </a> </div> <div class="blok" id="blokmiddel"> <a href="#" id="informatica-link"> <img src="svg/informatica.svg" alt="informatica" height="150"> </a> </div> <div class="blok" id="blokklein1"> <a href="#" id="muziek-link"> <img src="svg/muziek.svg" alt="muziek" height="150"> </a> </div> <div class="blok" id="blokklein2"> <a href="#" id="hobbies-link"> <img src="svg/hobbies.svg" alt="hobbies" height="150"> </a> </div> </div> <!--dit de footer: --> <div class="footer"> (c) 2015 </div>
a wrapper in each .blok 1 solution here, slide .wrapblok instead of .blok.
to control display of .blokwrap , .bloktext, can use float: or position: , when slide out image, text slide or "behind".
css
.blok { overflow: hidden; /* make blok no scroll , have bloktext scroll content */ } .blokwrap { height: 100%; width: 100%; etc... } .bloktext { height: 100%; width: 100%; overflow: auto; /* make scroll might if content big */ etc... } html
<div class="blok" id="blokgroot"> <div class="blokwrap"> <a href="#" id="overmij-link"> <img src="svg/overmij.svg" alt="over mij" height="150"> </a> </div> <div class="bloktext"> here can have text etc... </div> </div> etc... here quick sample show how works, altered "blokklein1" item , of css.
$(document).ready(function() { $(".blokwrap").click(function() { $(this).slideup(1200, "easeoutbounce"); }); });html, body { margin: 0; padding: 0; width: 100%; height: 100%; } .menu { height: 8%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: white; background-color: #363636; font-family: "raleway", sans-serif; font-size: 50px; } .inhoud { height: 84%; width: 100%; } .blok { background-color: #ec1d25; float: left; overflow: hidden; box-sizing: border-box; color: white; text-align: center; font-size: 36px; font-family: "raleway", sans-serif; } .blokwrap, .bloktext { background-color: #ec1d25; display: flex; float: left; overflow: auto; align-items: center; justify-content: center; box-sizing: border-box; color: white; text-align: center; font-size: 36px; font-family: "raleway", sans-serif; } #blokklein1 .blokwrap { height: 100%; width: 100%; background-color: #7e3878; } #blokklein1 .bloktext { height: 100%; width: 100%; background-color: #fff; color: #000; } #blokgroot { height: 100%; width: 50%; background-color: #2d89ef; } #blokmiddel { height: 50%; width: 50%; background-color: #1e7145; } #blokklein1 { height: 50%; width: 25%; background-color: #7e3878; } #blokklein2 { height: 50%; width: 25%; background-color: #da532c; } .footer { height: 8%; box-sizing: border-box; color: white; background-color: #363636; font-family: "raleway", sans-serif; text-align: center; }<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"> <!--dit laadt het raleway lettertype: --> <link href='https://fonts.googleapis.com/css?family=raleway:200,300' rel='stylesheet' type='text/css'> <!--dit laadt jquery: --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> <!--dit laadt jqueryui: --> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"> </script> <!--dit de header: --> <div class="menu"> max </div> <!--dit alle inhoud emt de 4 vakken: --> <div class="inhoud"> <div class="blok" id="blokgroot"> <a href="#" id="overmij-link"> <img src="svg/overmij.svg" alt="over mij" height="150"> </a> </div> <div class="blok" id="blokmiddel"> <a href="#" id="informatica-link"> <img src="svg/informatica.svg" alt="informatica" height="150"> </a> </div> <div class="blok" id="blokklein1"> <div class="blokwrap"> <a href="#" id="muziek-link"> <img src="svg/muziek.svg" alt="muziek" height="150"> </a> </div> <div class="bloktext"> sample text... </div> </div> <div class="blok" id="blokklein2"> <a href="#" id="hobbies-link"> <img src="svg/hobbies.svg" alt="hobbies" height="150"> </a> </div> </div> <!--dit de footer: --> <div class="footer"> (c) 2015 </div>
Comments
Post a Comment