Seitenaufbau mit jQuery (accordion)

T

TinniTuss

Erfahrenes Mitglied
Hallo Leute

Ich bin kein großer Experte in JaveScript, jQuery, Ajax. Eine passende Routine einbauen geht so gerade noch, aber wenn's ans Eingemachte geht...

Die letzten zwei Tage habe ich dafür gebraucht, meine bisherige (List-)Systematik an jQuery 'Accordion' anzupassen. Im Großen Ganzen läuft es so wie es laufen soll.

Aber beim Seitenaufbau zeigt der Browser für eine halbe Sekunde den gesammten Inhalt nackt und ohne jQuery alles klatscht hin und her und dann ist es gut.

Was mach' ich da falsch? Die js-Routinen werden schon im Header geladen.

Kann mir da jemand auf die Sprünge helfen ohne mich erst in externe Weiterbildung, Handbücher, Google & den Rest des WWW zu schicken?

Dieser Link führt genau zu der Problematik.
http://www.weezerlinks.de/suchen.php?Sub=pr&sModus=v&sWort=##1101

Ich arbeite wird hier mit Firefox.

Peace
HH.
 
Du machst nichts falsch, das ist normal so. Vor allem bei größeren Seiten (76kb ist schon wirklich sehr viel).

Du kannst versuchen es noch etwas zu beschleunigen, in dem du den Accordion-Code nicht in die document-ready-Funktion steckst, sondern unmittelbar nach dem entsprechenden HTML. Dadurch wird es schnellst-möglich ausgeführt.

HTML: 
<head>
...
</head>
<body>
...
<div id="accordion">...</div>
<script type="text/javascript">
    $("#accordion").accordion();
</script>
</body>
 
Danke für die schnelle Hilfe.

Ich hab's probiert.
Ich habe auch die anderen 'accordions' zeitweilig 'rausgenommen um den Effekt beurteilen zu können:
Minimal - wenn überhaupt...
Alles ist wieder zurückgesetzt.

Dieses Merkmal ist mir bei anderen noch nie aufgefallen.
Aber wenn Du sagst, das sei normal, dann glaub' ich Dir das.

Vielleicht kann ich irgend etwas machen dass der Effekt sich nicht so drastisch darstellt. (den experimentellen transparenten Hintergrund rausnehmen, zum Beispiel)

Aber die Lösung ist das noch nicht.

Viel Gruß
HH.
 
Mhm naja wenn es nur darum geht die Darstellung beim laden der Seite kurz zu umgehen kannst dieses auch mit CSS lösen , das Du zumindest die Voreinstellung hast , das wenn es dann wirklich losgeht mit js die CSS Eigenschaften einfach überschrieben werden.

Was Du da machen kannst ist das du dem HTML Tag einfach über JavaScript einen Klassen Namen verpasst und das dann spezifisch mit CSS auf JavaScript anpasst direkt.
Sollte JavaScript nicht aktiv sein wird der Klassen Name gar nicht erst gesetzt und somit verfallen die weiteren CSS Bedingungen dann.

HTML: 
<html>
   <head>
        <script type="text/javascript">
            document.getElementsByTagName("html")[0].className += "javascriptActive";
        </script>
        <style type="text/css">
              .accordion {
                  background:#F00;
              }

              /* bei aktivierten js */
              .javascriptActive .accordion {
                  background:#0F0;
              }
        </style>
   </head>
   <body>
       <div class="accordion"></div>
    </body>
</html>
 
Hallo FipsTheThief

Vielen Dank für Deine schnelle Hilfe. Ich finde es toll, wie Du scheinbar aus dem Handgelenk Deinen Vorschlag mit einem Praxisnahen anschaulichen Code-Muster darstellst.

Der konkrete Fall:

An irgendeine CSS-Lösung hatte ich auch schon für einen kurzen Moment gedacht.

Aber abgesehen davon, daß Deine js-Terminologie für meinen Kenntnisstand noch'n Tick zu hoch ist, (obwohl, es fehlt nicht viel...) checke ich doch erstmal an Hand von 'Life'-Beispielen wie andere es machen und wie sich deren 'accordions' in meinem Browser verhalten. Ich könnte mir denken dass diese von mir benutzte Routine aus dem jQuery-UI-Umfeld einfach zu monströs/voluminös ist.

Ich habe z.B. eine andere 'accordion'-Kopie per 'speichern unter' vom Browser auf meinen Rechner befördert, teilweise seziert und mit riesigen 'Lorem ipsum'-Texten gefüttert, ohne das dieser unliebsame Effekt auch nur im Geringsten zu Tage trat.

Ich hab' 'meins' gestern noch auf'm IE7 getestet, da kannst Du Dir erstmal gemütlich am Kopf kratzen und in der Nase bohren bis das Dingens endlich aufgebaut ist.

Aber wenn ich jQuery nicht schon sowieso eingebunden hätte (für 'fancybox') würde ich, glaube ich eine nur-accordion-und-sonst-nix-Version vorziehen.

ggf. komme ich auf Deine Vorschlag zurück...

Danke
HH.
 
Naja mit JavaScript hat mein Beispiel nur noch wenig zu tun bis auf die Zeile mit dem

document.getElementsByTagName("html").[0].className = "javascriptActive";

Diese Zeile bewirkt eigentlich nur eines, hole alle HTML Node Elemente ( abgesehen davon das es nur eines gibt) und davon dann das erste Element das ist das [0] dahinter. Diesem HTML Element gebe ich dann einfach einen CSS Klassennamen.

Sofern JavaScript nun aktiviert ist bekommt das HTML Element nun den CSS Klassennamen, ist dem nicht so dann bekommt das HTML Element keinen Klassen Namen.

Den gleichen Trick habe ich damals hier angewand unter Lexikon im Menu kannst Du es betrachten wenn Du JavaScript mal abstellst und dann wieder anstellst. Wenn JavaScript aktiv ist wird es gleich komplett anders über CSS dargestellt , so das dies nicht mehr JavaScript überlassen wurde.

Ist somit auch schneller als dom.loaded , oder das Script am Body Ende einzufügen weil beides erst dann gestartet wird wenn das Dokument ohne Bilder , Flash etc geladen wurde.
 
Hallo FipsTheThief

Mit diesem(!) Einbau entsteht zusätzlich das Problem, dass die Sprungmarken nicht mehr funktionieren. Der Browser springt irgendwohin, wo er nicht hin soll. Erst wenn ich wieder nach oben scrolle in das 'accordion' und ein zweitesmal klicke, springt er dahin wo er soll. (Probleme mit dem '#' hatte ich bereits früher im Zusammenhang mit jQuery)

Ich dachte schon, ich könnte (als Notlösung) wenigstens irgendwie der Sprungmarke den 'focus' zuordnen und dann per CSS (a.sprung:focus{...}) irgendwie hervorheben scheiterten bis jetzt. Ich komme von Hölzchen auf Stöckchen, und muß das Pferd nochmal von vorne aufzäumen...

...to be continued...
HH
 
Mhm ich kann mir genau genommen nicht vorstellen das die vergabe eines CSS Klassen Namens die Spungmarken beeinflusst. Hab ich aber auch noch nie in dem Kontext probiert bzw Sprungmarken noch nie so wirklich benutzt.

Allgemein finde ich eh das jQuery allein schon vollkommen überladen ist , so in der Art ein ganzer Werkzeugkasten um einen Nagel einzuschlagen ;). Also sofern Du Lösungen im Netz gefunden hast die ohne jQuery auskommen und obendrein noch schneller laufen dann würde ich das einbinden.

Aber wie schon einmal angemerkt je mehr Inhalt geladen werden muss , wir reden da von dem reinen HTML Grundgerüst insklusive Texte ohne Bilder, desto länger dauert es auch bis der DOM bereit ist, also wird da wohl nicht mehr viel dran zu drehen sein am Ende.

Du kannst natürlich alle JS unten platzieren damit der HTML DOM schneller geladen ist und dann die JS erst geladen werden was noch ein kleinen Geschwindigkeits Schub bringt.
 
Hallo FipsTheThief

Bezüglich der Problematik 'wie bekomme ich einen Focus auf die Sprungmarke (Ziel)' hatte ich ein Hilfe-Ersuchen an die HTML-Abteilung gepostet, allerdings bisher nur Stuss zurückbekommen. Könntest Du Dir den Beitrag evtl. mal aus js-Sicht anschauen? Vielleicht fällt Dir dazu etwas ein.

Ich habe bereits (unqualifiziert) mit 'document.getElementById("sprungmarke).focus()' experimentiert, hab's dann aber wieder aufgegeben, da ich nicht weiß, wie ich die #Sprungmarke aus der URL in die Variable bekomme.

Thema 'Fokus auf Sprungmarke setzen' im Forum 'HTML & XHTML'

Viel Gruß
HH.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück