eksperymenty z internetem, blogami, bloxem, javascriptem, firefoxem czy różnymi użytecznymi programami czy narzędziami, tak okołoinformatycznie tudzież okołokomputerowo...
Blog > Komentarze do wpisu

blox i archiwum zwijane jak zakładki

Od bardzo dawna do zwijania rozbudowanego archiwum na bloksie służy czarodziejski skrypt s.z.y.m.o.n.a. Efekt, który on daje jest świetny, ale przyznam szczerze, że czytając trzyczęściową instrukcję do niego czułem się trochę zniechęcony do instalacji. Dlatego kombinowałem czy nie da się zrobić czegoś alternatywnego i prostszego do wdrożenia...

I mogę powiedzieć, że udało mi się (na pewno jest alternatywne...).

Napisałem skrypt, który zamienia długą listę miesięcy archiwum na wersję działającą tak, jak dynamicznie zwijane zakładki. Dosłownie. Poszczególne lata stają się folderami zakładek, na które można klikać aby je zwinąć i rozwinąć w razie potrzeby. W ramach każdego roku zgrupowane są linki do kolejnych miesiący blogowej twórczości. Wygląd można zobaczyć na obrazku, a sprawdzić działanie można na blogu jolindy oraz na moim prywatnym.

przykłady dynamicznego zwijania archiwum blox

 

Instalacja i dopasowanie wyglądu

Instalacja skryptu jest prosta. Wystarczy pobrać na dysk plik blox.archiwum.js (prawy klawiszy myszy -> zapisz jako...), załadować go do zasobów bloga, a w polu HTML bloga dodać wpis (najlepiej na jego początku):

<script type="text/javascript" src="/resource/blox.archiwum.js"></script>

Jeśli chodzi o dopasowanie wyglądu, to sytuacja wygląda tak samo jak ze stylowaniem dynamicznie zwijanych zakładek. Przy czym:

  • jeśli ktoś już z nich korzysta, to nie musi dodawać nic więcej do arkusza CSS
  • jeśli ktoś jeszcze nie korzysta, to odsyłam do kroku A2 instrukcji zakładek (oraz A3 do dobierania odpowiednich obrazków).


Potrzebne może okazać się też kilka poprawek w pozycji bloku zawierającego archiwum. Zazwyczaj dotyczących jego położenia. Można to zrobić definiując atrybuty następującego elementu arkusza CSS.

#BlogArchiwumBox {
 przykład -> margin-left: 10px;
}

Zachęcam do korzystania ze skryptu.

Tym razem nie dodawałem własnej stopki pod archiwum, więc w ramach "licencji" proszę o pozostawienie informacji w komentarzu - o ile rozwiązanie okaże się przydatne ;)

PS.
Na zakończenie dodam, że w kolejce do publikacji czeka trochę unowocześniony skrypt do zwijania zakładek, a potem przygotuję jeden wspólny dla zwijania archiwum i zakładek. Takie znane już skądinąd "2w1"..

PPS.
I dziś 29 lutego - dobra data na publikację wyników własnej pracy :)

 

piątek, 29 lutego 2008, sgk

Polecane wpisy

  • usunięcie pomarańczowej "belki promocyjnej" bloxa

    Dziś rano na moich blogach zaskoczył mnie ( i nie tylko mnie ) taki widok: Nie mam pojęcia co to za pomysł, bo zapowiedzi administratorów nigdzie nie widziałem.

  • permalinki do komentarzy na blox.pl (user.js)

    W czasie gdy debergerac udoskonala swój skrypt do awatarów osób komentujących na blox.pl (ostatnio dodał awatary z blip.pl ) ja postanowiłem zająć się czymś, c

  • takie prace warto propagować

    Mimo, że kilka dni temu zrobiłem już o tym wzmiankę w minizapiskach , ale wciąż jestem pod wielkim wrażeniem graficznej doskonałości nowego projektu SenTineLa

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Blox.pl i magia jQuery - zwijane archiwum i zakładki, wyróżnianie komentarzy autora z KosciaKowy blog
Podczas przygotowywania nowego szablonu dla mojego bloga natrafiłem na problem z archiwum i zakładkami - zajmowały zdecydowanie za dużo miejsca. Rozwiązanie było tylko jedno - użyć skryptu pozwalającego na ich zwijanie i rozwijanie. Gotowe rozwiązania ... »
Wysłany 2009/11/14 17:18:38
Komentarze
s.z.y.m.o.n
2008/02/29 23:55:24
Faktycznie moja instrukcja jest przydługa (może w końcu ją nieco przerobię).
Podoba mi się to rozwiązanie i zastanawiam się nad podobnym u siebie, ale jak to ja, muszę zrobić po swojemu ;) Tylko, że na wykończenie czeka tyle kodu JS, że kto wie, czy nie będę musiał się ograniczyć.
-
sgk
2008/03/01 00:02:24
No to cieszy mnie to, że się Tobie podoba ;)

Ja już w zasadzie nie mam nowych pomysłów na skrypty JS - zostało mi kilka porządkowych spraw (chyba, że mi coś do głowy nagle wpadnie). I bardzo mnie intryguje to Twoje AJAXowe ładowanie treści notki...
-
snake-eyes
2008/03/04 23:24:20
Bardzo fajne i bardzo prosta instalacja :) Każdy sobie z tym poradzi. Brawo i dzięki za ten nowy "ficzer" ;)
-
cito1
2008/03/05 10:33:10
Dzień dobry jeszcze raz :)
Nagrodę niosę :))))
tymczasowo.blox.pl/2008/03/Lancuszek.html
-
sgk
2008/03/06 16:00:47
Dzień dobry z opóźnieniem.
Dzięki za nagrodę, ale z braku czasu nie mogę jej przyjąć...
-
szablonykatemac
2008/03/15 13:30:27
hmm, mam pytanie
z tego co zauważyłam archiwum jest teraz opisywane przez selektory zakładek
(dokładniej rzecz ujmując mam tu na myśli dwa selektory, które sprawdziłam .TytulFolderaZakladek i .ZakladkaEtykieta A - odpowiednio wygląd roku i wygląd linku miesięcy) powiedz mi proszę że mogę to rozdzielić - tzn. mam na myśli zastosowanie podwójnego selektora (czyli o ile dobrze pamietam kombinatora) wyglądającego tak
#BlogArchiwumBox .TytulFolderaZakladek {}
mam nadzieję, ze nie spowoduje to nieprzewidzianych problemów
Czyli ogólnie rzecz ujmując za wyjątkiem #BlogArchiwumBox i #ArchiwumTytul pozostałe selektory mam brać z zakładek i używać kombinatorów? Si?
-
sgk
2008/03/15 23:39:58
Si, seniorita!
Dobrze zauważyłaś i dobrze myślisz: w moim skrypcie archiwum wewnątrz bloku div #BlogArchiwumBox zamieniane jest na zakładki i zawiera obiekty o klasach z zakładek (występuje więc jeszcze ważna choć mało widoczna element: .PoziomDrzewa {}).
Kontenery #BlogArchiwumBox i #ArchiwumTytul pozostają nie ruszone.

Zatem jeśli chcesz zmienić wygląd folderów/linków zwijanego archiwum na inny niż samych zakładek, to musisz używać właśnie wskazanych przez Ciebie kombinatorów.
To bezpieczna metoda - bo zapisy odnoszą się do bardzo konkretnych elementów - i nie spowoduje ona nieprzewidzianych problemów.
-
szablonykatemac
2008/03/16 14:58:18
grazie
no to melduję, że wykorzystam w szablonie dla korner.blox.pl (jeszcze trochę potrwa zanim szablon będzie gotowy ale zgłaszam już teraz ;) i dziękuję bardzo)
-
piobug
2008/03/19 23:44:05
dodaj kate, że to był mój świadomy wybór ;)
-
nika_blue
2008/09/22 15:38:21
A ja melduję że wykorzystawszy piękny szablon Kate_mac teraz porwałam skrypty Eskeya :) i się pięknie wszystko zwija i rozwija :) merci beaucoup :)
-
atina_bc
2008/10/20 11:01:23
pobrałam sobie i dziękuję bardzo:)
-
Gość: Magidat, *.w90-37.abo.wanadoo.fr
2008/10/29 13:20:01
to dziala, to dziala!!! Wyjatkowo prosty i skuteczny sposob zwiniecia archiwum, nawet dla tak opornej humanistki jak ja :-) Dziekuje!
-
drakaina
2008/12/17 00:48:35
Działa i to bardzo dobrze :) Muszę tylko wymyślić jak pokombinować to i owo z wyglądem i będzie super.

A przy okazji - czy dałioby się napisać skrypcik do implementacji czcionek?
-
sgk
2008/12/17 08:33:06
A na czym miałaby polegać na "implementacja czcionek"?
-
drakaina
2008/12/17 10:42:28
Na osadzaniu czcionek w ten sposób, żeby dało się nadać w ten sposób jakiś bardziej indywidualny wygląd elementom, np. zmieniać czcionki w tytułach notek, zakładkach itp. - w tej chwili jesteśmy skazani na obrazki z inną czcionką niż obsługiwana przez blox, co ogranicza takie zmiany wyłącznie do tytułu, podczas gdy css definiuje czcionkę dla każdego elementu... tylko że nie da się tam wstawić nic poza normę, a przecież czcionki mogłyby być również w zasobach.
-
sgk
2008/12/17 15:25:19
Hmm...
W arkuszu CSS dla bloga można ustawić różne czcionki dla różnych elementów, zmieniając w ten sposób wygląd notek, tytułów, nagłówków, itp. Tu blox nie jest ograniczeniem.

Natomiast wyświetlanie czcionek zależy od ich dostępności (zainstalowania) na komputerze czytelnika. Nie da się zrobić odwołania do czcionek wrzuconych do zasobów. Nie ma w tej chwili takiej technologii, która by to obsłużyła. Żadne skrypty tu nie pomogą.

Stąd też wybór czcionek trzeba ograniczyć do popularnych, a nie jest ich wcale tak mało. Na pewno da się tymi ogólnodostępnymi nadać blogowi indywidualny charakter.

A "obrazki z inną czcionką" to chyba jakaś inna historia...
-
drakaina
2008/12/18 01:13:37
wyświetlanie czcionek zależy od ich dostępności (zainstalowania) na komputerze czytelnika

To wiem, stąd pomysł z tym, żeby korzystać z zasobowych, ale skoro się nie da, to trudno... Mam ustawione tak, żeby jeśli ktoś ma, wyświetlała się taka, jaką chcę, ale jak nie ma, to jest zastępowana tą popularną - ale to niestety tylko półprodukt czy też wyrób czekoladopodobny. Szkoda, że akurat to jest niemożliwe.

A z obrazkami to skrót myślowy - na to, żeby w tytule była wymarzona czcionka, trzeba go sobie wstawić jako obrazek z napisem wykonanym tą czcionką. Niestety nie da się tego robić z innymi elementami (a nawet jakby się dało, to chyba nie chciałoby mi się wykonywać i wrzucać osobnych obrazków dla tytułów notek...)
-
sgk
2008/12/18 23:55:42
Cóż. Można powiedzieć, że zetknęłaś się z dylematem webdesignerów "jak zrobić unikalną typografię czcionkami dostępnymi powszechnie" ;)

A tak poważniej: nie ma sensu bawić się w obrazkowe tytuły notek, bo tytuły są stylowane wspólnym elementem CSS. Można by rzeczywiście użyć jakiegoś skryptu, który by je jakoś podmieniał, ale to mało praktyczne (i pewnie pracochłonne).

Natomiast nagłówek bloga (co zrobiłaś), stopkę czy tytuły folderów zakładek/zakładki to można już zrobić za pomocą obrazków.
-
2009/01/20 20:24:08
dodałam i działa. dziękuję :)
-
agad9
2009/01/21 17:22:27
I ja też dodałam. Fajne. :)
-
2009/02/04 16:25:03
Dziekuje, skorzystałam, pieknie smiga :-) Pozdrawiam i zapraszam - frywolka.blox.pl
-
kakofonia
2009/02/25 17:05:29
dodalam, dziala pieknie, wielkie dzieki
-
arawicz
2009/02/27 14:42:37
masz u mnie piwo, dobry człowieku
-
aniabuzuk
2009/03/10 19:13:37
Dodane i dzialaja na obu blogach. Dzieki.
-
2009/03/19 21:14:38
nie bardzo mi to odpowiada przede wszystkim po zwinięciu zakładek literki są małe i sprawia mi kłopot w odczytaniu mam problemy z oczami i to jest dla mnie duży problem proszę o przywrucenie do poprzedniego wyglądu
pozdrawiam!!!!!!!
-
sgk
2009/03/20 00:00:57
@myszka0106
Skrypt sam nie zmienia wielkości liter ani w tytułach folderów ani w samych zakładkach.
Żeby zwiększyć rozmiar czcionek musisz poeksperymentować z arkuszem CSS i sekcjami .TytulFolderaZakladek {} i .ZakladkaEtykieta {}.

PS.
Nie mam pojęcia jaki był poprzedni wygląd, wg mnie powinien być ten sam.
Spróbuj odinstalować skrypt i sobie porównać.
-
2009/03/21 21:06:19
Pisałam że mi to nie odpowiada,więc proszę o przywrócenie pierwotne ja niczego nie będę eksperymentować.Jeżeli chcesz coś takiego robić to przynajmniej zapytaj czy mi to odpowiada a nie wcinasz się z kopytami ja sobie nie zyczę tego!!!!!!!!!!!!!!!!!!!!11
-
sgk
2009/03/21 23:38:12
@myszka0106
Nie pomyliło Ci się coś?
Jak na razie to Ty tutaj "wcinasz się z kopytami" i robisz jakieś awantury.
Ja na Twoim blogu nie robiłem nic i nic nie będe przywracał.

Jeśli nie podoba Ci się efekt skryptu (zwijającego zakładki) i nie wystarczą Ci porady jak coś zmienić, to po prostu sobie ten skrypt sama odinstaluj, tak jak sobie go sama zainstalowałaś. Nie ma obowiązku korzystania z niego.
-
s.z.y.m.o.n
2009/03/22 00:45:41
Zastanawiam się: śmiać się, czy płakać?

Na bloksie przydałaby się jakaś deratyzacja ;)
-
2009/03/22 22:47:25
Ja Cie przepraszam jeżeli nie ty to kto bo ja na swoim blogu mam zakł.skrypt esky i jak otwieram to wlaśnie wchodzę na Twojego bloga jestem nowicjuszem i wiele rzeczy jeszcze nie wiem a tu ktoś mi poprzestawiał a to mi nie odpowiada
pozdrawiam
no to mi wytłumacz !!!!!!!!!
-
sgk
2009/03/22 23:25:03
@myszka0106
Przede wszystkim zamiast używać mnóstwa wykrzykników użyj jednego słowa: "proszę" - to nie jest trudne nawet dla nowicjusza.

Czy ktoś oprócz Ciebie ma dostęp do Twojego bloga?
Przypuszczam, że nie, więc nikt oprócz Ciebie nie mógł nic poprzestawiać. Nie ma takiej możliwości. A jeśli ktoś ma, to niech Ci mówi, co robi.
Żeby usunąć skrypt zwijający zakładki, w administracji blogiem wejdź w Wygląd -> Elementy - pole na kod HTML, znajdź i usuń stamtąd fragment <script type="text/javascript" src="/resource/blox.zakladki.2.js"></script>
I przypomnij sobie jak tam się znalazł...

@s.z.y.m.o.n
Cóż zrobić - po 24 godzinach naładowałem się trochę cierpliwością...
-
cari24
2009/03/24 14:59:39
Dodałam. Działa. Dzięki:-)
-
vintage_girl
2009/04/27 14:16:23
Witam
staram się zwinąć archiwum i zakładki, ale nic mi nie wychodzi :( Czy mogę liczyć na pomoc??
-
sgk
2009/04/28 09:07:32
@vintage_girl
Odpowiedziałem mailowo.
-
oliwka_z
2009/04/29 16:18:01
To jest super! Dziękuję!
-
maciej.dobosiewicz
2009/08/18 15:48:16
No i elegancko. Męczyłem się długo zanim wpadłem, że muszę wybrać opcję archiwum w ustawieniach (miałem kalendarz) i teraz wszystko śmiga.
Dzięki!
-
veni23
2009/08/22 15:03:04
W Końcu (!!) udało mi się zwinąć archiwum, dzięki przeogromne!
-
skala72
2009/11/03 01:21:32
witam, może i jestem ciemna masa, ale za diabła nie wiem gdzie to wstawić, abu tak wyglądało archiwum (zwijane). Czy jest gdzieś dostępny kod HTML bloga??
-
sgk
2009/11/04 00:05:32
Kod HTML całego bloga nie jest dostępny. Dostępny jest tylko jego fragment, w który można wstawiać własne elementy. Na nowym bloksie znajdziesz to w administracji, w sekcji USTAWIENIA - BOCZNA SZPALTA - Pole na dodatkowy kod HTML.
-
skala72
2009/11/07 21:23:31
Ok, dzięki, ale i tak dla mnie to czarna magia, jak wstawić ten kalendarz ??
-
sgk
2009/11/09 00:16:24
Kalendarz i archiwum to wykluczające się sposoby wyboru wpisów. Ustawia to się w sekcji USTAWIENIA - BOCZNA SZPALTA.
Przejrzyj sobie wszystkie sekcje administrowania blogiem, to się opatrzysz z dostępnymi opcjami. Poczytaj też sobie ABC bloxa, to sporo rzeczy Ci się rozjaśni.
-
skala72
2009/11/09 17:36:58
DZIAŁA !!! Rewelacja, jestem genialny !! Bardzo dziękuję, jest to proste jak konstrukcja cepa.
-
skala72
2009/11/09 18:09:03
Hmm, jeszcze jedno, a jak zwiększyć font roku: 2008, 2009 i wyboldować go ??
-
sgk
2009/11/09 23:07:05
W arkuszu CSS dodać/poprawić element .TytulFolderaZakladek, np:
{font-size:12px; font-weight: bold;}
-
skala72
2009/11/12 11:08:15
Mam jeszcze jedno pytanie, jak można zmienić/wstawić ikonkę obok adresu w przeglądarce ??
-
sgk
2009/11/14 00:06:40
Instrukcja dodawania favikonki.
-
skala72
2009/11/25 11:27:00
Jeszcze jedne pytania:
1. Jak zmienić nazwy :
- Ostatnie notki
- Zakładki

2. Jak zrobić, aby linki w Zakładkach otwierały się w nowych oknach?

Za licha nie mogę znaleźć informacji n/w pytania.
-
sgk
2009/11/26 08:44:17
Ad.1 Nie da się ich zmienić, są na stałe ustawione w szablonie bloga.
Ad.2 Otwierać je przytrzymując wciśnięty klawisz Ctrl.

Oba przypadki można obejść pisząc specjalne (krótkie) skrypty javascript. Może uda mi się znaleźć czas, aby to zrobić.
-
2009/12/19 14:11:50
Witam. Skorzystałem z tego świetnego skryptu i opcji dodatkowej - ikonki do zwijania i rozwijania. Mam pytanie, domyślnie jest ona po prawej stronie textu roku archiwum, jak zrobić, żeby była po prawej? Bo tekst (rok) można w css'ach do prawej wyrównać dzięki poleceniu: text-align: right; w .TytulFolderaZakladek. Jak zmienić pozycję tej ikonki na lewe miejsce? Przedstawiam to na screenie, jak wygląda to u mnie: i45.tinypic.com/hvv78y.png
Pozdrawiam
-
skala72
2009/12/20 17:19:29
Super, w takim razie czekam.
-
sgk
2009/12/20 21:01:14
@bb184
Po wyrównaniu do prawej tekstu lat znajdź w CSS fragmenty zaczynające się .off {background... i .on {background... i zamień w nich right na left;

@skala72
Hmm, w takim razie będę musiał ten czas znaleźć ;)
-
martuuha
2010/02/03 18:38:59
kurczę, tak fajnie działało i przestało. wywaliłam plik z js na końcu, załadowałam jeszcze raz. wklejka w kodzie html się zgadza, ma początek, koniec... nie mam pojęcia, o co chodzi.
Nie zechciałbyć rzucić okiem?
-
sgk
2010/02/03 22:18:36
@martuuha
No zechciałem :)
Wygląda na to, że plik skryptu blox.archiwum.js (w zasobach Twojego bloga) jest pusty. Ściągnij go jeszcze raz z tej notki i załaduj ponownie do siebie a znów będzie (fajnie) działać ;)
-
martuuha
2010/02/04 19:23:56
well... no tak właśnie zrobiłam tuż przed napisaniem tego komentarza, więc hmmm ;-)
-
moniazo
2010/04/06 15:42:53
no bardzo fajny plik!!! Nie znam się na tym kompletnie, ale udało mi się za pierwszym podejściem :) Przez instrukcję obsługi archiwum s.z.y.m.o.n'a niestety nie udało mi się przebrnąć do końca z powodzeniem :( zrobiłam listę wypunktowaną i ani rusz dalej.

dzięki
-
2010/06/30 19:48:49
Baaaaaardzo dziękuję!!! :) Działa idealnie!
-
lindeczek
2010/09/09 18:19:00
Skorzystałem... i daje radę, choć odrobinkę szkoda, że przypisuje własności folderów zakładek (ale zapewne można to sobie zmienić, przy czym później sobie pokombinuję)
Pięknie dziękuję :)
Działa i funkcjonuje i jest fajne :)


Pozdrawiam

P.S.
Skorzystałem też z rozwijalnych zakładek, ale jestem leniwy i dodam komentarz tylko w tym miejscu i mam nadzieję, że taka informacja będzie wystarczającą :)
-
dwa.demonki
2010/09/28 21:29:42
Użyłam skryptu, działa, dziękuję :)
Mam pytanie, czy da się wypisać tylko miesiące, bez roku po rozwinięciu zakładki?
-
sgk
2010/09/29 12:43:21
Teoretycznie się da.
Tyle, że jeśli schowa się rok, to nie będzie już w co klikać, aby zwinąć listę miesięcy...
-
dwa.demonki
2010/09/29 15:39:59
Chyba się nie zrozumieliśmy, ale już sobie poradziłam ;) dorzuciłam linijkę ads = ads.substr(0,ads.length-4)
Pozdrawiam
-
sgk
2010/09/29 22:31:56
No cóż, pytanie było niejednoznaczne, więc odpowiedź nietrafiona. Ale teraz gdy zobaczyłem o co chodzi, to załapałem (nazwy kolejnych rozwiniętych miesięcy pokazują się bez dopisanego do nich roku).
Sprytnie sobie poradziłaś ;)
-
2012/03/01 14:51:12
Jak odzyskać usuniete zasoby bloga ?
-
sgk
2012/03/01 23:57:58
@anyzarg9473
Nie sądzę, żeby udało się je odzyskać.
A jeśli byłaby taka możliwość, to trzeba się w tej sprawie kontaktować z administratorami blox.pl
-
ervisha
2013/04/17 10:53:41
Archiwum udało mi się zwinąc. Próbowałam z linkami, ale niestety to już mi się nie udało :( Nie wiem jak zrobić tak by wszystkie były zwinięte
bloxowe porady

RSS


dodaj do netvibes

Add to Google


pobierz Spiceworks - darmowe oprogramowanie do zarządzania infrastrukturą IT