Ustawienie elementów - PHP Jquery

[Sagitario]

Mam problem z ustawieniem elementów, walczę i nie mogę sobie z tym poradzić.

 

Pobieram wszystkie kategorie funkcją foreach (jest ich na teraz 27), chciałbym aby co druga linia była mniejsza o jedną kategorię. Nie chcę aby były stałe wartości np. 5,4,5,4, chciałbym aby w zależności od rozdzielczości ustawiane były na 100% szerokości ekranu.

 

Przykładowa rozdzielczość:

 

1920px

7,6,7,6

1000px

5,4,5,4

700px

3,2,3,2

 

 

 

 

[Mion]

A co ma Jquery wspólnego z PHP, ze w tym dziale piszesz ?

[Sagitario]

A co ma Jquery wspólnego z PHP, ze w tym dziale piszesz ?

 

Pisze w tym dziale bo przeczytałem tytuł działu.

[pabel]

Niezbyt to "czysty" sposób ale najbardziej banalny jaki mi przyszedł do głowy.

1.Każdy rząd kwadratów to div.
2. Tam gdzie mniej kwadratów to div na np. 80% albo większe paddingi.

3. Wygeneruj sobie tyle tych zestawów ile potrzebujesz dla wszystkich potrzebnych rozdzielczości. (w php w pętli z modulo)

4. W css-ach za pomocą @media i display: none; ukrywaj niepotrzebny zestaw a pokazuj odpowiedni (dla danej rozdzielczości).

Minus - Będziesz miał syf w kodzie.

 

Myślę że możesz też wstawiać co n kwadratów pustego diva o 1/2 szerokości kwadratu w zależności od szerokości ekranu, który Ci rozepchnie rząd z mniejszą ilością kwadratów - do zabawy z jquery. Szerokość ekranu przechwycisz. 

 

[Sagitario]

1.Każdy rząd kwadratów to div. 2. Tam gdzie mniej kwadratów to div na np. 80% albo większe paddingi. 3. Wygeneruj sobie tyle tych zestawów ile potrzebujesz dla wszystkich potrzebnych rozdzielczości. (w php w pętli z modulo) 4. W css-ach za pomocą @media i display: none; ukrywaj niepotrzebny zestaw a pokazuj odpowiedni (dla danej rozdzielczości). Minus - Będziesz miał syf w kodzie.

 

Odpada, za duży bajzel

 

Myślę że możesz też wstawiać co n kwadratów pustego diva o 1/2 szerokości kwadratu w zależności od szerokości ekranu - do zabawy z jquery.

 

Też o tym myślałem ale nie mam pojęcia jak obliczyć to "n".

 

Na razie zrobiłem to dość statycznie, powyżej 1000px jest 5,4,5,4, poniżej 3,2,3,2, mobilnie jeden div.

 

Jak będziesz miał jakieś pomysły napisz, dzięki.

[pabel]

W jquery przechwycisz szerokość ekranu. 
Zrób kilka if-ów
dla szerokości x1 - boksów y1 (szerokość boksu z1 wyliczysz).

dla szerokości x2 - boksów y2 (szerokość boksu z2 wyliczysz).
itd.

 

W pętli

w pierwszym kroku po y+1 wstaw sobie taki "rozpychacz" - pusty boks o szerokości 1/2 boksu.
W kolejnych po (y +y -1).

 

Albo jak w pierwszym przykładzie - każdy rząd to div. Szerokość diva albo jego padding  (ten z mniejszą liczbą boksów) wyliczysz sobie dynamicznie w pętli przez modulo.
Nie będzie syfu w kodzie.


 

 

[Sagitario]

Albo jak w pierwszym przykładzie - każdy rząd to div.

 

Ale nie wiem kiedy się div ma skończyć po 3, 4, czy 5 kategoriach

 

W jquery przechwycisz szerokość ekranu. Zrób kilka if-ów dla szerokości x1 - boksów y1 (szerokość boksu z1 wyliczysz). dla szerokości x2 - boksów y2 (szerokość boksu z2 wyliczysz). itd. W pętli w pierwszym kroku po y+1 wstaw sobie taki "rozpychacz" - pusty boks o szerokości 1/2 boksu. W kolejnych po (y +y -1).

 

Łatwiej zrobić już np tak, ale muszę wszystko przewidzieć a chciałbym aby "samo" przeliczało

https://jsfiddle.net/dWkdp/1914/

[pabel]

No i oki. Ale jakąś stałą musisz mieć np. szerokość ekranu lub boksu. 

Nie możesz sobie teraz wygenerować zestawu dla 4-3, 5-4. 6-5 itd.?

I w zależności od szerokości podrzucasz odpowiedni zestaw?

 

[Sagitario]

Mogę np. tak

if ($(window).width() < 960) {

Ale tych zestawów będzie kilka i tego chciałbym uniknąć. Jak nie znajdę rozwiązania to tak zrobię.

 

Jeszcze się pobawię może coś wymyślę

[Sagitario]

Niezbyt to "czysty" sposób ale najbardziej banalny jaki mi przyszedł do głowy.

1.Każdy rząd kwadratów to div.

2. Tam gdzie mniej kwadratów to div na np. 80% albo większe paddingi.

3. Wygeneruj sobie tyle tych zestawów ile potrzebujesz dla wszystkich potrzebnych rozdzielczości. (w php w pętli z modulo)

4. W css-ach za pomocą @media i display: none; ukrywaj niepotrzebny zestaw a pokazuj odpowiedni (dla danej rozdzielczości).

Minus - Będziesz miał syf w kodzie.

 

Myślę że możesz też wstawiać co n kwadratów pustego diva o 1/2 szerokości kwadratu w zależności od szerokości ekranu, który Ci rozepchnie rząd z mniejszą ilością kwadratów - do zabawy z jquery. Szerokość ekranu przechwycisz. 

 

Znalazłem takie cudo, czysty css3. Nie do końca spełnia moje oczekiwania, ale działa prawidłowo. Zmienię parę rzeczy i będzie gitara.

https://web-tiki.github.io/responsive-grid-of-hexagons/

[Mion]

@Sagitario,

Pisze w tym dziale bo przeczytałem tytuł działu.

Oooo PHP i MySQL i inne zatem zwracam "honor" ...  "inne" wiec można pisać o wszystkie ...

Załaduj grafiki do tablicy i wykonaj przez nią iteracje i pozycjonuj obrazki

 position: absolute;

a uzyskasz dowolne rozmieszczenie na stronie.

 

To samo zresztą bez użycia PHP w samym JS możną zrealizować

 

 

 

[Sagitario]

Sagitario, Sagitario said Pisze w tym dziale bo przeczytałem tytuł działu. Oooo PHP i MySQL i inne zatem zwracam "honor" ... "inne" wiec można pisać o wszystkie ...

 

Mion, zakładając temat liczyłem na Ciebie, widzie że masz pojęcie o programowaniu myślałem że coś doradzisz, a tu takie zaskoczenie.

 

tytuł tematu

"

PHP i MySQL i inne

PHP i bazy danych MySQL, Javascript i inne przydatne "języki" do www

"

 

Rozwiązanie mojego problemu nie musi być w PHP!

 

 

position: absolute; a uzyskasz dowolne rozmieszczenie na stronie.

 

To nie rozwiązuje problemu, nie mogę ustawić pozycji na stałe, przy różnych ilościach kategorii i rozdzielczościach urządzeń

[Mion]

nie mogę ustawić pozycji na stałe

Ja nie pisałem na stałe. Jeśli już jesteśmy przy javascript, to szerokość ekranu możesz pobrać nawet dynamicznie. 

https://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window

https://stackoverflow.com/questions/641857/javascript-window-resize-event

 

To samo tyczy ilości czegoś tam...