Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML]Nawigacja - przewijanie strony głównej
kosmos
post 6.03.2015, 10:27:19
Post #1





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----

Witam,
Pozwolę sobie przytoczyć tą stronę, tylko i wyłącznie po to, aby zobrazować moje pytanie. Jeśli to zabronione, proszę o edytowanie postu, usunięcie linka i nazwanie tego po imieniu smile.gif

Jak nazywa się taki sposób nawigowania na stronie? Wywołanie danej akcji menu, powoduje przesuwanie głównego ekranu strony w górę lub w dół? Jak najprościej wykonać taką nawigację? Nie proszę o gotowe rozwiązania tylko podpowiedzi, materiały. Wiedziałbym gdzie szukać gdybym potrafil to nazwać smile.gif

Dzięki wielkie, pozdrawiam
N
Go to the top of the page
+Quote Post
kafowi
post 6.03.2015, 11:28:55
Post #2





Grupa: Zarejestrowani
Postów: 75
Pomógł: 20
Dołączył: 13.02.2015

Ostrzeżenie: (0%)
-----

To są kotwice, a efekt przedstawiony na stronie to kotwica z płynnym przejściem.
Możesz to wykonać za pomocą jakiejś biblioteki np. jQuery.scrollTo
Go to the top of the page
+Quote Post
robertpiaty
post 6.03.2015, 19:12:20
Post #3





Grupa: Zarejestrowani
Postów: 113
Pomógł: 18
Dołączył: 7.10.2007
Skąd: Pruszków

Ostrzeżenie: (0%)
-----

Można też to zrobić za pomocą samego jQuery
[HTML] pobierz, plaintext 
  1. $("html, body").animate({ scrollTop: $('#title1').offset().top }, 1000);
[HTML] pobierz, plaintext

Gdzie #title1 to jest id elementu do którego chcesz przewinąć.


--------------------
Tworzenie stron internetowych Pruszków | Aplikacje CRM Warszawa
Go to the top of the page
+Quote Post
kosmos
post 16.03.2015, 11:33:23
Post #4





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----

Kontynuując wątek.
Znalazłem w sieci taki oto kawałek kodu:
[PHP] pobierz, plaintext 
  1. $('#content').hide().stop(true, true).slideDown(1000);
  2.  
  3. $('#next, #prev').on('click', function(event){
  4.     event.preventDefault();
  5.     var adres = $(this).prop('href');
  6.     $('#content').stop(true, true).slideUp(1000, function(){
  7.         window.location.href(adres);
  8.     });
  9. });
[PHP] pobierz, plaintext


Czy ktoś mógłby mi go wytłumaczyć? Mając np:
[HTML] pobierz, plaintext 
  1. <div id="punkt_A"></div>
  2. <div id="punkt_B"></div>
[HTML] pobierz, plaintext


Chcę aby po kliknięciu na button znajdujący się w divie -> punkt_ A, strona przesunęła się w dół do diva -> punkt_B (czyli mamy stronę główną z odnosnikiem np formularz i po kliknięciu strona przesuwa się w dół do tego formularza który jest w divie punktB. Reasumując chodzi o identyczny efekt przejścia jak na stronie w linku który przytoczyłem w pierwszym poście.

Jak nalezy zmodyfikowac powyższy kod aby to zadziałało? W jQuery jestem zielony smile.gif - póki co.

Ten post edytował kosmos 16.03.2015, 11:50:49
Go to the top of the page
+Quote Post
kujol
post 16.03.2015, 14:55:06
Post #5





Grupa: Zarejestrowani
Postów: 324
Pomógł: 27
Dołączył: 21.07.2013

Ostrzeżenie: (0%)
-----

Normalnie to się robi tak, że do linku doklejasz: "#id_elementu_do_ktorego_ma_nas_przeniesc"
Wiecej Ci nie powiem, bo z js jestem cienki wink.gif


--------------------
;)
Go to the top of the page
+Quote Post
kosmos
post 18.03.2015, 20:18:18
Post #6





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----

Próbuję nauczyć się podstaw aby to zrozumieć ale pewnie coś robię źle z pewnego przykładu:

w css mam:
[PHP] pobierz, plaintext 
  1. #pierwszy {
  2.  
  3.     background: none repeat scroll 0 0 #d0e8ff;
  4.     border: 2px solid #0569af;
  5.     color: #0569af;
  6.     font: bold 12px/100px Tahoma;
  7.     height: 100px;
  8.     text-align: center;
  9.     width: 100px;
  10. }
[PHP] pobierz, plaintext


w pliku base.php mam

[PHP] pobierz, plaintext 
  1. <html>
  2.    <head>  
  3.    </head>
  4. <body>
  5.    <div id="pierwszy" style="color: red; display: block;">Kliknij mnie</div>
  6. <script> $('#pierwszy').css('color','red').hide('slow').show(3000);  </script> 
  7. <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  8. <script>!window.jQuery && document.write('<script src="jquery.min.js"><\/script>')</script>         
  9. </body>
  10. </html>
[PHP] pobierz, plaintext


Poprawnie próbuje użyć tego skrytpu?

Chodzi o efekt taki jak na tej stronce http://kursjs.pl/kurs/jquery/jquery.html tam gdzie jest przykład z "kliknij mnie"


Hej ... pomoże ktoś ? worriedsmiley.gif

update 18-03-2015

witam ponownie.
w dalszym ciągu próbuję uzyskać płynne przejście o jeden ekran w dół po wciśnięciu przycisku.
Znalazłem w sieci takie coś:
[HTML] pobierz, plaintext 
  1.  $(jQuery.browser.webkit ? "body": "html").animate({
  2.     scrollTop: '100px','fast', function(){
  3.         // Code to be fired when complete goes here
  4.     }
  5. });
[HTML] pobierz, plaintext


Źródło: http://harmssite.com/2013/08/jquery-animat...r-all-browsers/

Mógłby mi ktoś wytłumaczyć jak mógłbym użyć to u siebie? oraz jak to działa?
Go to the top of the page
+Quote Post
trueblue
post 18.03.2015, 20:40:32
Post #7





Grupa: Zarejestrowani
Postów: 6 805
Pomógł: 1827
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

http://jsfiddle.net/jL94mxvt/


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
kosmos
post 18.03.2015, 20:47:00
Post #8





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----

o dzięki!
a w którym miejscu mogę ustawiać szybkość przewijania?
Go to the top of the page
+Quote Post
trueblue
post 18.03.2015, 20:52:20
Post #9





Grupa: Zarejestrowani
Postów: 6 805
Pomógł: 1827
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

http://jsfiddle.net/jL94mxvt/1/
1000 = 1s (1000ms)
Jest tam jakiś błąd, każde przewinięcie jest mniejsze o 2px, ale na razie nie wnikam. Być może po przerzucenie poza jsFiddle będzie ok.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
kosmos
post 18.03.2015, 20:58:36
Post #10





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----

W jsFiddle działa elegancko, ale ja to muszę przełożyć na Symfony2 ;/ a tam niestety w taki sposób działac nie chce.

[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3.     <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  4.     <meta http-equiv="Reply-to" content="test@gmail.pl" />
  5.     <meta name="Author" content="" />
  6.     <meta name="Description" content="Tu wpisz opis zawartości strony" />
  7.     <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
  8.     <title><?php echo 'Welcome!';?></title>
  9.     <link href="<?php echo $view['assets']->getUrl('css/style5.css') ?>" rel="stylesheet" type="text/css" />
  10.  
  11.     <!-- dodanie jQuery do dokumentu -->
  12.     <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  13.     <!-- Nasz kod java script: -->
  14.  
  15.     <script type="text/javascript">
  16. $(document).ready(function () {
  17.     var ua=navigator.userAgent.toLowerCase();
  18.     var webkit=navigator.userAgent.indexOf('AppleWebKit')!=-1;
  19.     $('#link').click(function (e) {
  20.         e.preventDefault();
  21.         $(webkit?"body":"html").animate({
  22.             scrollTop: "+="+$(document.body).height()+'px'
  23.         },1000);
  24.     });
  25. });
  26.  
  27. </script>
  28. </head>
  29.  
  30.  
  31.  
  32. <body>
  33. <a href="#" id="link">przewiń</a>
  34.  
  35. <div>1</div>
  36. <div>2</div>
  37. <div>3</div>
  38. <div>4</div>
  39. <div>5</div>
  40. </body>
  41. </html>
[PHP] pobierz, plaintext
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 4.07.2025 - 10:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn