Seite nur einmal Laden

[IchNeedHelp]

Hi ich hab da mal ne Frage, wie funktioniert das, das die Seite mit Css nur einmal geladen wird, und dann alle Inhalte sofort da sind wenn man auf nen Link klickt?

Ich hab hier eine Seite, die das auch macht: http://www.huddletogether.com/projects/lightbox2/#overview

Ist das überhaupt css?

Danke

[Hans Wurst]

Ist das überhaupt css?

Nein.
Schau dir mal den Quelltext der Seite an, beim Aufruf der Seite wird der gesamte Content geladen, und beim Navigieren nur ein. -und ausgebnlendet, mehr nicht.

[Auge]

Hallo

Schau dir mal den Quelltext der Seite an, beim Aufruf der Seite wird der gesamte Content geladen, und beim Navigieren nur ein. -und ausgebnlendet, mehr nicht.

Dann schau dir mal beim Klicken auf einen Menüeintrag den Scrollbalken an. :-)

Tschö, Auge

[Hans Wurst]

Dann schau dir mal beim Klicken auf einen Menüeintrag den Scrollbalken an. :-)

Du hast vollkommen Recht, habe mir da wohl täuschen lassen.
Ist sogar noch einfacher gestaltet als ich dachte :)

[suit]

Du hast vollkommen Recht, habe mir da wohl täuschen lassen.

Hossa - ich auch. Kommt davon wenn man so einen extrem breiten Viewport hat :D

[Auge]

Hallo

Du hast vollkommen Recht, habe mir da wohl täuschen lassen.

Hossa - ich auch. Kommt davon wenn man so einen extrem breiten Viewport hat :D

Ja, wie denn nu? Ich ging jetzt davon aus, dass du in deinem Posting aus dem Quelltext der verlinkten Seite zitierst (ohne diesen Quelltext zu studieren und schon beim <title>-Element darauf zu schauen, dass dort von SELFHTML die Rede ist). Und dann das! ;-)

Tschö, Auge

[Auge]

Hallo

Schau dir mal den Quelltext der Seite an, beim Aufruf der Seite wird der gesamte Content geladen, und beim Navigieren nur ein. -und ausgebnlendet, mehr nicht.

Dann schau dir mal beim Klicken auf einen Menüeintrag den Scrollbalken an. :-)

Wo ich jetzt suits Einlassungen sehe, wird mir klar, warum wir von verschiedenen Sachen reden. Ohne JavaScript (FF-Erweiterung NoScript) funktioniert das wie von HTML gewohnt und von mir beschrieben. Ohne den Verdacht, dass da JavaScript im Spiel ist, schaue ich auch nicht in den Quelltext. Mit JavaScript funktioniert es wie von euch beschrieben, analog zu Tabs.

Das ist mMn übrigens nach außen hin vorbildlich umgesetzt. Es funktioniert mit und ohne die optionale Technik.

Tschö, Auge

[suit]

Mit JavaScript funktioniert es wie von euch beschrieben, analog zu Tabs.

Nein du irrst - wir lagen falsch, du richtig - auch mit aktiviertem JS gibts keine extra Gimmicks auf dieser Seite - ich hab's trotzdem programmiert :D

Erinnert mich wieder an diesen hier.

[Auge]

Hallo

Mit JavaScript funktioniert es wie von euch beschrieben, analog zu Tabs.

Nein du irrst - wir lagen falsch, du richtig - auch mit aktiviertem JS gibts keine extra Gimmicks auf dieser Seite - ich hab's trotzdem programmiert :D

jaja :-), kommt davon, wenn man mit den eigenen Mitteln (JS-Blocking mit NoScript) zu einem schlüssigen Ergebnis kommt, ohne sich davon zu überzeugen, dass Alternativen nicht zutreffen und sich dann von diesen nicht überprüften Alternativen verunsichern lässt, ohne endlich mal nachzuprüfen.

Tschö, Auge

[Auge]

Hallo

Hi ich hab da mal ne Frage, wie funktioniert das, das die Seite mit Css nur einmal geladen wird, und dann alle Inhalte sofort da sind wenn man auf nen Link klickt?

Ich hab hier eine Seite, die das auch macht: http://www.huddletogether.com/projects/lightbox2/#overview

Das sind http://de.selfhtml.org/html/verweise/projektintern.htm#anker@title=Sprungmarken innerhalb eines Dokuments. Du springst mit dem Klick auf einen Link nur zu einem definierten Punkt innerhalb der Seite, mehr ist das nicht.

Anmerkung zur oben verlinkten Beschreibung in SELFHTML. Als Sprungmarken (Ziele) werden dort Links mit dem Attribut "name" verwandt. Das kann man machen, man muss aber nicht.

Als Sprungziel kann man nämlich auch das Attribut "id" benutzen, was den Vorteil hat, dass man eine ID an verschiedene Elemente vergeben kann, z.B. (typisch für Sprungmarken) Überschriften, Tabellen, Textabsätze etc. pp.. Man ist also flexibler in der Wahl des Ziels und braucht nicht ein weiteres Element (<a name="bla">);

Ist das überhaupt css?

Nein, das ist HTML. Mit CSS kannst du die Form der Ausgabe beeinflussen, zu mehr ist CSS nicht da.

Tschö, Auge

[suit]

Hi ich hab da mal ne Frage, wie funktioniert das, das die Seite mit Css nur einmal geladen wird, und dann alle Inhalte sofort da sind wenn man auf nen Link klickt?

Das ist mit JavaScript und CSS gemacht.

Ansich relativ simpel: JavaScript blendet beim Laden der Seite alle Elemente bis auf das erste aus. Bei einem Klick auf einen Menüpunkt wird der Zugehörige Abschnitt eingeblendet und der zuvor sichtbare ausgeblendet.

Quick & Dirty sieht das dann so aus:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
  <head>  
    <title>SELFHTML t=191265</title>  
    <style type="text/css">  
    </style>  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
    <script type="text/javascript">  
      // <![CDATA[  
        jQuery.noConflict();  
        jQuery(document).ready(function($){  
          // selektiere alle div-Elemente innerhalb #content die NICHT das erste Kind sind und blende sie aus  
          $('div#content>div:not(:first-child)').css('display', 'none');  
          // überwache das die li-Elemente im Menü auf klicks  
          $('ul#menu>li').bind(  
            'click',  
            function() {  
              // ermittle welches li-Element geklickt wurde und speichere seinen Index in eine Variable  
              // 1. Element = 0, 2. Element = 1 usw..  
              var index = $('li').index(this);  
              // blende alle div-Elemente im content aus  
              $('div#content>div').css('display', 'none');  
              // blende jenes div-ELement im content ein, dessen Abfolge dem index des geklickten li-Elements entspricht.  
              $('div#content>div:eq(' + index + ')').css('display', 'block');  
            }  
          );  
        });  
      // ]]>  
    </script>  
  </head>  
  <body>  
    <ul id="menu">  
      <li><a href="#absatz1">absatz 1</a></li>  
      <li><a href="#absatz2">absatz 2</a></li>  
      <li><a href="#absatz3">absatz 3</a></li>  
    </ul>  
    <div id="content">  
      <div id="absatz1">  
        <h2>überschrift, absatz1</h2>  
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
      </div>  
      <div id="absatz2">  
        <h2>überschrift, absatz2</h2>  
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
      </div>  
      <div id="absatz3">  
        <h2>überschrift, absatz3</h2>  
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
      </div>  
    </div>  
  </body>  
</html>