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

[Gast] Foren Programmierung/Entwicklung JavaScript JS Anfänger: Header verkleinern/vergrößern

Programmierung/Entwicklung

Themen

Beiträge

Moderatoren

Letzter Beitrag

JavaScript

1411

5354

Thomas Richard

28. Feb 2024, 15:17

Nic1703

1 2

Vmax.

Beiträge gesamt: 37

31. Aug 2010, 08:41
Beitrag # 1 von 18
Bewertung:
(11438 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!

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

SabineP

Beiträge gesamt: 7586

31. Aug 2010, 09:45
Beitrag # 2 von 18
Beitrag ID: #450221
Bewertung:
(11427 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Vmax,

warum machst Du das nicht einfach mit CSS?

Beispiel:

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

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

als Antwort auf: [#450216]

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

Vmax.

Beiträge gesamt: 37

31. Aug 2010, 09:59
Beitrag # 3 von 18
Beitrag ID: #450222
Bewertung:
(11421 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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!

als Antwort auf: [#450221]

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

SabineP

Beiträge gesamt: 7586

31. Aug 2010, 10:17
Beitrag # 4 von 18
Beitrag ID: #450223
Bewertung:
(11414 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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

als Antwort auf: [#450222]

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

Vmax.

Beiträge gesamt: 37

31. Aug 2010, 10:58
Beitrag # 5 von 18
Beitrag ID: #450227
Bewertung:
(11397 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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...)

als Antwort auf: [#450223]

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

SabineP

Beiträge gesamt: 7586

31. Aug 2010, 12:44
Beitrag # 6 von 18
Beitrag ID: #450249
Bewertung:
(11376 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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

als Antwort auf: [#450227]
(Dieser Beitrag wurde von SabineP am 31. Aug 2010, 12:50 geändert)

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

Vmax.

Beiträge gesamt: 37

1. Sep 2010, 12:08
Beitrag # 7 von 18
Beitrag ID: #450340
Bewertung:
(11327 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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!

als Antwort auf: [#450249]

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

SabineP

Beiträge gesamt: 7586

1. Sep 2010, 13:27
Beitrag # 8 von 18
Beitrag ID: #450345
Bewertung:
(11312 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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>

als Antwort auf: [#450340]
(Dieser Beitrag wurde von SabineP am 1. Sep 2010, 13:40 geändert)

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

Vmax.

Beiträge gesamt: 37

1. Sep 2010, 15:51
Beitrag # 9 von 18
Beitrag ID: #450365
Bewertung:
(11273 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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

als Antwort auf: [#450345]

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

SabineP

Beiträge gesamt: 7586

1. Sep 2010, 16:43
Beitrag # 10 von 18
Beitrag ID: #450371
Bewertung:
(11267 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

>> "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

als Antwort auf: [#450365]
(Dieser Beitrag wurde von SabineP am 1. Sep 2010, 16:48 geändert)

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

Vmax.

Beiträge gesamt: 37

3. Sep 2010, 14:39
Beitrag # 11 von 18
Beitrag ID: #450515
Bewertung:
(11202 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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!

als Antwort auf: [#450371]

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

oesi50

Beiträge gesamt: 2315

3. Sep 2010, 15:53
Beitrag # 12 von 18
Beitrag ID: #450522
Bewertung:
(11190 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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>

als Antwort auf: [#450515]
(Dieser Beitrag wurde von oesi50 am 3. Sep 2010, 15:57 geändert)

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

Vmax.

Beiträge gesamt: 37

3. Sep 2010, 18:08
Beitrag # 13 von 18
Beitrag ID: #450537
Bewertung:
(11160 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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?

als Antwort auf: [#450522]

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

oesi50

Beiträge gesamt: 2315

3. Sep 2010, 18:46
Beitrag # 14 von 18
Beitrag ID: #450541
Bewertung:
(11148 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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

Probieren geht über Studieren. Wink

als Antwort auf: [#450537]

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

Vmax.

Beiträge gesamt: 37

3. Sep 2010, 18:56
Beitrag # 15 von 18
Beitrag ID: #450543
Bewertung:
(11142 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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.

als Antwort auf: [#450541]

1 2

Aktuell

Diverses

axaio veröffentlicht neue MadeToTag-Version 2.9.126

| 12.09.2023

Weitere Events

Neuste Foreneinträge

Platzierte Vektorgrafiken skalieren

Adobe Fonts werden nicht sofort/automatisch in ID-Dateien geladen

PDF-Formular: Dateianhang durch User?

Kontrollkästchen in PDF-Formular

Mehrfach geschichtete und übereinander gelagerte PDFs bereinigen

Mein Tagesausflug ins Land CorelDraw

Eizo Monitorkalibrierung auf Windows

Fußnoten zu Endnoten konvertieren

SMS ab Server senden? Wie geht das?

WebShare Verzeichnisse im SharePoint erstellen

Weitere Stellenangebote