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

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

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

Vmax.
Beiträge gesamt: 37

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

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:
(10786 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:
(10780 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:
(10773 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:
(10756 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:
(10735 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:
(10686 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:
(10671 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:
(10632 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:
(10626 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen


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:
(10561 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:
(10549 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:
(10519 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:
(10507 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:
(10501 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]
X

Aktuell

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
02.02.2023

Prozesse optimieren und effizient gestalten

Zürich
Donnerstag, 02. Feb. 2023, 08.00 - 10.00 Uhr

Digitalisierung, Webauftritt

Digitalisierung mitgestalten - Worauf kommt es an? Wie wichtig ist die Webseite? Webseite mit Word Press? Interne Prozesse optimieren

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: Birol Isik, E-Mailinfo AT bkcc DOT ch

https://digitalisierung-heute.ch/digitalisierung-informationstag-schweiz/

Veranstaltungen
01.03.2023 - 09.03.2023

Online
Mittwoch, 01. März 2023, 00.00 Uhr - Donnerstag, 09. März 2023, 00.00 Uhr

Online Webinar

Wie gehen wir mit diesen Veränderungen um? Was ist notwendig, damit wir die Digitalisierung im Unternehmen klappt? Veränderungsprozesse verstehen und entsprechend handeln Mitarbeiter als Botschafter Webseite mit WordPress erstellen SEA /SEO (Ads aufschalten)

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: B. Isik, E-Mailinfo AT snfa DOT ch

https://www.fernstudiumfitness.ch/digitalisierung-schweiz/