Dziedziczenie klasy od diva, który pójdzie pod spób przy mniejszej rozdzielczości ekranu

Question

Witam.

Jest taka sprawa.

Ułożyłem 5 divów obok siebie. W momencie gdy zmniejszam szerokość okna przeglądarki jak mogę zrobić aby ostatni div z prawej strony poszedł pod spód i w tym momencie nowy div, który zajął jego miejsce otrzymał od niego klasę .last? Bo szczerze już nie mam pomysłów jak to rozwiązać.

Zależy mi aby gdy mamy div1 div2 div3 to div3 idzie pod spód dostaje klasę od div2 a div2 dostaje klasę od div3

Answer 1

JS

onload, onresize -> if szerokośc okna <= szerokość łamiąca layout -> usuwaj / dodawaj klasy do odpowiednich divów

Comments

I tylko za pomocą JS mogę to zrobić ?

Nie mogę pokombinować coś z CSS @media all and... i później display:block, display: none ? Będzie miało to sens ?

---

Jeśli zrobisz dwa ostatnie divy podwójnie... no niby da radę, jednak nadal stawiałbym na JS

---

A mógłby kolega napisać przykładowy skrypt z warunkiem ? Dostosować jeszcze dam radę pod swój kod.

Niestety nie znam JS, a przy obecnym projekcie na naukę jest trochę za późno. Mam w planach siąść do JS ale po ukończeniu projektu.

Tak by to u mnie obecnie wyglądało.

---

A proszę bardzo https://codepen.io/Argeento/pen/awqpyV

---

A co zrobić jeżeli w divie są jeszcze zagnieżdżone inne klasy ?

Kod poniżej:

Tak to wygląda u mnie obecnie bez JS

<div class="row">
		<figure id="product_97808" class="product">
			<a src="#" title=""><img src="../97807.png" class="product-photo" alt="" /></a>
				<span>New</span>
					<figcaption class="product-properties"><p class="name-of-product">Pierścionek Stal Nierdzewna 141222</p><br><p class="properties-of-product">Charakterystyka:</p><br><p class="detailed-properties-of-product">Materiał: stal 316L<br>
    Kolory: srebrny, złoty, miedziany<br>
    Rozmiary: 17, 18, 19<br>
    Regulacja: nie</p><br>
    	<a href="#" title="" class="view-details"><p>POKAŻ SZCZEGÓŁY &gt;</p></a>
    		</figcaption>
		</figure>
		
		<figure id="product_97809" class="product">
			<a src="#" title=""><img src="../97807.png" class="product-photo" alt="" /></a>
				<span>New</span>
					<figcaption class="product-properties"><p class="name-of-product">Pierścionek Stal Nierdzewna 141222</p><br><p class="properties-of-product">Charakterystyka:</p><br><p class="detailed-properties-of-product">Materiał: stal 316L<br>
    Kolory: srebrny, złoty, miedziany<br>
    Rozmiary: 17, 18, 19<br>
    Regulacja: nie</p><br>
    	<a href="#" title="" class="view-details"><p>POKAŻ SZCZEGÓŁY &gt;</p></a>
    		</figcaption>
		</figure>
		
		<figure id="product_97810" class="product">
			<a src="#" title=""><img src="../97807.png" class="product-photo" alt="" /></a>
				<span>New</span>
					<figcaption class="product-properties"><p class="name-of-product">Pierścionek Stal Nierdzewna 141222</p><br><p class="properties-of-product">Charakterystyka:</p><br><p class="detailed-properties-of-product">Materiał: stal 316L<br>
    Kolory: srebrny, złoty, miedziany<br>
    Rozmiary: 17, 18, 19<br>
    Regulacja: nie</p><br>
    	<a href="#" title="" class="view-details"><p>POKAŻ SZCZEGÓŁY &gt;</p></a>
    		</figcaption>
		</figure>
		
		<figure id="product_97819" class="product">
			<a src="#" title=""><img src="../97807.png" class="product-photo" alt="" /></a>
					<figcaption class="product-properties"><p class="name-of-product">Pierścionek Stal Nierdzewna 141222</p><br><p class="properties-of-product">Charakterystyka:</p><br><p class="detailed-properties-of-product">Materiał: stal 316L<br>
    Kolory: srebrny, złoty, miedziany<br>
    Rozmiary: 17, 18, 19<br>
    Regulacja: nie</p><br>
    	<a href="#" title="" class="view-details"><p>POKAŻ SZCZEGÓŁY &gt;</p></a>
    		</figcaption>
		</figure>
		
		<figure id="product_97811" class="product">
			<img src="../97807.png" class="product-photo" alt="" />
			<figcaption class="product-properties"><p class="name-of-product-last">Pierścionek Stal Nierdzewna 141222</p><br><p class="properties-of-product-last">Charakterystyka:</p><br><p class="detailed-properties-of-product-last">Materiał: stal 316L<br>
    Kolory: srebrny, złoty, miedziany<br>
    Rozmiary: 17, 18, 19<br>
    Regulacja: nie
</p><a href="#" title="" class="view-details-last"><p>POKAŻ SZCZEGÓŁY &gt;</p></a>
    		</figcaption>
		</figure>
	</div>

 

CSS

.product {
	border: 1px solid black;
	width: 23rem;
	display: inline-block;
	position: relative;
	margin-top: -1px;
	margin-left: -3px;
}

.product a {
	cursor: pointer;
}

.product img {
	width: 100%;
	max-width: 100%;
	z-index: 0;
	position: relative;
}

.product-properties {
	position: absolute;
	height: 100%;
	width: 200%;
	top: 0;
	left: 0;
	z-index: -1;
	background: white;
	opacity: 0;
	transition: all .3s ease-in-out;
}


.proporties-position {
	position: absolute;
}

.product > span {
	position: absolute;
	top: .5rem;
	left: .5rem;
}

.product-properties > p,.view-details {
	position: absolute;
	word-wrap: break-word;
	font-size: 1.3rem;
	color: #111c22;
	left: 23.5rem;
}

.name-of-product {
	top: .5rem;
}

.product-properties > .properties-of-product {
	top: 2.4rem;
}

.product-properties > .detailed-properties-of-product {
	left: 24.7rem;
	top: 5rem;
	text-align: left;
	font-weight: 300;
}

.product-properties > .view-details {
	bottom: 5px;
	text-decoration: none;
	font-size: 1.2rem;
}

.product-properties > .name-of-product-last,.view-details-last {
	position: absolute;
	left: .5rem;
	word-wrap: break-word;
	font-size: 1.3rem;
	color: #111c22;
}

.name-of-product-last {
	top: .5rem;
}

.product-properties > .properties-of-product-last {
	top: 2.4rem;
	left: .5rem;
}

.product-properties > .detailed-properties-of-product-last {
	left: 1.8rem;
	top: 5rem;
	text-align: left;
	font-weight: 300;
}

.product-properties > .view-details-last {
	bottom: 5px;
	text-decoration: none;
	font-size: 1.2rem;
}

.row .product:last-child > .product-properties{
	width: 100%;
}

.product:hover .product-photo {
	z-index: 2;
}

.row .product:last-child:hover > .product-photo{
	z-index: 0;
}

.product:hover > .product-properties {
	opacity: 1;
	z-index: 1;
	transition: all .3s ease-in-out;
}

 

Answer 2

Chyba o to chodziło :) Kod nie jest zbyt optymalny ale działa chyba jak należy z tego co jest opisane.

https://codepen.io/anon/pen/QgQpQO

Comments

To tez jest dobry przykład tego co potrzebuję, tylko mnie martwi jedna rzecz. Jak to zaimplementować jeżeli w powiedzmy div mam inne elementy. Czy w tym przypadku muszę pisać osobny kod JS dla każdego elementu ?

Answer 3

Może zapytam inaczej. Co zrobić aby po zmniejszeniu okna do momentu gdy są wyświetlane 4 obrazki to po najechaniu na 4 obrazek właściwości również wyświetlały się tak jak na ostatnim obrazku w pełnym oknie przeglądarki

niżej link z moim kodem

https://codepen.io/krzysztofdesign/pen/awqWoo

Comments

A nie lepiej będzie jak po prostu zrobisz, zeby zawsze sie wyswietlaly te szczegóły w ten sposób?

---

Nie spodziewałem się, że z takim detalem będzie aż tyle zachodu...

Takie niby nic. Znaczy można tak zrobić np. żeby po najechaniu na zdjęcie pokazywały się szczegóły w tylko tym elemencie bez rozszerzania go na sąsiedni div, ale tak to wygląda przejrzyściej moim zdaniem.

Cały problem, leży właśnie zawsze w tym ostatnim divie, który ma wyświetlić klasę w środku nie obok. Że nie można prościej zrobić tego dziedziczenia dla zagnieżdżonych elementów. No chyba, że można. Już sam nie wiem co o tym myśleć. Ewentualnie mogę jeszcze zrobić aby skalowało się to wraz ze zmniejszaniem okna i wtedy elementów zawsze będzie tyle samo tyle, że w pewnym momencie stanie się to nieczytelne... I wtedy będę musiał zrobić reorganizację treści.

---

Duzy problem to moze nie jest, ale nie wiem dokładnie o co chodzi, najlepiej jakbys sam sobie z tym poradzil. W każdym razie, teraz jak sie pokazuje obok opis, to ten opis zaslania element po prawej stronie. I nie mozna na niego najechac. Jezeli by sie opis wyswietlal na tym samym elemencie unikniesz tego problemu. A zeby wyglodalo to bardziej estetycznie mozesz zrobic przezroczyste tło, zeby, byl opis a pod spodem bylo widac zdjecie prześwitujące. Do uzyskania takiego opisu mozesz uzyc tez jakichs Tooltipow po najechaniu na element np cos takiego https://codepen.io/anon/pen/mwXwPz

---

Chodzi o to jak na stronie poniżej.

http://www.tiffany.com/jewelry/rings?lppromo=LPC1394#p+1-n+10000-c+287466-s+5-r+-t+-ni+1-x+-pu+-f+-lr+-hr+-ri+-mi+-pp+

Moim skromnym zdaniem a mój zmysł lubi minimalizm, uważam że jest to po prostu rewelacyjne i chciałem u mnie wprowadzić coś podobnego chociaż w małym stopniu. Fajna sprawa intuicyjna. I podoba mi się to, że np. jak najezdzasz myszką na obiekt z prawej strony to wykrywa krawędź ekranu i wyświetla właściwości na obiekcie z lewej strony. A u mnie niestety jak jest to ostatni obiekt to wyświetla się w nim a jak okno jest mniejsze to psuje się ten efekt. Jutro zrobię zrzuty i pokaże o co chodzi. Chcę po prostu aby to dobrze działało a na codeopen coś i tak mi się źle wkleił kod...

Jeszcze mam pytanie. Jak zrobić aby strona wykryła kiedy mam telefon a kiedy pc i załadowała odpowiedni plik HTML ?

---

Witam. Można to zrobić za pomocą zapytań medialnych. Dodać do elmentu klasę np.width-400 i aktywować tylko dla tej rozdzielczości itd. To jest odp. również na drugie pytanie.  Z tym, że ładowany jest odpowiedni  styl css.

Słowo klucz meda queries

---

W tym momencie używam Sony Xperia X z ekranem o rozdzielczości 1080p a tymczasem większość monitorów ma taką rozdzielczość. Jak dodam takie media queries owszem to zadziała ale chce przygotowac specjalna wersje strony mobilną.