GoldenLine
Zaloguj się
Tomasz Sopel

Tomasz Sopel Student, Uniwersytet
Gdański

Temat: Animowane przejście ze strony na stronę

Witam serdecznie,
mam coś takiego:

Obrazek


chciałbym żeby po kliknięciu na strzałki strona jakoś ładnie (animowanie) "przeszła" z 1 na 2...

Znacie może jakieś skrypty w JQuerry które to potrafią?:)

Z góry dziękuje za pomoc :)
Link do wypowiedziLink
Krzysztof N.

Krzysztof N. CEO. Aplikacje
internetowe i
mobilne. Symfony,
Zend.

Temat: Animowane przejście ze strony na stronę



<html>

    <head>

        <title></title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function(){

                $('body').hide().fadeIn(2000);

            });

        </script>

    </head>

    <body>

        <div>Zawartosc Twojej witryny</div>

    </body>

</html>
Kluczowy fragment:
$('body').hide().fadeIn(2000);
Enjoy! :]
Link do wypowiedziLink

konto usunięte

Temat: Animowane przejście ze strony na stronę

Krzysztof N.:


<html>

    <head>

        <title></title>

        <meta http-equiv="Content-Type" content="text/html; 	[/quote]> charset=UTF-8" />[quote]        <script type="text/javascript" 	[/quote]> src="http://code.jquery.com/jquery-1.7.1.min.js"></script>[quote]        <script type="text/javascript">

            $(document).ready(function(){

                $('body').hide().fadeIn(2000);

            });

        </script>

    </head>

    <body>

        <div>Zawartosc Twojej witryny</div>

    </body>

</html>
Kluczowy fragment:
$('body').hide().fadeIn(2000);
Enjoy! :]

Dzieki temu skryptowi strona zniknie i... tyle. Nic wiecej.
Link do wypowiedziLink
Krzysztof N.

Krzysztof N. CEO. Aplikacje
internetowe i
mobilne. Symfony,
Zend.

Temat: Animowane przejście ze strony na stronę

Konrad Pawlikowski:
Dzieki temu skryptowi strona zniknie i... tyle. Nic wiecej.
O, ta zniewaga testu wymaga. Masz: http://www.meritoo.pl/packages/tests/content_fade_in/index.html. I co, strona zniknęła? Widać, że nawet nie przetestowałeś tego co podano wprost na tacy.Krzysztof N. edytował(a) ten post dnia 24.05.12 o godzinie 14:55
Link do wypowiedziLink

konto usunięte

Temat: Animowane przejście ze strony na stronę

chciałbym żeby po kliknięciu na strzałki strona
jakoś ładnie (animowanie) "przeszła" z 1 na 2...
Znacie może jakieś skrypty w JQuerry które to potrafią?:)

żeby 'ładnie i animowanie' przeszła to raczej nie rób tego na dwóch osobnych stronach. Prędzej zrób dwa DIVy, i potem jQuery:
$("#id-linka").click(function(){
$("#id-pierwszego-diva").fadeOut();
$("#id-drugiego-diva").fadeIn();
return false;
});
czy jakoś tak. Z tym, że ten drugi div powinien być niewidoczny na starcie, czyli w CSS:
#id-pierwszego-diva {display:none}

@Krzystof Nizioł, właśnie nie do końca. Jeśli się nie mylę to ten przykład spowoduje, że po kliknięciu w strzałkę:
1. pasek w przeglądarce zacznie pokazywać że coś się wczytuje
2. po kilku sekundach wczyta się strona
3. następnie zniknie, ujrzymy biały ekran.
4. a potem zacznie się rozświetlać, wkurzając użytkownika.

Mogę się mylić, bo nie testowałem dogłębnie twojego rozwiązania, ale wydaje mi się, że tak właśnie będzie. Ciężko to chyba określić płynnym przejściem.Łukasz Lityński edytował(a) ten post dnia 24.05.12 o godzinie 15:52
Link do wypowiedziLink

konto usunięte

Temat: Animowane przejście ze strony na stronę

Krzysztof N.:
Konrad Pawlikowski:
Dzieki temu skryptowi strona zniknie i... tyle. Nic wiecej.
O, ta zniewaga testu wymaga. Masz: http://www.meritoo.pl/packages/tests/content_fade_in/index.html. I co, strona zniknęła? Widać, że nawet nie przetestowałeś tego co podano wprost na tacy.

Oddaje wszelki honor, wyslowilem sie tragicznie. Mialem na mysli to, ze brakuje efektu plynnego przejscia aktywnej strony.
Link do wypowiedziLink

konto usunięte

Temat: Animowane przejście ze strony na stronę

Łukasz Lityński:
chciałbym żeby po kliknięciu na strzałki strona
jakoś ładnie (animowanie) "przeszła" z 1 na 2...
Znacie może jakieś skrypty w JQuerry które to potrafią?:)

żeby 'ładnie i animowanie' przeszła to raczej nie rób tego na dwóch osobnych stronach. Prędzej zrób dwa DIVy, i potem jQuery:
$("#id-linka").click(function(){
$("#id-pierwszego-diva").fadeOut();
$("#id-drugiego-diva").fadeIn();
return false;
});
czy jakoś tak. Z tym, że ten drugi div powinien być niewidoczny na starcie, czyli w CSS:
#id-pierwszego-diva {display:none}

@Krzystof Nizioł, właśnie nie do końca. Jeśli się nie mylę to ten przykład spowoduje, że po kliknięciu w strzałkę:
1. pasek w przeglądarce zacznie pokazywać że coś się wczytuje
2. po kilku sekundach wczyta się strona
3. następnie zniknie, ujrzymy biały ekran.
4. a potem zacznie się rozświetlać, wkurzając użytkownika.

Mogę się mylić, bo nie testowałem dogłębnie twojego rozwiązania, ale wydaje mi się, że tak właśnie będzie. Ciężko to chyba określić płynnym przejściem.

Po pierwsze - to najgorszy blad jaki mozna zrobic, zeby w css ustawic display: none;. Jesli ktos ma wylaczony JS to nie zobaczy strony.

Po drugie - po co dwa divy?

Rozwianie Piotra Lewandowskiego bedace rozwinieciem mojego skryptu (gorzej napisanego)
$('#content').hide().stop(true, true).slideDown(1000);



$('#next, #prev').on('click', function(event){

    event.preventDefault();

    var adres = $(this).prop('href');

    $('#content').stop(true, true).slideUp(1000, function(){

        window.location.href(adres);

    });

});


Link: http://www.goldenline.pl/forum/2919230/animowane-przej...Konrad Pawlikowski edytował(a) ten post dnia 24.05.12 o godzinie 15:59
Link do wypowiedziLink
Krzysztof N.

Krzysztof N. CEO. Aplikacje
internetowe i
mobilne. Symfony,
Zend.

Temat: Animowane przejście ze strony na stronę

Łukasz Lityński:
żeby 'ładnie i animowanie' przeszła to raczej nie rób tego na dwóch osobnych stronach. Prędzej zrób dwa DIVy, i potem jQuery:
$("#id-linka").click(function(){
$("#id-pierwszego-diva").fadeOut();
$("#id-drugiego-diva").fadeIn();
return false;
});
Zapewne zadziała. Nie testowałem - przyznaję się :] Jako wadę widzę tutaj konieczność wczytania całej możliwej treści, każdy artykuł / przepis / produkt* do osobnego div'a i pokazywania tylko jednego / aktywnego div'a. Zauważ, że w przypadku, gdy masz 3 div'y to pal licho, a gdy jest ich 300, to trochę się robi zamieszanko**.

* - niepotrzebne skreślić
** - coś mniejszego niż zamieszanie
;)
Łukasz Lityński:
@Krzystof Nizioł, właśnie nie do końca. Jeśli się nie mylę to ten przykład spowoduje, że po kliknięciu w strzałkę:
1. pasek w przeglądarce zacznie pokazywać że coś się wczytuje
2. po kilku sekundach wczyta się strona
3. następnie zniknie, ujrzymy biały ekran.
4. a potem zacznie się rozświetlać, wkurzając użytkownika.
Podany przykład miał na celu naprowadzić autora wątku na rozwiązanie. Przy Twoich założeniach ma to prawo nie działać. Podałem wędkę, a nie rybę :]
Link do wypowiedziLink

konto usunięte

Temat: Animowane przejście ze strony na stronę

Jako wadę widzę tutaj konieczność wczytania całej możliwej treści, każdy artykuł / przepis /
produkt* do osobnego div'a i pokazywania tylko jednego / aktywnego div'a.
Zauważ, że w przypadku, gdy masz 3 div'y to pal licho, a gdy jest ich 300,
to trochę się robi zamieszanko**.
faktycznie. Nie pomyślałem o tym. Ale to w takim razie ja bym użył Ajaxa i zamiast przeładowywać stronę, ładowałbym nowy przepis do Diva. W jQuery jest nawet gotowa funkcja $.load, która to robi.

<style>#przepis-1, #przepis-2{ position:absolute; }</style>
<div id="przepis-1">
Pierwszy przepis....
link:<a class="next" href="przepis2.html">Dalej</a>
</div>

<div id="przepis-2"></div>

<script>
$(function(){
var nrDiva=1;
$(".next").live('click', function(){
$("#przepis-" + nrDiva).fadeOut();
nrDiva = nrDiva==1? 2: 1;
$("#przepis-" + nrDiva).load($(this).attr('href')).fadeIn();
return false;
});
});
</script>

i będzie działać.

EDIT:
window.location.href(adres);
no właśnie to mi się cały czas nie podoba. Jak dla mnie przy przeładowaniu _całej_ strony nie powinno się męczyć usera dodatkowymi efektami, bo przy słabym łączu efekt jest odwrotny do zamierzonego.Łukasz Lityński edytował(a) ten post dnia 24.05.12 o godzinie 21:58
Link do wypowiedziLink

konto usunięte

Temat: Animowane przejście ze strony na stronę

Łukasz Lityński:
Jako wadę widzę tutaj konieczność wczytania całej możliwej treści, każdy artykuł / przepis /
produkt* do osobnego div'a i pokazywania tylko jednego / aktywnego div'a.
Zauważ, że w przypadku, gdy masz 3 div'y to pal licho, a gdy jest ich 300,
to trochę się robi zamieszanko**.
faktycznie. Nie pomyślałem o tym. Ale to w takim razie ja bym użył Ajaxa i zamiast przeładowywać stronę, ładowałbym nowy przepis do Diva. W jQuery jest nawet gotowa funkcja $.load, która to robi.

<style>#przepis-1, #przepis-2{ position:absolute; }</style>
<div id="przepis-1">
Pierwszy przepis....
link:<a class="next" href="przepis2.html">Dalej</a>
</div>

<div id="przepis-2"></div>

<script>
$(function(){
var nrDiva=1;
$(".next").live('click', function(){
$("#przepis-" + nrDiva).fadeOut();
nrDiva = nrDiva==1? 2: 1;
$("#przepis-" + nrDiva).load($(this).attr('href')).fadeIn();
return false;
});
});
</script>

i będzie działać.

EDIT:
window.location.href(adres);
no właśnie to mi się cały czas nie podoba. Jak dla mnie przy przeładowaniu _całej_ strony nie powinno się męczyć usera dodatkowymi efektami, bo przy słabym łączu efekt jest odwrotny do zamierzonego.
Lacze nic nie ma do efektu. A caly js niezbedny do jego uzyskania nie zajmuje nawet 0.5KB. I co zlego jest w window.location.href?

Twoje rozwiazania wciaz sa slabe.
1. Trzeba zaladowac dziesiatki divow i setki kb na jedna podstrone
2. Trzeba przerabiac aplikacje i dorabiac wsparcie dla przegladarek nieobslugujacych ajaxa. Wyzsza szkola jazdy. Na ta chwile mielibysmy incepcje na stronie :)
3. Od czego jest cache, jak nie od tego zeby nie zasmiecac userowi lacza?
Link do wypowiedziLink
Andrzej Prażmo

Andrzej Prażmo programista .NET,
właściciel firmy SEE
Software

Temat: Animowane przejście ze strony na stronę

Konrad Pawlikowski:
2. Trzeba przerabiac aplikacje i dorabiac wsparcie dla przegladarek nieobslugujacych ajaxa.

Liczba userów z wyłaczonym JavaScriptem jest tak śladowa, że chyba nie ma sensu zawracać sobie nimi, za przeproszeniem, dupy. Jak to się mówi, śmierć frajerom a biznes nie zbiednieje jak nie sprzeda towaru tym kilkudziesięciu osobom w Polsce. :-)
Link do wypowiedziLink

konto usunięte

Temat: Animowane przejście ze strony na stronę

1. Trzeba zaladowac dziesiatki divow i setki kb na jedna podstrone
Nie rozumiem trochę tego zdania. W sensie, że w pamięci RAM będą dziesiątki divów? Przecież Garbage Collector się tym zajmie. Problem to masz np. na Facebooku, gdzie takie rozwiązania zamulają po prostu stronę, a nie jak są dwa divy na krzyż.
2. Trzeba przerabiac aplikacje i dorabiac wsparcie dla przegladarek nieobslugujacych ajaxa. Wyzsza szkola jazdy.
taaa... dwie linijki kodu w PHP:
function isAjax() { return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'));

a potem w zależności od wyniku funkcji isAjax() dać albo pełną stronę, albo tylko zawartość diva.
Liczba userów z wyłaczonym JavaScriptem jest tak śladowa,
że chyba nie ma sensu zawracać sobie nimi,
za przeproszeniem, dupy
z drugiej strony nie ma co przesadzać w drugą stronę - idealny link powinien działać bez ajaxa, po to, żeby można było go kliknąć środkowym przyciskiem myszy (a niestety wiele serwisów olewa to - słynne javascript:void(); czy podobne praktyki).Łukasz Lityński edytował(a) ten post dnia 24.05.12 o godzinie 23:05
Link do wypowiedziLink

konto usunięte

Temat: Animowane przejście ze strony na stronę

Andrzej Prażmo:
Konrad Pawlikowski:
2. Trzeba przerabiac aplikacje i dorabiac wsparcie dla przegladarek nieobslugujacych ajaxa.

Liczba userów z wyłaczonym JavaScriptem jest tak śladowa, że chyba nie ma sensu zawracać sobie nimi, za przeproszeniem, dupy. Jak to się mówi, śmierć frajerom a biznes nie zbiednieje jak nie sprzeda towaru tym kilkudziesięciu osobom w Polsce. :-)

Ja wyznaje inne podejscia do tworzenia stron.

Łukasz Lityński:
1. Trzeba zaladowac dziesiatki divow i setki kb na jedna podstrone
Nie rozumiem trochę tego zdania. W sensie, że w pamięci RAM będą dziesiątki divów? Przecież Garbage Collector się tym zajmie. Problem to masz np. na Facebooku, gdzie takie rozwiązania zamulają po prostu stronę, a nie jak są dwa divy na krzyż.
2. Trzeba przerabiac aplikacje i dorabiac wsparcie dla przegladarek nieobslugujacych ajaxa. Wyzsza szkola jazdy.
taaa... dwie linijki kodu w PHP:
function isAjax() { return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'));

a potem w zależności od wyniku funkcji isAjax() dać albo pełną stronę, albo tylko zawartość diva.
Liczba userów z wyłaczonym JavaScriptem jest tak śladowa,
że chyba nie ma sensu zawracać sobie nimi,
za przeproszeniem, dupy
z drugiej strony nie ma co przesadzać w drugą stronę - idealny link powinien działać bez ajaxa, po to, żeby można było go kliknąć środkowym przyciskiem myszy (a niestety wiele serwisów olewa to - słynne javascript:void(); czy podobne praktyki).

Mowisz ze nie ma co usera z wolnym laczem katowac skryptem dugosci 5 linijek, a chcesz ladowac wszystkie przepisy z serwisu na jedna strone html?

A jesli autor watku nie potrafi zrobic tak prostej rzeczy myslisz, ze przerobi aplikacje na obsluge ajaxa? Pozatym aplikacja moze wiec wiele plikow, byc pisana na 100 sposobow. Nie wystarczy wstawic 2 linijek ktore zalatwia sprawe. A linki nieajaxowe potrzebne sa np. dla google. Nie chodzi tylko o srodkowy przycisk myszki.
Link do wypowiedziLink

konto usunięte

Temat: Animowane przejście ze strony na stronę

chcesz ladowac wszystkie przepisy z serwisu na jedna strone html
czytaj ze zrozumieniem, bo ja już jestem dwa mile dalej ;) rzuciłem taką propozycję zakładając że przepisów będzie tylko dwa, ale się z niej wycofałem przecież (bo ktoś słusznie zwrócił uwagę, że przepisów może być więcej + dochodzi problem z display:none;)

Chodzi mi o zwykłe bezkolizyjne ładowanie contentu ajaxem ad hoc.
1. przygotujesz normalną stronę, z normalnymi linkami, bez javascripta, bez efektów, bez animacji, bez niczego for kiddies.
2. a potem robisz myk i część z linków wczytujesz ajaxem (onclick+return false;), i dodajesz efekty
3. jeszcze tylko sprawdzanie nagłówków HTTP po stronie serwera albo inny sposób (np. ?ajax=1 w GET), żeby ustalić czy dać klientowi ajaxową stronę czy nie.
A jesli autor watku nie potrafi zrobic tak prostej rzeczy myslisz,
ze przerobi aplikacje na obsluge ajaxa?
i to może być problem faktycznie. Z drugiej strony jak bym miał własną pizzerię/bar/whatever(ciężko rozpoznać co jest na tym zdjęciu ale z pewnością jakaś potrawa...), a nie umiałbym programować, to bym jednak nie bawił się w robienie tego samemu, tylko bym się szarpnął i zatrudnił profesjonalistę.Łukasz Lityński edytował(a) ten post dnia 25.05.12 o godzinie 00:55
Link do wypowiedziLink
Andrzej Prażmo

Andrzej Prażmo programista .NET,
właściciel firmy SEE
Software

Temat: Animowane przejście ze strony na stronę

Konrad Pawlikowski:
Andrzej Prażmo:
Liczba userów z wyłaczonym JavaScriptem jest tak śladowa, że chyba nie ma sensu zawracać sobie nimi, za przeproszeniem, dupy. Jak to się mówi, śmierć frajerom a biznes nie zbiednieje jak nie sprzeda towaru tym kilkudziesięciu osobom w Polsce. :-)

Ja wyznaje inne podejscia do tworzenia stron.

To nie jest kwestia podejścia, tylko zwykłej opłacalności. Czas realizacji projektu jest obecnie chyba jednym z podstawowych kryteriów wyboru producenta oprogramowania. Poza tym czysty HTML w porównaniu do obecnych JavaScriptowych rozwiązań jest po prostu wyjątkowo prymitywny a o ergonomii i intuicyjności nawet nie ma co wspominać. Większość przeglądarkowych systemów z czasów sprzed AJAXA było przekleństwem dla użytkowników, którzy nagle musieli przesiąść się z arkuszy excelowych na toporne HTML-owe formularze. Ja z kolei wyznaję podejście, że oprogramowanie ma użytkownikom pomagać i zaoszczędzić czas a nie przeszkadzać.
Link do wypowiedziLink

konto usunięte

Temat: Animowane przejście ze strony na stronę

Andrzej Prażmo:
Konrad Pawlikowski:
Andrzej Prażmo:
Liczba userów z wyłaczonym JavaScriptem jest tak śladowa, że chyba nie ma sensu zawracać sobie nimi, za przeproszeniem, dupy. Jak to się mówi, śmierć frajerom a biznes nie zbiednieje jak nie sprzeda towaru tym kilkudziesięciu osobom w Polsce. :-)

Ja wyznaje inne podejscia do tworzenia stron.

To nie jest kwestia podejścia, tylko zwykłej opłacalności. Czas realizacji projektu jest obecnie chyba jednym z podstawowych kryteriów wyboru producenta oprogramowania. Poza tym czysty HTML w porównaniu do obecnych JavaScriptowych rozwiązań jest po prostu wyjątkowo prymitywny a o ergonomii i intuicyjności nawet nie ma co wspominać. Większość przeglądarkowych systemów z czasów sprzed AJAXA było przekleństwem dla użytkowników, którzy nagle musieli przesiąść się z arkuszy excelowych na toporne HTML-owe formularze. Ja z kolei wyznaję podejście, że oprogramowanie ma użytkownikom pomagać i zaoszczędzić czas a nie przeszkadzać.

Pracujac nad duzymi projektami moze to ma znaczenie, ale przy stronach firmowych/sklepikach/katalogach produktow to wylacznie kwestia dobrej woli.

JS moze sie wysypac, przegladarka moze go nie obsugiwac, moze wystapic jakis blad... Cokolwiek i strona staje sie zupelnie nieodstepna.

Zamiast w css
display: none;

mozna uzyc
document.getElementsByTagName('body').style.display = 'none';



lub



$('body').hide();

co wcale nie jest trudniejsze, nie sadzisz? I strona od razu staje sie dostepna dla ludzi z wylaczonym js.

Pominiecie czegos takiego to zwyczajne mega lenistwo do kwadratu.
Link do wypowiedziLink

konto usunięte

Temat: Animowane przejście ze strony na stronę

document.getElementsByTagName('body').style.display = 'none';
lub
$('body').hide();
zastanawiam się czy nie lepsze byłoby w takim wypadku document.write("<style>body {display:none}</style>"), na początku dokumentu...Łukasz Lityński edytował(a) ten post dnia 25.05.12 o godzinie 14:38
Link do wypowiedziLink

konto usunięte

Temat: Animowane przejście ze strony na stronę

Łukasz Lityński:
document.getElementsByTagName('body').style.display = 'none';
lub
$('body').hide();
zastanawiam się czy nie lepsze byłoby w takim wypadku document.write("<style>body {display:none}</style>"), na początku dokumentu...

Jesli dobrze pamietam przy dtd xhtml document.write nie ogarnie. Pozatym po co tworzyc nowe wezly dom? Najprostsze rozwiazania sa najlepsze.
Link do wypowiedziLink

konto usunięte

Temat: Animowane przejście ze strony na stronę

najładniejsze rozwiązania są najlepsze ;) a to rozwiązanie będzie brzydko migać, ponieważ żeby odpalić $("body").hide() musisz najpierw poczekać aż załaduje się cały dokument, więc de facto pokaże się coś, a potem zniknie.

chociaż chyba już odeszliśmy od tematu.

>Pozatym po co tworzyc nowe wezly dom?
Faktycznie te 500 czy 501 węzłów na stronie, wielka róznica ;) a samo jQuery ile obiektów tworzy...
Link do wypowiedziLink

konto usunięte

Temat: Animowane przejście ze strony na stronę

Łukasz Lityński:
najładniejsze rozwiązania są najlepsze ;) a to rozwiązanie będzie brzydko migać, ponieważ żeby odpalić $("body").hide() musisz najpierw poczekać aż załaduje się cały dokument, więc de facto pokaże się coś, a potem zniknie.

chociaż chyba już odeszliśmy od tematu.

>Pozatym po co tworzyc nowe wezly dom?
Faktycznie te 500 czy 501 węzłów na stronie, wielka róznica ;) a samo jQuery ile obiektów tworzy...

$('body').hide();

mozna wyrzucic poza event ready :) a plain javascript mozna podpiac nawet pod samo body lub wrzucic do head. Wiadomo ze roznice wydajnosci to milionowe czesci sekundy i ze to tak naprawde nie robi zadnej roznicy, jednak wciaz ladniejsze wydaje mi sie nadanie stylu inline elementowi niz tworzenie kolejnej sekcji style. No i zostaje problem xhtml.
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj