Beiträge von haglo

haglo · 19. Januar 2021

Hallo, ich will eine HTML-Datei laden und dann via Javascript anzeigen.

Mein Code hierzu lautet

Code

import { html } from "../lit-html/lit-html.js";
export default class AdminView extends Custom {
    constructor() {
        super();
    }
    connectedCallback() {
        this.viewChanged();
    }

    createView() {
        const content = this.loadText().then((filecontent) => {
            return filecontent;
        });
        return html`${content.text}`;
    }

    async loadText() {
        const text = await fetch('/views/admin.html');
        return text;
    }
}

Alles anzeigen

Beim Aufruf von AdminView.createView()... erzeugt folgender Code eine Meldung: Promise pending

Code

const content = this.loadText().then((filecontent) => {return filecontent;});

Weiß jemand wie ich das fixen kann?

haglo · 17. Januar 2021

ich benutze nur Vanilla-JavaScript, kein jQuery

haglo · 15. Januar 2021

Ich tausche via JavaScript dynamisch HTML-Code aus.

Im folgenden ein Beispiel. Ich habe eine AdminView.js, die folgenden HTML-Code generiert:

Code

export default class AdminView extends .... {
    constructor() {
        super();
    }
    ...
    createView() {
        return html`
        <article>
            <h3>AdminView: powered by ...</h3>
        </article>
        `;
    }
}
customElements.define('admin-view', AdminView);

Alles anzeigen

Das funktioniert bestens.

Ich möchte jetzt jedoch folgenden HTML-Code in eine extra Datei file.html auslagern:

Code

<article>
   <h3>AdminView: powered by ...</h3>
</article>

In meiner JavaScript-Datei AdminView.js will ich es dann (sinngemäß: include file.html) einfügen:

Code

export default class AdminView extends .... {
    constructor() {
        super();
    }
    ...
    createView() {
        return html`
            include file.html;
        `;
    }
}
customElements.define('admin-view', AdminView);

Alles anzeigen

Wie kann ich den Inhalt von file.html in AdminView.js textuell einfügen?

haglo · 15. Januar 2021

Vielen Dank für all die Rückmeldungen.

Ich habe die Beiträge eingebaut.

Jetzt habe ich jedoch das Problem, dass das onclick-Ereignis nicht funktioniert.

Wenn ich auf den Vertikalen Link klicke, dann wird das onclick-Ereignis nicht ausgelöst.

index.html

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Single Page App</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>

<body>
    <aside>
        <ul class="nav_vertical">
            <li id="first"><a href="#erste"><span class="material-icons">photo_library</span></a></li>
            <li id="second"><a href="#zweite"><span class="material-icons">photo_library</span></a></li>
            <li id="third"><a href="#dritte"><span class="material-icons">question_answer</span></a></li>
        </ul>
    </aside>
    <section>
        <ul id="erste" class="nav_horizontal">
            <li class="link-top"><a href="#1.1">1.1</a></li>
            <li class="link-top"><a href="#1.2">1.2</a></li>
            <li class="link-top"><a href="#1.3">1.3</a></li>
        </ul>
        <ul id="zweite" class="nav_horizontal">
            <li class="link-top"><a href="#2.1">2.1</a></li>
            <li class="link-top"><a href="#2.2">2.2</a></li>
            <li class="link-top"><a href="#2.3">2.3</a></li>
        </ul>
        <ul id="dritte" class="nav_horizontal">
            <li class="link-top"><a href="#3.1">3.1</a></li>
            <li class="link-top"><a href="#3.2">3.2</a></li>
            <li class="link-top"><a href="#3.3">3.3</a></li>
        </ul>
    </section>
    <article>
        <p>Content</p>
    </article>

    <script src="app.js" type="module"></script>
</body>
</html>

Alles anzeigen

CSS-Datei: style.css

Code

* {
  font-family: sans-serif;
}

ul {
  list-style-type: none;
}

@media screen and (min-width: 50em) {
  body {
    padding: 0px;
    margin: 0px;
    height: 100vh;
    display: grid;
    grid-template-rows: 0.2fr 10fr;
    grid-template-columns: 0.2fr 10fr;
    grid-template-areas:
      "aside section"
      "aside article"
  }
}

section{
  grid-area: section;
  background: lightsalmon;
}

aside {
  grid-area: aside;
  top: 0px;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: #009879;
  border-right: 2px solid #008C71;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.25);
  list-style-type: none;

}

article {
  grid-area: article;
  background: lightcyan;

}

.nav_vertical {
  display: flex;
  align-items: center;
  flex-direction: column;
  background: #008C71;
  border-bottom: 1px solid #009879;
  list-style-type: none;
  padding: 10px;
}

.nav_vertical .material-icons {
  float: left;
  color: #ffffff;
  padding: 10px;
}

.nav_horizontal {
  list-style-type: none;
  padding: 10px;
}

.nav_horizontal li {
  float: left;
  width: 50px;
}

.link-top{
  float: left;
  width: 150px;
  list-style-type: none;
}

.link-top a{
  text-decoration: none;
}

Alles anzeigen

Javascript: app.js

Code

window.onload = function () {
    "use strict";

    const verticalElememts = document.querySelector(".nav_vertical").children;
    const verticals = Array.from(verticalElememts);
    const horizontals = document.querySelectorAll('.nav_horizontal');

    document.getElementById("first").onclick = showHorizontal("first", "erste");
    document.getElementById("second").onclick = showHorizontal("second", "zweite");
    document.getElementById("third").onclick = showHorizontal("third", "dritte");

    function showHorizontal(left, top) {
        verticals.forEach(item => {
            if (item.id == left) {
                item.style.background = "#9ef007"
            } else {
                item.style.background = "#008C71";
            }
        });
        horizontals.forEach(item => {
            if (item.id == top) {
                item.style.display = 'block';
            } else {
                item.style.display = 'none';
            }
        });
    }

    showHorizontal("first", "erste");
}

Alles anzeigen

Die folgenden 3 Zeilen aus der app.js werden nicht beachtet:

Code

document.getElementById("first").onclick = showHorizontal("first", "erste");
document.getElementById("second").onclick = showHorizontal("second", "zweite");
document.getElementById("third").onclick = showHorizontal("third", "dritte");

Hat jemand eine Idee warum diese Zeilen nicht beachtet werden

haglo · 13. Januar 2021

Danke für die Info.

Für alle die ein lauffähiges Demo-Projekt mit HTML, CSS und JavaScript wollen:

HTML als Datei index.html

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Single Page App</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <main>
        <aside>
            <ul class="vertical">
                <li><a href="#erste" onclick="hideFirst()">first</a></li>
                <li><a href="#zweite" onclick="hideSecond()">second</a></li>
                <li><a href="#dritte" onclick="hideThird()">third</a></li>
            </ul>
        </aside>
        <article>
            <ul id="erste" class="horizontal">
                <li><a href="#">1.1</a></li>
                <li><a href="#">1.2</a></li>
                <li><a href="#">1.3</a></li>
            </ul>
            <ul id="zweite" class="horizontal">
                <li><a href="#">2.1</a></li>
                <li><a href="#">2.2</a></li>
                <li><a href="#">2.3</a></li>
            </ul>
            <ul id="dritte" class="horizontal">
                <li><a href="#">3.1</a></li>
                <li><a href="#">3.2</a></li>
                <li><a href="#">3.3</a></li>
            </ul>
        </article>
    </main>
    <script>
        var firstHorizontal = document.getElementById("erste");
        var secondHorizontal = document.getElementById("zweite");
        var thirdHorizontal = document.getElementById("dritte");
        function hideFirst() {
            firstHorizontal.style.display = "block";
            secondHorizontal.style.display = "none";
            thirdHorizontal.style.display = "none";
        }
        function hideSecond() {
            firstHorizontal.style.display = "none";
            secondHorizontal.style.display = "block";
            thirdHorizontal.style.display = "none";
        }
        function hideThird() {
            firstHorizontal.style.display = "none";
            secondHorizontal.style.display = "none";
            thirdHorizontal.style.display = "block";
        }
    </script>
</body>

</html>

Alles anzeigen

CSS als Datei style.css

Code

*{
  font-family: sans-serif;
}

body{
  padding: 0px;
  margin: 0px;
}


@media screen and (min-width: 50em){
  main{
      height: 100vh;
      display:grid;
      grid-template-rows: 1fr 8fr 0.5fr;
      grid-template-columns: 1fr 4fr;
      grid-template-areas: 
      "header header"
      "aside article"
      "footer footer"
      
  }
  a{
      display:block;
  }

}

aside{
  grid-area:aside;
  background: rgb(26, 196, 34);
}
article{
  grid-area: article;
  background:rgb(187, 59, 59);
}

#zweite {
  display: none;
}

#dritte {
  display: none;
}

.horizontal li {
  float: left;
  width: 50px;
}

Alles anzeigen

haglo · 12. Januar 2021

Anfrage ist korrigiert, siehe oben.

haglo · 12. Januar 2021

Ich möchte in einer SPA eine Navigation in HTML5 und CSS3 erstellen.

Ich habe links eine Vertikale Haupt-Navigation mit frist, second, third.

Wenn ich den Navigationspunkt first aufrufe, dann soll im Content-Bereich rechts eine Seite erscheinen mit Horizontaler Sub-Navigation (1.1, 1.2, 1.3).

Horizontale Sub-Navigation oben.

Im folgenden Demo-Code in HTML:

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Single Page App</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <main>
        <aside>
            <ul class=vertical">
                <li><a href="#erste">first</a></li>
                <li><a href="#zweite">second</a></li>
                <li><a href="#dritte">third</a></li>
            </ul>
        </aside>
        <article>
            <ul id="erste" class="horizontal">
                <li><a href="#">1.1</a></li>
                <li><a href="#">1.2</a></li>
                <li><a href="#">1.3</a></li>
            </ul>
            <ul id="zweite" class="horizontal">
                <li><a href="#">2.1</a></li>
                <li><a href="#">2.2</a></li>
                <li><a href="#">2.3</a></li>
            </ul>
        </article>
    </main>

</body>

</html>

Alles anzeigen

Hier die CSS-Datei

Code

*{
  font-family: sans-serif;
}

body{
  padding: 0px;
  margin: 0px;
}


@media screen and (min-width: 50em){
  main{
      height: 100vh;
      display:grid;
      grid-template-rows: 1fr 8fr 0.5fr;
      grid-template-columns: 1fr 4fr;
      grid-template-areas: 
      "header header"
      "aside article"
      "footer footer"
      
  }
  a{
      display:block;
  }

}

aside{
  grid-area:aside;
  background: rgb(26, 196, 34);
}
article{
  grid-area: article;
  background:rgb(187, 59, 59);
}

Alles anzeigen

Frage: Ist so etwas in einer SPA via HTM & CSS möglich?
Bin ein ziemlicher Neuling .

Beiträge von haglo

async und await in Javascript

Include file.html in JavaScript

Include file.html in JavaScript

Horizontale Navigation unter Vertikaler Navigation

Horizontale Navigation unter Vertikaler Navigation

Horizontale Navigation unter Vertikaler Navigation

Horizontale Navigation unter Vertikaler Navigation