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

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

VPS Starter Arubacloud
0 głosów
322 wizyt
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ź

0 głosów
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)
komentarz 21 września 2016 przez niezalogowany

Tutaj jest Pański jsfiddle. Proszę o doprowadzenie go do stanu błędu o który Panu chodzi, podlinkowanie i wtedy bez problemu pomogę :)

Podobne pytania

0 głosów
1 odpowiedź 201 wizyt
0 głosów
1 odpowiedź 264 wizyt
pytanie zadane 9 września 2017 w Rozwój zawodowy, nauka, praca przez shy_fox Gaduła (4,320 p.)
0 głosów
1 odpowiedź 138 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...