[js, jQuery] Przeładowanie TYLKO jednego diva

Wszystko związane ze skryptami JS, DHTML itd.
Venite
Obsługa CBA
Posty: 3201
Rejestracja: 18 lut 2011, 08:01:57
Reputacja: 43
Lokalizacja: Kędzierzyn-Koźle
Płeć: Mężczyzna
User Agent: Opera Windows

[js, jQuery] Przeładowanie TYLKO jednego diva

Postautor: Venite » 16 lip 2013, 18:49:43

Hej ;)

Już wyjaśniam:

Mam diva #rameczka, w nim jest div #tresc (strona czysty html). Mam też skrypt działający tak, że przy kliknięciu w link o konkretnej klasie (a.link lub a.menulink) następuje efekt fadeOut dla #rameczka, po czym strona zostaje przeładowana i #rameczka wraz z zawartością #treść robi fadeIn. Całość kodu wygląda tak:

CodeColon Select All Code

$(document).ready(function(){  // $(document).ready shorthand
  $('#rameczka').hide().fadeIn(400); 
    
$("a.link,a.menulink").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("#rameczka").fadeOut(200, redirectPage);      
    
});
         
    function redirectPage
() {
        window.location = linkLocation;
    }
});
<!--
 Przeładowanie jednego DIVa -->
$(
document).ready(function(){
    $('#menu a').click(function(){
        var href = $(this).attr('href');
        $('#rameczka').fadeOut(200,complete).load(href);
        return false;
    });
});


Niestety pojawia się problem, bo przy przeładowaniu, mimo obecności tego skryptu, strona "miga" na moment znikając (czy to przy "odświeżaniu" str gł. linkiem z menu, czy to przy przechodzeniu na podstronę), w związku z tym, cały efekt szlag trafia...

Da się jakoś temu zaradzić? :)

Docelowo efekt ma być taki, jakby całość strony była ciągła, a tylko ten jeden div #rameczka razem z divem #tresc (zawartym w nim) się przeładowywał. Niestety, przeładowanie strony z większym obciążeniem sieci potrafi zepsuć tą iluzję...

Niby da się to osiągnąć iframe'm i to nieinwazyjnie, modyfikując tylko linki i wczytywaną treść, ale to przestarzałe i nie chcę tego ryzykować.

Jeśli trzeba, to jest fragment kodu html który ma spełniać kryteria zawarte w kodzie:

CodeColon Select All Code

<div class="kontener" id="menu" style="text-align: center;">
        
            
            
<br />
            <big><font size="6"><b><font color="white">Menu</font></b></font></big>
            <hr width="120px" align="LEFT"/>
            <span><a href="index.html" class="link"><b>Strona Główna</b></a></span>
            <hr width="120px" align="LEFT"/>
            <span><a href="blabla.html" class="link">Oferta</a></span>
            <hr width="120px" align="LEFT"/>
            <span>O mnie</span>
            <hr width="120px" align="LEFT"/>
            <span>Kontakt</span>
            <br /><br />
            
            
        
</div><!-- koniec diva menu -->


        <div id="rameczka">
        <div id="tresc">
        <!-- treść tutaj -->
        
        
        
<!-- -------------------------------------------------------------------------------------------------------------------------------------------- -->
        
        
        
        Przykładowa treść
    
<br />
    <p>przykładowy akapit do stylizacji</p>
    <span>span - rozszerzenie</span>
    <h1>Nagłówek 1</h1>
    <h2>Nagłówek 2</h2>
    <h3>Nagłówek 3</h3>
    <h4>Nagłówek 4</h4>
    <h5>Nagłówek 5</h5>
    <h6>Nagłówek 6</h6>
        

        
        
        
        
        
<!-- --------------------------------------------------------------------------------------------------------------------------------------------- -->
</
div></div>


Dzięki za pomoc :)

EDT: jednak w momencie, gdy korzystam z szybkiego łącza internetowego, strona przeładowując się błyskawicznie nie "miga" na biało - efekt jest płynny i idealny w tym momencie. Dopiero przy wolniejszym łączu lub dłuższym oczekiwaniu na odpowiedź serwera pojawia się 0,5 sekundowe mignięcie białej strony - co wygląda brzydko, bo psuje efekt ciągłości i iluzję przeładowania tylko treści diva.
Czy wiesz, że:
  • W Panelu CBA w sekcji "wsparcie" jest dedykowany system ticketów (obsługi technicznej)
  • Odpowiadamy na Forum oraz na adres mailowy obsluga(malpa)cba.pl
  • Jesteśmy również na Facebooku! Znajdź nas na facebook.com/hostingcba | cba.pl
W czym jeszcze możemy pomóc?
Awatar użytkownika
Fineas_Nigellus
Posty: 582
Rejestracja: 08 lis 2012, 17:33:45
Reputacja: 14
Płeć: Niewybrana
User Agent: Chrome Windows 1366x768
Kontakt:

Re: [js, jQuery] Przeładowanie TYLKO jednego diva

Postautor: Fineas_Nigellus » 16 lip 2013, 20:09:04

Venite WroteColonDocelowo efekt ma być taki, jakby całość strony była ciągła, a tylko ten jeden div #rameczka razem z divem #tresc (zawartym w nim) się przeładowywał.

Pobaw się z Ajax'em jeśli chcesz uzyskać taki efekt bez zbędnej "iluzji" :)
Mówimy STOP Reklamie-Sygnaturce! ;)
Venite
Obsługa CBA
Posty: 3201
Rejestracja: 18 lut 2011, 08:01:57
Reputacja: 43
Lokalizacja: Kędzierzyn-Koźle
Płeć: Mężczyzna
User Agent: Opera Windows 1440x900

Re: [js, jQuery] Przeładowanie TYLKO jednego diva

Postautor: Venite » 16 lip 2013, 20:27:09

OK, ale moja wiedza w tym temacie jest znikoma.
Czy znajdzie się jakaś dobra dusza, która naprowadzi mnie na rozwiązanie? ;)

W międzyczasie oczywiście poszukam czegoś we własnym zakresie i jak znajdę, dam tu znać.
Nie mniej jednak prosiłbym o odpowiedź, jeśli tylko ktoś ma czas i chce, oczywiście ;]
Czy wiesz, że:
  • W Panelu CBA w sekcji "wsparcie" jest dedykowany system ticketów (obsługi technicznej)
  • Odpowiadamy na Forum oraz na adres mailowy obsluga(malpa)cba.pl
  • Jesteśmy również na Facebooku! Znajdź nas na facebook.com/hostingcba | cba.pl
W czym jeszcze możemy pomóc?
Awatar użytkownika
Fineas_Nigellus
Posty: 582
Rejestracja: 08 lis 2012, 17:33:45
Reputacja: 14
Płeć: Niewybrana
User Agent: Opera Mobile Android 240x301
Kontakt:

Re: [js, jQuery] Przeładowanie TYLKO jednego diva

Postautor: Fineas_Nigellus » 16 lip 2013, 21:29:40

Ja cię naprowadzę :)
Mam nadzieję że to o to chodzi

http://www.gajdaw.pl/ajax/ajax-php-wymi ... print.html
Mówimy STOP Reklamie-Sygnaturce! ;)
Venite
Obsługa CBA
Posty: 3201
Rejestracja: 18 lut 2011, 08:01:57
Reputacja: 43
Lokalizacja: Kędzierzyn-Koźle
Płeć: Mężczyzna
User Agent: Opera Windows 1440x900

Re: [js, jQuery] Przeładowanie TYLKO jednego diva

Postautor: Venite » 16 lip 2013, 21:33:02

Fineas_Nigellus , dzięki Ci, strzał w dziesiątkę! :)
Pokombinuję z tym. Dzięki i... a niech będzie, plus :P
Czy wiesz, że:
  • W Panelu CBA w sekcji "wsparcie" jest dedykowany system ticketów (obsługi technicznej)
  • Odpowiadamy na Forum oraz na adres mailowy obsluga(malpa)cba.pl
  • Jesteśmy również na Facebooku! Znajdź nas na facebook.com/hostingcba | cba.pl
W czym jeszcze możemy pomóc?
Venite
Obsługa CBA
Posty: 3201
Rejestracja: 18 lut 2011, 08:01:57
Reputacja: 43
Lokalizacja: Kędzierzyn-Koźle
Płeć: Mężczyzna
User Agent: Opera Windows 1440x900

Re: [js, jQuery] Przeładowanie TYLKO jednego diva

Postautor: Venite » 17 lip 2013, 11:23:22

Podbijam, mam taki kodzik:

CodeColon Select All Code

var dane = new Array;
function wymienTresc(id, htmlid, hiperlacze)
{
  document.getElementById(htmlid).innerHTML = dane[id];
hiperlacze.href = '#';

Oczywiście poniżej znajduje się tablica danych dla podstron, np., dla index.html to będzie

CodeColon Select All Code

dane[1] = '<h1>Glowna</h1>'


Skrypt eliminuje efekt "mignięcia" gdyż przeładowuje tylko wymieniony pojemnik. Ale o tym później.

EDT: skrypt działa. Okazało się, że po prostu jestem idiotą i wstawiłem zmienną o jedną linijkę za nisko.

Teraz chcę zrobić tak:
Linki których dotyczy skrypt, są to linki z menu o class=menulink, zaś przeładowanie dotyczy tylko diva #rameczka i jego zawartości. Chciałbym, żeby przed przeładowaniem się, div #rameczka robił fadeout(200), a dopiero po zakończeniu pobierania treści tej podstrony i jej załadowaniu, pojawiał się na nowo robiąc fadeIn(400).

Ktoś pomógłby mi to podstawić pod ten kodzik? :roll:

Sam link wygląda zaś tak:

CodeColon Select All Code

<a href="index.html" class="link" onclick="wymienTresc('1', 'rameczka', this);"><b>Strona Główna</b></a>


W razie czego mogę podesłać adres na PW.
Czy wiesz, że:
  • W Panelu CBA w sekcji "wsparcie" jest dedykowany system ticketów (obsługi technicznej)
  • Odpowiadamy na Forum oraz na adres mailowy obsluga(malpa)cba.pl
  • Jesteśmy również na Facebooku! Znajdź nas na facebook.com/hostingcba | cba.pl
W czym jeszcze możemy pomóc?

Wróć do „JavaScript, DHTML”

Kto jest online

Użytkownicy przeglądający to forum: Obecnie na forum nie ma żadnego zarejestrowanego użytkownika i 1 gość