Dynamische Variable die sich in "Echtzeit" ändert.

D

dont ScreaM

Neuling
Thread Starter
Mitglied seit
25.01.2017
Beiträge
385
Hallo,
ich nehme eine Variable von einem Element "<header>" und es soll den Style für "<nav>" ändern.
Problem ist nur dass es nicht in "Echtzeit" passiert wenn ich mein Fenster verkleinere. Ich muss "F5 / Seite Refreschen" fann ändert sich der "float"

Brauchte für den Code ca 30min :x

Code: 
var clientHeight = document.getElementById('header').clientHeight;
document.getElementById("demo").innerHTML = ('Header height is ') + clientHeight + ('px'); 

if (clientHeight < 51) {
 document.getElementById('nav').style.float = "right";
}
else {
 document.getElementById('nav').style.float = "left";
}
 
Zuletzt bearbeitet:
Wenn Du diese Anzeige nicht sehen willst, registriere Dich und/oder logge Dich ein.
Keine Ahnung was du so für JS Frameworks benutzt. Das $ wird von vielen genutzt.

Falls es jQuery ist, lege ich dir die Doku ans Herz. Da siehst du dann auch, wie man CSS Stile von einem Element ändern kann ;)

.css() | jQuery API Documentation
 
Da musst du das resize event des Browsers abfangen und die Berechnung dann erneut ausführen
 
scrollt schrieb:
Da musst du das resize event des Browsers abfangen und die Berechnung dann erneut ausführen
Zum Vergrößern anklicken....

Hab ein Code gefunden jetzt versuche ich es zu verstehen und was ich damit machen kann... seid paar min versucht und nichts.
Code: 
window.addEventListener('resize', wSize);

function wSize() {
  var wW = window.outerWidth;
  var wH = window.outerHeight;
}
Weiß nicht wie ich "mein var aktualizieren kann" wenn sich das "window" bewegt.
 
Ist eigentlich maximal simpel. Das "window"-Element (das Browserfenster) hat eine Methode "addEventListener". Das ist ne Funktion, die auf ein bestimmtes Ereignis wartet und dann eine Funktion ausführt, wenn dieses Ereignis eintritt. Der erste Parameter ist das Event, in diesem Falle "resize", also wenn das Fenster in der Größe verändert wird. Wenn das passiert, dann wird die Funktion "wSize" aufgerufen. Und diese "wSize"-Funktion sollte dann am Besten dein if-else aus dem ersten Post beinhalten.
 
Fallwrrk schrieb:
Ist eigentlich maximal simpel. Das "window"-Element (das Browserfenster) hat eine Methode "addEventListener". Das ist ne Funktion, die auf ein bestimmtes Ereignis wartet und dann eine Funktion ausführt, wenn dieses Ereignis eintritt. Der erste Parameter ist das Event, in diesem Falle "resize", also wenn das Fenster in der Größe verändert wird. Wenn das passiert, dann wird die Funktion "wSize" aufgerufen. Und diese "wSize"-Funktion sollte dann am Besten dein if-else aus dem ersten Post beinhalten.
Zum Vergrößern anklicken....

Erst hatte ich das so:
Code: 
window.addEventListener('resize', dResize);
(function dResize() {
    var headerH = document.getElementById('header').clientHeight;
  if (headerH < 51) {
    document.getElementById('nav').style.float = "right";
  } else {
    document.getElementById('nav').style.float = "left";
  }
})();

Code: 
window.addEventListener('resize', dResize);
    var headerH = document.getElementById('header').clientHeight;
(function dResize() {
  if (headerH < 51) {
    document.getElementById('nav').style.float = "right";
  } else {
    document.getElementById('nav').style.float = "left";
  }
})();


UND DANN!!!! dachte ich mir... "naja vielleicht geht es so"
Code: 
(function dResize() {
var headerH = document.getElementById('header').clientHeight;
window.addEventListener('resize', dResize);
  if (headerH < 51) {
    document.getElementById('nav').style.float = "right";
  } else {
    document.getElementById('nav').style.float = "left";
  }
})();

Jetzt bräuchte ich eine Person die mir erklärt wieso:
window.addEventListener('resize', dResize);
in der Funktion sein muss und wieso es außerhalb der Funktion nicht geht.
-------------------------------------------------------------------------------------------------------------------------------
Jetzt hab ich noch ein Problem, ich hab es bisschen geändert und jetzt geht was anderes nicht.
Code: 
(function dResize() {
    var headerH = document.getElementById('header').clientHeight;
		window.addEventListener('resize', dResize);
  if (headerH < 51) {
    document.getElementById('nav').style.float = "right";
    document.getElementById('main').style.padding = "50px 3.5% 25px 3.5%";
  } else {
    document.getElementById('nav').style.float = "left";
    document.getElementById('main').style.padding = "100px 3.5% 25px 3.5%";
  }
})();
 
Zuletzt bearbeitet:
Alles drei maximal kaputt. :fresse:

1. Die gesamte Funktion ist in einer Klammer und damit in nem eigenen Scope. Heißt wenn du "addEventListener" aufrufst ist sie gar nicht bekannt. Zudem sorgen die Klammern ganz am Ende der Funktion dazu, dass sie direkt aufgerufen wird, sobald sie geladen wurde.

2. Beim Zweiten wieder das gleiche Scope-Problem.

3. Da ist das "addEventListener" in der Funktion drin. Bin mir echt nicht sicher was dann passiert, aber es kann nicht geil sein.

Code: 
function wSize() {
  if (clientHeight < 51) {
    document.getElementById('nav').style.float = "right";
  } else {
    document.getElementById('nav').style.float = "left";
  }
}

window.addEventListener('resize', wSize);
 
So wie es im letzten Post steht ist es eigentlich der richtige Weg.

Was ich nicht ganz verstehe ist warum du für so etwas simples wie einen float Wert in Abhängigkeit der Browserbreite zu ändern Javascript verwendest. Ich würde dir da du grad anfängst erstmal dazu raten zu versuchen so wenig Javascript zu verwenden wie nur möglich. Am besten gar keins wenn es geht.
Das was du da im speziellen vor hast wäre meiner Meinung nach sinnvoller mit Media Queries zu lösen.

Code: 
@media  (max-width: xy){
nav {float:right; }
}

Edit:
Ok ich revidiere was ich gesagt habe. Du versuchst ja in Abhängigkeit der Headerhöhe etwas auszulösen. Wieso die Navigation sich an der Höhe orientiert ist mir zwar fraglich da ich das für wenig sinnvoll halte aber ist ja deine Seite :d

Was du dir je nachdem was alles in deinem Header ist noch angucken solltest sich folgende zwei Funktionen. Kann sonst zu Problemen führen wenn die Höhe zu früh ausgelesen wird und die Seite noch nciht fertig geladen ist.
https://learn.jquery.com/using-jquery-core/document-ready/
 
Zuletzt bearbeitet:
Gubb3L schrieb:
So wie es im letzten Post steht ist es eigentlich der richtige Weg.

Was ich nicht ganz verstehe ist warum du für so etwas simples wie einen float Wert in Abhängigkeit der Browserbreite zu ändern Javascript verwendest. Ich würde dir da du grad anfängst erstmal dazu raten zu versuchen so wenig Javascript zu verwenden wie nur möglich. Am besten gar keins wenn es geht.
Das was du da im speziellen vor hast wäre meiner Meinung nach sinnvoller mit Media Queries zu lösen.

Code: 
@media  (max-width: xy){
nav {float:right; }
}

Edit:
Ok ich revidiere was ich gesagt habe. Du versuchst ja in Abhängigkeit der Headerhöhe etwas auszulösen. Wieso die Navigation sich an der Höhe orientiert ist mir zwar fraglich da ich das für wenig sinnvoll halte aber ist ja deine Seite :d

Was du dir je nachdem was alles in deinem Header ist noch angucken solltest sich folgende zwei Funktionen. Kann sonst zu Problemen führen wenn die Höhe zu früh ausgelesen wird und die Seite noch nciht fertig geladen ist.
https://learn.jquery.com/using-jquery-core/document-ready/
Zum Vergrößern anklicken....

Erklären ist immer schwer.
Edit fiddle - JSFiddle
Verkleinere die breite dann weißt du beschied aber ich denke ich werde es mit @media machen oder mit PHP einfach eine ganze mobile.css laden :x

- - - Updated - - -

Gubb3L schrieb:
So wie es im letzten Post steht ist es eigentlich der richtige Weg.

Was ich nicht ganz verstehe ist warum du für so etwas simples wie einen float Wert in Abhängigkeit der Browserbreite zu ändern Javascript verwendest. Ich würde dir da du grad anfängst erstmal dazu raten zu versuchen so wenig Javascript zu verwenden wie nur möglich. Am besten gar keins wenn es geht.
Das was du da im speziellen vor hast wäre meiner Meinung nach sinnvoller mit Media Queries zu lösen.

Code: 
@media  (max-width: xy){
nav {float:right; }
}

Edit:
Ok ich revidiere was ich gesagt habe. Du versuchst ja in Abhängigkeit der Headerhöhe etwas auszulösen. Wieso die Navigation sich an der Höhe orientiert ist mir zwar fraglich da ich das für wenig sinnvoll halte aber ist ja deine Seite :d

Was du dir je nachdem was alles in deinem Header ist noch angucken solltest sich folgende zwei Funktionen. Kann sonst zu Problemen führen wenn die Höhe zu früh ausgelesen wird und die Seite noch nciht fertig geladen ist.
https://learn.jquery.com/using-jquery-core/document-ready/
Zum Vergrößern anklicken....

Erklären ist immer schwer.
https://jsfiddle.net/DamianToczek/4zkofskb/1/
Verkleinere die breite dann weißt du beschied aber ich denke ich werde es mit @media machen oder mit PHP einfach eine ganze mobile.css laden :x
 
Ob du in eine mobile.css auslagerst ist dein Ding. Kommt ganz drauf an wie sauber du in der Lage bist deine Main Css zu halten und wie groß die am Ende wird. Selbst wenn du mit PHP eine mobile lädst brauchst du den media querie und wenn es geht würde ich am Ende eh CSS und so weiter mergen um die Ladezeiten zu reduzieren. Das ist aber dann ein anderes Thema.
 
Zuletzt bearbeitet:
Bloß keine mobile.css. Die Haupt-CSS-Regeln sollten für das Mobillayout sein und die Desktop-Regeln sollten diese überschreiben, also eine desktop.css.
 
Hi,
ich hatte das schon mal gesagt, und ich sage es noch einmal. Du solltest unbedingt vorne anfangen, nicht mittendrin. Das erspart einem viel Frust.

Es gibt einige kostenlose Möglichkeiten online Kurse mitzumachen, würde ich unbedingt erstmal nutzen und dann weiter sehen.


- Learn to code | Codecademy
- Udemy Online Courses - Learn Anything, On Your Schedule

Oder du liest gute Bücher, das ist natürlich nicht kostenlos ;)
 
Fallwrrk schrieb:
This!
Zum Vergrößern anklicken....

Was ist für euch "Mittendrin"?
Also @media kenne ich, transitions, delays, gradient, html5, inputs etc...

Das ist meine Seite and der ich arbeite:
https://justfaq.it

99% der Zeit wird investiert um den Code so möglich wie es geht zu halten. Also die Daten sind nicht minimalisiert. CSS hat noch die ganzen Leertasten etc :d
Hab die CSS in den Kompressor geworfen:
2,189 bytes > 1,587 bytes (72%)
 
D.h. dass du ein Haus baust ohne zu wissen wie man Wände mauert.

[emoji51]

Das ist auch gar nicht böse gemeint. Es würde einfach nur sehr viel Sinn machen sich die Grundlagen einmal theoretisch anzulesen. Das macht alles sehr viel leichter. Ansonsten ist "machen" der richtige Weg natürlich. Beim Web Development hilft am Ende nur Praxis [emoji106]
 
scrollt schrieb:
D.h. dass du ein Haus baust ohne zu wissen wie man Wände mauert.

[emoji51]

Das ist auch gar nicht böse gemeint. Es würde einfach nur sehr viel Sinn machen sich die Grundlagen einmal theoretisch anzulesen. Das macht alles sehr viel leichter. Ansonsten ist "machen" der richtige Weg natürlich. Beim Web Development hilft am Ende nur Praxis [emoji106]
Zum Vergrößern anklicken....

Was hab ich dann falsch gemacht?
 
Es geht nicht ums falsch machen, Fehler sind ja Teil des Lernprozesses :)

Es geht darum, dass es dir viel leichter fallen würde Beispiele etc. im Internet zu verstehen, wenn du einmal die Grundlagen von HTML/CSS/JS intus hast.
 
scrollt schrieb:
Es geht nicht ums falsch machen, Fehler sind ja Teil des Lernprozesses :)

Es geht darum, dass es dir viel leichter fallen würde Beispiele etc. im Internet zu verstehen, wenn du einmal die Grundlagen von HTML/CSS/JS intus hast.
Zum Vergrößern anklicken....

Link ? :d Ich bin ein Fan von Links.
 
Das soll jetzt nicht böse klingen, aber du hast in den letzten 2 Wochen bestimmt 10 Threads aufgemacht in denen du diverse Sachen zu HTML, CSS, oder sonstiges fragst. Daran solltest du doch selbst merken, dass dir viele Grundlagen fehlen. Und dazu gehört wohl auch die Grundlage Google zu benutzen.

LMGTFY
 
Anmelden, um zu antworten.
Hardwareluxx setzt keine externen Werbe- und Tracking-Cookies ein. Auf unserer Webseite finden Sie nur noch Cookies nach berechtigtem Interesse (Art. 6 Abs. 1 Satz 1 lit. f DSGVO) oder eigene funktionelle Cookies. Durch die Nutzung unserer Webseite erklären Sie sich damit einverstanden, dass wir diese Cookies setzen. Mehr Informationen und Möglichkeiten zur Einstellung unserer Cookies finden Sie in unserer Datenschutzerklärung.


Zurück
Oben Unten refresh