Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> 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
 
 Start new topic
Odpowiedzi
.rmvb's
post
Post #2





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

Posty w temacie
- .rmvb's   Przewijanie podston   5.06.2013, 16:31:57
- - Kshyhoo   A ciężko w kod strony spojrzeć?   5.06.2013, 16:55:15
- - .rmvb's   Spogladam ale dużo załaczonych bibliotek, kodów i ...   7.06.2013, 12:18:25
- - Maciek1705   proszę o to przykład z kodem live http://jsfiddle....   7.06.2013, 13:23:34
- - .rmvb's   Suuuper Teraz z taką podstawą to już dowolnie sob...   7.06.2013, 14:24:02
- - Talidali   Wtrącę swoje trzy grosze. Ciekawsze efekty i płynn...   7.06.2013, 15:34:10
- - .rmvb's   Witam ponownie. Zastosowałem się do wskazówki ale ...   8.06.2013, 17:24:05

« 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

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

RSS Aktualny czas: 9.10.2025 - 01:03
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn