Translate this site
  • ► 2012 (3)
  • ► 2011 (51)
  • ► 2010 (38)
  • ▼ 2009 (36)
    • < września 2009 >
    Pn Wt Ś Cz Pt So N
      1 2 3 4 5 6
    7 8 9 10 11 12 13
    14 15 16 17 18 19 20
    21 22 23 24 25 26 27
    28 29 30        

    Weź udział!

    Logo konkursu Wolny Wybór

    wypróbuj

    Logo wielojęzycznego chatu

    : Home / blog / wpisy wg daty
    Września 2009

    Poniedziałek 21 września 2009

    Przycisk "drukuj" PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    poniedziałek, 21 września 2009 20:35
    Java Script / Artykuły JS

    Jeśli chciałbyś dać możliwość wydrukowania jakiejś treści ze strony, to jest na to prosty sposób w JS:

    {codecitation} <html>
    <head>
    <script type="text/javascript">
    function drukuj(){
     // sprawdź możliwości przeglądarki
       if (!window.print) {
          alert("Twoja przeglądarka nie drukuje!")
       return 0;
       }
     window.print(); // jeśli wszystko ok - drukuj
    }
    </script>
    </head>
    <body>
     <p><a href="javascript:drukuj()">drukuj</a></p>
    </body>
    </html> {/codecitation}

    Warto tu pamiętać, o atrubucie media w CSS. Pozwala on na ustawienia specjalnego arkusza stylów dla drukarek.

    Read more

    Otwieranie nowego okna PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    poniedziałek, 21 września 2009 20:28
    Java Script / Artykuły JS

    Aby otworzyć w JS starczy taki oto kod:
    {codecitation} window.open('nowa_strona.htm', 'Nowe_okno', 'height=150,width=200'); {/codecitation}

    Można np. wykorzystać dowolne zdarzenie JS, np.:

    {codecitation} <head>

    <script type="text/javascript">

    window.onload = function() {

        window.open('nowa_strona.htm', 'Nowe_okno', 'height=150,width=200');

    }

    </script> {/codecitation}

    Na wczytanie się strony zostanie pokazane nowe okno. Uwaga: większość przeglądarek zablokuje takie działanie.

    Warto pamiętać o tym, że ponowne podane jako parametru "Nowe_okno" spowoduje otworzenie źródła wskazanego jako pierwszy atrybut (tu 'nowa_strona.htm') w już istniejącym oknie. Nie zostanie stworzone drugie okno o takiej nazwie. Można to wykorzystać do otwierania strony w ramkach.
     

    Read more

    Pop - up szyty na miarę PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    poniedziałek, 21 września 2009 20:24
    Java Script / Artykuły JS

    Prosty skrypt pozwalający na otworzenie okienka o dokładnie takim razmiarze jakiego potrzebujemy, aby pokazywany obrazek został wyświetlony cały.

    {codecitation} <html>
    <head>
    <script type="text/javascript" >
    function pokazGrafike(url) {
       var img = new Image();
       img.src = url;
       var szerokosc = a.width+10;
       var wysokosc = a.height+10;
         window.open(url,"grafika",'width=' + szerokosc + ',height=' + wysokosc + ',resizable=0, scrollbars=no,menubar=no, scrolling=no' );
    }
    </script >
    </head>
    <body>
     <a href="javascript: pokazGrafike('źródło_pliku_graficznego.gif')">Link</a>
    </body>
    </html> {/codecitation}
     

    Nalezy oczywicie pamiętać, że z powodu nadużywania popupów, większość przeglądarek ma systemy je blookujące, jednak czasem może się tokazać przydatne.

    Read more

    Zliczanie liczby elementów w textarea PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    poniedziałek, 21 września 2009 20:22
    Java Script / Artykuły JS

    Często występuje potrzeba zliczania liczby znaków wpisanych w pole formularza. Przeważnie jest to spowodowane określoną liczbą znaków mogącą się zmieścić w komórce tabeli bazy danych. Wszystko wydawałoby się proste - krótki skrypt JS i jest ok... No niestety! tak łatwo to to nie będzie:-). Dlaczego? Tym razem Nawala FF... Jak? Zamiast zliczać enter jako 2 znaki '\r\n\' liczy jako jeden - '\n'. (ukośniki się nie liczą). Ale można to łatwo obejść. Starczy tylko dodać kilka linijek kodu do skryptu:
    {codecitation} <html>
    <head>
    <title>Zliczanie znaków</title>
    <script type="text/javascript">
    function zliczaj(nr_f, nr_l, nr_t) {
        with(document.forms[0]) {

            var tekst = elements[nr_t].value; // cały text z pola textarea
            var dl_tresc = elements[nr_t].value.length; // długoś tekstu z textarea
            var maxlen = 30; // maxymalna dozwolona długość
            var prawdziwa = 0; // licznik znaków
            var entery = 0;
           
            for (i=0; i<dl_tresc; i++) {
                if (tekst.charAt(i) == "\n") {

                    prawdziwa++;
                    entery++;
     
                    if (navigator.appName != "Netscape")
                        i++;
                }
                prawdziwa++;
            } // koniec for i
           
            elements[nr_l].value= maxlen - prawdziwa; // wyświetl komunikat o licznie znaków
            if (prawdziwa>maxlen) {
                if (navigator.appName != "Netscape")
                    elements[nr_t].value = elements[nr_t].value.substring(0,maxlen);
                else
                    elements[nr_t].value = elements[nr_t].value.substring(0,maxlen-entery);
       
            elements[nr_l].value = 30 - maxlen;
            alert("Maksymalna długość to " + maxlen +"!");
            }
        } // koniec with
    }
    </script>
    </head>
    <body>
     <form action="#">
      <input type="text" size="3" name="licznik" /> - pozostało znaków
      <textarea name="tresc" onkeyup="zliczaj(0,0,1)" cols="20" rows="5">Tu wpisz tresc</textarea>
     </form>
    </body>
    </html> {/codecitation}

    W powyższym kodzie wykorzystałem instrukcję with. Kiedy pisałem ten kod, nie wiedziałem, że jest tak nieciekawym rozwiązaniem.


    No i wszystko działa! Można oczywiście ten skrypt wrzucić do osobnego pliku, i wykorzystać na kilku stronach. Właśnie dlatego nie zrobilem tu na sztywno kodu, używając nazw pól formularza, tylko odwoływałem się do indexu elements[nr] i forms[nr]. Dzięki temu, zmieniając parametry przekazywane do funkcji przy zdarzeniu 'onkeyup' (na puszczenie klawisza), można dostosować to do każdego formularza. Do funkcji przekazuje kolejno - index formularza [u mnie 0], index licznika [u mnie 0 - pierwsze pole formularza] oraz index pola tekstowego - 1.

    Read more
    Zmieniony ( sobota, 26 września 2009 00:00 )

    Data w formacie dd-mm-yyyy PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    poniedziałek, 21 września 2009 20:07
    Java Script / Artykuły JS

    Wyświeltanie daty - jak wszystko w programowaniu - można zrealizować na wiele sposobów. Pokaże dwa sposoby na wyświetlanie daty w formacie dd-mm-yyyy (2 cyfry dla dnia, 2 cyfry dla miesiąca, 4 cyfry dla roku).

    {codecitation} <html>
    <head>
    <script type="text/javascript">
    function addChars(par, len, insert) {

        var str = par.toString(); // aby moc operowac na liczbie jak na ciagu znakow
        insert = insert || "0"; // jesli nic nie podano - domyslnie wartosc "0"
        len = len || 2; // jesli nic nie podano - domyslnie wartosc 2
       

        while (str.length < len) {
            str = insert + str; // dodaj zero (lub podany znak) z przodu
        }

    return str;
    }

    function getDateStr(){
        var Today = new Date();
        var Month = addChars(Today.getMonth()+1);
        var Day   = addChars(Today.getDate());
        var Year  = Today.getFullYear();

        if(Year <= 99) {
            Year += 1900;
        }

    return  Day + "-" + Month + "-" + Year;
    }
    </script>
    </head>
    <body>
               <script type="text/javascript">document.write("Dzisiaj jest " + getDateStr())</script>
    </body>
    </html>
    {/codecitation}

    W wyniku zostanie wyświetlone (przykład dla 21 września 2009):

    Dzisiaj jest 21-10-2006

    Read more

    Komentarz do dnia PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    poniedziałek, 21 września 2009 20:03
    Java Script / Artykuły JS

    Oto prosty sposób, aby na stronie z pewnością każdego dnia choć coś się zmieniało:

    {codecitation} <html>
    <head>
    <script type="text/javascript">
    function jakiToDzien() {
         now = new Date();
         switch(now.getDay()) {
              case 0 : return "To już koniec weekendu :-(";
              case 1 : return "Nienawidzę poniedziałków!";
              case 2 : return "Wtorek... Jeszcze tyle do wolnego";
              case 3 : return "Środa, basen o 10.00";
              case 4 : return "Czwartek - jeszcze bliżej";
              case 5 : return "TGIF - Thanks God is Friday!";
              case 6 : return "Wreszcie weekend!";

         }

    return "Ojojoj... Coś nie tak...";
    }
    </script>
    </head>
    <body>
     <p><script type="text/javascript">document.write(jakiToDzien());</script></p>
    </body>
    </html> {/codecitation}

    Wynik (np. dla niedzieli): To już koniec weekendu :-(

    Komentarze mogą być zmienione wedle uznania. Możesz także zmienić z dni tygonia na miesiące. Musisz jedynie zmienić:

    {codecitation}switch(now.getDay()) { .. } {/codecitation}

    na:

    {codecitation} switch(now.getMonth()) { .. } {/codecitation}

    Oczywiście trzeba będzie wtedy także dodać odpwiednią liczbę case'ów. Pamiętaj, że (tak jak niedziela jst zerem), wartość 0 zwrócona przez metodę getMonth(), oznacza styczeń, 1 - luty, 2 - marzec itp...

    Przyjemnej zabawy z kodem :-)

    Read more

    Tekst w wierszu statusu PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    poniedziałek, 21 września 2009 19:57
    Java Script / Artykuły JS

    Pasek statusu (w MSIE i FF pasek na dole okna przeglądarki) może zostać przez nas wykorzystany do wyświetlania danych. Pamiętaj, aby używać tego rozważnie. W pasku statusu wielu internautów "podgląda" adresy linków itp.

    {codecitation} window.status = "To jest stały napis w pasku statusu"; {codecitation}

    Zawsze jednak pamiętaj aby dwa razy się zastanowić, czy warto ingerować w działanie przeglądarki. Najczęściej odpowiedź brzmi nie (co nie znaczy, że zawsze).

    Read more

    Rozpoznawanie przeglądarki PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    poniedziałek, 21 września 2009 19:52
    Java Script / Artykuły JS

    Oczywiście sposóbów na rozpoznawanie rodzaju przeglądarki jest bardzo wiele (w tym, z pewnością część z nich lepsze od tu prezentowanego). Tu jednak chciałbym zaprezentować jeden z najprostszych.


    {codecitation} document.write("Używasz " + navigator.appName + " " + navigator.appVersion); {/codecitation}

    Pamiętaj jednak, że opiera się on o informacje jakie przekazuje przeglądarka. Niektóre przeglądarki pozwalają na wysyłanie informacji niezgodnych ze stanem faktycznym. Nie należy zatem stosować powyżeszego kodu do rozpoznawania typu przeglądarki, gdy chcemy np. załadować dodatkowy plik css.


    Read more

    Efekt rollover (natywny kod JS) PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    poniedziałek, 21 września 2009 19:47
    Java Script / Artykuły JS

    Czy widziałeś kiedyś na stronie, jak po najechaniu nad jakąś grafikę, jej wygląd ulegał zmianie? Jeśli wydaje Ci się to bardzo trudne, zaraz zmienisz zdanie.

    Read more
    Zmieniony ( niedziela, 14 marca 2010 14:55 )

    Pop-up we wskazanym miejscu PDF Drukuj Napisz e-mail
    Wpisał %s Patryk yarpo Jar
    poniedziałek, 21 września 2009 19:44
    Java Script / Artykuły JS

    Nim zaczniesz bombardować interneutów odwiedzających twoją stronę www milionem okienek otwieranych we wszystkich możliwych mijescach, zastanów się czy oby na pewno jest to najlepsza metoda zwraca na siebie uwagi.

    Łatwo jest otworzyć nowe okienko [tzw. "pop-up"], jednak czasem aż kusi, aby otwierało się ono w odpowiednim miejscu. Oczywiście da się to zrobić:-).

    Zacznijmy od kodu HTML/JS:

    {codecitation} <html>
<head>
<title>Strona</title>
<script type="text/javascript">
 function otworz(url, szerokosc, wysokosc) {
    var x = (screen.width/2)-(szerokosc/2); // ustalam współrzędne poziome
    var y = (screen.height/2)-(wysokosc/2); // ustalam współrzędne pionowe
    window.open(url,"launch","height="+wysokosc+",width="+szerokosc+",top="+y+",left="+x);
}
</script>
</head>
<body>
 <a href="javascript:otworz('strona.htm', 800,600)">Link otworzy stronę w odpowiednim miejscu</a>
</body>
</html> {/codecitation}

     W sekcji head znajduje się funkcja obliczająca odpowiednie współrzędne top i left. Właśnie te dwa parametry wskazują gdzie ma się otworzyć nowe okno. Parametry te można ustawić na sztywno, dodając jedynie odpowiednie atrybuty [top, left] do metody 'open'.

    Read more

    Strona 6 z 13
    << Początek < Poprzednia 1 2 3 4 5 6 7 8 9 10 Następna > Ostatnie >>