JS Anfänger: Header verkleinern/vergrößern

Lesezeichen \| Suche \| Benutzerliste \| FAQ \| Mitgliedschaft \| Registrieren \| Einloggen
Gast

"Funktioniert nicht" ist keine hinreichende Fehlerbeschreibung.

Forenindex » Programmierung/Entwicklung » JavaScript » JS Anfänger: Header verkleinern/vergrößern

« « 1 2 » »

Vmax.

Beiträge: 37

31. Aug 2010, 08:41

Beitrag #1 von 18
Bewertung:

(2724 mal gelesen)
URL zum Beitrag

Beitrag als Lesezeichen

Hallo Leute,

ich bin JS-Dummy und aufgeschlossen, aber zu sehr Land unter gerade...

Ich erstelle derzeit eine Website, deren Homepage einen vergrößerten Header aufweist als die übrigen Seiten. Realisiert habe ich dies durch eine CSS- .Klasse, die nur auf der Homepage verwendet wird. Der einzige Unterschied dieser Klasse ist 'height'.
Hintergrund: Auf der HP sollen Flash-Animationen ablaufen, auf den anderen Seiten nicht.

Das Ergebnis funktioniert, sieht aber "nicht gekonnt" aus.

1 - Gibt es eine Möglichkeit, den Header mittels JS zu schrumpeln und (bei Home-Aufruf) wieder zu vergrößern?
2 - Kann man dies durch die Abfrage der CSS-Werte erreichen, um evtl. Änderungen ausschließlich im CSS vorzunehmen und die .js-Datei ganz in Ruhe zu lassen?
3 - Und jetzt die ketzerischste aller Fragen (für ein JS-Forum): Ginge das prinzipiell auch ohne JS?

Viele Grüße und danke vorab!
_________________________________
MBP 2.2GHz - MacOS 10.6.2 - CS3.3 DP

SabineP M
Beiträge: 7586

31. Aug 2010, 09:45

Beitrag #2 von 18
Beitrag ID: #450221

Bewertung:

(2713 mal gelesen)
URL zum Beitrag

Beitrag als Lesezeichen

JS Anfänger: Header verkleinern/vergrößern

Hallo Vmax,

warum machst Du das nicht einfach mit CSS?

Beispiel:

HTML:
<div class="headerhome"></div>

CSS:
.headerhome {height:deine Wunschhöhe hier eintragen}
Gruß Sabine

als Antwort auf: [#450216]

Vmax.

Beiträge: 37

31. Aug 2010, 09:59

Beitrag #3 von 18
Beitrag ID: #450222

Bewertung:

(2707 mal gelesen)
URL zum Beitrag

Beitrag als Lesezeichen

JS Anfänger: Header verkleinern/vergrößern

Hallo Sabine,

sorry, Missverständnis.

Das hier habe ich:
Homepage: <div id="headerhome">; #headerhome {height: 124px;}
Rest: <div id="header">; #header {height: 54px;}

Und genau das ist unschön - der sprunghafte Übergang zwischen Homepage-Kopfbereich und schmalem Kopfbereich, das sieht m.E. zu sehr nach Fehler aus. Darum meine Idee, per JS einen verschmusten Übergangseffekt zu realisieren (oder per HTML5??).
Home: Rolladen runter <--> != Home: Rolladen hoch...

...und diesen ggf. über eine Werteabfrage im Stylesheet zu realisieren, damit ich gar nicht mehr in die .js-Datei reinschauen muss.

Geht das?

Grüße!
_________________________________
MBP 2.2GHz - MacOS 10.6.2 - CS3.3 DP

als Antwort auf: [#450221]

SabineP M
Beiträge: 7586

31. Aug 2010, 10:17

Beitrag #4 von 18
Beitrag ID: #450223

Bewertung:

(2700 mal gelesen)
URL zum Beitrag

Beitrag als Lesezeichen

JS Anfänger: Header verkleinern/vergrößern

Befindet sich im Head nicht diese Flashdatei?
Da müßtest Du ja die Höhe der Flashdatei auch noch dynamisch ändern.

>> Hintergrund: Auf der HP sollen Flash-Animationen ablaufen
Gruß Sabine

als Antwort auf: [#450222]

Vmax.

Beiträge: 37

31. Aug 2010, 10:58

Beitrag #5 von 18
Beitrag ID: #450227

Bewertung:

(2683 mal gelesen)
URL zum Beitrag

Beitrag als Lesezeichen

JS Anfänger: Header verkleinern/vergrößern

Hallo Sabine,

das Flash soll *nur* auf der Homepage ablaufen (und möglicherweise auch nur beim Erstaufruf), der Headerbereich für alle anderen Seiten bleibt statisch - keine Animation.

Anders herum formuliert: Eigens für die Anfangsanimation auf der Homepage (und nur dort) wird der Header der Homepage aufgebohrt.

Die Animation würde beim Aufruf einer anderen Seite gestoppt* und entladen werden.

(*: Um das sinnvoll hinzubekommen, würde man hier vermutlich ebenfalls überblenden: Der sichtbare, gestoppte Frame der Animation wird zunehmend überdeckt vom Standard-Hintergrund o.ä., ist aber vermutlich ein eigener Thread...)
_________________________________
MBP 2.2GHz - MacOS 10.6.2 - CS3.3 DP

als Antwort auf: [#450223]

SabineP M
Beiträge: 7586

31. Aug 2010, 12:44

Beitrag #6 von 18
Beitrag ID: #450249

Bewertung:

(2662 mal gelesen)
URL zum Beitrag

Beitrag als Lesezeichen

JS Anfänger: Header verkleinern/vergrößern

Hier ist ein Beispiel mit CSS3 und Javascript
zum vergrößern der Höhe eines DIVs innerhalb von 5 Sekunden.
Funktioniert in Firefox 4, Opera 10 und Safari und vielleicht auch später im IE 9.

Code

<!DOCTYPE html>   
<html>   
<head>   
<title>CSS Transition Demo</title>   
<link rel="stylesheet" href="transitions.css" type="text/css">   
<style type="text/css"> 
.hoeheanfang { 
	position: absolute; 
	-moz-transition-property: height; 
	-moz-transition-duration: 5s; 
	-webkit-transition-property: height; 
	-webkit-transition-duration: 5s; 
	-o-transition-property: height; 
	-o-transition-duration: 5s; 
	height: 100px; 
} 
 
.hoeheende {   
	position: absolute;   
	-moz-transition-property: height;   
	-moz-transition-duration: 5s;   
	-webkit-transition-property: height;   
	-webkit-transition-duration: 5s;   
	-o-transition-property: height;   
	-o-transition-duration: 5s;   
	height: 200px;   
	width: 200px;   
  background-color:red; 
}   
 
</style> 
 
<script type="text/javascript"> 
<!-- 
function runDemo() {   
	var el = updateTransition();   
	 
	el.addEventListener("transitionend",  updateTransition, true);   
}   
 
function updateTransition() { 
	var el = document.querySelector("div.hoeheende"); 
	 
	if (el) { 
		el.className = "hoeheanfang"; 
	} else { 
		el = document.querySelector("div.hoeheanfang"); 
		el.className = "hoeheende"; 
	} 
	 
	return el; 
} 
 
//--> 
</script> 
 
 
</head>   
<body onload="runDemo()">   
<div class="hoeheanfang">Headerbox</div>   
</body>   
</html>

Ich habe dazu das Beispiel von der Firefox-Webseite etwas angepasst:
https://developer.mozilla.org/...tion_timing_function
Gruß Sabine

als Antwort auf: [#450227]

(Dieser Beitrag wurde von SabineP am 31. Aug 2010, 12:50 geändert)

Vmax.

Beiträge: 37

1. Sep 2010, 12:08

Beitrag #7 von 18
Beitrag ID: #450340

Bewertung:

(2613 mal gelesen)
URL zum Beitrag

Beitrag als Lesezeichen

JS Anfänger: Header verkleinern/vergrößern

Hallo Sabine,

das ist ziemlich genial! Vielen Dank!

Ich habe allerdings jetzt mehrere Verständnisprobleme:
1.) CSS3:
Laut Mozilla-Website sind die Animationen bereits in CSS3 enthalten, sprich, sie werden vom CSS-Interpreter des Browsers ausgeführt, und nicht von dessen JS-Interpreter.
Insofern ist das JS-Skript, das Du mitgeliefert hast, lediglich für die jetzigen Browser wichtig, die mit CSS3 noch nicht umgehen können... ist das richtig so?

2.) Im Quelltext wird auf eine transition.css verwiesen. Die gibt's aber in Wirklichkeit nicht, oder? Man soll sich die Deklarationen aus dem Header lediglich da hineindenken...

3.) Ich habe versucht, das Skript umzumodeln auf IDs. Aber entweder kommt der querySelector nicht mit der Angabe ("div#header") klar, oder den Ausdruck "idName" (statt "className") gibt's nicht – oder beides.
Wie muss es richtig heißen? Oder funktioniert das Ganze mit IDs nicht?

So weit mal, ich geh' jetzt ein bisschen spielen mit JS... ;-)

Grüße!
_________________________________
MBP 2.2GHz - MacOS 10.6.2 - CS3.3 DP

als Antwort auf: [#450249]

SabineP M
Beiträge: 7586

1. Sep 2010, 13:27

Beitrag #8 von 18
Beitrag ID: #450345

Bewertung:

(2598 mal gelesen)
URL zum Beitrag

Beitrag als Lesezeichen

JS Anfänger: Header verkleinern/vergrößern

zu 1.
Das Javascript dient lediglich dazu, daß die CSS3-Animation beim Javascript-Ereignis onload gestartet wird.
http://de.selfhtml.org/...nthandler.htm#onload
Die Animation funktioniert nur in Browser, die die CSS3 Eigenschaft transition unterstützen.

zu 2.
diese Zeile kannst Du streichen:
<link rel="stylesheet" href="transitions.css" type="text/css">
Der Inhalt dieser CSS-Datei befindet sich schon innerhalb von
<style type="text/css">...</style>
Das war nur ein Copieren-Einfügen-Fehler von mir.

zu 3.
Dieses Javascript funktioniert nicht mit IDs.
Du kannst aber dem div trotzdem zusätzlich eine ID geben, falls Du dort eine ID brauchst.
<div id= "eine-id" class="hoeheanfang">Headerbox</div>
Gruß Sabine

als Antwort auf: [#450340]

(Dieser Beitrag wurde von SabineP am 1. Sep 2010, 13:40 geändert)

Vmax.

Beiträge: 37

1. Sep 2010, 15:51

Beitrag #9 von 18
Beitrag ID: #450365

Bewertung:

(2559 mal gelesen)
URL zum Beitrag

Beitrag als Lesezeichen

JS Anfänger: Header verkleinern/vergrößern

Sabine,

*noch* eine letzte Frage:

in dem Skript gibt es ein "className". Worum handelt es sich hierbei? Attribut? Variable?
Wenn ich damit rummache, entsteht nur Murks...

...und falls Du eine gute JS-Referenz kennst (Buch oder online) - gerne hier rein ;-)

Danke und viele Grüße,

Vmax
_________________________________
MBP 2.2GHz - MacOS 10.6.2 - CS3.3 DP

als Antwort auf: [#450345]

SabineP M
Beiträge: 7586

1. Sep 2010, 16:43

Beitrag #10 von 18
Beitrag ID: #450371

Bewertung:

(2553 mal gelesen)
URL zum Beitrag

Beitrag als Lesezeichen

JS Anfänger: Header verkleinern/vergrößern

>> "className". Worum handelt es sich hierbei?
http://de.selfhtml.org/...e/all.htm#class_name
http://developer.mozilla.org/...OM/element.className

>> ..und falls Du eine gute JS-Referenz kennst
http://developer.mozilla.org/en/JavaScript/Reference
Gruß Sabine

als Antwort auf: [#450365]

(Dieser Beitrag wurde von SabineP am 1. Sep 2010, 16:48 geändert)

Vmax.

Beiträge: 37

3. Sep 2010, 14:39

Beitrag #11 von 18
Beitrag ID: #450515

Bewertung:

(2488 mal gelesen)
URL zum Beitrag

Beitrag als Lesezeichen

JS Anfänger: Header verkleinern/vergrößern

Danke für die Infos!

Also, etwas weiter bin ich dank dieser Quellen schon mal:

Code

function headertransition() {    
	var el = updateTransition();    
	  
	el.addEventListener("transitionend",   updateTransition, true);    
}    
  
function updateTransition() {  
	var el = document.querySelector("div#header");  
	  
	if (el) {  
		el.id = "homeheader";  
	} else {  
		el = document.querySelector("div#homeheader");  
		el.id= "header";  
	}  
	  
	return el;  
}

Mit dieser Schreibweise geht's auch mit IDs.

Was mir an dieser Lösung nicht gefällt ist das redundante CSS. Ich muss für beide IDs #header und #homeheader fast die gleichen Werte eintragen, dabei gibt es nur einen Unterschied bei height.

Eleganter fände ich eine Lösung, die abfragt, ob #header in der Homepage steht, dafür würde ich eigens eine Klasse oder eine ID vergeben: .home bzw. #home.
Für ".home #header {}" bräuchte ich dann nur den anderen height-Wert eintragen, alles andere würde sich der Browser aus der Definition für #header holen.

Tja, nur...
wie notiert man die Kombination aus zwei Werten/Attributen/IDs/Klassen in Javascript?
Habe Verschiedenes auf Verdacht ausprobiert, leider ohne Erfolg.

Ich hoffe, ich nerve nicht zu sehr...

Viele Grüße in die virtuelle Runde!
_________________________________
MBP 2.2GHz - MacOS 10.6.2 - CS3.3 DP

als Antwort auf: [#450371]

oesi50 A

Beiträge: 2280

3. Sep 2010, 15:53

Beitrag #12 von 18
Beitrag ID: #450522

Bewertung:

(2476 mal gelesen)
URL zum Beitrag

Beitrag als Lesezeichen

JS Anfänger: Header verkleinern/vergrößern

ja, dann machs doch einfach ohne Redundanzen:

Code

<!DOCTYPE html>    
<html>    
<head>    
<title>CSS Transition Demo</title>    
    
<style type="text/css">  
.hoehe { 
 position: absolute;    
 width: 200px;    
 background-color:red;  
 -moz-transition-property: height;    
 -moz-transition-duration: 10s;    
 -webkit-transition-property: height;    
 -webkit-transition-duration: 10s;    
 -o-transition-property: height;    
 -o-transition-duration: 10s;    
} 
.hoeheanfang {  
	height: 100px;    
}  
.hoeheende {    
	height: 500px; 
}    
</style>  
  
<script type="text/javascript"><!-- 
function runDemo() {    
	var el = updateTransition(); 
	el.addEventListener("transitionend",   updateTransition, true);    
} 
 
function updateTransition() {  
	var el = document.querySelector("div.hoeheende"); 
 
	if (el) { 
		el.className = "hoehe hoeheanfang";  
	} else { 
		el = document.querySelector("div.hoeheanfang"); 
		el.className = "hoehe hoeheende"; 
	} 
	return el; 
} 
//-->  
</script> 
 
</head>    
<body onload="runDemo()">    
<div id="header" class="hoehe hoeheanfang">Headerbox</div>    
</body>    
</html>

Grüße Oesi
Ich weiß, dass ich nicht weiß... (Sokrates)

als Antwort auf: [#450515]

(Dieser Beitrag wurde von oesi50 am 3. Sep 2010, 15:57 geändert)

Vmax.

Beiträge: 37

3. Sep 2010, 18:08

Beitrag #13 von 18
Beitrag ID: #450537

Bewertung:

(2446 mal gelesen)
URL zum Beitrag

Beitrag als Lesezeichen

JS Anfänger: Header verkleinern/vergrößern

Jaaaa.... schon...

Ich könnte auch
#header, #headerhome {...;}
für die gemeinsamen Werte und height separat für jede ID notieren, da ich aber mit einer WordPress-Installation arbeite, bin ich auf die Möglichkeit gestoßen, dynamisch Klassen zu vergeben.
Und da bot sich die .home-Klasse für die Homepage in Verbindung mit der #header-ID an.

So ähnlich wie

el.className.id =""; --> nö
el.className = "home" el.id = "header"; --> nö
el.className = "" + el.id = ""; --> nö

... und darf man "querySelector ("div.home#header")" schreiben?
_________________________________
MBP 2.2GHz - MacOS 10.6.2 - CS3.3 DP

als Antwort auf: [#450522]

oesi50 A

Beiträge: 2280

3. Sep 2010, 18:46

Beitrag #14 von 18
Beitrag ID: #450541

Bewertung:

(2434 mal gelesen)
URL zum Beitrag

Beitrag als Lesezeichen

JS Anfänger: Header verkleinern/vergrößern

Zitat ... und darf man "querySelector ("div.home#header")" schreiben?

Probieren geht über Studieren. Wink

Grüße Oesi
Ich weiß, dass ich nicht weiß... (Sokrates)

als Antwort auf: [#450537]

Vmax.

Beiträge: 37

3. Sep 2010, 18:56

Beitrag #15 von 18
Beitrag ID: #450543

Bewertung:

(2428 mal gelesen)
URL zum Beitrag

Beitrag als Lesezeichen

JS Anfänger: Header verkleinern/vergrößern

Es ist ja nicht so, dass ich es nicht ausprobiert hätte.
Das Skript funktioniert aber nicht.

Und jetzt weiß ich nicht, ob es an der "querySelector"-Schreibweise liegt oder an der Art, dieses "el"-(Element?)-Teil der Klassen-ID-Kombination zuzuordnen - oder beides.
_________________________________
MBP 2.2GHz - MacOS 10.6.2 - CS3.3 DP

als Antwort auf: [#450541]

« « 1 2 » »

Forenindex » Programmierung/Entwicklung » JavaScript » JS Anfänger: Header verkleinern/vergrößern


Foren \| Tutorials \| Jobs \| Online-Videos \| HDS-Service \| Richtlinien \| Impressum