• 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
494 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ź 216 wizyt
0 głosów
1 odpowiedź 297 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ź 162 wizyt

93,008 zapytań

141,975 odpowiedzi

321,256 komentarzy

62,350 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

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...