div wird nicht immer angezeigt? [jQuery]

Page 1 of 2

07/09/2013 20:17 ოყlἶlրωղყ#1

nAbend.

Ich habe ein kleines Problem und kann mir aber nicht erklaeren, woran es liegen koennte.
Und zwar habe ich eine kleine Placeholderseite gebastelt.
Diese beinhaltet nur ein Bild und ein kleines Impressum.
Beides ist mit jQuery ein wenig aufgehuebscht.
Allerdings wird das Impressum nicht immer angezeigt.

Eventuell hat ja jemand 'ne Idee, woran es liegen koennte?

[[Only registered and activated users can see links. Click Here To Register...]]

HTML

Code:

<div id="placeholder"><img src="img/wip.png" /></div>
<div id="impressum">
	<p>Andreas CLTrec Grafen<br>
		D�litzer Stra&szlig;e 45<br>
		04277 Leipzig<br>
		<br>
		+49 163 / 73 12 262<br>
		+49 4341 / 99 03 105<br>
		<br>
		info[at]cltrec.de
	</p>
</div>

CSS

Code:

body {
	background: url(img/noise.png) #e7e7e7;
}

p {
	margin: 0px;
	font-family: "mc";
	opacity: 0.1;
	font-size: 10px;
}

img {
	position: absolute;
	top: 40%;
	left: 50%;
	margin-top: -250px;
	margin-left: -350px;
}

#placeholder {
	width:700px;
	height:500px;
	display:none
	background-color:transparent;
}

#impressum {
	position: absolute;
	top:60%;
	left:50%;
	width: 200px;
	margin-left: -100px;
	text-align:center;
	background-color:transparent;
	display: none;
}

@font-face {
	font-family:"mc";
	src:url(font/minecraftia.eot?) format("eot"),
		url(font/minecraftia.woff) format("woff"),
		url(font/minecraftia.ttf) format("truetype"),
		url(font/minecraftia.svg#Minecraftia) format("svg");
		font-weight:normal;font-style:normal;
}

jQuery

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
	$(document).ready(function(){
	    $("#placeholder").fadeIn(3000);
	});
	
	$(document).ready(function(){
		$("#impressum").slideDown(3000);
	});
	
</script>

07/09/2013 20:23 xEncounter#2

width:700px;
height:500px;
display:none
background-color:transparent;

das SEMICOLON bei display ^^

guck mal obs klappt.

07/09/2013 22:28 ოყlἶlրωղყ#3

hmm. Nope.
Steht auch eigentlich im Code mit drin - hatte ich wohl i.wie ausversehen geloescht. o:

Danke dennoch!

~

07/09/2013 22:56 MrPuschel#4

$("#impressum").slideDown(3000); wird bei einem refresh nicht ausgef�hrt. Pack beide Aufrufe in denselben event handler (ready).

An sich ist es kein Problem mehrere ready handles an ein document zu h�ngen (in deinem Fall nur unn�tig) aber im Zusammenhang mit deinem etwas chaotischem css scheint es Probleme bei gecachten Seiten zu geben.

Wenn du den Seitencache l�schst werden beide Animationen ausgef�hrt.

07/09/2013 23:18 ოყlἶlրωղყ#5

So chaotich finde ich mein CSS garnicht.. ;D
Normalrweise achte ich da auch mehr aufs sortieren, ist hier allerdings ein sehr kleine Dokument, da wars mir nicht so wichtig.

Ich werde auch mal versuchen, deinem Tipp nachzugehen, weiss allerdings nicht, ob das wirklich was hilft - vorher hatte ich auch shon alles in eine Function gepackt, allerdings mit dem selben Problem. o:

~

Edit: Erfahrung bestaetigt - das Problem tritt leider immernoch auf. :x

07/09/2013 23:24 MrPuschel#6

Jeder Browser hat einen Element Inspector und einen Javascript debugger. Setz einen Breakpoint bei deinen beiden Funktionsaufrufen und schau dir nach dem Aufruf dein Impressum an, das steht noch auf display:none;

Und keine Ausreden, eine absolute positionierung mit prozentualen Abst�nden und margins ist schon ziemlich mies ;) Versuchs mal mit einer margin:0 auto;

07/09/2013 23:32 ოყlἶlրωղყ#7

Mit 'margin: 0px auto;' hab ich es dann ja aber nicht in der Mitte des Browsers.
So sind die Inhalte immer genau in der Mitte des Browsers. Von Links und von Oben - und da ist mir leider noch keine andere Moeglichkeit ueber den Weg gelaufen, das zu ralisieren. o:
Wenn dir da allerdings etwas bewusst ist, dann nehme ich das auch gerne an. n_n

Was genau mir Breakpoints jetzt bringen sollen, habe ich allerdings noch nicht so ganz verstanden. :x
Zumindest bringe ich Breakpoints nur mit responsive Designs in Verbindung - und das verwende ich hier ja garnicht.

07/09/2013 23:54 MrPuschel#8

Bau die Seite am besten neu.

Der Container placeholder macht in dem Kontext keinen Sinn.
Elternelemente richten sich nicht an ihren Kindern aus. Zentrier den "placeholder". Du kannst ihn auch ganz weglassen und das Bild mit margin:0 auto; mittig ausrichten indem du dem img element ein display:inline-block; oder display:block; zuweist.

Inhalte zentrieren: [Only registered and activated users can see links. Click Here To Register...]

Zu Positierung von Elementen: [Only registered and activated users can see links. Click Here To Register...]

07/10/2013 00:05 ოყlἶlրωղყ#9

Ja. Ein bisschen sehr kryptisch ist es schon.
Die Placeholderdiv ist einfach nur zum einfassen des img da. Finde ich persoenlich schoener, als das Bild einfach nur so da rein zu packen. (:

Aber ich denke, ich werde deinen Rat befolgen, und das Ganze morgen einfach nochmal neu schreiben.
Mal schauen ob es dann klappt. n_n

Ansonsten weiss ich auch, wie man Dinge richtig positioniert.
Diese umstaendliche Variante nutze ich halt nur, da ich das Bild und das Impressum wirklich mittig haben moechte - auch auf der xAchse. Und da ist mir keine andere Variante bewusst. o:

07/10/2013 00:12 MrPuschel#10

Quote:

Die Placeholderdiv ist einfach nur zum einfassen des img da. Finde ich persoenlich schoener, als das Bild einfach nur so da rein zu packen. (:

Ansonsten weiss ich auch, wie man Dinge richtig positioniert.

Weist du nicht. Sonst h�ttest du es nicht gemacht.
Ich meins nicht b�se aber wenn du dir nicht selbst eingestehst das du noch sehr viel zu lernen hast wirst du a) nicht besser und b) nicht gerade thumbs up f�r deine Tutorial Reihe bekommen ;)

Google mal "Box Model", "Inline und Block Elemente" und "Floating".

07/10/2013 00:19 ოყlἶlրωղყ#11

Ich habe 3 Jahre fachliche Ausbildung in dem Bereich. Also denke ich schon, dass ich behaupten kann, dass ich es kann.
Ich behaupte ja nicht, dass ich der ganz grosse Pro bin - wuerde ich niemals - aber ich denke schon, dass ich Ahnung von dem habe, was ich tue. o:
Allerdings laesst sich der von mir gewuenschte Effekt nicht anders erreichen.
Deswegen - und aus keinem anderen Grund - diese sehr verschachtelte Positionierungsgeschichte. n_n

Ich danke dir auf jeden Fal fuer deine Hilfsbereitschaft.
Ich schau mal, ob sich das Problem durch eine Neuaufsetzung beheben laesst. :3

07/10/2013 14:05 kissein#12

Bevor/nachdem das Img via jquery in sichtbereich gebracht werden soll /wird, einfach display:none aufheben und einblenden ?

btw: 3 jahre d�umchen gedreht und energiewende unterst�tzt?

07/10/2013 14:39 ოყlἶlրωղყ#13

Manchmal schon - aber das war eher die Ausnahme. :b

In wiefern mir dein Beitrag jetzt helfen soll, habe ich allerdings nicht verstanden. Dass die display:none;Definierung durch das Einblenden via jQuery aufgehoben wird ist mir bewusst.
Es scheint ja auch zu funktionieren - das Problem ist halt nur, dass es nicht immer funktioniert. Manchmal wird es eingeblendet und manchmal nicht, und das auch komplett ohne irgendein erkennbares System.

~

07/10/2013 15:20 kissein#14

Was sagt in so einem Fehlerfall die Entwicklerconsole des jeweiligen Browsers ?

Btw wenn die seite �ffentlich ist poste bitte mal einen link. damit k�nnte man etwaige vorg�ngerfehler sehen. kann auch sein das dies nur ein folgefehler ist

07/10/2013 15:23 ოყlἶlրωղყ#15

Klar. Link gibts auch direkt im ersten Post. (:
[Only registered and activated users can see links. Click Here To Register...]

Page 1 of 2