Archive | September, 2007

Wykładowe neologizmy

“tomiwisizm”

Czyli wg. pani od BHP olanie dziwnych sytuacji typu “zabieranie gaśnicy gdy nie ma pożaru” ;-]

Za parę dni studia

Jutro już wyjeżdżam na stancję. Wprawdzie tylko do Gdańska, ale wygodniej będzie tam się ulokować niż dojeżdżać… Za parę dni zacznie się rok, a dla mnie jest to przeskok w to tzw (chyba) dorosłe życie. Muszę przyznać, że boję się tego…

Najbardziej strachem napawa mnie fizyka, z której jestem totalnym nubkiem. Boję się, że właśnie z jej powodu będę mógł zawalić jakieś egzaminy…

Poza tym boję się jeszcze jednej rzeczy – braku możliwości spotkania się z ukochaną osobą. Teoretycznie zawsze znajdzie się okazja, ale i to może być ciężkie do realizacji..

Pomimo tego strachu, pójdę naprzód. Będę się starać nie martwić na zapas, a wszelkie problemy pokonywać. Co z tego wyniknie? Zobaczymy.

Wożonko

Taa nie ma to jak jazda po mieście samochodem, w którym na maksa gra Radio MaRyja, a pasażerowie śpiewają “Jezus, Jezus, Jezus Alleluja!”…

Taką szopkę odstawił mój znajomy ;-]

Wczuwanie się

Jestem w trakcie czytania książki “Anioły i Demony”. Zauważyłem dość ciekawą rzecz. Gdy mama zadała mi pytanie, ja (normalne zresztą) jej odpowiedziałem. Nic takiego, ale po chwili w myślach słyszę (?) taki tekst: “spojrzał na matkę, starał się ocenić sytuację, oraz wyczuć jej emocje”…

Normalnie nie mam czegoś takiego, czyżby to był (zbawienny) wpływ książki na moją psychikę?

BTW, czytając “Anioły i Demony” odnoszę wrażenie, że to jest “Kod Leonarda da Vinci” tylko źli ludzie nie ci sami…

Teewars

Zacząłem grać w tą gierkę i naprawdę mi się spodobała :)

Wprawdzie nie ma zbyt wielu broni, a ich przełączanie troszkę jest dla mnie uciążliwe, ale siekanie przeciwników mieczem samurajskim, albo młotkiem jest super :)

PS. dzisiaj znalazłem serwer – “Politechnika Gdańska” ;-]

jogger znowu pada, czy mi się wydaje?

Czy znowu mi się wydaje, czy jogger ma kolejnego pada? Boty wydają się działać prawidłowo, ale sama strona jest niedostępna…

jQuery – usuwanie obiektów

Robiąc szablon, napotkałem jeden problem. Notki minibloga, które były wyświetlane na pływającej warstwie, były przysłaniane przez <object>(konkretniej filmy z YT). Chciałem w jakiś sposób pozbyć się ich na stronie głównej, w sposób podobny do tego na głównej joggera – zastąpienie obiektu napisem.

Przy wykorzystaniu jQuery, to żaden problem. Wystarczy napisanie jednego łańcucha. Założenie jest takie -> znajdujemy wszystkie <object>-> przechodzimy do rodzica -> tam zostawiamy odpowiedni tekst -> kasujemy <object>.

Całość wygląda tak:

$("object").parent().append("<i>[Obiekt]</i>").end().remove();

Muszę przyznać, że dzięki jQuery wykorzystanie JS’a staje się dla mnie przyjemnością :-)

PS. Riddle twierdzi, że powinno może być tak:

$('object').after('<i>[Obiekt]</i>').remove();

:-P

Akordeon

Przyznam się, że nie wiedziałem jak nazwać tą notkę także wybaczcie mi to ;-) Chciałem napisać (specjalnie na prośbę Grzegorza Piechuły ;-] ) sposób w jaki przedstawione są u mnie notatki z minibloga.

Cel jaki chcemy osiągnąć to warstwa (w niej będzie treść notek), która zwija się i rozwija. Poza tym zrobimy tak, że gdy jedna notka będzie rozwinięta, a chcemy zobaczyć drugą to ta pierwsza posłusznie się zwinie, a dopiero później pokaże się druga.

Całość oparłem o framework jQuery, także należy się w niego wyposażyć. Na początku zaczniemy od zakodowania naszych notek:

<div id="notes">
        <h3>Nagłówek 1</h3>
        <div>
                <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                Morbi vel elit vel nulla accumsan euismod. 
                Cras nulla elit, aliquam placerat, consectetuer pulvinar, mattis in, lacus. 
                Maecenas nulla sapien, sollicitudin id, gravida non, porttitor quis, sapien.
                </p>
                <p class="up">[zamknij]</p>
        </div>
        
        <h3>Nagłówek 2</h3>
        <div>
                <p>
                Maecenas sed magna adipiscing justo facilisis volutpat. Maecenas at tellus. Aliquam erat volutpat.
                Morbi lobortis viverra urna. Sed non augue quis justo adipiscing blandit. 
                Aenean eros turpis, aliquet ac, adipiscing ut, porta mollis, ante.
                Aenean massa massa, faucibus ut, lacinia sed, dictum vitae, nulla.
                </p>
                <p class="up">[zamknij]</p>
        </div>
</div>

Poza tym możemy jeszcze ładnie opisać CSSem nasze notatki tak, żeby ładniej wyglądały ;-) Tak na stronie będą się one prezentowały na przeglądarkach, które nie korzystają, lub mają wyłączoną obsługę JavaScript.

Chciałem od razu uprzedzić, że blok z klasą “up” będzie służył do zamykania otwartych okienek, także na samym początku warto w stylach dopisać do tej klasy (“.up”) display na none tak aby blok niepotrzebnie pokazywał się w przeglądarce bez JSa.

Dla tych, którym nie chce się pisać wszystkiego zapraszam tutaj.

Teraz przejdziemy do kolejnego kroku. Dołączymy jQuery, oraz zapiszemy pierwsze linijki kodu, który “ułoży” nasze notatki w jednym miejscu oraz je schowie.

W sekcji head dopisujemy:

<script src="/sciezka/do/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function()
{
        // (...) <- tutaj będziemy wstawiali nasz kod ;-]
}
);
</script>

Do arkusza stylów dopisujemy klasę dla bloków div, w których są notki. Ta klasa będzie nadawała każdej notce pozycję absolutną (gdyby co chodzi o position:absolute; ;-] ), oraz będzie chowała w/w notki. Na potrzeby tego tekstu tą klasę nazwę po prostu “j”.

Nasz skrypt, zaraz po załadowaniu drzewa DOM, musi nadawać wszystkim notkom klasę “j” (tak aby ją schować), oraz pokazać bloki z klasą “up”, tak aby były widoczne po rozwinięciu notki. Przypominam, że bloki z klasą “up” będą służyły do zamykania rozwiniętych notatek.

$("#notes > div").addClass("j");
$("#notes p.up").show();

Teraz nadajemy zdarzenie click nagłówkom h3, które będzie pokazywało odpowiednie notki. Przy okazji nadamy blokom z klasą “up” zdarzenie click, po którym nasza notka schowie się.

$("#notes").children("h3").click(
function()
{
        $(this).next("div").slideToggle("normal");
        $("#notes > h3").not(this).next("div:visible").slideUp("fast");
}
);
$("#notes p.up").click(
function()
{
        $(this).parent().slideUp("normal");
}
);

Demo

Niestety jeszcze nie osiągnęliśmy do końca oczekiwanego efektu. Wprawdzie notka się rozwija, zwija itd… Problem jest w tym, że gdy chcemy zobaczyć drugą notkę, podczas gdy pierwsza jest widoczna, to jedna notka zwija się przy czym jednocześnie druga się rozwija. My chcemy zrobić tak aby najpierw pierwsza notka się zwinęła, a dopiero później druga się rozwinęła.

Można by było kombinować z wykorzystaniem jakiś funkcji typu sleep(), jednak gdy do metody slideUp (i nie tylko tej) przekażemy drugi parametr (pierwszy to prędkość zwijania/rozwijania) jako funkcję, zostanie ona wykonana po zakończeniu zwijania.

Brzmi strasznie? Na szczęście tak nie jest ;-) Zmienimy zdarzenie click nadane elementowi h3.

Problemem jest to jak sprawdzić czy już jakiś div jest rozwinięty. Na szczęście możemy wykorzystać metodę is(), która zwraca wartość TRUE, lub FALSE, a korzystamy z niej podobnie jak z metody filter().

Jakoś nie potrafię opisać wszystkiego słowami także przedstawię kod, a w komentarzach opiszę całość.

$("#notes").children("h3").click(
function()
{
        var tmp = $(this); // musimy przypisać obiekt do zmiennej pomocniczej, ponieważ w innym wypadku nie uda nam się rozwinąć notki
        if( $(this).next("div").is(":visible") )
        {
                // Jeśli notka o wybranym tytule już była pokazana, w tym momencie zostanie schowana
                $(this).next("div").slideUp("normal");
        }
        else if( $("#notes h3").next("div").is(":visible") )
        {
                // zwinięcie rozwiniętej notki, a dopiero pozniej rozwiniecie kolejnej
                $("#notes h3").next("div:visible").slideUp("normal",
                        function() { tmp.next("div").slideDown("normal"); }
                        // w tym miejscu wykorzystujemy właśnie zmienną pomocniczą _tmp_
                        // bez niej niesety nie byłoby możliwe rozwinięcie nowej notki
                );
        }
        else
        {
                $(this).next("div").slideDown("normal");
                // Jesli nie ma zadnej notki, ta zostanie rozwinięta
        }
}
);

Demo

To by było tyle. Wiem, że nie potrafię dobrze takich rzeczy opisywać, ale uwierzcie – starałem się.

Zmiana szablonu

Postanowiłem zmienić szablon mojego jogga na nowy, który niedawno przygotowałem.

Dokonałem kilku modyfikacji + usuwanie wszelkich obiektów (głównie filmy z YT) na stronie głównej.

Mam nadzieję, że się podoba. Wszelka pomoc/rady mile widziane :)