Inne elementy div przesuwają się o długość rozwijanego zdjęcia w dół

pytanie zadane 21 września 2016 w JavaScript przez DariuszH Gaduła (3,100 p.)

Witam. Od dłuższego czasu głowię się nad jednym problemem. Otóż w kodzie jQuery mam zmienną przypisaną tylko do zdjęcia (u Was będzie brak zdjęcia :) ) w momencie gdy zdjęcie jest rozwijane dzięki funkcji toggle(1000) to przesuwa mi inne elementy

<!DOCTYPE html>
<HTML>
<HEAD>
<META charset="UTF8">
<link rel="Stylesheet" type="text/css" href="index.css" />

<link href="https://fonts.googleapis.com/css?family=PT+Sans+Caption|Sigmar+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


</HEAD>

<script type="text/javascript">
$(document).ready(function(){
    $("#foto").each(function(){
        $("#foto").toggle(1000);   
       
    });
	
});

</script>


<BODY>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->



<div id="main">

    <div id="symbol"><img src="programming.png" style="widht:10vh; height:10vh; position:relative; top:1.2vh; left:2.5vh;">  </div>
	<div id="text">DARIUSZ HOZER </div>
	<div id="text1">PORTFOLIO</div>

</div>
	
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->	
	
	<div id="centrum">
		
	
		<div id="foto"><img src="darek.png" style="widht:30vh; height:30vh; border:0.1vh solid black; margin:0px;padding:0px; z-index:1;"></div>
	
	
	<div id="writeme">  czyli wyrównanie do obu marginesów jednocześnie (align="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (align="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (align="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (align="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (align="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie
		(align="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (align="justify")... 	
			
		</div>
	
		
	
	
	
	
	
	
	
	
		
	  
	 	
	
	 
		
		
    </div>

</div>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

<div id="down">

	
</div>




</BODY>
</HTML>

body{
	
	margin:0px;
	
}

#main{
	position: fixed;
    top: 0;
    left: 0;
    right: 0;
	bottom:0;
	width:100%;
	height:12.5vh;
	background-repeat:no-repeat;
	background-color:black;
	background-size: 100% 100%;	
	z-index:2;
	
}

#text{
    position:absolute;
	right:3vh;
	top:1.8vh;
	color:white;
	font-family: 'PT Sans Caption', sans-serif;
	text-align:center;
	font-size:4vh;
	animation-name: example;
    animation-duration: 1s;

	
}



#text1{
	position:absolute;
	top:7vh;
	right:8.3vh;
	color:white;
	font-family: 'Handlee', cursive;
	font-size:2.3vh;
	letter-spacing:0.5vh;

}



#centrum{
	
	width:100%;
	height:350vh;
	background-repeat:no-repeat;
	background-color:white;
	background-size:100% 100%;
    
}





#foto{
	
	position:relative;
	top:16vh;
	left:169vh;
	display:none;
	
	
	
}



#writeme{
	float:left;
	top:10vh;
	width:40.5vh;
	height:25vh;
	left:10vh;
	border:0.1vh solid black;
	font-family: 'PT Sans Caption', sans-serif;
	color:black;
	font-size:1.5vh;
	text-align:justify;
	margin:0px;
	
	
	
}



#down{
	
	width:100%;
	height:19vh;
	background-color:black;
	background-size: 100% 100%;	
	background-repeat:no repeat;

}

w dół o długość zdjęcia.

1 odpowiedź

odpowiedź 21 września 2016 przez niezalogowany

Jeżeli dobrze Cię zrozumiałem, to nie chcesz by content nie przewijał się w dół. Najprostszą odpowiedziłą: zarezerwuj miejsce dla tego obrazka i wysuń go tam

Przykład: jsfiddle

Mam nadzieję że o to chodziło bo chyba nie do końca zrozumiałem pytanie...

Pozdrawiam,

Stefan

komentarz 21 września 2016 przez DariuszH Gaduła (3,100 p.)

Mniej więcej tak wygląda problem. Jak odseparować 2 od 1, by nie była spychana w dół przez zdjęcie (marginesy wywaliłem)

komentarz 21 września 2016 przez niezalogowany

myślałeś może o nadaniu toogle'owanemu elementowi większego z-index'u? To by załatwiło sprawę, bo pojawiał by się nad content'em

komentarz 21 września 2016 przez DariuszH Gaduła (3,100 p.)

Zaraz sprawdzę, wcześniej robiłem to z-index:1,2 ale z poziomu css. Nie sądziłem że parametry css można wklejać do kodu html ? :)

komentarz 21 września 2016 przez DariuszH Gaduła (3,100 p.)

Się znaczy do kodu javascript :)

komentarz 21 września 2016 przez niezalogowany

doklej do CSS, który styluje elementy HTML wypluwane przez JS. Nie mieszaj warstw bo potem zmiany w projekcie będą strasznie czasochłonne.

BTW. Nie wiem czy to "z-index:1,2" to błąd, czy mówisz o przypisaniu wyskakującemu zdjęciu z-index=2... Jeżeli to pierwsze, to masz robaka w kodzie, bo z-index obsługuje tylko wartość auto bądź liczby całkowite ;)

komentarz 21 września 2016 przez DariuszH Gaduła (3,100 p.)

Generalnie pytanie brzmi, bo widzę że nie rozumiecie mnie :) Jak animować zdjęcie z prawej a zostawić tabelkę z prawej :) Niech sobie będzie w pozycji ustalonej (float czy relative)