dynamisch programmieren (JS)

T

ThaHammer

Aktives Mitglied
Thread Starter
Dabei seit
01.06.2004
Beiträge
3.303
Reaktionspunkte
13
Ich wollte mal anfange, etwas mehr mit Javascript zu machen und stolpere gleich am Anfang über was einfaches. So dachte ich jedenfalls!

Code: 
  //var i = document.all.mymenu.style.getAttribute("width","false");
  var i = document.getElementById("submenu1").style.visibility;

Eigentlich wollte ich nur das css Attribute von meinem Menu abfragen, so kommt anber immer document.all has no propertys!
Das zweite per getElementByID scheint zwar zu gehen liefert aber nichts zurück. Wo ist mein Fehler?
 
Das erste funktioniert natürlich nicht, da document.all eigentlich gar nicht existiert, das das wurde nur von M$ irgendwann mal im Zeitalter des großen Browserkrieges eingeführt. Also streich es am besten gleich aus deinem Gedächtnis.
Wenn das 2. nichts zurückgibt, ist die Eigenschaft nicht gesetzt, der Defaultwert wird in diesem Fall wohl "visible" sein.
 
Darii schrieb:
Das erste funktioniert natürlich nicht, da document.all eigentlich gar nicht existiert, das das wurde nur von M$ irgendwann mal im Zeitalter des großen Browserkrieges eingeführt.
Wenn das 2. nichts zurückgibt, ist die Eigenschaft nicht gesetzt, der Defaultwert wird in diesem Fall wohl "visible" sein.
Zum Vergrößern anklicken....

Ok, das erste wußte ich leider schon gar nicht! Danke!
Jetzt gehts doch! Danke Dir. Habe den Aufruf woanders hingepackt, jetzt gehts.
 
Zuletzt bearbeitet:
ThaHammer schrieb:
Ok, das erste wußte ich leider schon gar nicht! Danke!

Gesetzt sind die Werte die ich mal abwechselnd versucht habe abzufragen, allerdings in der css Datei! :confused:
Zum Vergrößern anklicken....

Wird die CSS-Datei auch VOR dem JavaScript geladen?
Auf solche Sachen, und bei mehreren JS-Dateien, die auf die selben Variablen zugreifen, muss man aufpassen, da bin ich schon so oft drauf reingefallen :D
Und ich werde noch oft drauf reinfallen.
 
koli.bri schrieb:
Wird die CSS-Datei auch VOR dem JavaScript geladen?
Auf solche Sachen, und bei mehreren JS-Dateien, die auf die selben Variablen zugreifen, muss man aufpassen, da bin ich schon so oft drauf reingefallen :D
Und ich werde noch oft drauf reinfallen.
Zum Vergrößern anklicken....

OK, JS war vor der css Datei dran. Jetzt will ich aber die Breite abfragen, als Beispiel mal. Weil am Ende will ich ja das Submenu ausklappen lassen, also so einen netten Effekt zaubern. Vom Grundprinzip ist da ja eigentlich nicht so wild. Schleife, Breite aktualisieren, evtl. Fontsize in % damit der Text größer wird je breiter. Gut, so weit hört sich das einfach an. Nur will ich jetzt die Breite eben abfragen und bekomme wieder nichts zurück. Breite ist aber auf 150px gesetzt! :confused:
 
So, ich habe meinen Fehler gefunden! Wobei ich nicht draufkomme, warum das jetzt falsch ist? Kann mir da mal jemand helfen?

Code: 
     for(i=0;i<=150;i++) {
		i = i + "px";
	}
    alert(typeof i);

Das dient jetzt nur dazu meinen Fehler zu finden! Also ich durchlaufe die Schleife mit i, und setze es für die Style Anweisung mit dem Text "px" zusammen um den Wert später ins Dokument für ein Div zu schreiben.
Soweit die Theorie! In der Praxis funktioniert es so leider mal wieder nicht!
Mein Alert mit dem Typ der Variable i gibt number zurück, ich brauche aber String. Sollte i nicht zum String werden, wenn ich die Zahl mit Text kombiniere?
 
ThaHammer schrieb:
So, ich habe meinen Fehler gefunden!
Zum Vergrößern anklicken....
was wars denn?

Code: 
     for(i=0;i<=150;i++) {
		i = i + "px";
	}
    alert(typeof i);

Das dient jetzt nur dazu meinen Fehler zu finden! Also ich durchlaufe die Schleife mit i [...] Sollte i nicht zum String werden, wenn ich die Zahl mit Text kombiniere?
Zum Vergrößern anklicken....
Theoretisch schon. Aber i ist deine Iterationsvariable. Mit i++ wird die natürlich wieder zum Integer. Dass die Schleife dann keine 150 Mal durchläuft ist da nur das Randproblem. Versuchs mal so:
Code: 
     for(i=0;i<=150;i++) {
		blub = i + "px";
	}
    alert(typeof blub);
 
  • Gefällt mir
Reaktionen: ThaHammer
Darii schrieb:
was wars denn?

Theoretisch schon. Aber i ist deine Iterationsvariable. Mit i++ wird die natürlich wieder zum Integer. Dass die Schleife dann keine 150 Mal durchläuft ist da nur das Randproblem. Versuchs mal so:
Code: 
     for(i=0;i<=150;i++) {
		blub = i + "px";
	}
    alert(typeof blub);
Zum Vergrößern anklicken....

Ich bin mir wegen dem Fehler nicht ganz sicher, war wohl ein Tippfehler beim zusammenbasteln der Funktion.

Ok, ich glaube ich habs kapiert was Du meinst? Ich wandele ständig i von Zahl nach String und zurück! Doofe Idee, mit einer zweiten Variable ist das einfach und geht auch. Jetzt kriege ich String zurück! Danke Dir.

Aber das hier funktioniert noch nicht so recht!

Code: 
  document.getElementById("submenu1").style.width = blub;

Wie kann ich das Verzögern? Bin auf folgendes gestoßen, allerdings habe ich noch Probleme damit!

Code: 
  window.setTimeout('dynamic()','5000')

Habe nochmals nachgelesen, scheint als wäre setTimeout der falsche weg? :confused:
Gibt es irgendwo eine Einsteigerseite für solche Sachen?
 
nimm doch einfach eine vorgefertigte bibliothek, oder guck dir an wie das da gemacht wurde.
 
Nachtrag:

Code: 
// JavaScript Document
	var sm, blub;
	var i=0;
	var step = 10;

function init() {
	ShowHide('submenu1','visible');
	sm = document.getElementById("submenu1");
	dynamic();
	
}
	
	function dynamic() {
		
		if (i<150) {
			blub = i+"px";
			sm.style.width = blub;
			i = i+step;
		}
		
		window.setTimeout("dynamic()", 20);
	}

onMouseOver="init()"

Wenn man das mit onmouseover aufruft, klappt das Menu in Zeitlupe einmal auf. Jetzt muss ich nur noch das i beim onmouseout reseten und die Geschwindigkeit anpassen. Den Inhalt in % angeben, damit es mit macht. usw.
 
Ähm...

Rufst Du die Funktion "dynamic()" auf, verzwirbelt die sich ein wenig, oder nicht?
Sprich, bei jedem Aufruf dieser Funktion wird sie selbst wieder beim window.setTimeout() aufgerufen...

Sprich, Du hast eine endlose Rekursion, da das Script nie abbricht.

Pack den Aufruf im Timeout mit in die IF-Abfrage, das sollte passen, oder?

zum Thema Rekursionn kann ich dir folgenden Beitrag nahelegen: Quakenet. Da gehts zwar um PHP, tut aber im grunde nichts zur Sache :)

ansonsten:
Ich finds cool, dass du keine vorgefertigten Bibliotheken nimmst!
Weiter so! :)

gruß
Lukas

noch ein EDIT:
Da Du nach "Anleitungen" gefragt hast, hier mal die Referenzen, die ich bei mir lokal hab, und die mir reichen:
http://de.selfhtml.org/javascript/index.htm -> SelfHTML. Glaube, darüber braucht man kein Wort drüber verlieren.

http://www.galileocomputing.de/openbook/javascript_ajax/ -> da hab ich mir zwar nur den AJAX-Kram rausgelesen, aber wies scheint, ist das ganze eher als "Anleitung" aufgebaut. Was ich gut fand, war, dass die viel Wert darauf legen, dass JavaScript Objektorientiert ist.

Mehr brauch ich persönlich eigentlich nicht. :)
 
Zuletzt bearbeitet von einem Moderator:
  • Gefällt mir
Reaktionen: ThaHammer
Code: 
function dynamic() {
		
		if (i<150) {
			blub = i+"px";
			sm.style.width = blub;
			i ++;
			window.setTimeout("dynamic()", 20);
		}
	}

Habe ich Gestern schon gemerkt! :D
Ich muss eh umbauen. Also ich denke da gerade daran erstens die Funktion umzubenennen, soll ja noch mehr dazu kommen! Zweitens was mit zu übergeben, Auf und zu oder so, was es mir ermöglicht eine Richtung anzugeben. Mein Ein- und Ausblenden funktioniert z.B. so!

Ja Selber machen hat den Vorteil, das der Code meist kürzer ist. Früher habe ich alles von GoLive machen lassen, was zu seitenlangem Code führte. Selber programmiert war die selbe Funktion hernach 5 Zeilen lang und funktionierte auch überall! :D
 
So falls es jemanden interessiert, das ist der halbwegs funktionierende Stand der Dinge:

Code: 
	var sm, blub, font;
	var i=0;
	var step = 20;
	var time = 20;
	
	function slide_out_init() {
		
		sm = document.getElementById("submenu1");
		obj = document.getElementsByTagName("div");
		obj['submenu1'].style.visibility = 'visible';
		slide_out();
	}

	function slide_out() {
		
			if(i<=150) {
			blub = i +"px";
			font = Math.round(i/10)+1;
				if(i>=90){
					font = 9;
				}
			zeichen = font+"px";
			sm.style.fontSize = zeichen;
			
			sm.style.width = blub;
			wo = i + "px 0px";
			sm.style.backgroundPosition = wo;
			i = i + step;
		//	document.getElementById("Absatz").innerHTML = zeichen;
			window.setTimeout("slide_out()", time);
			}
	}
	
	function slide_in_init() {
		i = 150;
		sm = document.getElementById("submenu1");
		obj = document.getElementsByTagName("div");
		slide_in();	
	}
		
	function slide_in() {
			if(i>0) {
				blub = i+"px";
				sm.style.width = blub;
				i = i-step ;
				window.setTimeout("slide_in()", time);
			} else if (i <= 0) {
				obj['submenu1'].style.visibility = 'hidden';
			}
	}

Der Aufruf erfolgt so:

Code: 
onMouseOver="slide_out_init()" onMouseOut="slide_in_init()"

soweit geht es schon, etwas Feinarbeit noch. Was mich aber noch ärgert/irritiert ist das die fontSize nicht so recht mitmacht!
Bei 1px oder so, ändert sich nicht viel.

Kleine Korrektur!

Wenn ich statt px beim Font em angebe, würde es funktionieren! Warum, mag JS da die px Angaben nicht?
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten