Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

"Podstrony" w jQuery

Założony przez  GiboneKPL.

15.06.2013, 17:41
#1
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
16.06.2013, 02:15
#2
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.
16.06.2013, 08:26 (Ten post był ostatnio modyfikowany: 16.06.2013, 14:50 przez GiboneKPL.)
#3
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.
20.06.2013, 21:06 (Ten post był ostatnio modyfikowany: 21.06.2013, 16:22 przez GiboneKPL.)
#4
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 x = 0;
 
$('#snapshot').on('click', function () {
    if (x == 0) {
        x = 1;
    } else x = 0;
 
    if (x == 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> 
23.06.2013, 09:27 (Ten post był ostatnio modyfikowany: 23.06.2013, 09:48 przez Siper.)
#5
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> 
23.06.2013, 10:45
#6
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