Element width mit "if" erkennen, und Befehl ausführen

Hallo.

Ich habe ein Problem, und ich habe schon gesucht. Sowohl auf Google, als auch auf unzähligen anderen Seiten. Ich kenne die nötigen methoden nicht, etc. um zu machen worauf ich hinaus will. Es wäre schon wenn ich einfach nur zu müde wäre, aber das ist nicht der Grund für mein versagen.

Jedenfalls habe ich den Container mit der class "bar2". Wenn dieser Container eine bestimmte länge hat, die ich gern mit "if" erkennen würde, möchte ich dass der äußere Container mit der class ".MenuMobile" immer, wenn bar2 eine länge von 50px hat, die margin von .MenuMobile "30px 30px 0px 0px" wird.

Soweit so gut/so schlecht. Ich bin aber nicht gut genug mit Java eingearbeitet, momentan, damit ich die methoden, etc., dafür noch/schon kennen würde.

Momentan habe ich folgendes:

<script>
var $bar2of3 = $(".bar2");
if ($bar2of3.width() == "50px") {$(".MenuMobile").css("margin","30px 30px 0 0")}
</script>

Ich arbeite erst seit knapp 3 Tagen wieder mit JavaScript.

Danke im Voraus

Zitat von Arne Drews

Du solltest Dein Konzept umdenken und eher MediaQueries einsetzen.

Ich glaube das sollte ich nicht, denn soweit ich weiß, ändern diese nur CSS wenn Bildschirme eine andere width oder height haben, bzw. kann man damit verschiedene Einstellungen setzen, die für den CSS gilt, aber das Device ruft es nicht hervor.

Nur tritt mein Problem nicht wegen einer anderen Bildschirmgröße auf, sondern viel eher wegen einer function das CSS ändert, zusammen mit .change im CSS. Klicke ich dann ein 2. mal auf das gewisse Element .MenuMobile, ändert es den CSS von bar2 wieder zu seinem Ursprung. Das einzige das sich dabei nicht ändern lässt, ist die margin von .MenuMobile, und das ruft das Problem hervor,
weswegen ich versuche mit "if" zu erkennen, ob bar2 50px lang ist, und wenn das der Fall ist, dass .MenuMobile eine Margin von 30px nach oben hat.

Zitat von Arne Drews

Du kannst ja mal zeigen, was Du hast, damit wir evtl. besser erkennen, was genau Du willst und wo das Problem liegt.

Das ging vorher leider nicht, denn mein eigener PC crasht mit Firefox, wenn ich Sieten mit recht hohen Ansprüchen besuche. Daher habe ich diesen Thread erstmal an der Konsole verfasst. Aber okay, ich dachte mir dass es das Problem geben würde, wen ich nicht mehr code zeigen kann.

Daher hier eben etwas code, was das ganze genauer zeigt/erklärt:

.MenuMobile {
    width: 60px;
    height: 60px;
    float: right;
    padding: 0 0 0 0;
    margin: 30px 30px 0 0;
    font-size: 50px;
    background-color: #1F1F1F;
    border: 0;
    cursor: pointer;
    transition: 2s;
}


.bar1, .bar2, .bar3 {
     width: 50px;
     height: 8.5px;
     margin: 10px auto 0 auto;
     background-color: #DCDCDC;
     transition: 2s;
}


.change .bar1 {
     width: 38px;
     margin: 0 0 0 25px;
     -webkit-transform: rotate(30deg) translate(-1px, 1px);
     transform: rotate(30deg) translate(-1px, 1px);
}


.change .bar2 {
    width: 80px;
    margin: 0 0 0 -20px;
}


.change .bar3 {
     width: 38px;
     margin: 0 0 0 25px;
     -webkit-transform: rotate(-30deg) translate(1px, -1px);
     transform: rotate(-30deg) translate(1px, -1px);
}


<div class="MenuMobile" onclick="pfeil(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

dazu 2 scripts

<script>
$(document).ready(function(){
  $(".MenuMobile").click(function(){
    $(".MenuMobile").css("margin","50px 30px 0px 0px");
  });
});
</script>
<script>
function pfeil(x) {
  x.classList.toggle("change");
}</script>

Das ist btw. JavaScript und jQuery, ich wusste nur nicht ob ich dass in HTML-Code packen soll, oder PHP.

Die jQuery für .MenuMobile ist gemacht worden, weil ich es nicht hinbekommen habe die margin bei einem click darauf zu definieren.

Dafür brauche ich dann, ein "if", denke ich, es sei denn es gibt etwas besseres. Ansonsten, sollte die Codes, und Scripts, sich selbst erklären, wenn man diese aktiv hat. Diese sind für den header, für mobile Geräte, eine Art Menü-Button.

Zitat von Arne Drews

Sieht für mich bei jeder Auflösung gleich aus: https://codepen.io/anon/pen/QvqoKX
Wo genau soll denn nun ein margin passieren?

Wenn man 1 mal darauf klickt, funktioniert alles normal, am Hintergrund erkennt man dann aber beim 2. mal klicken den Fehler. Der Hintergrund(der dunkle Hintergrund ist der von .MenuMobile) bleibt wo er ist, das soll aber nicht sein. Beim 1. klick soll .MenuMobile eine margin-top von 50px haben. Beim 2. mal allerdings, soll die margin-top wieder zurück auf 30px "gehen". Klar spricht das jQuery erstmal dagegen, das für .MenuMobile da ist, weil beim klicken die margin-top immer auf 50px erhöht wird.

Das heißt 1 mal klicken soll 50px ausführen, das 2. mal klicken soll das wieder rückgängig auf 30px machen.

Das hat mir nicht wirklich weiter geholfen, jedoch habe ich mein Problem vor einiger Zeit selbst lösen können. Trotzdem danke.