• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jquery/JS - zsuwający się div (slideDown) przesuwa resztę elementów na stronie

Object Storage Arubacloud
0 głosów
437 wizyt
pytanie zadane 26 września 2017 w HTML i CSS przez Śwież4k Bywalec (2,570 p.)

Mam problem otóż, gdy najeżdżam myszą na element - div  (id = wysowka) prawidłowo się wysuwa jednak przesuwa element, który jest bezpośrednio pod nim (div z klasą pwdh), nie wiem jak zrobić, żeby wszystkie elementy zostały na swoim miejscu w trakcie i po całkowitym wysunięciu diva. Proszę o pomoc, ponieważ mnie już skończyły się pomysły na rozwiązanie tego problemu. Kod:

<html>
<head>


  <script
src="http://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script
src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>

<link href="css.css" rel="stylesheet">
</head>
<body>
  <script>
$('document').ready(function(){
  $('.zwijka').mouseover(function(){
  $('#wysowka').stop().slideDown(200);
  }); //end mouseover
$('.zwijka').mouseleave(function(){
  $('#wysowka').stop().slideUp(300);
}); //mouseleave wysowka
}); //end ready


  </script>
<div id="main">

</div>
<div id="nav">
  <div id="firstButton" class="zwijka">

    </div>
</div>
<div id="mainbody">
  <div id="wysowka" class="zwijka">
    </div>
	<div class="pwdh">
		<P>ll</P>
		</div>

</div>



</body>
</html>

 

body {
margin:0;
padding: 0;
width: 100%;
overflow: auto;

}

#main {
height:21%;
width:100%;
background-color: navy;

}
#nav{
height:18%;
width:100%;
background-color: blue;

}
#firstButton {
height: 100%;
width: 15%;
background-color: grey;
float: left;
margin-left: 5%;

}

#wysowka {
display: none;
height:35%;
width:15%;
background-color: #DDD;
margin-left: 5%;
 position: relative;
    left: 0px;
    top: 0px;
    z-index: -1;
}

#mainbody {

	
}

.pwdh{
 position: relative;
    left: 0px;
    top: 0px;
    z-index: -1;
	
	
}

 

komentarz 26 września 2017 przez cyklop123 Bywalec (2,790 p.)
o ile mi wiadomo to ta funkcja zmienia margines zewnętrzny i wewnętrzny.

Spróbuj użyć pozycjonowania
komentarz 26 września 2017 przez Śwież4k Bywalec (2,570 p.)
Masz na myśli zamiast margin-left: 5% dać left : 5%?

1 odpowiedź

+1 głos
odpowiedź 26 września 2017 przez Chess Szeryf (76,710 p.)

Nadaj pojemnikowi position:absolute, a dla dziecka position:relative.

komentarz 26 września 2017 przez Śwież4k Bywalec (2,570 p.)
Jak Ty geniusz <3

Podobne pytania

0 głosów
2 odpowiedzi 701 wizyt
+1 głos
3 odpowiedzi 546 wizyt
pytanie zadane 5 grudnia 2016 w Nasze projekty przez Horace17 Obywatel (1,070 p.)
0 głosów
1 odpowiedź 158 wizyt
pytanie zadane 22 grudnia 2015 w JavaScript przez Miko Obywatel (1,480 p.)

92,699 zapytań

141,614 odpowiedzi

320,146 komentarzy

62,058 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...