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

XFgn

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:

PHP

<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

Arne Drews

Zitat

Ich bin aber nicht gut genug mit Java eingearbeitet

Tut auch nicht nötig, genauso wenig wie JavaScript ( was übrigens etwas komplett anderes ist, wie Java! ) oder jQuery, was Du offensichtlich verwendest.
Du solltest Dein Konzept umdenken und eher MediaQueries einsetzen.

XFgn

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.

Arne Drews

Dann solltest Du Dein Problem detaillierter beschreiben.

Zitat

Wenn dieser Container eine bestimmte länge hat, die ich gern mit "if" erkennen würde

Da lese ich raus, dass Du nicht weißt, wie breit der Container ist. Das kann imho nur auftreten, wenn man es entweder komplett verkehrt aufgebaut hat ( wir kennen ja Dein HTML/CSS nicht ) oder aber wenn die Container-Breite in einer Beziehung steht, bspw. dem Viewport. Und da verwendet man Media Queries.
Die Frage ist also: Wann genau ist denn die Container-Breite genau 50px?

Wenn Du versuchst damit etwas zu fixen, ist Dein Grundaufbau vermutlich schon falsch.

Zitat

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.

Die function wäre in dem Fall dann die Beziehung, von der ich spreche. Was genau macht die function denn? Die scheint ja die Container-Größe anzupassen. Dann hat sie aber wiederum einen Bezug auf Basis dessen sie die Größe anpasst. Allerdings stellt sich mir die Frage, ob das grundsätzlich Sinn macht.

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

XFgn

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:

HTML

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

Alles anzeigen

dazu 2 scripts

PHP

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

Alles anzeigen

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.

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?

Gastl

Zitat von Arne Drews

was übrigens etwas komplett anderes ist, wie Java!

http://www.duden.de/sprachwissen/sprachratgeber/als-wie

XFgn

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.

Arne Drews

Zitat von Gastl

http://www.duden.de/sprachwissen/sprachratgeber/als-wie

Stimmt, wenn man schon nichts zum Thema beitragen kann, dann wenigstens klugscheißen... [Blockierte Grafik: http://www.smilies.4-user.de/include/Frech/smilie_frech_122.gif]

djheke

Habe Deinen Code etwas geändert und hoffe, dass Du es so meinst.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<title>Valiediere</title>
<meta charset="UTF-8">
<style>


.Mobile {
 margin:30px;
 padding:5px;
 width: 60px;
 height: 60px;
 background:#000;
 position:relative;
 box-sizing:border-box;
 }


.bar  {
 margin-top:20px;
 height: 10px;
 background: #ddd;
 transition: 2s;
}


.bar:before , .bar:after {
 content:"";
 position:absolute; 
 background: #ddd; 
 height: 10px;
 width:50px;
 transition: 2s;
}


.bar:before {
 top:5px;
}
.bar:after {
 bottom:5px;
}


.change .bar:before {
 width: 38px;
 -webkit-transform: rotate(30deg) translate(15px, 2px);
 transform: rotate(30deg) translate(15px, 2px);
}






.change .bar:after {
 width: 38px;
 -webkit-transform: rotate(-30deg) translate(15px, -2px);
 transform: rotate(-30deg) translate(15px, -2px);
}
</style>


</head>
<body>


<div class="Mobile" onclick="pfeil(this)">
  <div class="bar"></div>
</div>






<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 


<script>
function pfeil(x) {
  x.classList.toggle("change");
}</script> 
</body>
</html>

Alles anzeigen

XFgn

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

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

Tags

Benutzer online in diesem Thema