• 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ół

Fiszki IT
Fiszki IT
0 głosów
118 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ź 150 wizyt
0 głosów
1 odpowiedź 177 wizyt
pytanie zadane 9 września 2017 w Rozwój zawodowy, nauka, szkoła, praca przez shy_fox Gaduła (4,320 p.)
0 głosów
1 odpowiedź 96 wizyt
Porady nie od parady
Komentarze do pytań nie służą do odpowiadania, od tego jest wydzielona sekcja odpowiedzi. Funkcją komentarzy jest natomiast możliwość uzyskania dodatkowych informacji na temat samego posta.Komentarze

84,736 zapytań

133,542 odpowiedzi

295,952 komentarzy

56,001 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...