Location hash funktioniert nicht (immer)?

[d_a__0]

Hallo liebe Forenkollegen,

ich bin neu hier und hab auch schon ein Anliegen mit dem ich hierherkomme.

Ich arbeite gerade an einer Webseite (http://www.wdrstndnetlabel.at) und benutze für die Slidefunktion jQuery und den scrollTo-Plugin. Die Releases lade ich dynamisch per PHP aus einer Datenbank, die Links (oben mit dem Cover) werden automatisch erstellt. Das Problem war jetzt - einen Deep-Link hinzubekommen. Also wenn ich jetzt direkt auf Release 001 (location hash #WDRSTND_001) verlinken will oder jemand den Link direkt zu einem Release kopieren möchte.

Das Problem ist jetzt folgendes: er ändert zwar die Adresszeile auf z.B. http://www.wdrstndnetlabel.at/#WDRSTND_001, was auch sehr löblich ist, aber wenn ich jetzt von einer anderen Seite auf http://www.wdrstndnetlabel.at/#WDRSTND_001 linke, dann lädt er index.php ganz normal und öffnet das letzte Release obwohl der locationhash ja explizit auf Release 001 hindeutet
Ich bin nicht besonders gut in Javascript und jQuery und deswegen meine Frage - hat jemand eine Idee wie man das so lösen kann, dass er wirklich bei jedem Laden auf dem gewählten Anker startet?

Hier nochmal die Resizefunktion die den ScrollTo-Plugin ansteuert:

Code: Alles auswählen

   $(document).ready(function() {
      $('a.panel').click(function () {

         $('a.panel').removeClass('selected');
         $(this).addClass('selected');
         
         current = $(this);
         
         $('#wrapper').scrollTo($(this).attr('href'), 800);
         
         // hier ändere ich die Adresszeile
         document.location.replace ($(this).attr("href"));
         
         return false;
      });

      $(window).resize(function () {
         resizePanel();
      });
   });

   function resizePanel() {

      width = $(window).width();
      height = $(window).height();

      mask_width = width * $('.item').length;
         
      $('#debug').html(width  + ' ' + height + ' ' + mask_width);
         
      $('#wrapper, .item').css({width: width, height: height});
      $('#mask').css({width: mask_width, height: height});
      $('#wrapper').scrollTo($('a.selected').attr('href'), 0);
   }
   


Kann mir jemand helfen? Oder einen Ansatzpunkt geben wo ich nachlesen kann, wie sich sowas besser lösen lässt?

Liebe Grüße,
d_a__0

[my-webdesigner.com]

Hallo und herzlich willkommen

Gleich zum Problem:
Eine Möglichkeit ist, per Interval den Hash abzufragen und
bei Änderung zu dem Node mit der entsprechenden ID zu scrollen.

window.setInterval und jQuery.scrollTo sollten den Job machen.

Nachdem die Seite nicht neu geladen wird, wenn sich der Hash ändert
ist das Interval nötig (und meines Wissens auch die einzige Möglichkeit).

[d_a__0]

Hey Danke für die schnelle Antwort

Aber ich glaube du hast mich missverstanden: ich will gar nicht dass die Seite reloadet wenn sich der Hashtag ändert (was ja z.B passiert, wenn man durch die Releases klickt). Ich möchte nur, dass wenn jemand in seinen Browser http://wdrstndnetlabel.at/#WDRSTND_001 eingibt, dass diese Person dann direkt auf das Release 001 kommt. Ohne jetzt selbst nochmal Enter drücken zu müssen oder ähnliches. Einfach ein funktionierender Deep Link.

Ich weiß jetzt aber nicht in wie weit sich das überhaupt mit dem location hash realisieren lässt - müsste aber eigentlich gehen oder nicht? Ich kann zwar die Adresszeile ändern - aber der deeplink geht trotzdem nicht immer (kann sein dass das was mit dem cahce zu tun hat??) Ich bin ratlos.

[my-webdesigner.com]

Nein du hast mich falsch verstanden
Es wird nicht reloaded.

Ich habe dein Problem schon richtig verstanden.
Du musst beim Pageload den Hash auslesen und den richtigen Content anzeigen.

Code: Alles auswählen

$(document).ready(function(){
    if (window.location.hash)) {
        // Jetzt kannst du mit location.hash arbeiten
        // und den richtigen Content einblenden
    }
});

Einen Schritt weiter gedacht: Wenn sich der Hash nun ändert (das funktioniert ohne Reload), kriegt das deine Seite ja nicht mit. Wenn ein Link mit #hash angeklickt oder der #hash eingegeben wird, muss dein Script irgendwie das Ändern des Content veranlassen. Und das macht man am Besten mit einem Interval, das periodisch den Hash auf Änderung prüft.
Wenn du diese Funktion aber nicht benötigst, vergiss den Interval-Teil

[d_a__0]

Oho. Okay

Aber bedeutet das dann nicht, dass er die Seite mit dem neuen Hashtag auch laden würde, wenn er den Hashtag beim scrollTo auf der Releaseseite ändert?

Tut mir leid, dass ich so blöd frage - ich muss mich da noch mehr einlesen
Wollte nur wissen ob es nicht vielleicht einen schnellen eleganten Weg gibt (weil Intervall ist ja nicht soo superelegant oder nicht?)

Trotzdem danke,
David

[my-webdesigner.com]

Das Interval kannst du für deine Zwecke denke ich auch vergessen.
Probier mal meinen vorigen Beispielcode und setzte eine Aktion ein, die anhand des Hashes den richtigen Content zeigt.
Damit wäre es dann getan.

Alles andere schauen wir dann wenn das mal klappt

[d_a__0]

Vielen Dank für die Antwort!

Genau das ist auch das Problem: ich hab schon alles mögliche ausprobiert schaffe es aber immer noch nicht, dass der Testlink den ich jetzt auf der Startseite eingefügt habe http://wdrstndnetlabel.at, auf #WDRSTND_001 startet. Hab alle möglichen Schreibweisen probiert, Locationhash, ScrollTo, nichts will (oder ich bin zu blöd dafür, was wohl eher der Fall ist ). Der Witz ist: wählt man die Adresszeile aus und drückt Enter springt er brav zur Seite - das geht aber auch nur, wenn mann Enter drückt .

Ich bin auf jeden Fall mal mit meinem Latein am Ende nachdem ich jetzt 6 Stunden rumprobiert habe. Vielleicht gibts trotzdem eine andere Lösung? Sonst werde ich wohl nicht darum herumkommen mich ordentlich in jQuery und Javascript einzulesen ummir das selbst was einfallen zu lassen.

[d_a__0]

OHO! Hab das Problem gelöst. Ohne Javascript usw.

Ich hatte einen jQuery-Plugin (jquery.fade.js) in Verwendung, der sich irgendwie negativ auf document.ready ausgewirkt hat... Auf jeden Fall scheint es jetzt zu funktionieren.

Für alle die sich auch für den jQuery.Scroll.To interessieren, http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery <-- diese Seite hat ein gutes Tutorial. Ich habe den code für meine Bedürfnisse verändert (Releases werden per PHP aus einer Datenbank geladen und die Seiten automatisch hinzugefügt), außerdem stelle ich den Inhalt in umgekehrter Reinfolge dar - höchste Nummer zuerst, kleinste Nummer zum Schluss.


Für alle die auch jQuery scrollTo mit Deeplinks benutzen wollen hab ich hier eine auskommentierte resizepanel.js. Ich hoffe es kann jemandem viel Zeit und Nerven ersparen:

Code: Alles auswählen

   $(document).ready(function() {
      // Diese Funktion ersetzt das normale Klickverhalten von allen
      // a-Elementen mit der Klasse 'panel'
      $('a.panel').click(function () {
         // zuerst wird die Klasse 'selected' von allen a-Elementen
         // entfernt
         $('a.panel').removeClass('selected');
         // dann wir sie zu dem geklickten a-Element hinzugefügt
         $(this).addClass('selected');
         
         current = $(this);
         // das wrapper-div wird in 800 Millisekunden zu dem element
         // mit der gleichen id wie das attribut 'href' gescrollt
         // auf meiner Seite wäre das #WDRSTND_001 usw.
         $('#wrapper').scrollTo($(this).attr('href'), 800);
         
         // hier ändere ich die Adresszeile mit pushState für moderne
         // Browser und mit location.hash für alte Browser
         // So können User direkt auf das eine Release/die eine Seite
         // verlinken. ACHTUNG: wenn ihr jQuery.Fade.js verwendet
         // funktioniert das deep-linken nicht!!!
         if(history.pushState) {
            history.pushState(null, null, ($(this).attr("href")));
         }else {
            location.hash = ($(this).attr("href"));
         }
         // das normale Klickverhalten wird abgebrochen
         return false;
      });
      
      //Die resizepanel-funktion wird aufgerufen
      $(window).resize(function () {
         resizePanel();
      });
   });

   
   function resizePanel() {

      width = $(window).width();
      height = $(window).height();

      mask_width = width * $('.item').length;
         
      $('#debug').html(width  + ' ' + height + ' ' + mask_width);
         
      $('#wrapper, .item').css({width: width, height: height});
      $('#mask').css({width: mask_width, height: height});
      $('#wrapper').scrollTo($('a.selected').attr('href'), 0);
   }
   


Danke vor allem an my-webdesigner.com, der mir zwar keine Silbertablettlösung gegeben hat, aber trotzdem. Wenn ich mal wieder in Wien bin und er sich meldet, zahl ich ein Bier ; )