Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Przewijanie podston
.rmvb's
post
Post #1





Grupa: Zarejestrowani
Postów: 37
Pomógł: 0
Dołączył: 26.09.2012

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

Witam,
Przeglądajac sieć trafiłem na stronę

http://www.inwentaryzacje.org/#!oferta/mainPage

Chciałem rozszyfrować jak działa przechodzenie tych podstron.
Plusem jest to, że gdy pomniejszymy stronę, to ona nadal działa poprawnie.
Mógłby ktoś pomóc zrozumieć/napisać mi taką akcję?

Plusem byłoby również, gdyby to mogło dziać się nie ma 100% monitora, ale powiedzmy jedynie w jednym fragmencie strony - jakiś div.
Zapraszam do dyskusji.
Go to the top of the page
+Quote Post
Kshyhoo
post
Post #2





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
A ciężko w kod strony spojrzeć?
Go to the top of the page
+Quote Post
.rmvb's
post
Post #3





Grupa: Zarejestrowani
Postów: 37
Pomógł: 0
Dołączył: 26.09.2012

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

Spogladam ale dużo załaczonych bibliotek, kodów i skryptów.
Raczej myślałem, że ktoś spróbuje mi podpowiedzieć
Go to the top of the page
+Quote Post
Maciek1705
post
Post #4





Grupa: Zarejestrowani
Postów: 157
Pomógł: 3
Dołączył: 15.06.2009

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

proszę o to przykład z kodem live http://jsfiddle.net/k_rma/VmSX4/
efekt możesz uzyskać np korzystając z jquery konkretny efekt to przejście typu slide (left lub right)
Go to the top of the page
+Quote Post
.rmvb's
post
Post #5





Grupa: Zarejestrowani
Postów: 37
Pomógł: 0
Dołączył: 26.09.2012

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

Suuuper (IMG:style_emoticons/default/wink.gif)
Teraz z taką podstawą to już dowolnie sobie będę mógł modyfikować pod moje potrzeby (IMG:style_emoticons/default/wink.gif)

Wielkie dzięki (IMG:style_emoticons/default/wink.gif)
Go to the top of the page
+Quote Post
Talidali
post
Post #6





Grupa: Zarejestrowani
Postów: 79
Pomógł: 19
Dołączył: 31.05.2013

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

Wtrącę swoje trzy grosze.
Ciekawsze efekty i płynniejsze możesz uzyskać za pomocą fajnego plugina do jquery http://ricostacruz.com/jquery.transit/
Go to the top of the page
+Quote Post
.rmvb's
post
Post #7





Grupa: Zarejestrowani
Postów: 37
Pomógł: 0
Dołączył: 26.09.2012

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

Witam ponownie.
Zastosowałem się do wskazówki ale ten kod, który tam był prezentowany, jedynie działał fajnie, jeśli przejście było pomiędzy dwoma divami.
Postanowiłem rozbudować tą funkcjonalność i opublikować tutaj, ponieważ taki skrypcik, mógłby się przydać wielu (IMG:style_emoticons/default/wink.gif)
Niestety napotkałem błąd, nie wiem dlaczego dzieje się źle ;(
Wrzucę kod i postarajmy się wspólnie znaleźć błąd.

Więc tak, część html:
[HTML] pobierz, plaintext 
  1. <body>
  2. 	<div id="przewijanie">
  3. 		<div id="zmieniacz">
  4.  
  5. 			<div class="dwa">
  6. 				<button value="jeden">jeden</button>
  7. 				<button value="dwa">dwa</button>
  8. 				<button value="trzy">trzy</button>
  9. 				<button value="cztery">cztery</button>
  10. 				<br><p>Trololo div 2</p>
  11. 			</div>
  12.  
  13. 			<div class="trzy">
  14. 				<button value="jeden">jeden</button>
  15. 				<button value="dwa">dwa</button>
  16. 				<button value="trzy">trzy</button>
  17. 				<button value="cztery">cztery</button>
  18. 				<br><p>Trololo div 3</p>
  19. 			</div>
  20.  
  21. 			<div class="cztery">
  22. 				<button value="jeden">jeden</button>
  23. 				<button value="dwa">dwa</button>
  24. 				<button value="trzy">trzy</button>
  25. 				<button value="cztery">cztery</button>
  26. 				<br><p>Trololo div 4</p>
  27. 			</div>
  28.  
  29. 			<div class="jeden">
  30. 				<button value="jeden">jeden</button>
  31. 				<button value="dwa">dwa</button>
  32. 				<button value="trzy">trzy</button>
  33. 				<button value="cztery">cztery</button>
  34. 				<br><br><br><p>Trololo div 1</p>
  35. 			</div>
  36. 		</div>
  37.  
  38. 	</div>
  39. </body>
[HTML] pobierz, plaintext


część css:

#przewijanie{
position: relative;
width: 400px;
border: 1px solid red;
height: 500px;
overflow:hidden;
}
#zmieniacz{
width: 800px;
height: 500px;
position: relative;
}
.jeden{
width: 400px;
height: 500px;
background-color: red;
position: absolute;
}
.dwa{
width: 400px;
height: 500px;
background-color: green;
position: absolute;
opacity: 0.0;
}
.trzy{
width: 400px;
height: 500px;
background-color: blue;
position: absolute;
opacity: 0.0;
}
.cztery{
width: 400px;
height: 500px;
background-color: pink;
position: absolute;
opacity: 0.0;
}


oraz część js, w której tkwi błąd:

$(document).ready(function(){

var kierunek = 0;
var poprzedni;
$("button").click(function(){
var klikniety = "."+$(this).val();
if(kierunek == 0)
{
$(poprzedni).css("left","0");
$(poprzedni).css("opacity","0.0");

$(klikniety).css("left","+=400");
$(klikniety).css("opacity","1");
$("#zmieniacz").animate({right:"+=400px" },500);
kierunek = 1;
}
else
{
$(klikniety).css("opacity","1");
$("#zmieniacz").animate({left:"+=400px" },500);
$(poprzedni).css("opacity","0.0");


$(poprzedni).css("left","0");
kierunek = 0;
}
poprzedni = klikniety;

});

});


Sposób w jaki chciałem to zrobić prezentuje sie następująco.
1. Wszystkie divy są na jedym miejscu, nałożone jeden na drugi. Jedynie pierwszy jest widoczny. Reszta posiada opacity: 0;
2. Klikam na którykolwiek przycisk ( warunek, żeby nic się nie działo jeśli kliknie się przycisk do aktualnej podstrony zrobię na końcu, załóżmy, ze klikamy na inną),
teraz zmienna "klikniety" trzyma nazwę diva, który wybralismy. Dodawane jest mu left: 400, czyli div ląduje obok, dostaje opacity: 1 i animate przejeżdzą na niego w prawa stronę.

To działa. Teraz chciałem zrobić, że gdy ktoś kliknie inną podstronę, to ustawić tego wybranego diva teraz po lewej stronie( gdzie left: 0), nadać mu opacity:1, i animate przejechać na lewo.
Po każdej akcji, chciałem aby poprzedni div, który opuścilismy, wracał na początkowe miejsce, czyli left:0 oraz opacity:0;


Efekt wizualny byłby taki, że kolejne podstrony wyjeżdżałby by raz z prawej i raz z lewej strony.

Link do pliku podaję tutaj:
http://speedy.sh/X5cjT/moje-Kopia.html

Zaczynam się juz gubić i miotać - nie wiem w którym miejscu popełniłem błąd. Jest możliwe uzyskać takie coś w ten sposób jak zaplanowałem?
Myślę, że rozbudowa tego skryptu ma sens (IMG:style_emoticons/default/wink.gif)

Pozdrawiam
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 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 Aktualny czas: 24.08.2025 - 15:22
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn