Blogerzy wszystkich platform, łączcie się!

Dyskusje Blogerów, Fotoblogerów i Vlogerów - fora blogowe, graficzne, ogólnotematyczne
rozmowy o blogach, porady, instrukcje, ciekawostki z internetu



::
Autor Wiadomość
magwilk 
Blogger.Klub

Dołączyła: 21 Kwi 2015
Posty: 1

  Wysłany:    [blogger] Płynne przewijanie do określonego fragmentu strony

Jak można zrobić płynne przewijanie do określonego fragmentu strony ? :help:

Chodzi mi o coś takiego jak np.: allaboutdesign.nl/#drukwerk

Niestety wykorzystując do tego SAME kotwice - wygląda to tragicznie :kwasny: ponieważ zawartość strony jedynie "przeskakuje" do danego miejsca. Można to w jakiś fajny sposób urozmaicić ? :hyhy:
 
  podziel się tym postem na:




Utwórz darmowe konto na forum --- Zaloguj się --- Polub Blogowicza na FB!
Dołącz do społeczności na G+ --- Dołącz do grupy Bloggerów na FB

Lukem 
Blogowicz.Friend
Noot noot!


Imię: Łukasz
Pomógł: 89 razy
Wiek: 32
Dołączył: 01 Kwi 2006
Posty: 1732
Miasto: Warszawa

Wysłany: 2015-07-24, 13:15   animowane przeskakiwanie odsyłaczy do wyznaczonego miejsca

OK. Jako że z powyższą instrukcją jest masa problemów i ich naprawianie jest dużo bardziej czasochłonne, niż się spodziewałem, postanowiłem napisać to rozwiązanie od nowa - tylko tym razem w sposób, w jaki to powinno być zrobione.

Na początek usuwamy wszystkie pozostałości po poprzedniej instrukcji.

I teraz kilka prostych kroków:

1. Przygotowujemy link z kotwicą w środku, np. w treści postu albo w gadżecie, o tak:

Kod

<a href="#docelowy_id">link</a>


2. Dodajemy na stronie kotwicę, do której ma przeskakiwać strona - jej nazwa musi się zgadzać z tym, co wpisaliśmy w linku, na przykład tak:

Kod

<p id="docelowy_id">Tutaj strona ma przeskoczyć</p>


3. Podpinamy jQuery, jeżeli nie ma go jeszcze w szablonie. Jeżeli już jest, to ten punkt można pominąć.

Poniższą linijkę:

Kod

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


wklejamy wewnątrz szablonu (Szablon -> Edytuj HTML).

Można tę linijkę wkleić również do nowego gadżetu HTML/JavaScript.

4. Doklejamy skrypt. Musi się on znaleźć _po_ wywołaniu jQuery - niekoniecznie bezpośrednio, ale dla własnej wygody najlepiej zrobić to analogicznie do punktu 3. Czyli albo bezpośrednio w szablonie, albo w poprzednio utworzonym gadżecie. A skrypt jest następujący:

Kod


<script type="text/javascript">

function jumpToLocation(idToJump) {
$("html, body").animate({ scrollTop: $(idToJump).offset().top }, 1000);
};

$(function() {
// płynne przejście przy załadowaniu strony

var jumpBlogowicz = window.location.hash;

if(jumpBlogowicz) {
jumpToLocation(jumpBlogowicz);
}

// obsługa linków z kotwicami

$("a[href^='#']").click(function() {
var anchor = $(this).attr("href");
jumpToLocation(anchor);

});
});
</script>


4. Gotowe.

Powyższy kod robi dwie rzeczy. Zapewnia płynny przejazd strony do wybranej kotwicy po kliknięciu na link. Oprócz tego dołożyłem coś jeszcze, czego w poprzedniej instrukcji zabrakło: jeśli podlinkujecie jakąś zewnętrzną stronę Waszego bloga (np. inny post albo podstronę) i dodacie w adresie istniejącą tam kotwicę
np.

Kod

http://waszblog.blogspot.com/jakis-wasz-wpis/#kotwica
, to płynne przejście zadziała również po załadowaniu tej nowej strony.

Poproszę o info, czy zadziałało. :)
______________________________________________________
:szok:

But we never gonna survive unless we get a little crazy...
 
  podziel się tym postem na:
magwilk 
Blogger.Klub

Dołączyła: 21 Kwi 2015
Posty: 1

Wysłany: 2015-07-24, 20:38   kotwice na blogspocie

Wszystko byłoby ok - działa ALE ;)

Działa tylko i wyłącznie jeżeli przykładowo <a href="#docelowy_id">link</a> umieścimy w treści jednego z gadżetów, a <p id="docelowy_id">Tutaj strona ma przeskoczyć</p> w 2 gadżecie i jest naprawdę super.

Ale jeżeli chcemy umieścić <a href="#docelowy_id">link</a> w gadżecie STRONY aby linki odnosiły do danego miejsca to już nie działa ;)

Natomiast jeżeli w gadżecie STRONY umieścimy link zewnętrzny

Kod

http://twojprzykladowy.blogspot.com/#nasza_kwatera
, wówczas odnosi nas do <p id="nasza_kwatera">Tutaj strona ma przeskoczyć</p> ale nie robi tego w sposób płynny tylko przeskakuje :)
 
  podziel się tym postem na:
Htsz 
Blogger Top Contributor
Blogowicz.Team


Zaproszone osoby: 83
Imię: Arkadiusz (Arek)
Pomógł: 806 razy
Wiek: 33
Dołączył: 01 Sty 2006
Posty: 8852
Miasto: Wrocław

Wysłany: 2015-07-24, 23:23   Tworzenie odsyłacza z płynnym przewijaniem do nagłówka

Lukem napisał/a:

Poproszę o info, czy zadziałało. :)
Skrypt działa dobrze, ale nie w przypadku blogspota o czym wspomniała już magwilk.

Tłumaczyłem ostatnio => Jak tworzyć odsyłacze na stronach blogspota i przez to, że trzeba podawać pełne adresy URL, powyższe rozwiązanie nie łapie tych kotwic.

Znalazłem inne, które zadziałało bez problemu:
Wiadomość (widoczna dla zarejestrowanych)
Również opiera się o jQuery.

Jak sprawdzić czy biblioteka jQuery jest już gdzieś załączona na blogu?
1. Otwórz swojego bloga w nowej karcie przeglądarki
2. kliknij w pustym miejscu strony prawym klawiszem myszy
3. z menu wybierz "pokaż źródło strony" (lub coś podobnego do tego)
4. otworzy się okno lub nowa karta - tam wciśnij kombinację ctrl+f (lub wybierz wyszukiwanie z górnego menu)
5. wpisz jquery i sprawdź czy gdzieś w źródle jest już odnośnik do biblioteki
6. jak nie ma żadnego, to wystarczy dopisać przed skryptem to co Lukem podał w punkcie trzecim swojej instrukcji.

Skrypt wklejamy do gadżetu HTML/JavaScript. Jeżeli ma być dodany w źródle szablonu, to prawdopodobnie & będzie trzeba zapisać jako &amp;

źródło skryptu:
Wiadomość (widoczna dla zarejestrowanych)
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się dodając link do tego forum na swoim blogu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku lub dodać do obserwowanych na google+. :^^:
 
  podziel się tym postem na:
Lukem 
Blogowicz.Friend
Noot noot!


Imię: Łukasz
Pomógł: 89 razy
Wiek: 32
Dołączył: 01 Kwi 2006
Posty: 1732
Miasto: Warszawa

Wysłany: 2015-07-26, 13:18   Re: odsyłacze

Htsz napisał/a:

Skrypt działa dobrze, ale nie w przypadku blogspota o czym wspomniała już magwilk.

Tłumaczyłem ostatnio Jak tworzyć odsyłacze na stronach blogspota i przez to, że trzeba podawać pełne adresy URL, powyższe rozwiązanie nie łapie tych kotwic.


Racja, moje niedopatrzenie. Jakimś obejściem problemu jest dodawanie kotwic w widoku HTML zamiast w edytorze (wtedy Blogspot niczego nie dopisuje), ale wygoda takiego rozwiązania jest dyskusyjna. :|
______________________________________________________
:szok:

But we never gonna survive unless we get a little crazy...
 
  podziel się tym postem na:
Htsz 
Blogger Top Contributor
Blogowicz.Team


Zaproszone osoby: 83
Imię: Arkadiusz (Arek)
Pomógł: 806 razy
Wiek: 33
Dołączył: 01 Sty 2006
Posty: 8852
Miasto: Wrocław

Wysłany: 2015-08-06, 16:45   

Lukem napisał/a:

Jakimś obejściem problemu jest dodawanie kotwic w widoku HTML zamiast w edytorze (wtedy Blogspot niczego nie dopisuje), ale wygoda takiego rozwiązania jest dyskusyjna. :|
Dlatego poszukałem takiego, które nie wymaga kombinowania ;)
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się dodając link do tego forum na swoim blogu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku lub dodać do obserwowanych na google+. :^^:
 
  podziel się tym postem na:
HitFan 
Blogger.Klub


Imię: Damian
Pomógł: 6 razy
Wiek: 22
Dołączył: 26 Lut 2016
Posty: 61
Miasto: Bytom

Wysłany: 2017-02-18, 01:07   

Spróbowałem dodać powyższy kod (ten wrzucony przez HTSZ jako ostatni) w edytorze HTML szablonu. Zaraz pod wywołaniem jQuery, ale niestety gdy tylko go dodam, znika mi całe menu główne - zostaje sam pasek, bez rozwijanego menu.
Ma ktoś pomysł, co może być nie tak?
 
  podziel się tym postem na:
Htsz 
Blogger Top Contributor
Blogowicz.Team


Zaproszone osoby: 83
Imię: Arkadiusz (Arek)
Pomógł: 806 razy
Wiek: 33
Dołączył: 01 Sty 2006
Posty: 8852
Miasto: Wrocław

Wysłany: 2017-02-18, 10:47   

Niektóre skrypty mogą ze sobą kolidować, chociaż ten nie powinien, bo jest wykonywany po spełnieniu określonego warunku. Spróbuj umieścić go na dole, przed </body>.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się dodając link do tego forum na swoim blogu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku lub dodać do obserwowanych na google+. :^^:
 
  podziel się tym postem na:
HitFan 
Blogger.Klub


Imię: Damian
Pomógł: 6 razy
Wiek: 22
Dołączył: 26 Lut 2016
Posty: 61
Miasto: Bytom

Wysłany: 2017-02-18, 13:11   

Niestety po wrzuceniu przed </body> w ogóle się nie wykonywał, natomiast po wrzuceniu gdzieś w środku efekt jest ten sam - znika menu główne. Niestety.
Może gryzie się to z przyciskiem wróć do góry? On właśnie płynnie skroluje, może idzie jakoś jego kod zmodyfikować?
 
  podziel się tym postem na:
Htsz 
Blogger Top Contributor
Blogowicz.Team


Zaproszone osoby: 83
Imię: Arkadiusz (Arek)
Pomógł: 806 razy
Wiek: 33
Dołączył: 01 Sty 2006
Posty: 8852
Miasto: Wrocław

Wysłany: 2017-02-18, 13:51   

To już niestety wymaga głębszych testów na żywo (czyli z wklejonym kodem, który zostanie przeanalizowany w firebugu / konsoli) i poświęcenia większej ilości czasu.

Możesz na własną rękę, metodą prób i błędów kasować elementy szablonu, i sprawdzać czy bez nich ten skrypt działa poprawnie.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się dodając link do tego forum na swoim blogu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku lub dodać do obserwowanych na google+. :^^:
 
  podziel się tym postem na:
Wyświetl posty z ostatnich:   
::
Odpowiedz do tematu
Nie możesz pisać nowych tematów. Zobacz szczegóły.
Nie możesz odpowiadać w tematach. Zobacz szczegóły.
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Nie możesz ściągać załączników na tym forum
Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Powered by phpBB & Weblove.pl © 2006-2018 Wrocław | modified by Przemo © 2003 phpBB Group.
skocz na górę   |  shoutbox
 
Dodaj na Facebooku:
Dodaj na Google+:


Zobacz także:


Szablony wordpress
kod zniżkowy -10% za licencję
w koszyku wpisz: Blogowicz
Wyszukaj na Blogowiczu:
snapchat blogowicz instagram blogowicz