Forum PHP.pl > Przewijanie podston

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki

.rmvb's

5.06.2013, 16:31:57

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.

Kshyhoo

5.06.2013, 16:55:15

A ciężko w kod strony spojrzeć?

.rmvb's

7.06.2013, 12:18:25

Spogladam ale dużo załaczonych bibliotek, kodów i skryptów.
Raczej myślałem, że ktoś spróbuje mi podpowiedzieć

Maciek1705

7.06.2013, 13:23:34

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)

.rmvb's

7.06.2013, 14:24:02

Suuuper

Teraz z taką podstawą to już dowolnie sobie będę mógł modyfikować pod moje potrzeby

Wielkie dzięki

Talidali

7.06.2013, 15:34:10

Wtrącę swoje trzy grosze.
Ciekawsze efekty i płynniejsze możesz uzyskać za pomocą fajnego plugina do jquery http://ricostacruz.com/jquery.transit/

.rmvb's

8.06.2013, 17:24:05

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

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 
<body>
	<div id="przewijanie">
		<div id="zmieniacz">
 
			<div class="dwa">
				<button value="jeden">jeden</button>
				<button value="dwa">dwa</button>
				<button value="trzy">trzy</button>
				<button value="cztery">cztery</button>
				<br><p>Trololo div 2</p>
			</div>
 
			<div class="trzy">
				<button value="jeden">jeden</button>
				<button value="dwa">dwa</button>
				<button value="trzy">trzy</button>
				<button value="cztery">cztery</button>
				<br><p>Trololo div 3</p>
			</div>
 
			<div class="cztery">
				<button value="jeden">jeden</button>
				<button value="dwa">dwa</button>
				<button value="trzy">trzy</button>
				<button value="cztery">cztery</button>
				<br><p>Trololo div 4</p>
			</div>
 
			<div class="jeden">
				<button value="jeden">jeden</button>
				<button value="dwa">dwa</button>
				<button value="trzy">trzy</button>
				<button value="cztery">cztery</button>
				<br><br><br><p>Trololo div 1</p>
			</div>
		</div>
 
	</div>
</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

Pozdrawiam

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.