mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Mi 24.04.2024 14:38 Benutzername: Passwort: Auto-Login

Thema: Anfänger braucht Hilfe ... Javascript / jQuery vom 21.02.2016


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Anfänger braucht Hilfe ... Javascript / jQuery
Autor Nachricht
ladehf
Threadersteller

Dabei seit: 21.02.2016
Ort: München
Alter: -
Geschlecht: Männlich
Verfasst So 21.02.2016 22:43
Titel

Anfänger braucht Hilfe ... Javascript / jQuery

 Antworten mit Zitat Zum Seitenanfang
Hallo liebe Gemeinde ...

Bin der Michael, 29 Jahre alt und fange gerade an mich mit Javascript und jQuery zu beschäftigen.
Wer kann mir bei meinem Problem helfen ??

Über eine if Abfrage möchte ich die Fenstergröße abfragen und dann je nach Größe die background-color aus meiner CSS Datei ändern. In der CSS habe ich eine #wrapper mit background: #000000;

Jetzt hätte ich gerne bei meinem if Fall die Hintergrundfarbe auf rot, beim else Fall darf sie schwarz bleiben.


<script>

if ($(window).width() < 960) {

}
else {

}

</script>

Für euch bestimmt ein Kinderspiel, ich sitze schon 4 Stunden dran *zwinker*

Ich bedanke mich schon mal !!

VlG MICHAEL

Zuletzt bearbeitet von ladehf am So 21.02.2016 22:43, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
remote

Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 110
Geschlecht: Männlich
Verfasst Mo 22.02.2016 01:49
Titel

Antworten mit Zitat Zum Seitenanfang
du hast dich 4 stunden lang mit diesen 4 zeilen beschaeftigt?
lad doch mal deinen aktuellen stand in JSBin oder CodePen hoch.

ansonsten: jQuery addClass und removeClass sollten dich weiterbringen.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Morgo

Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht: Männlich
Verfasst Mo 22.02.2016 10:40
Titel

Antworten mit Zitat Zum Seitenanfang
Das ist ein Anwendungsfall für Media Queries, nicht für Javascript.
  View user's profile Private Nachricht senden
Equinoxe

Dabei seit: 23.02.2016
Ort: Freiburg
Alter: -
Geschlecht: -
Verfasst Di 23.02.2016 12:48
Titel

Antworten mit Zitat Zum Seitenanfang
Ich würde hierfür auch mediaqueries verwenden. Das würde folgendermassen aussehen:

Code:

#wrapper {
  background: #000000;
}
@media screen and (max-width: 960px) {
  #wrapper {
    background: #ff0000;
  }
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: Männlich
Verfasst Di 23.02.2016 13:16
Titel

Re: Anfänger braucht Hilfe ... Javascript / jQuery

 Antworten mit Zitat Zum Seitenanfang
ladehf hat geschrieben:
... und fange gerade an mich mit Javascript und jQuery zu beschäftigen.
...

Für mich hört sich das nach jemanden an, der den Umgang mit jQuery lernen möchte.
Die Hinweise wie man diesen konkreten Fall besser mit Media Queries lösen sollte sind berechtigt, helfen ihm aber nicht dabei JS und jQuery zu lernen.
  View user's profile Private Nachricht senden
Equinoxe

Dabei seit: 23.02.2016
Ort: Freiburg
Alter: -
Geschlecht: -
Verfasst Di 23.02.2016 13:33
Titel

Berechtigter Einwand

 Antworten mit Zitat Zum Seitenanfang
OK, der Einwand ist berechtigt.

Die jQuery Lösung würde folgendermassen aussehen:

Code:

$(window).resize(function() {
  if($(this).width() < 960) {
    $('#wrapper').css({'background':'#ff0000'});
  }
  else {
    $('#wrapper').css({'background':'#000000'});
  }
});


Das "$(window).resize()" bewirkt, dass bei jeder Änderung der Fenstergröße die Abfrage wiederholt wird und somit die Farbe im Fall angepasst wird. Damit beim ersten Aufruf das auch ausgeführt wird, muss man den ganzen Code auch noch in "$(document).reday()" aufrufen, also folgendermassen:

Code:

$(document).ready(function() {
  if($(this).width() < 960) {
    $('#wrapper').css({'background':'#ff0000'});
  }
  else {
    $('#wrapper').css({'background':'#000000'});
  }
});


Wenn man es ganz schön machen will, dann kann man das auch in eine Funktion auslagern, was dann zu diesem Code führen würde:

Code:

function changeColor() {
  if($(window).width() < 960) {
    $('#wrapper').css({'background':'#ff0000'});
  }
  else {
    $('#wrapper').css({'background':'#000000'});
  }
}

$(document).ready(changeColor);
$(window).resize(changeColor);


Hoffe, das beantwortet die jQuery Frage Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Anfänger braucht kleine Hilfe
CSS Anfänger braucht eure Hilfe..
Anfänger braucht Rat zum Homepage-Design
InDesign CS5: Anfänger braucht Rat bei einer Speisekarte
LiveMotion: Anfänger braucht hilfe bei mouseover
jquery anfänger
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB