Moda na poziomy układ strony
Obserwując ostatnio co dzieje się w internecie zauważyłem, że coraz więcej pisane jest o modzie na poziomy układ strony. Chodzi dokładniej o poziomy scroll calej witryny. Zamiast z góry na dół, przewijamy z lewej do prawej. Jest to bardziej naturalne dla człowieka między innymy z tego względu, że czytamy w tym kierunku i patrzymy poziomo co też wpływa na to jak nasze oczy podążają za tekstem, grafiką. Ale pomysł na wpis pojawił się po wpisie Antonio Lupetti którego czytuję od jakiegoś czasu…W artykule umieszcza praktyczne wskazówki jak można taki layout w bardzi prosty i wygodny sposób zrobić. Czyli w skrócie ustawiamy bardzo dużą szerokość boxa w którym będą inne właściwe elementy i po zabawie. Do tego jeszcze możemy pobawić się z JS, żeby wszystko było bardziej user-friendly.
Ale dlaczego piszę o tym? Taki układ jest bardzo prosty jak pokazujemy swoje portfolio. Prosty obrazek, kilka słów tekstu i kolejny box. A co jeżeli chcielibyśmy zrobić tak blog? Tekstu czasami jest co niemiara, a do tego dochodzą jeszcze obrazki. Żadnej takiej wspaniałej funkcji HTML nie oferuje jedynie CSS3 w swojej specyfikacji ma multicolumn ale…ale tylko dla przeglądarek z silnikiem Gecko…Trochę nie fajnie…
Chwilę wystarczyło pogooglać i znalazłem wspaniały skrypt w JS który załawia wszystko za nas :) a tu jest link jeżeli ktoś chętny to zapraszam do testowania. Instalacja jest bardzo prosta wystarczy przekopiować przykład i wiadomo jak to obsłużyć. Nie byłbym sobą jakbym nie sprawdził jak to się zachowuje na dłuższym tekście wkońcu chcemy spore artykuły tym przetwarzać. Szybko lorem ipsum na 30 paragrafów, jabłko+r i….i….czekamy…czekamy…komunikat z FF, że skrypt za długo się wykonuje, olewam i po ok. 10 sek. mamy pozielony tekst…Wiadomo rowiązanie to mi nie pasowało, ponieważ pozatym, że ma być to user-friendly to jeszcze powinno sprawnie działać.
Więc można powiedzieć, że cofneliśmy się krok w tył. Chwila zastanowienia i pomysł…a może by tak w PHP przygotować tekst i jakąś prostą funkcją wypluć to na stronę. Szybko w dokumentację które to funkcje będą przydatne i jest! wordwrap i explode.
function multicolumn($str, $before, $after = '</div>', $str_len = 1200,
$separator = "{newCol}"){
$col = wordwrap($str, $str_len, $separator, false);
$arr_str = explode($separator,$col);
foreach ($arr_str as $key=>$value){
$string_col .= $before.$value.$after;
}
return $string_col;
}
echo '<div style="width:7000px;">';
echo multicolumn($str, '<div style="display:block; width: 19em; float:left;">');
echo '</div>';
Proste i szybkie rozwiązanie oczywiście to tylko przykład a zastosowanie to kwestia implementacji w swoim kodzie. Najważniejsze parametry to oczywiście string wejściowy ($str) i coś co będzie zaczynało każdy następny blok ($before). Reszta to już kwestia tego co chcemy 
Funkcja działa bardzo fajnie na tekstach nie sprawdzałem z obrazkami choć sądzę, że się posypie albo napewno nie będzie wyświetlał go jeżeli będzie w miejscu łamania (: jak będę tego potrzebował to się zastanowie nad obsługą zdjęć. Chyba, że ktoś z czytających już posiada takie rozwiązanie albo chociaż pomysł? Napewno przyszłościowo będę swoją stronę zmieniał na “horizontal-layout” i o blogu też pomyślę 
