• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Wie vorgehen beim ein- und ausblenden von Elementen?

C

chapolote

New member
Hallo,

eigentlich habe ich eine ganz simple Problematik:

auf einer Startseite sollen Elemente beim Laden ausgeblendet sein und dann animiert eingeblendet werden.

Das Standardvorgehen, Variante 1, wäre ja, die Elemente per css auszublenden und dann nach Wunsch per javascript einzublenden.

Die 2. Variante wäre die, die Elemente per javascript auszublenden, um sie dann wieder einzublenden.

Variante 1 kommt mir nicht sinnvoll vor, da die Seite unbenutzbar wird, wenn javascript deaktiviert ist. Variante 2 erhält die Funktionalität der Webseite auch bei deaktiviertem javascript, scheint aber mit meinem javascript-Basiswissen nicht zu funktionieren. Egal ob ich window.load() oder document.ready() verwende, um die Elemente mit hide() auszublenden, flackern die zu versteckenden Elemente kurz auf, sind also kurz sichtbar, bevor sie ausgeblendet werden.

Hier kurz beispielhaft mein Code:

Code: 
$(document).ready(function() {$('.pm-2').hide();});
bzw.
Code: 
$(window).load(function() {$('.pm-2').hide();});

Und, falls das wichtig ist: das javascript wird am Ende der Webseite eingebunden.

Ich denke die Lösung ist simpel, evtl. gibt es ja auch ein jquery-Plugin, welches das für mich erledigt und sich darum kümmert, daß die Webseite auch mit deaktiviertem Javascript noch funktionsfähig ist.

Danke schonmal für jeden Hinweis,
Grüße, chapolote
 
Zuletzt bearbeitet von einem Moderator:
Durch das .ready() wirst du das auch nicht so hingbekommen. jQuery wird dir da auch nicht wirklich helfen, da jQuery ja bei deaktiviertem JS auch nicht ausgeführt wird.

Code: 
<!DOCTYPE html>

<html class="noscript">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<script type="text/javascript">
document.getElementsByTagName("html")[0].className = "";
</script>
<style type="text/css">
.hiddenAtStart {
	display: none;
}
.noscript .hiddenAtStart, .hiddenAtStart.visible {
	display: block;
}
</style>
</head>
<body>
<button>click</button>
<div class="hiddenAtStart">nur ohne JS oder nach click sichtbar</div>
<script type="text/javascript">
document.getElementsByTagName("button")[0].addEventListener("click", function(){
	Array.from(document.querySelectorAll(".hiddenAtStart")).forEach(function(div){
		div.classList.toggle("visible");
	});
}, false);
</script>
</body>
</html>
 
Danke für die Antwort.

Das bedeudet also, daß es nicht möglich ist, mit javascript ein Element auszublenden, bevor es angezeigt wird, richtig? Da werde ich also immer ein Flackern haben.

Eigentlich möchte ich nicht, daß bei deaktiviertem Javascript ein extra Hinweis eingeblendet wird, das scheint sich aber nicht vermeiden zu lassen. Oder gibt es da eventuell noch andere Möglichkeiten?

Ich kann es gerade nicht testen, aber wenn ich Deinem Beispiel folge, müßte doch auch folgendes funktionieren:

Ich gebe dem html-Tag eine Klasse noscript.

Dann gebe ich meinem Element, welches ich verstecken möchte die css-Anweisung:
.noscript .element {display:block}
.element {display:none}

Bei aktiviertem js kann ich dem html-Tag dann das noscript entziehen und ich würde umgehen, den Besucher darauf hinzuweisen, daß kein js aktiviert ist.

Denkst Du, dieses Vorgehen würde mir das Flackern eliminieren?
 
das kann auch ohne js gehn mit css animation od css transition
 
chapolote schrieb:
Eigentlich möchte ich nicht, daß bei deaktiviertem Javascript ein extra Hinweis eingeblendet wird, das scheint sich aber nicht vermeiden zu lassen. Oder gibt es da eventuell noch andere Möglichkeiten?
Zum Vergrößern anklicken....
siehe #2

chapolote schrieb:
Bei aktiviertem js kann ich dem html-Tag dann das noscript entziehen und ich würde umgehen, den Besucher darauf hinzuweisen, daß kein js aktiviert ist.
Zum Vergrößern anklicken....
also wie in #2


andreax schrieb:
das kann auch ohne js gehn mit css animation od css transition
Zum Vergrößern anklicken....
aber nur zeitgesteuert, nicht beliebig event-gesteuert.
 
ja richtig eventgesteuert geht nicht.
aber mit hover und focus sind schon ein paar events
möglich
 
hier soll doch nur einmal nach Laden der seite Elemente eingeblendet werden oder?
 
Warum möchtest du Elemente vorab ausblenden? Werden diese kurzzeitig nicht richtig dargestellt, was sich als "Flackern" äußert?
Wie lädst du dein CSS? Etwa mit @import?
 
Wow, vielen Dank für die zahlreichen Antworten ;)

Das Vorgehen von kkapsner geht genau in die richtige Richtung und funktioniert auch. Nur das ich etwas anders vorgegangen bin: ist javascript aktiviert, wird dem html-Tag eine Klasse zugewiesen. Mit dieser Klasse kann ich mein Element erst einmal verstecken und dann langsam aber sicher meine Animationen anstoßen. Ist javascript deaktiviert bekommt das html-Tag keine Klasse und somit bleibt mein Element sichtbar. Kein Flackern, nichts. Absolut perfekt.
kkapsner wird es wissen, ich habe es jetzt gelernt: das html-Tag ist das einzige Tag, welches per javascript angesprochen werden kann, bevor der Seitenbaum geladen ist. Und deshalb kann es auch kein Flackern geben.

@jspit: nein, das war nicht das Problem. Grundgedanke ist einfach der, daß ich zum Start der Webseite verschiedene jquery-Animationen anstoßen möchte, weshalb ein paar Elemente erst einmal ausgeblendet werden sollen. Dabei will ich aber, daß bei deaktiviertem javascript vollautomatisch alles sichtbar bleibt, weshalb ich nicht einfach ein display:hidden vergeben kann.

@andreax: richtig, nicht eingeblendet, sondern tatsächlich ausgeblendet, aus oben genanntem Grund. Und die Animationen sollen eventgesteuert ablaufen.

Das Problem ist also gelöst und ich schicke allen ein herzliches Dankeschön!!!
 
chapolote schrieb:
das html-Tag ist das einzige Tag, welches per javascript angesprochen werden kann, bevor der Seitenbaum geladen ist.
Zum Vergrößern anklicken....
Das ist nicht ganz richtig. Auch das <html> kann erst angesprochen werden, wenn es im baum existiert. Aber da es der Root des Baumes ist, wird es als erstes erzeugt und ist vorhanden, wenn später das <script> erstellt/interpretiert/ausgeführt wird. Es gibt kein Flackern, da ja auch noch nichts sichtbares im Baum vorhanden ist, was gerendert wird.

chapolote schrieb:
ein herzliches Dankeschön!!!
Zum Vergrößern anklicken....
Bitte - gern geschehen.
 
Mal eine Idee von mir:

Code: 
<style type="text/css">
#versteckt{visibility:hidden;}
</style>
<noscript>
<style type="text/css">
#versteckt{visibility:visible;}
</style>
</noscript>
So habe ích dieses Problem bisher gelöst.
 
Yogilein schrieb:
Mal eine Idee von mir:

Code: 
<style type="text/css">
#versteckt{visibility:hidden;}
</style>
<noscript>
<style type="text/css">
#versteckt{visibility:visible;}
</style>
</noscript>
Zum Vergrößern anklicken....
auch eine Idee, allerdings ist die lösung von kkapsner besser, weil man sich auf noscript nicht verlassen kann.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben