Forum Debian Users Gang

hello_world · 2011-11-10 18:14:10

Witam
Ogarniam powoli ukrywanie i pokazywanie jakiegoś elementu w strukturze DOM ale mam problem. Jak jest jakas lista długa na kilka ekranów i zastosowuję show/hide elementu to odświerza mi się cała strona co powoduje przeskok na top strony. Ja natomiast chće aby element DOMu się pokazywał/ukrywał ale bez przeładowania strony.
Problem z którym się zmagam jest tu http://przedszkole208.edu.pl/index.php?page=kadra# Pewnie lepiej odda to co mam do przekazania.

kamikaze · 2011-11-10 18:37:59

Przecież pokazuje się bez przeładowania.

Minio · 2011-11-10 18:40:04

Po pierwsze: http://pornel.net/onclick
Po drugie: strona się nie odświeża, a jedynie przeglądarka przenosi użytkownika do niezdefiniowanego fragmentu strony, co sam każesz zrobić.
Po trzecie: proszę Cię, ładujesz całe jQuery dla prostego pokazywania i ukrywania kilku elementów?
Po czwarte: zapis <div id = "logopeda"> jest niepoprawny (znak równości nie powinien być oddzielony spacjami).

Przemyśl jeszcze raz strukturę dokumentu, aby łatwo było nią manipulować. Powinieneś po prostu wyświetlać wszystkie listy, a następnie w JS iterować po kolejnych sekcjach, ukrywając zawartość (display: none) i tworząc przyciski, pod które podepniesz funkcję pokazującą. Funkcja pokazująca może usuwać dotychczasowy przycisk (this przyjdzie z pomocą) i tworzyć nowy, z podpiętą funkcją ukrywającą. Ewentualnie funkcja wywoływana po wciśnięciu przycisku będzie robić odmienne rzeczy w zależności od tego, czy stosowny element jest wyświetlany czy nie.
Etykieta przycisku powinna w locie zmieniać się z „pokaż” na „ukryj” i odwrotnie. Przycisk może być zwykłym <span>em, chyba że jesteś w stanie przypisać do odnośnika jakiś sensowny cel.

hello_world · 2011-11-11 16:22:44

Po drugie: strona się nie odświeża, a jedynie przeglądarka przenosi użytkownika do niezdefiniowanego fragmentu strony, co sam każesz zrobić.

Źle się wyraziłem ale nie bardzo wiem co masz na myśli z tym niezdefiniowanym fragmentem strony.

Po trzecie: proszę Cię, ładujesz całe jQuery dla prostego pokazywania i ukrywania kilku elementów?

Nie znam JavaScript na tyle, a ta biblioteka pozwala na fajne efekty. Wyskakujące okna jakoś kojarzą mi się z latami 2000.

Po czwarte: zapis <div id = "logopeda"> jest niepoprawny (znak równości nie powinien być oddzielony spacjami).

Dzięki będę pamiętał.
Muszę pomyśleć jak zastąpić te funkcje jedną, która będzie pokazywała zawartość pliku na który wskazuje

PS Znalazłem takie mikro biblioteki js do obsługi konkretnych rzeczy.
http://microjs.com

Ostatnio edytowany przez hello_world (2011-11-11 17:34:34)

Minio · 2011-11-11 18:28:30

hello_world napisał(-a):
Po drugie: strona się nie odświeża, a jedynie przeglądarka przenosi użytkownika do niezdefiniowanego fragmentu strony, co sam każesz zrobić.
Źle się wyraziłem ale nie bardzo wiem co masz na myśli z tym niezdefiniowanym fragmentem strony.

Zapis <a href="#cokolwiek"> kieruje do odpowiedniego fragmentu strony, czyli elementu z identyfikatorem takim samym jak ciąg znaków po kratce w href (nasi przodkowie używali <a name="cokolwiek">, ale to nie jest dobry sposób). U Ciebie href nie kieruje do żadnego elementu strony — przeglądarka nie wie co z tym zrobić, więc wraca do samego początku.

hello_world napisał(-a):
PS Znalazłem takie mikro biblioteki js do obsługi konkretnych rzeczy.
http://microjs.com

Nie znam tych bibliotek i nie wiem, czy są dobre. Jednak zazwyczaj po prostu nie potrzebujesz żadnej biblioteki. Zwłaszcza do tak banalnych zadań.

Widzę, że na stronie wprowadziłeś układ dwukolumnowy. Może on zostać, jeśli chcesz, ale obie kolumny tekstu powinny mieć odmienne identyfikatory (albo, najlepiej, zamień identyfikatory na klasy). Identyfikator musi być unikatowy w skali dokumentu, czyli jeden identyfikator może mieć tylko jeden element.

Jeżeli zaś chodzi o sam problem, w przypływie dobrego humoru dam Ci rybę, a nie wędkę. Ponieważ to strona przedszkola i powinna być możliwie dostępna, wykorzystałem archaiczny JS, który powinien działać w dosłownie każdej przeglądarce na rynku. Gdyby można było się ograniczyć tylko do nowych przeglądarek (zwłaszcza chodzi o IE przynajmniej 9), można by to było napisać w bardziej elegancki sposób. Skrypt jest napisany zgodnie z podstawowymi dobrymi praktykami w stosowaniu JS, tzn. jeżeli przeglądarka nie obsługuje skryptów, do dostanie po prostu stronę z wyświetlonymi wszystkimi listami. Dlatego możesz nagłówki („Logopedia”) dodatkowo wyeksponować, np. zwiększając stopień pisma albo stosując wytłuszczenie.

Skrypt wymaga zmiany tylko w co najwyżej jednym miejscu (masz je zaznaczone komentarzem) i będzie działał tak długo, jak długo struktura dokumentu będzie odpowiadała strukturze zaproponowanej przeze mnie. Jeżeli wprowadzisz jakieś zmiany do struktury dokumentu, będziesz również musiał zmienić JS.

Aha — skrypt zostanie wykonany od razu po tym, jak przeglądarka go wczyta. Dlatego musisz zadbać o to, żeby wszystkie elementy, na których pracuje, były już obecne w drzewie DOM. Możesz to zrobić albo umieszczając go w kodzie tuż przed </body>, albo podpinając pod zdarzenie onload obiektu window. Ma to tę wadę, że zdarzenie onload jest wywoływane, gdy załadowana zostanie cała strona, włącznie z obrazkami i czym tam jeszcze. Zdarzenie DOMContentLoaded jest wywoływane gdy zostanie załadowana sama struktura DOM, ale aby mieć do niego dostęp, przeglądarka musi obsługiwać addEventListener (czyli nie może być IE8 lub wcześniejszym).

Kod:

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <title>test case</title>
        <style type="text/css">
        .przycisk {
                text-decoration: underline;
                color: blue;
                padding-left: 2em;
        }
        </style>
</head>
<body>
        <div id="container">                                                                                                                           
                <div id="logopedia">                                                                                                                   
                        <p>Logopedia</p>                                                                                                               
                        <div>                                                                                                                          
                                <dl>                                                                                                                   
                                        <dt>mgr Alina Wójcicka</dt>                                                                                    
                                        <dd>Poniedziałek 7.30 - 12.30 (5h)</dd>                                                                        
                                        <dd>Wtorek 07.30 - 10.30 (3h)</dd>                                                                             
                                        <dd>Środa 13.00 - 16.00 (3h)</dd>                                                                              
                                        <dd>Czwartek 07.30 - 11.30 (4h)</dd>                                                                           
                                        <dd>Piątek 07.30 - 12.30 (5h)</dd>                                                                             
                                </dl>                                                                                                                  
                                <dl>                                                                                                                   
                                        <dt>mgr Ewa Dębińska-Dzidek</dt>                                                                               
                                        <dd>Wtorek 12.00 - 16.00 (4h)</dd>                                                                             
                                        <dd>Czwartek 11.30 - 15.30 (4h)</dd>                                                                           
                                </dl>                                                                                                                  
                        </div>
                </div>
                <div id="Rehabilitacja">
                        <p>Rehabilitacja</p>
                        <div>
                                <dl>
                                        <dt>mgr Agata Wójcicka</dt>
                                        <dd>Poniedziałek 7.30 - 12.30 (5h)</dd>
                                        <dd>Wtorek 07.30 - 10.30 (3h)</dd>
                                        <dd>Piątek 07.30 - 12.30 (5h)</dd>
                                </dl>
                                <dl>
                                        <dt>mgr Ewelina Dębińska-Dzidek</dt>
                                        <dd>Wtorek 12.00 - 16.00 (4h)</dd>
                                        <dd>Czwartek 11.30 - 15.30 (4h)</dd>
                                </dl>
                        </div>
                </div>
        </div>
        <script type="text/javascript">
                var przelaczWidzialnosc = function(elem) {
                        var widzialnosc;
                        var etykieta_przycisku;
                        var lista = elem.getElementsByTagName('div')[0];
                        var przycisk = elem.getElementsByTagName('span')[0]
                        if (lista.style.display == 'none') {
                                widzialnosc = 'block';
                                etykieta_przycisku = 'Ukryj';
                        } else {
                                widzialnosc = 'none';
                                etykieta_przycisku = 'Pokaż';
                        }
                        lista.style.display = widzialnosc;
                        przycisk.removeChild(przycisk.childNodes[0]);
                        przycisk.appendChild(document.createTextNode(etykieta_przycisku)); // zamiast usuwania i dodawania nowego dziecka, można by było wykorzystać funkcję do podmiany tekstu na dziecku elementu przycisk
                }
                var sekcje = document.getElementById('container').childNodes; // to sobie zmień
                for (var i=0;i<sekcje.length;i++) {
                        if (! sekcje[i].hasChildNodes()) continue; // elementy potomne to również spacje i znaki nowej linii…
                        var sekcja = sekcje[i];
                        sekcja.getElementsByTagName('div')[0].style.display = 'none'; // ukrywa listę
                        // tworzy przycisk i podpina pod niego zdarzenie
                        var przycisk = document.createElement('span');
                        przycisk.appendChild(document.createTextNode('Pokaż'));
                        przycisk.setAttribute('class', 'przycisk');
                        przycisk.onclick = function() {
                                przelaczWidzialnosc(this.parentNode.parentNode); // pierwszy rodzic to <p>, drugi to <div> w który jest opakowany <p> i <div> z listami. this to kliknięty przycisk.
                        };
                        sekcja.getElementsByTagName('p')[0].appendChild(przycisk);
                }
        </script>
</body>
</html>

hello_world · 2011-11-11 19:09:50

Dzięki Minio
Potestuje.
Znalazłem rozwiązania, które są realizowane tylko przez css (co prawda również css3), ale jestem pod wrażeniem.(Jakas biblioteka switcher.js jest też)
http://css1k.com

Zapomniałem jeszcze o takiej sprawie. Jak używam jquery to mam taką przypadłość że jak zmienię w plikach dołączanych (wyskakujacych) jakieś dane to niestety po stronie klienta (przeglądarki) trzeba wyczyścić cache bo pamięta stare dane. Jest jakiś magiczny sposób na poprawne wyświetlanie?

Ponieważ to strona przedszkola i powinna być możliwie dostępna, wykorzystałem archaiczny JS, który powinien działać w dosłownie każdej przeglądarce na rynku.

Kurczę nie wziąłęm pod uwagę sytuacji jak nie będzie działać js. Zmiany..

Ostatnio edytowany przez hello_world (2011-11-11 20:26:19)

Minio · 2011-11-11 20:32:09

hello_world napisał(-a):
Znalazłem rozwiązania, które są realizowane tylko przez css (co prawda również css3), ale jestem pod wrażeniem.
http://css1k.com

To taki uaktualniony CSS Zen Garden. Faktycznie — niektóre robią ogromne wrażenie! (Zwłaszcza Molokai i Bbubles, ale jeszcze nie miałem okazji obejrzeć wszystkich.)

hello_world napisał(-a):
Zapomniałem jeszcze o takiej sprawie. Jak używam jquery to mam taką przypadłość że jak zmienię w plikach dołączanych (wyskakujacych) jakieś dane to niestety po stronie klienta (przeglądarki) trzeba wyczyścić cache bo pamięta stare dane. Jest jakiś magiczny sposób na poprawne wyświetlanie?

Możesz skorzystać z nagłówka HTTP cache-control. W samym JS/HTML nie ma raczej na to żadnego sposobu.

hello_world napisał(-a):
Kurczę nie wziąłęm pod uwagę sytuacji jak nie będzie działać js. Zmiany..

Skorzystaj z mojej propozycji — ona to bierze pod uwagę (zapisz sobie wszystko w jednym pliku .html, wyłącz obsługę JS w przeglądarce i załaduj stronę — sam zobaczysz).

hello_world · 2011-11-11 20:52:30

Pewnie chyba skorzystam z twojego kodu bo rzeczywiście jest dużo lżejszy od mojego(też przytulonego z serwisu jsclasses.org).
Co prawda niezrozumiałe są dla mnie te nodesy i inne ale jest jakiś punkt wyjścia do przyuczenia.

PS. Stroną opiekuję się w ramach wolontariatu (żona tam pracuje) więc nic Ci nie odpale :) ale dzięki za 29 lini kodu

Minio · 2011-11-11 23:02:59

Jeżeli chodzi o JavaScript, to jest to normalny język programowania. Wystarczy więc tylko (albo aż) podstawowe przygotowanie programistyczne i trochę wiedzy o DOM. Dobre źródła informacji:
1. http://www.quirksmode.org/js/contents.html
2. http://www.howtocreate.co.uk/tutorials/javascript/important
3. http://kurs.browsehappy.pl/Kurs/Spis

Ja się również uczyłem z książki „JavaScript. Wprowadzenie” autorstwa Shelley Powers (wydawnictwo Helion). Niestety aktualnie ta książka nie jest już chyba dostępna na rynku. W sumie mógłbym ją sprzedać. Jeżeli jesteś zainteresowany, odezwij się do mnie na PM.

jezoo · 2011-11-12 21:23:33

ja bym to zastapil jedna linijka kodu dla kazdego elemenu typu przycisk lub kotwicy dla warstwy : document.getElementById('el1').style.display = (document.getElementById('el1').style.display == "none") ? "block" : "none";

jezeli chce sie pobawic to mozna zastosowac ajaxa jezeli sie nie chce ladowac duzo tresci :)

a dla ladnieszych efektow to mozna fajna funkcje zrobic z pomoca opacity czy tez ofsetu i settimeouta :)

Forum Debian Users Gang

Ogłoszenie

#1 2011-11-10 18:14:10

hello_world - Członek DUG

jquery show/hide

#2 2011-11-10 18:37:59

kamikaze - Administrator

Re: jquery show/hide

#3 2011-11-10 18:40:04

Minio - Użyszkodnik

Re: jquery show/hide

#4 2011-11-11 16:22:44

hello_world - Członek DUG

Re: jquery show/hide

#5 2011-11-11 18:28:30

Minio - Użyszkodnik

Re: jquery show/hide

hello_world napisał(-a):

hello_world napisał(-a):

Kod:

#6 2011-11-11 19:09:50

hello_world - Członek DUG

Re: jquery show/hide

#7 2011-11-11 20:32:09

Minio - Użyszkodnik

Re: jquery show/hide

hello_world napisał(-a):

hello_world napisał(-a):

hello_world napisał(-a):

#8 2011-11-11 20:52:30

hello_world - Członek DUG

Re: jquery show/hide

#9 2011-11-11 23:02:59

Minio - Użyszkodnik

Re: jquery show/hide

#10 2011-11-12 21:23:33

jezoo - Dzięcioł

Re: jquery show/hide

Stopka forum