div navigation

    Hallo, ich bin nach 1 1/2 Jahren wieder dazu gekommen mich mit HTML / CSS etc. zu beschäftigen.
    Dementsprechend bin ich auch stark eingerostet ^^

    Ich übe gerade an einer kostenlosen Website, jetzt steh ich vor einen Problem:

    Ich möchte mich durch die Seite klicken können ohne Ladezeiten.

    Ich habe damals "div" und "onclick" mit diesen Code

    HTML
    document.getElementById(blabla).style.display='none';

    verwendet.

    Ich versuch mal kurz zu beschreiben was ich genau meine:

    Man geht auf die Seite und sieht oben die Navigationsleiste.

    Wenn man auf Home klickt soll das Layout für Home kommen, wenn man auf z.B Musik klickt soll das Layout Home verschwinden und Musik erscheinen usw.

    Ich hoffe das war ansatzweise verständlich ^^

    Hallo,

    für solche Animationen eignet sich die jQuery Bibliothek sehr.
    http://api.jquery.com/

    Ein Beispiel dafür wäre bei folgendem HTML diese:

    deincode.js:

    Code
    $(document).ready(function() { // wenn document geladen
$('.menue-item').each(index, obj) { // für alle elemente mit der klasse menue-item
$(this).on('click', function() { // wenn object angeklickt
   $.get($(this).attr('data-layout') + '.html', function(layout) { // hole html datei mit namen aus dem attribut data-layout
      $("#deinlayout").html(layout); // layout in dein element schreiben
   }
});
}
}

    Das ist nur ein Beispiel. Man sollte dann auch darauf achten, welche Datein über das .get geholt werden können.
    Bzw. Dateischutz anzulegen per .htaccess o.s.
    Und wie du das mit jQuery implementierst, kannst du auch selber entscheiden.

    Ist eigentlich recht simpel, wenn man es verstanden hat.
    jQuery nimmt dir also schon gut was an Arbeit ab.

    Wenn du direkt alle Elemente lädst, kannst du auch in der Click-Funktion vom div-Element,
    ein .fadeIn(1000); beispielsweise machen und ein .fadeOut(1000); auf das andere.
    Alternativ kannst du mit jQuery auch sehr einfach CSS Änderungen vornehmen:
    $(obj).css({
    prop: value
    });

    Einmal editiert, zuletzt von Bleistift (30. November 2013 um 22:50)

    das ist aber nicht, was er will... keine ladezeiten heisst er hat mehrere container absolut positioniert und schaltet nur durch die ansichten.
    was du ihm da zeigst ist sehr wohl mit ladezeiten verbudnen, weils ajax ist => schon ne recht fortgeschrittene technik bei eingerostetem wissen ;)

    nach dazu ist der code auch alles andere als performant :mrgreen:

    aber ich zerpflück das jetzt nicht peux á peux.

    katzenkumpel, zeich ma mehr code von dir, damit man dir genauer sagen kann, wie man dir da helfen könnte.
    generell wäre sowas bestimmt schon mit css möglich, aber mit javascript ist es etwas schöner :)

    Hatte ich ja auch noch gesagt. Wie man das mit dem schönen jQuery löst, bleibt ja jedem so überlassen.
    Auf Performance hab ich bei dem Beispiel jetzt auch nicht groß geachtet. Sollte auch nicht 1-1 übernommen werden.

    Zitat

    Wenn du direkt alle Elemente lädst, kannst du auch in der Click-Funktion vom div-Element,
    ein .fadeIn(1000); beispielsweise machen und ein .fadeOut(1000); auf das andere.
    Alternativ kannst du mit jQuery auch sehr einfach CSS Änderungen vornehmen:
    $(obj).css({
    prop: value
    });


    #edit:
    gut das hatte ich etwas überlesen, desswegen das mit dem $.get so hervorgehoben.
    Mensch :D Jedenfalls ist jQuery dafür wahrscheinlich das Beste,
    auch für einen mit etwas eingerostetem wissen. :)

    Einmal editiert, zuletzt von Bleistift (1. Dezember 2013 um 11:08)

    nuja, wenn du ERST das ajaxbeispiel nennst und dann was von "alle elemente laden" schreibst, liegt ja die vermutung nahe, dass du die inhalte alle mit ajax laden willst und es ging ja darum das laden zu vermeiden ;)