"Podstrony" w jQuery

Założony przez  GiboneKPL.

Witam. Nie mam pojęcia jak zrobić "podstrony" w jQuery. A dokładniej chodzi mi o takie coś że gdy klikniemy np. na "Snapshoty" to "zleci z góry" strona jakby z filmikami. Demo mojego intra gdzie chcę to mieć. Myślę że kumacie :D
Zostaw jQuery do efektów i małych manipulacji DOM. Takie rzeczy powinno się robić na bibliotekach do tego służących. Zobacz sobie Ember.js, Angular.JS bądź Backbone.js.
A do czego one służą? Ja chciałbym takie coś przedstawione na screenie:
[Obrazek: vqs.png]

Że gdy się kliknie na "Snapshoty" to zjedzie na dół "strona" z nimi. :)

@Refresh

@refresh
Sepowaty napisał 16.06.2013, 17:45:
Wątek się odświeża raz na 4 dni.
Otrzymałem odpowiedź na Mpcforum.pl: http://www.mpcforum.pl/topic/969686-pyta...try7746407 A dokładniej: http://jsfiddle.net/KzQ5Y/14/

Tylko że mi to nie działa. :/ (Demo!).

Tutaj kod pliku:
<!DOCTYPE html>
 
<
html lang="en">
<
title>FerryCraft Intro</title>
<
head>
    <
meta charset="utf-8">
    <
link rel="stylesheet" href="css/przedstrona.css">
    <
script>
var 
0;
 
$(
'#snapshot').on('click', function () {
    if (
== 0) {
        
1;
    } else 
0;
 
    if (
== 1) {
        $(
'#snapshots').animate({
            
top'10px'
        
}, 2000);
    } else {
        $(
'#snapshots').animate({
            
top'-260px'
        
}, 2000);
    }
 
 
});
</
script>
<
style type="text/css">
#snapshots {
    
border:1px solid red;
    
position:absolute;
    
top:-260px;
    
left:150px;
    
height:250px;
}
</
style>
</
head>
 
<
body>
<
iframe src='Piosenka.mp3' width='0' height='0' frameborder='0' scrolling='no'></iframe>
<
a href="http://ferrycraft.pl/index.php" title="Wbijaj na forum!">
<
div id="forum">
Nasze Forum
</div></a>
 
<
a href="http://ferrycraft.pl/portal.php" title="Portal naszego forum!">
<
div id="portal">
Nasz Portal
</div></a>
 
<
a href="#">
<
div id="filmiki">
Snapshoty
</div></a>
 
<
a href="#" title="Sklep naszego forum.">
<
div id="shop">
Nie długo będzie :P
</div></a>
 
<
a href="#" title="Wymiana banerami!">
<
div id="banner">
Wymiana Banerami!
</
div></a>
<
div id="menu">
    <
button id="snapshot">Snapshoty</button>
</
div>
<
div id="snapshots">Snap Shot
    
<br/>Snap Shot
    
<br/>Snap Shot
    
<br/>Snap Shot
    
<br/>Snap Shot
    
<br/>Snap Shot
    
<br/>Snap Shot
    
<br/>Snap Shot
    
<br/>Snap Shot
    
<br/>Snap Shot
    
<br/>Snap Shot
    
<br/>Snap Shot
    
<br/>
</
div>
 
<
div id="foother">
<
center>
Intro zrobione przez GiboneKPL. <br />
Zakaz kopiowania elementów kodu!
</
center>
</
div>
</
body>
 
</
html
Poprawiłem ten kod, wyrzuciłem zbędną zmienną i zabezpieczyłem przed zbugowaniem animacji, sprawdź czy działa:
http://jsfiddle.net/KzQ5Y/18/

Jeśli coś jest nie tak to zobacz konsolę (W Chrome: PPM > "Zbadaj Element" > Console) i pokaż co tam wyrzuca.

// Edit

A co do tego kodu pliku, zdefiniowałeś jQuery?
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script
To podane przez Ciebie nie działa. Udało mi sięustawićże ten lpik (przedstrona.php) mogę edytować z poziomu ACP. Zamieniałem skrypt na Twój kod i nie działa. W tamtym zapomniałem dodać jednej linijki dokładniej:
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script
Wszystko śmiga tylko jeszcze chciałbym użyć tego: http://blog.ajaxmasters.com/jquery-pagination-plugin/ Ale jak to wklepać to "mojego" kodu żeby Wszyło mi takie coś?:

[Obrazek: owwk.png]



Użytkownicy przeglądający ten wątek:

1 gości