Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [PROBLEM] Strona bez przeładowania
Erbeen
post
Post #1





Grupa: Zarejestrowani
Postów: 29
Pomógł: 0
Dołączył: 26.03.2013

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

Witam.
Mam problem odnośnie AJAX'a.

Moja strona internetowa wygląda tak: http://screenshooter.net/0358939/28_03_2013__07_58_08

Mam zamiar umieścić muzykę w tle, ale jest problem, ponieważ po każdym przejściu na inną podstronę muzyka gra od początku, a to jest co najmniej nie przyjemne dla ucha.
Ktoś mi podpowiedział, aby użyć do tego AJAX'a. Zamierzałem pobrac ajax ze strony "producenta" i wmontować to w swoją stronę, ale niestety tak jak widać tu (link) menu do zmieniania treści jest wbudowane z zawartość. Mój problem polega na tym, jak zrobić kiedy menu mam na zewnątrz. Tak jak na obrazku: http://screenshooter.net/0358939/28_03_2013__08_05_45
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 15)
StrefaPi
post
Post #2





Grupa: Zarejestrowani
Postów: 235
Pomógł: 50
Dołączył: 2.03.2013

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

AJAX nie ma producenta, to technologia asynchronicznego "tworzenia stron"...
Rozwiązań Twojego problemu jest wiele...
Poczytaj jest sporo o tym...

Ja nie widzę problemu na Twojej stronie (przynajmniej w zrzucie ekranu), nie ma totalnie znaczenia gdzie znajduje się menu... Fajnie jakbyś zamieszczał kod i problem w kodzie zaznaczał...

Ale: zobacz bibliotekę jQuery http://jquery.com/ poczytaj tam o funkcjach html() http://api.jquery.com/html/, i/lub http://api.jquery.com/jQuery.get/...

Ten post edytował StrefaPi 28.03.2013, 08:41:16
Go to the top of the page
+Quote Post
Erbeen
post
Post #3





Grupa: Zarejestrowani
Postów: 29
Pomógł: 0
Dołączył: 26.03.2013

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

Mógłbys mnie nakierowac na jakieś jedno rozwiązanie z tych wielu aby strona nie przeładowywała sie cała?
Go to the top of the page
+Quote Post
StrefaPi
post
Post #4





Grupa: Zarejestrowani
Postów: 235
Pomógł: 50
Dołączył: 2.03.2013

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

Podałem jedno rozwiązanie...

jQuery + get (najlepsze w Twoim wypadku)

Ten post edytował StrefaPi 28.03.2013, 08:47:21
Go to the top of the page
+Quote Post
Erbeen
post
Post #5





Grupa: Zarejestrowani
Postów: 29
Pomógł: 0
Dołączył: 26.03.2013

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

[HTML] pobierz, plaintext 
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  2.     <head>
  3.             <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4.             <title>Ajaxy Demo - Why?</title>
  5.             <link type="text/css" rel="stylesheet" href="css/main.css" />
  6.  
  7.  
  8.             <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
  9.             <script src="js/ajaxy.js" type="text/javascript"></script>
  10.  
  11.     </head>
  12.     <body>
  13.         <div id="container">
  14.  
  15.             <h1>Why Ajaxy?</h1>
  16.  
  17.             <ul id="nav">
  18.                 <li><a href="index.html">Ajaxy</a></li>
  19.                 <li><a href="how-it-works.html">How Ajaxy Works</a></li>
  20.                 <li><a href="why.html">Why?</a></li>
  21.             </ul>
  22.  
  23.             <div id="content">
  24.                 TEKST TEKST
  25.             </div>  
  26.  
  27.         </div>
  28.  
  29.     </body>
  30. </html>
[HTML] pobierz, plaintext



Czyli nie ma znaczenia czy "<ul id="nav">" jest wewnątrz content czy na zewnątrz, a ajax itak bedzie poprawdzie zaczytywał z której podstrony ma pobierac zawartość?
Go to the top of the page
+Quote Post
StrefaPi
post
Post #6





Grupa: Zarejestrowani
Postów: 235
Pomógł: 50
Dołączył: 2.03.2013

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

Cytat
Czyli nie ma znaczenia czy "<ul id="nav">" jest wewnątrz content czy na zewnątrz, a ajax itak bedzie poprawdzie zaczytywał z której podstrony ma pobierac zawartość?


Ogólnie jak #nav będzie wewnątrz #content to będzie podmieniony, więc musi być poza...

Ten post edytował StrefaPi 28.03.2013, 08:53:44
Go to the top of the page
+Quote Post
Erbeen
post
Post #7





Grupa: Zarejestrowani
Postów: 29
Pomógł: 0
Dołączył: 26.03.2013

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

Cytat(StrefaPi @ 28.03.2013, 08:51:26 ) *
Ogólnie jak #nav będzie wewnątrz #content to będzie podmieniony, więc musi być poza...


Niewiem czy dobrze rozumiem. #nav jest teraz wewnatrz #content i wszystko ładnie działa. Ale kiedy bedę wstawiał to do mojej strony manu czyli #nav bedzie musiało być na zewnątrz #content. Czy wtedy też bedzie łądnie działać?
Go to the top of the page
+Quote Post
StrefaPi
post
Post #8





Grupa: Zarejestrowani
Postów: 235
Pomógł: 50
Dołączył: 2.03.2013

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

wszystko zależy od tego jaką masz budowę strony, podaj normalny kod Swojej strony to dostaniesz konkretną odpowiedź...

wszystko co umieścisz w elemencie, który będzie się podmieniał... (w przypadku kodu powyżej w #content) to przy zmianie zostanie to podmienione na inną zawartość... czyli jeżeli element zawiera podelementy to po "załadowaniu" zawartości nie będą one już dostępne...
Go to the top of the page
+Quote Post
Erbeen
post
Post #9





Grupa: Zarejestrowani
Postów: 29
Pomógł: 0
Dołączył: 26.03.2013

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

Jest to kod podstrony "O mnie". Miejsce które chce aby było podmieniane bez przeładowania strony to zawartość <div class="strona"> a menu znajduje sie w <div class="menu">


Kod
<!--/* Autorem grafiki, kodu XHTML i CSS jest:
    Kamil "Erbeen" Świątkowski        */
/* Wszelkie prawa zastrzezone!
    Usuwanie autora - ZABRONIONE!        */
-->        

<head>
            <link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
            <link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
            <link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
            <link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <link rel="stylesheet" type="text/css" href="css/glowny.css" />
                <title>A b o u t _ m e ?</title>
            
            
            <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">
    <script src="js/prototype.js" type="text/javascript"></script>
        <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>
            
</head>
    
  
<body>
<div class="naglowek">
            <div class="logo"></div>
            <div class="kontakt">
                    <div class="kontakt_tytul"><img src="images/znajdz.png"/></div>
                    <a href="http://www.youtube.com/user/KaSwiatkowski"><img src="images/youtube.png" alt="youtube" /></a>
                    <a href="http://steamcommunity.com/profiles/76561198054832641"><img src="images/steam.png" alt="steam" width="24" height="24"/></a>
                    <a href="https://www.facebook.com/kamil.swiatkowski.56"><img src="images/fb.png" alt="facebook" width="24" height="24"/></a>
                    <a href="mailto:kaswiatkowski@gmail.com"><img src="images/mail.png" alt="mail" width="24" height="24"/></a>
                    <a href="skype:kaswiatkowski?userinfo"><img src="images/skype.png" alt="skype" width="24" height="24"/></a>
                    <a href="gg:6393393"><img src="images/gg.png" alt="gadugadu" width="24" height="24"/></a>
            </div>
</div>


    
<div class="zawartosc">
    <div class="zawartosc_gora"></div>
    <div class="zawartosc_srodek">
                    <div class="zawartosc_lewa">
                            <div class="menu">
                                    <ul>
                                    <li><a href="index.html"><img src="images/menu/home.gif" onmouseover="this.src = 'images/menu/homeh.gif'" onmouseout="this.src = 'images/menu/home.gif'" alt="Home"/></a></li>
                                    <li><a href="omnie.html"><img src="images/menu/omnieh.gif" onmouseover="this.src = 'images/menu/omnieh.gif'" onmouseout="this.src = 'images/menu/omnieh.gif'" alt="O mnie"/></a></li>
                                    <li><a href="portfolio.html"><img src="images/menu/portfolio.gif" onmouseover="this.src = 'images/menu/portfolioh.gif'" onmouseout="this.src = 'images/menu/portfolio.gif'" alt="Portfolio"/></a></li>
                                    <li><a href="download.html"><img src="images/menu/download.gif" onmouseover="this.src = 'images/menu/downloadh.gif'" onmouseout="this.src = 'images/menu/download.gif'" alt="Portfolio"/></a></li>
                                    <li><a href="kontakt.html"><img src="images/menu/kontakt.gif" onmouseover="this.src = 'images/menu/kontakth.gif'" onmouseout="this.src = 'images/menu/kontakt.gif'" alt="Kontakt"/></a></li>
                                    </ul>            
                                    </div>
                            <div class="umiejetnosci">
                <div style="overflow: hidden;">
                                        <div class="umiejetnosci_tytul"><img src="images/umiejetnosci.png" /></div>
                                </div>
                                        <div class="umiejetnosci_kropki">xHTML 3/5<br /><img src="images/kolka/3.png" alt="4 kółka" style="margin-top: 5px;"/></div>
                                        <div class="umiejetnosci_kropki">CSS 2/5<br /><img src="images/kolka/2.png" alt="4 kółka" style="margin-top: 5px;"/></div>
                                        <div class="umiejetnosci_kropki">Grafika 2/5<br /><img src="images/kolka/2.png" alt="3 kółka" style="margin-top: 5px;"/></div>
                                        <div class="umiejetnosci_kropki">PHP 1/5<br /><img src="images/kolka/1.png" alt="2 kółka" style="margin-top: 5px;"/></div>
                            </div>
                    </div>
                    <div class="zawartosc_prawa">
                            
                                    <div class="naglowek"><h2> </h2></div>
                            <div class="strona">
                                        <img src="images/moje_zdj.png" alt="zdjecie" align="left" class="zdjecie"/><br>
                                        <img src="images/about_me.png" /> </br></br>
                                        Jo! Nazywam się Kamil Świątkowski, w sieci ukrywam się pod pseudonimem <strong>Erbeen</strong>.
                                        Pochodzę z miałej miejscowości w woj. Łódzkim. Leży ona na wschód od miasta Kutno.
                                        <p>Na co dzień chodzę do II klasy Zespołu Szkół Nr 3 im. Władysława Grabskiego w Kutnie o profilu Informatycznym.
                                        <p>Naukę pisania stron internetowych rozpocząłem stosunkowo niedawno, nie licząc oczywiście zabawy w gimnazjum.
                                        Książką, która pomogła mi opanować podstawy była elektroniczna wersja "XHTML, CSS i JavaScript - pierwsza pomoc" wydawnictwa Helion,
                                        na którą przypadkowo natknąłem sie w internecie i mnie zaciekawiła. Dzięki tej książce poznałem podstawy xHTML'a.
                                        Oczywiście było to jakiś czas temu, więc należało co nieco odświerzyć. Ta wiedza pozwoliła mi na stworzenie pierwszego "poważnego" projektu.
                                        Małe demo tej strony można ujrzeć poniżej. Z biegiem czasu coraz bardziej interesowały mnie techniki tworzenia stron i poświęcołem temu odpowiednio caraz więcej czasu.
                                        Kodując kolejne strony nabieram doświadczenia i uczę się nowych rzeczy. Staram się, aby w każdej nowej pracy dodać coś innego, coś czego wcześniej nie robiłem.
                                        To co robię staram się robić jak najlepiej.<p></p>
    
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="images/demo/demo1.jpg" rel="lightbox[roadtrip]"><img src="images/demo/demo1m.png" alt="" title="erbeen.ugu.pl - Strona Główna"></a>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="images/demo/demo2.jpg" rel="lightbox[roadtrip]"><img src="images/demo/demo2m.png" alt="" title="erbeen.ugu.pl - Formularz Wontaktowy"></a>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="images/demo/demo3.jpg" rel="lightbox[roadtrip]"><img src="images/demo/demo3m.png" alt="" title="erbeen.ugu.pl - D Day Hel 2012"></a>

</div>
                          
                    </div>
    </div>
    <div class="zawartosc_dol"></div>
</div>
<div class="stopka">
           <div class="lewa_stopka"><img src="images/prawa.png" alt="prawa" /></div>
</div>

</body>

</html>


Ten post edytował Erbeen 28.03.2013, 11:02:13
Go to the top of the page
+Quote Post
StrefaPi
post
Post #10





Grupa: Zarejestrowani
Postów: 235
Pomógł: 50
Dołączył: 2.03.2013

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

zaimportuj bibliotekę jQuery... i do dzieła

[HTML] pobierz, plaintext 
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" ></script>   
  2. <script type="text/javascript" >
  3. $(window).load(function () {
  4. 	$(".menu").find("li a").click(function(event) {
  5. 		event.preventDefault();
  6. 		$.get($(this).attr("href"), function(data) {
  7. 			$('.strona').html(data);
  8. 		});
  9. 	});
  10. });
  11. </script>
[HTML] pobierz, plaintext


w tych html'ach (co są ładowane przez get() ) powinieneś mieć tylko treść, bez nagłówków... (tekst i obrazki)

dodatkowo wywal ze strony prototype, bo to chyba (już od 2 lat) nie jest rozwijane oprogramowanie... pod jQuery też jest lightbox ;)

EOT?

Ten post edytował StrefaPi 28.03.2013, 11:24:55
Go to the top of the page
+Quote Post
Erbeen
post
Post #11





Grupa: Zarejestrowani
Postów: 29
Pomógł: 0
Dołączył: 26.03.2013

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

Znaczy cały ten kod mam wkleić do <head>, a $('.strona').html(data); oznacza, że mam utworzyc plik strona.html w którym bede miał samą treść "o mnie", bez żadnych nagłówków etc.
Go to the top of the page
+Quote Post
StrefaPi
post
Post #12





Grupa: Zarejestrowani
Postów: 235
Pomógł: 50
Dołączył: 2.03.2013

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

tak cały skrypt jest w head, ale nie...

u Ciebie każdy element menu jest zbudowany na zasadzie <li><a href="./plik.html"></a></li>, skrypt pobiera wartość z href i na jej podstawie pobiera stronę o tej nazwie, którą wpisałeś w href

skrypt działa... nic nie musisz w nim zmieniać, stwórz strony "index.html", "omnie.html", "portfolio.html", "download.html" i "kontakt.html" z treścią (bo takie masz menu)... i one będą ładowane,

[HTML] pobierz, plaintext 
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" ></script>   
  2. <script type="text/javascript" >
  3. $(window).load(function () {
  4. 	$(".menu").find("li a").click(function(event) { //przypisanie zdarzenia click do każdego elementu a z listy wypunktowanej w klasie menu
  5. 		event.preventDefault(); //wyłączenie defaultowego zdarzenia czyli przeładowania strony
  6. 		$.get($(this).attr("href"), function(data) { // wysłanie zapytania i załadowanie strony o nazwie podanej a atrybucie href <a href="coś.html">
  7. 			$('.strona').html(data); // wstawienie do zancznika określonego klasą .strona danych pobranych przez ajax
  8. 		});
  9. 	});
  10. });
  11. </script>
[HTML] pobierz, plaintext


przetestuj najpierw jak to działa, a potem pisz ok?

Ten post edytował StrefaPi 28.03.2013, 11:42:15
Go to the top of the page
+Quote Post
Erbeen
post
Post #13





Grupa: Zarejestrowani
Postów: 29
Pomógł: 0
Dołączył: 26.03.2013

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

Mam jeszcze pytanie jedno. Skąd ten skrypt bedzie wiedział w którym miejscu podmienić treść na inna z np. pliku omnie.html.

I czy w tym pliku ma byc cos jeszcze (<head> etc.) czy tylko:
[HTML] pobierz, plaintext 
  1. <div class="strona">
  2.                                         tekst                                                                         
  3. </div> 
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
StrefaPi
post
Post #14





Grupa: Zarejestrowani
Postów: 235
Pomógł: 50
Dołączył: 2.03.2013

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

w pliku nie musi być nic więcej... a naprawdę powiedziałbym, że powinna zostać w nim tylko treść, bez zancznika <div class="strona"></div>

czyli np.
[HTML] pobierz, plaintext 
  1. <img src="images/moje_zdj.png" alt="zdjecie" align="left" class="zdjecie"/><br><img src="images/about_me.png" /> </br></br>Jo! Nazywam się Kamil Świątkowski, w sieci ukrywam się pod pseudonimem <strong>Erbeen</strong>. Pochodzę z miałej miejscowości w woj. Łódzkim. Leży ona na wschód od miasta Kutno.<p>Na co dzień chodzę do II klasy Zespołu Szkół Nr 3 im. Władysława Grabskiego w Kutnie o profilu Informatycznym...
[HTML] pobierz, plaintext

$('.strona').html(data); podmienia zawartość elementu, który ma przypisaną kalsę .strona czyli <div class="strona"></div> i umieszcza w niej zmienną data, która jest pobrana przez get()

durga sprawa
[HTML] pobierz, plaintext 
  1. nie </br> tylko <br />
[HTML] pobierz, plaintext


Ten post edytował StrefaPi 28.03.2013, 12:29:24
Go to the top of the page
+Quote Post
Erbeen
post
Post #15





Grupa: Zarejestrowani
Postów: 29
Pomógł: 0
Dołączył: 26.03.2013

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

Czy wie ktoś w jaki sposób zrobić, żeby działały treści zawarte w dwóch sekcjach wewnątrz siebie które operuje ajax?

tzn.

<div class="strona">
tekst1
<div class="wewnatrz">
tekst2
</div>
</div>

Bo z tego co próbowałem, #wewnatrz nie bedzie czytał ajax przy skrypcie:
[HTML] pobierz, plaintext 
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" ></script>   
  2. <script type="text/javascript" >
  3. $(window).load(function () {
  4. 	$(".menu").find("li a").click(function(event) { //przypisanie zdarzenia click do każdego elementu a z listy wypunktowanej w klasie menu
  5. 		event.preventDefault(); //wyłączenie defaultowego zdarzenia czyli przeładowania strony
  6. 		$.get($(this).attr("href"), function(data) { // wysłanie zapytania i załadowanie strony o nazwie podanej a atrybucie href <a href="coś.html">
  7. 			$('.strona').html(data); // wstawienie do zancznika określonego klasą .strona danych pobranych przez ajax
  8. 		});
  9. 	});
  10. });
  11. </script>
[HTML] pobierz, plaintext


Ten post edytował Erbeen 28.03.2013, 22:28:01
Go to the top of the page
+Quote Post
StrefaPi
post
Post #16





Grupa: Zarejestrowani
Postów: 235
Pomógł: 50
Dołączył: 2.03.2013

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

piersza sprawa:
nie "#wewnatrz" ale ".wewnatrz" - element oznaczony id wywołuje się z "#", a jeżeli chcemy wywołać elementy oznaczone klasą to stosujemy "." przed nazwą

druga sprawa:
co chcesz osiągnąć? możesz formułować zapytanie jaśniej?

przeanalizowaleś cały kod i wiesz czemu jest tak a nie inaczej?
podejrzewam, że chcesz podmienić element ".wewnatrz" więc wystarczy zmodyfikować 7 linia kodu...
[HTML] pobierz, plaintext 
  1. $('.wewnatrz').html(data);
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
« Następny starszy · XML, AJAX · 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 · Linearny+ · Przełącz na: Drzewo

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

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