Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
autoMargin
#1
Hallo ich habe ein Problem ich möchte nach einer Berechnung der div höhe ein Magin auf ein im div befindliches span Element legen aber nur wenn die div Höhe einen bestimmten wert nicht unterschreitet. Ich hab es soweit geschafft das ich die entsprechenden Wert in einem Array habe. Jetzt muss ich sie nur noch dem span Element übergeben. ich weiß nur nicht wie.  Ich habe ein GitHub Projekt eröffnet.  Ich hoffe auf Hilfe.

Code:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting the Width and Height of an Element</title>
    <style>
        body {
            font-family: Calibri;
            font-size: 18px;
            background: -moz-linear-gradient(94deg,#000 0,#000 20%,#000 40%,#0a000d 60%,#140018 84%,#340041 92%,#c0f 100%);
            background: -webkit-linear-gradient(94deg,#000 0,#000 20%,#000 40%,#0a000d 60%,#140018 84%,#340041 92%,#c0f 100%);
            background: linear-gradient(94deg,#000 0,#000 20%,#000 40%,#0a000d 60%,#140018 84%,#340041 92%,#c0f 100%);
            min-height: 100%;
            background-attachment: fixed;
        }
        body {
            color: #eee;
            background-color: #111;
            overflow: auto;
        }
                #passages {
                    max-width: 54em;
                    margin: 0 auto;
                }
                .passage {
            line-height: 1.75;
            text-align: left;
            -webkit-transition: opacity .4s ease-in;
            -o-transition: opacity .4s ease-in;
            transition: opacity .4s ease-in;
        }
                .speech{
                border:solid 2px #c0f;
                border-radius: 3px;
                padding:8px;
            }
            .avatar {
            display: block;
            padding: 1px;
            height: 84px;
            width: 84px;
            float: left;
            margin: 0 10px 0 0;
            border: 2px solid #c0f;
            border-radius: 3px;
            background-size: contain;
        }
        a {
            font-size: 129%;
        }
        .adriana .avatar {
            background-image: url(assets/img/avatars/you.png);
        }
        .narrator, .speech {
            box-shadow: 3px 3px 1px #c0f;
        }
        hr {
            display: block;
            height: 1px;
            border: none;
            border-top: 1px solid #eee;
            margin: 1em 0;
            padding: 0;
            margin-bottom: ;
        }
    </style>
</head>

<body>
    <div id="passages" aria-live="polite">
        <div id="passage-adrianasbedroom" data-passage="adrianasbedroom" class="passage">
            <div  class="speech adriana 0">
                <span id="marginBottom" class="avatar 0"></span>Adriana<hr>
                <span style="color: #ff3399">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a consectetur nisi. Mauris imperdiet luctus orci at dignissim. Integer quis porttitor odio, ac gravida lectus. Morbi bibendum aliquam orci. Curabitur ut ultricies turpis, sed dictum lorem. Morbi varius leo at orci sagittis, vel varius erat dignissim. Sed vitae ex non sem euismod.</span>
            </div><br>
            <div class="speech adriana 1">
                <span id="marginBottom" class="avatar 1"></span>Adriana<hr>
                <span style="color: #ff3399">Lorem ipsum dolor sit amet.</span>
            </div><br>
            <div class="speech adriana 2">
                <span id="marginBottom" class="avatar 2"></span>Adriana<hr>
                <span style="color: #ff3399">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet dui id tellus suscipit consectetur condimentum a sapien. Etiam.</span>
            </div><br>
            <div class="speech adriana 3">
                <span id="marginBottom" class="avatar 3"></span>Adriana<hr>
                <span style="color: #ff3399">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non ipsum varius enim porta iaculis sed eu ipsum. Mauris facilisis risus ac ligula aliquam efficitur. Vivamus tincidunt at quam a auctor. Morbi fermentum non orci in eleifend. Maecenas et sem at mauris tempor aliquet quis non metus. Quisque dictum gravida velit, id placerat tortor. Vivamus eu porta libero, lobortis vehicula mauris. Pellentesque ut tortor ornare, tincidunt augue vel, ornare diam. Pellentesque maximus justo molestie est viverra sagittis. Pellentesque augue erat, posuere sed mollis non, tempus ut purus. Duis at tortor non magna tincidunt dignissim. Morbi fermentum et purus sit amet.</span>
            </div>
        </div>
    </div>


        <script type="text/javascript">
            var speechAll = document.querySelectorAll(".speech");
            var avatar = document.querySelectorAll('.avatar');
            var arrSp = Array.from(speechAll);
            var arraySpHeight = [];
            var arrayAvHeight = [];
            var arrayMargin =[];
            //console.log (arraySpHeight);
            //console.log (arrayMargin);
            //console.log (avatar);
            //console.log (marginList + " nach for");
            //console.log (heightSp, marginList, avatar);
            //console.log (marginList + " nach if");
            arrSp.forEach(function (wert, index,){
                arraySpHeight[index] = wert.offsetHeight;

            });
            arraySpHeight.forEach(function (height, index, array, avatar){
                if (height > 121) {
                    var newheight = height - 20;
                    var marginHeight = newheight - 90;
                    arrayMargin[index] = marginHeight;
                    //avatar.innerHTML = "" +height; 
                }

            });
            avatar.forEach(function (wert, index, nodelist){
                //var arrayAvatar = document.querySelectorAll('.avatar');
                //console.log (index, array + " Index in forEach arrayAvatar");
                //console.log (wert + " Wert in forEach arrayAvatar");
                //wert.innerHTML = "Test";
                //console.log (nodelist + " NodeList in forEach arrayMargin");
                //avatar.style.cssText = marginbottom;
            });    
        </script>
    </body>
</html>

Also am Ende soll dem Avatar Element ein margin-bottom angehängt werden mit dem passenten wert.

Link zu GitHub https://github.com/Cyb3rb0y/autoMargin/tree/main


Angehängte Dateien
.html   test.html (Größe: 5,86 KB / Downloads: 0)
Zitieren
#2
Ich habe mir deinen Code nicht Zeile für Zeile angesehen aber dies fällt auf:
Code:
avatar.style.cssText = marginbottom;

Kann so nicht funktionieren weil cssText eine vollständige CSS-Anweisung erwartet:
Code:
avatar.style.cssText = 'margin-bottom: 10px';

wo Du natürlich noch deine Variable einsetzen musst.

Oder besser so:
Code:
const theMargin = 20;
avatar.style.marginBottom = theMargin + 'px';
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
Zitieren
#3
Ja das weiß ich.
Hab das woll vergessen einzubauen.

Die Zeile die dafür rein kommt.
Code:
var marginbottom ="margin-bottom: "+marginHeight+"px;";

Wenn ich die zeile aktiviere 
Code:
avatar.style.cssText = marginbottom;
bekomme ich diese fehler meldung.
Uncaught TypeError: Cannot set properties of undefined (setting 'cssText')


Das ist aber nicht das Problem. Mein Problem besteht darin das ich nicht es nicht versteh/hin bekomme das richtig anzusprechen vielleicht denke ich ja zu umständliche.
ich hab ja 2 Arrays mit werten wo zahlen drin sind. einmal die höhe des div's und dann die wo die berechnete marginhöhe drin steht.
jetzt möchte ich das im div entsprechende span Element ansprechen und ihm den richtigen wert übergeben und das bekomme ich nicht hin.

Sorry das ich es nicht besser erklären kann.
Zitieren
#4
So ich hab es entlich geschafft!

Hier der Code
Diesmal nur das reine Javascript

Code:
var speechAll = document.querySelectorAll(".speech");
var avatar = document.querySelectorAll('.avatar');
var arrSp = Array.from(speechAll);
var arraySpHeight = [];
var arrayMargin =[];
arrSp.forEach(function (wert, index,){
    arraySpHeight[index] = wert.offsetHeight;
});
arraySpHeight.forEach(function (height, index, array, avatar){
    if (height > 121) {
        var newheight = height - 20;
        var marginHeight = newheight - 90;
        arrayMargin[index] = marginHeight;
    }else{
        arrayMargin[index] = 0;
    }
});
function addMargin(){
    for (var i = 0; i < arrayMargin.length; i++) {
        if (arrayMargin[i] > 0) {
            for (var i = 0; i < avatar.length; i++) {
                if (i >= 0) {
                    avatar[i].style.cssText = "margin-bottom: "+arrayMargin[i]+"px";
                }
            } 
        }
    }               
}
addMargin();
Es funktioniert genau so wie ich es wollte.
Aber trotzdem danke

Hab noch die html Datei angehängt da kann es jeder selber nach schauen.


Angehängte Dateien
.html   index.html (Größe: 5,88 KB / Downloads: 1)
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste