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

fadeIn Problem

M

master_1

New member
Hallo liebe Freunde !

Nach ein paar Scrollpunkten auf der Seite erscheint ein div mit

Code: 
var $reglog = $('#reglog');
 
var $win = $(window).scroll(function() {
    if($win.scrollTop() > 300) {
        if(!$reglog.is(':visible')) {
            $reglog.stop(true, true).fadeIn();
			
			            $("#reglog").animate({
                height: "60px",
				width: "100%",
                opacity: "0.7",
                fontSize: "1.0em"
            });

jetzt will ich in den reglog div noch einen zusätzlichen div der auf display: none gestellt ist sichbar machen.

Bei div's wo irgendwas geklickt wird mache ich das normal so in die Richtung

Code: 
$('.einaus_playlist' ).show();

aber beim fadeIn klappt das nicht.

Hat jemand eine Idee wie ich das machen könnte ?

Lg
 
Da ich mächtig Kopfschmerzen habe, könnte Dir jQuerys "has()" helfen, um reglog als vorliegender Selector weiter einzugrenzen: klick

Gefühlt dann sowas wie $reglog.has('div').fadeIn() ...
 
Danke für deine Hilfestellung, aber dein Vorschlag hat nicht gefruchtet :)

Habe es gestern noch selbst hinbekommen.

Wer es brauchen kann ( man scrollt die Seite runter und nach einer bestimmten Position erscheint der div ). Ich habe in dem div eine Navi.

Der vollständige Code

Code: 
var $reglog = $('#reglog');
 
var $win = $(window).scroll(function() {
    if($win.scrollTop() > 300) {
        if(!$reglog.is(':visible')) {
            $reglog.stop(true, true).fadeIn();
			
			            $("#reglog").animate({
                height: "60px",
				width: "100%",
                opacity: "0.8",
                fontSize: "1.0em"
				
				},function(){
					
					   $("#go").show({
                display: "block"
				
				},function(){
					
					   $("#form").show({
                display: "block"

            });
            });
			});

        }
    }
});

Lg
 
Sorry, aber 4x ins Dom greifen (2x reglog, go, form), um einen Animationsteil zu vollenden, kann in keinerlei Hinsicht die Lösung darstellen.

Warum benutzt Du nicht $reglog? Was spricht gegen has() in Verbindung mit "complete" bei animate()? Du arbeitest mit dem bereits vorliegenden Selector weiter ...

Gib mir mal bitte den HTML-Teil der drei beteiligten Teile ... das geht - ungesehen - deutlich performanter!
 
Hi !

Also das ist der Originalteil

Code: 
var $reglog = $('#reglog');
 
var $win = $(window).scroll(function() {
    if($win.scrollTop() > 300) {
        if(!$reglog.is(':visible')) {
            $reglog.stop(true, true).fadeIn();
			
			            $("#reglog").animate({
                height: "60px",
		width: "100%",
                opacity: "0.8",
                fontSize: "1.0em"

			});

        }
    }
});

zeigt wenn man die Seite nach unten scrollt den div reglog.

Die beiden div's form und go kann ich in der Php Datei NICHT in den div reglog geben, also muss ich die anders holen und da ist mir nichts anderes eingefallen als das was du oben siehst. Die beiden neuen div's sind in einer anderen Datei. Würde ich die beiden divs in die Datei von reglog geben wäre es ja eh logisch das diese dann sobald der reglog sichtbar ist auch erscheinen.

Der reglog ist in einem echo und die beiden neuen div's geben ein Suchfeld aus und sind in einer anderen Datei platziert.

So wie es jetzt ist funktioniert es ( reglog erscheint, Suchfeld wird geholt ), aber natürlich wäre mir eine schmalere Lösung lieber :cool:

Lg
 
Nein, das ist der JavaScript Teil - mich interessiert der HTML-Teil (ich will das Div von reglog!) und ob man die Anfrage performanter gestalten kann. Denn ich glaube nicht, dass das die Lösung ist ... ^^
 
Ma he :cool:

Code: 
  echo '<div id="reglog"><div class="reglog_navi">blablabla</div></div>';
}

<<< so das öffnet beim scrollen, und in einer anderen php Datei ist ein Suchfeld mit den anderen 2 div's welche ich aber nicht in Datei Nr.1 einbauen kann/will !

Die Funktion:

reglog fadetIn und das Suchfeld von der anderen Datei muss auch da rein wobei es rein um den div geht und nicht um die Funktion vom Suchfeld.

Lg
 
SteelWheel schrieb:
Sorry, aber 4x ins Dom greifen (2x reglog, go, form), um einen Animationsteil zu vollenden, kann in keinerlei Hinsicht die Lösung darstellen.
Zum Vergrößern anklicken....
Gut das 2. reglog ist unnötig, aber die anderen Beiden sind nötig, da man ja auf die Elemente ja irgendwie zugreifen muss...

SteelWheel schrieb:
Gib mir mal bitte den HTML-Teil der drei beteiligten Teile ... das geht - ungesehen - deutlich performanter!
Zum Vergrößern anklicken....
Warum? Alleinige ID-Selektoren sind die schnellsten - in meinem Test mehr als 100-mal schneller als eine Subsuche:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>

<style type="text/css"></style>
</head>
<body>
<div id="div1">
	<div id="div2"></div>
</div>
<script type="text/javascript">
var div1 = document.getElementById("div1");
function id(){
	var div = document.getElementById("div2");
	return div
}
function sub(){
	div = div1.getElementsByTagName("div")[0];
	return div
}

var r = 1000000000;
window.setTimeout(function(){
	var t = Date.now();
	for (var i = 0; i < r; i += 1){
		id();
	}
	console.log("id: " + (Date.now() - t) / r * 1000 + "µs");
	r /= 100;
	window.setTimeout(function(){
		var t = Date.now();
		for (var i = 0; i < r; i += 1){
			sub();
		}
		console.log("sub: " + ((Date.now() - t)) / r * 1000 + "µs");
	}, 0);
}, 0);
</script>
</body>
</html>

@master_1: nach welchem Schema machst du eigentlich die Einrückungen - kann verstehen, dass SteelWheel davon Kopfschmerzen bekommt.
 
Wenn ich 1x ins DOM greife und dann mit dem Selektor weiter arbeite, das geht einiges schneller - und ich "erwarte", dass die erwähnten DIVs Children sind (gem. Beschreibung); da muss man definitiv nur 1x ins DOM packen. Aber dann machen wir es doch einfacher: Wenn es läuft, dann ist doch alles toll ... melde mich ab!
 
SteelWheel schrieb:
dann mit dem Selektor weiter arbeite
Zum Vergrößern anklicken....
Wenn du auf irgendein anderes Element zugreifst, musst du da "ins DOM greifen". Da führt kein Weg vorbei. Ob du da eine Subselektion machst oder nicht macht da erst mal keinen Unterschied.

SteelWheel schrieb:
und ich "erwarte", dass die erwähnten DIVs Children sind (gem. Beschreibung);
Zum Vergrößern anklicken....
Nicht wirklich:
master_1 schrieb:
welche ich aber nicht in Datei Nr.1 einbauen kann/will !
Zum Vergrößern anklicken....

SteelWheel schrieb:
da muss man definitiv nur 1x ins DOM packen.
Zum Vergrößern anklicken....
Zeig' mal einen Beispielcode, wo du nur einmal "ins DOM packst", wenn du auf drei verschiedene Elemente zugreifen willst. Das kann nicht funktionieren... wie denn auch - du brauchst ja die drei Referenzen auf die Elemente.
 
SteelWheel schrieb:
Aber dann machen wir es doch einfacher: Wenn es läuft, dann ist doch alles toll ... melde mich ab!
Zum Vergrößern anklicken....
Na jetzt brauchst ja nicht auf beleidigt machen !

kkapsner ist echt ein klasse für sich und weiss in der Regal von was er spricht, aber ich denke du könntest auch Recht haben. Ich kann das jetzt nicht beurteilen weil dafür habe ich zu wenig Kenntnisse auf diesem Gebiet, aber ich wundere mich das wegen diesem NICHTS ( Thema ) so eine Reaktion kommt !

@master_1: nach welchem Schema machst du eigentlich die Einrückungen - kann verstehen, dass SteelWheel davon Kopfschmerzen bekommt.
Zum Vergrößern anklicken....

<<< nach keinem. Ich habe keine Ahnung wie man einen solchen Code richtig einrückt :cool:

Bedanke ich für die Tipps bei euch !

Lg
 
master_1 schrieb:
<<< nach keinem. Ich habe keine Ahnung wie man einen solchen Code richtig einrückt :cool:
Zum Vergrößern anklicken....
Sinn würde machen, alles untergeordnete einzurücken. Das sind z.B. geschweifte Klammern von if then else, runde Klammern von extrem umfangreien Vergleichen, Untergeordnete HTML Tags, wie z.B. <head> ist unterhalb von <html> usw.
 
mikdoe schrieb:
Sinn würde machen, alles untergeordnete einzurücken. Das sind z.B. geschweifte Klammern von if then else, runde Klammern von extrem umfangreien Vergleichen, Untergeordnete HTML Tags, wie z.B. <head> ist unterhalb von <html> usw.
Zum Vergrößern anklicken....

Da ich ja gern was dazu lerne versuche ich es jetzt mal.

Code: 
var $reglog = $('#reglog');
 
var $win = $(window).scroll(function() 

{

if
($win.scrollTop() > 300) 

{

if
(!$reglog.is(':visible')) 

{ 

$reglog.stop(true, true).fadeIn();
			
$("#reglog").animate({
                height: "60px",
		width: "100%",
                opacity: "0.8",
                fontSize: "1.0em"

	  });
        }
    }
});

<<< voll daneben ?

Lg
 
Wie gesagt, das ist nicht vorgeschrieben. Deine Variante braucht viel Platz, mir wäre es zuviel.
Ich würde es so machen:
HTML: 
var $reglog = $('#reglog');
var $win = $(window).scroll(function() {
	if($win.scrollTop() > 300) {
		if(!$reglog.is(':visible')) { 
			$reglog.stop(true, true).fadeIn();
			$("#reglog").animate({
				height:		"60px",
				width:		"100%",
				opacity:	"0.8",
				fontSize:	"1.0em"
			});
		}
	}
});
Du musst dir auf Dauer eine Logik überlegen, mit der du in erster Linie klar kommst und die du immer gleich machst, also immer nach den gleichen Regeln.
 
Zuletzt bearbeitet:
master_1 schrieb:
Na jetzt brauchst ja nicht auf beleidigt machen !
Zum Vergrößern anklicken....
Oh, keine Bange - das hat mit Beleidigtsein so gar nichts zu tun. "Hausrecht" liegt bei kkapsner - und mir widerstrebt es einfach, ständig in eine Bringschuld gestellt zu werden. Dafür fehlt mir schlichtweg die Zeit. Du schreibst zwar, dass das in einer anderen PHP-Datei (!) ist, das heißt aber nicht, dass es im DOM nicht "beinander" steht. Mich interessiert hier nur das DOM - wieviele includes() (bspw.) da verwendet werden, tangiert mich nicht und war auch nicht meine Bitte um Quellcode.

Fazit? Es gibt alte, aber weiterhin empfohlene Performance-Regeln für den Umgang im DOM ... darunter fallen Eingriffe (ja, per ID ist der schnellste; danach kommt "tag" und dann erst "class" - Dinge wie "div#content" sollte man dringend vermeiden etc.!; nur: davon rede ich nicht!), Manipulation darin (bspw. nicht direktes Reinschreiben (Schleifenverwendung; gern genommen für LI, TR usw.!) - weil unperformant), warum Fragmente wichtig sind usw. ABER: Ich mag einfach nicht gegen das "Hausrecht" anreden ... das ist mir zu anstrengend, da ich einfach nicht in einem Forum auf Gehör pochen muss. "Hausrecht" gilt - Punkt. Ergänzend kommt hinzu, dass mir die Zeit für Beweislieferung fehlt. Google wird schon was ausspucken in puncto Performance-Empfehlungen und warum ich bspw. lieber 1x ins DOM (bevorzugte "Reihenfolge" wie oben) greife und mir auf diesen Teil (daher fragte ich nach dem HTML-Schnipsel) im Speicher (!) dann Sub-Selects fahre. Für mich ist es ein Unterschied, ob ich mit 4 MB DOM arbeite oder nur mit dem bereits schon selektierten Teil daraus ... und genau um den "Teil" geht es nur! Erlaube mir also einen Tipp: Solltest Du in der Lage sein einen sinnvollen Node abzugreifen, unter dem die (alle!) beteiligten Felder liegen (ich bin immer noch der Meinung, dass der einmalige Griff in #reglog reicht; s. Eröffnungsposting mit "unter reglog ein display:none DIV"), brauchst Du mit Sicherheit nicht "4x" ins DOM greifen ... ich bleibe also bei meiner Meinung: 1x (zwecks Einlesen).

@kkapsner: Nein, meine Kopfschmerzen kamen nicht von der Einrückung ... (das wäre sonst auch so erwähnt gewesen). Es gibt Tage, da bin ich unterkoffeiniert und dann ist das eine waschechte Entzugserscheinung - ich würde behaupten, dass sich so "Migräne" anfühlt. Wirklich übel ...
 
SteelWheel schrieb:
"Hausrecht" liegt bei kkapsner - und mir widerstrebt es einfach, ständig in eine Bringschuld gestellt zu werden. Dafür fehlt mir schlichtweg die Zeit.
Zum Vergrößern anklicken....
was du mit dem Hausrecht meinst, kann ich nicht nachvollziehen.
aber, wenn du nicht diskutieren willst, was machst du denn in einem forum? da geht es ja hauptsächlich ums diskutieren.

SteelWheel schrieb:
Fazit? Es gibt alte, aber weiterhin empfohlene Performance-Regeln für den Umgang im DOM ... darunter fallen Eingriffe (ja, per ID ist der schnellste; danach kommt "tag" und dann erst "class" - Dinge wie "div#content" sollte man dringend vermeiden etc.!; nur: davon rede ich nicht!), Manipulation darin (bspw. nicht direktes Reinschreiben (Schleifenverwendung; gern genommen für LI, TR usw.!) - weil unperformant), warum Fragmente wichtig sind usw. ABER: Ich mag einfach nicht gegen das "Hausrecht" anreden ... das ist mir zu anstrengend, da ich einfach nicht in einem Forum auf Gehör pochen muss. "Hausrecht" gilt - Punkt. Ergänzend kommt hinzu, dass mir die Zeit für Beweislieferung fehlt. Google wird schon was ausspucken in puncto Performance-Empfehlungen und warum ich bspw. lieber 1x ins DOM (bevorzugte "Reihenfolge" wie oben) greife und mir auf diesen Teil (daher fragte ich nach dem HTML-Schnipsel) im Speicher (!) dann Sub-Selects fahre. Für mich ist es ein Unterschied, ob ich mit 4 MB DOM arbeite oder nur mit dem bereits schon selektierten Teil daraus ... und genau um den "Teil" geht es nur! Erlaube mir also einen Tipp: Solltest Du in der Lage sein einen sinnvollen Node abzugreifen, unter dem die (alle!) beteiligten Felder liegen (ich bin immer noch der Meinung, dass der einmalige Griff in #reglog reicht; s. Eröffnungsposting mit "unter reglog ein display:none DIV"), brauchst Du mit Sicherheit nicht "4x" ins DOM greifen ... ich bleibe also bei meiner Meinung: 1x (zwecks Einlesen).
Zum Vergrößern anklicken....
mit alledem hast du recht, ABER er hat kein performanceproblem. performanceoptimierung macht sinn, wenn man ein performanceproblem hat, nicht vorher.
und um mit domzugriffen in performanceprobleme zu laufen, braucht es schon mehr als eine simple animation.
sicher macht es sinn in großen projekten, wenn man immer und immer wieder die selbe abfrage macht, diese als variable zu speichern. dann kann man das aus gewohnheit ruhig auch in kleinen projekten machen, aber der zugriff über childs oder ähnliches anstelle über id, um zeit zu sparen, die nicht benötigt wird ist generell sinnlos. damit machst du dein js nur abhängiger von der html struktur.
wenn man performanceprobleme hat, da kann man das speziell so lösen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben