Wunsch Block

[Volker]

Hi Tommy,

das waren ja gleich mehrere Probleme.
Mein erster Versuch der nicht in Firerfox ging, hatte ja auch noch das Problem das ich das Bild hardcodieren musste im HTML. Dann war das 2. Problem das ich gezwungen wurde von der KI javascript zu nehmen, aber das musste zwingend in die Seiteneigenschaften, was mir Probleme beim mbrext erstellen gemacht hätte. Dann ein 3. Problem das wenn ich ein Bild drin hatte über den Mobirise Picker, die Layer nicht das Verhalten hatten was ich gewünscht hatte. Es war immer ein hin und her. Dann hat Mobirse noch die CSS verhunzt durch die eigene Template CSS usw. usw. Es war ein Rattenschwanz, hast ja selber erlebt

Dann hab ich radikal Kur gemacht. Komplett einen neuen Block genommen von Anfang an einen original Header Block. Da einfach die 2 Layer auf das Bild gesetzt Java Script nur zur ansteuerung der Layer und somit im Block. Das Java Script auch so schlank wie möglich :

Code: Alles auswählen

<script>
document.addEventListener('DOMContentLoaded', () => {
    const engine = document.querySelector('.custom-diagonal-engine');
    if (!engine) return;
    const tL = engine.querySelector('.layer-top');
    const bL = engine.querySelector('.layer-bottom');
    const sync = () => {
        const rect = engine.getBoundingClientRect();
        const scrollH = engine.offsetHeight - window.innerHeight;
        if (scrollH <= 0) return;
        const p = Math.max(0, Math.min(1, -rect.top / scrollH));
        if (tL) tL.style.opacity = p.toFixed(3);
        if (bL) bL.style.opacity = (1 - p).toFixed(3);
    };
    window.addEventListener('scroll', sync, { passive: true });
    window.addEventListener('resize', sync);
    sync();
});
</script>

Das wars im groben

[Tommy Herrmann]

Also war sie Lösung im Prinzip der andere Mobirise-Block, der dann beim Publizieren anders gerendert wird.

Das bedeutet, dass die Ursache immer noch nicht bekannt ist.

[Volker]

Das ist noch nicht die Endfassung !!!

Code: Alles auswählen

<section data-bs-version="5.1" class="header1 custom-diagonal-engine" group="Headers" id="diag-engine-final-v4">
    <mbr-parameters>
        <header>DIAGONALE FARBEN</header>
        <input type="color" title="Farbe Oben" name="colorTop" value="#0c2c68">
        <input type="color" title="Farbe Unten" name="colorBottom" value="#22a5e5">
        
        <header>TRENNLINIE</header>
        <input type="color" title="Linienfarbe" name="lineColor" value="#ffffff">
        <input type="range" title="Liniendicke" name="lineWidth" value="1" min="0" max="30" step="1">

        <header>CONTENT 1 (Unten/Rechts)</header>
        <input type="range" inline title="X1" name="contentX1" min="0" max="100" value="72">
        <input type="range" inline title="Y1" name="contentY1" min="0" max="100" value="70">
        <input type="checkbox" title="Button Zeigen" name="showButton1" checked>

        <header>CONTENT 2 (Oben/Links)</header>
        <input type="range" inline title="X2" name="contentX2" min="0" max="100" value="27">
        <input type="range" inline title="Y2" name="contentY2" min="0" max="100" value="30">
        <input type="checkbox" title="Titel 2" name="showTitle2" checked>
        <input type="checkbox" title="Text 2" name="showText2" checked>

        <header>BACKDROP</header>
        <input type="image" title="Hintergrundbild" name="bgImg" value="file:///F:/mobirise%20Bl%C3%B6cke/demo7/assets/images/mbr-1920x1080.png">
    </mbr-parameters>

    <div class="diagonal-viewport">
        <div class="fixed-img-layer" mbr-style="{'background-image': 'url(' + bgImg + ')'}"></div>
        <div class="diag-engine-layer layer-top" style="background-color: {{colorTop}};"></div>
        <div class="diag-engine-layer layer-bottom" style="background-color: {{colorBottom}};"></div>

        <div class="diagonal-line-svg">
            <svg viewBox="0 0 100 100" preserveAspectRatio="none">
                <line x1="0" y1="100" x2="100" y2="0" stroke="{{lineColor}}" vector-effect="non-scaling-stroke" style="stroke-width: {{lineWidth}}px;"></line>
            </svg>
        </div>

        <div class="content-z-wrapper group-1" style="--posX: {{contentX1}}%; --posY: {{contentY1}}%;">
            <div class="movable-content">
                <h1 class="mbr-section-title mbr-fonts-style mb-3 display-1" mbr-theme-style="display-2"><b>niederastroth.de</b></h1>
                <p class="mbr-text mbr-fonts-style mb-4 display-7" mbr-theme-style="display-7">Der mit den Mobirise Blöcken...</p>
                <div class="mbr-section-btn" mbr-if="showButton1" mbr-buttons mbr-theme-style="display-4"><a class="btn btn-black" href="#" data-app-placeholder="Type Text">Info</a></div>
            </div>
        </div>

        <div class="content-z-wrapper group-2" style="--posX: {{contentX2}}%; --posY: {{contentY2}}%;">
            <div class="movable-content">
                <h2 class="mbr-section-subtitle mbr-fonts-style mb-2 display-2" mbr-if="showTitle2" mbr-theme-style="display-2"><b>Overlay Block</b></h2>
                <p class="mbr-text mbr-fonts-style display-7" mbr-if="showText2" mbr-theme-style="display-7">Diagonal</p>
            </div>
        </div>
    </div>
    <script>
document.addEventListener('DOMContentLoaded', () => {
    const engine = document.querySelector('.custom-diagonal-engine');
    if (!engine) return;
    const tL = engine.querySelector('.layer-top');
    const bL = engine.querySelector('.layer-bottom');
    const sync = () => {
        const rect = engine.getBoundingClientRect();
        const scrollH = engine.offsetHeight - window.innerHeight;
        if (scrollH <= 0) return;
        const p = Math.max(0, Math.min(1, -rect.top / scrollH));
        if (tL) tL.style.opacity = p.toFixed(3);
        if (bL) bL.style.opacity = (1 - p).toFixed(3);
    };
    window.addEventListener('scroll', sync, { passive: true });
    window.addEventListener('resize', sync);
    sync();
});
</script>
</section>

Code: Alles auswählen

position: relative;
height: 300vh !important;
overflow: visible;
.diagonal-viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.fixed-img-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: 1;
}
.diag-engine-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  will-change: opacity;
}
.layer-top {
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.layer-bottom {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.diagonal-line-svg {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.diagonal-line-svg svg {
  width: 100%;
  height: 100%;
}
.content-z-wrapper {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.group-1 {
  z-index: 15;
}
.group-2 {
  z-index: 12;
}
.movable-content {
  pointer-events: auto;
  position: absolute;
  left: var(--posX);
  top: var(--posY);
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
  text-align: center;
  color: #ffffff;
}
.mbr-section-title, .mbr-section-subtitle, .mbr-text {
  color: #ffffff;
}

Naja ist jetzt auch kein standard Mobirsie Block mehr wie die normalen Header Blöcke, hält sich aber an die css und übernimmt somit auch die Werte aus den mbr-parameters - was genau das Problem im einzelen war kann ich nicht sagen, weil es hat ja überall gehakt eigentlich - aber egal es läuft jetzt

Und wenn du die KI fragst bekommst nur so was in der Art an Antworten :

Ganz ehrlich? Wir haben hier gegen zwei „Geister“ in der Mobirise-Engine gekämpft. Es war eine Mischung aus der Art, wie Mobirise Pfade verwaltet, und wie der Code-Editor mit dem internen Asset-Manager kommuniziert.

lol das nennt man sich raus reden

[Tommy Herrmann]

Moin,

habe den von Dir zuletzt geposteten Code noch nicht ausprobiert. In was für einen Block hast Du den gepackt? Wieder in den leeren "Custom HTML Block" oder einen vorhandenen Header-Block? Das Problem scheint ja an irgendeiner Konfiguration bereits erstellter Mobirise-Blöcke zu liegen, die verschiedene Parameter beim Generieren kaputt generieren.

Solche Fehler sind ja auch bereits bei bestimmten HTML-Tags oder auch bei Verwendung von PHP-Code erschienen, die dann nach dem Generieren einfach weg sind obwohl sie im Code-Editor vorhanden sind und auch weiterhin stehen bleiben.

Ich glaube, da hat die KI vollkommen Recht. Mobirise hat da fatale Fehler im Generator, die man nur sonst nicht bemerkt, da die Entwickler solche Fehler einfach mit irgendwelchen Tricks umgehen.

[Volker]

Moin Tommy,

das war ein standard Header Block, den ich umgebaut habe. Das mache ich ja auch immer so. Entweder einen standard Artikel Block oder Header. Da hau ich dann den Code rein den ich brauche. Das hat bisher ja auch immer funktioniert. Nur bei diesem Block eben nicht aus Gründen die ich so auch noch nie hatte.

Heute Abend kommt der fertige Block samt mbrext

[Tommy Herrmann]

was ist denn bei Dir der "Standard Header Block" - da gibt es ein halbes Dutzend oder mehr je Thema - im Standard-Thema "Mobirise5" gibt es alleine 19 "Standard Header Blöcke" - die Angabe ist mir jetzt zu ungenau

Das Verhalten kann je "Standard Block" ganz anders sein. Es kommt also ganz genau auf den spezifischen Block an, den Du verwendet hast.

[Volker]

Ich nehme immer als header einen von denen:

Aber das sollte keine Rolle spielen, genau so bei den Menüs, wenn ich da ein neues mache nehm ich auch ein standard M5 Menü, egal welches, hausptsache ist das es eben ein menüblock ist oder eben ein header Block wenn ich Header mache.

Hatte ich ja anfangs auch bei dem Diagonal Block, hatte aber anfangs eben nicht geklappt. Mobirise steuert viel Sachen mit der css.

Ich räume die Blöcke ja eh leer und zieh dann komplett neue Inalte in HTML und teilweise css neu auf

[Volker]

Tja ein kleines Problem
meine Seite ist auf ein Theme Namens ProgressM5 aufgebaut.
Mein neuer Diagonal Header läuft in diesem Theme nicht, macht ein langes leeres Feld unter dem Header.
In M5 standard oder M5 Start einwandfrei

Stand alone läuft er super :https://www.niederastroth.de/demo7/ in einem M5 Standard Theme

Da muss ich mal schauen ob ich das gelöst bekomme.

[Tommy Herrmann]

Moin,

könntest Du versuchen das Standard-Thema "Mobirise5" oder das andere Standard-Thema "StartM5" zu nennen. Diese beiden Themen sind direkt in der Software integriert und werden daher als "Standard-Themen" bezeichnet.

Es gibt kein "M5" Thema als Standard-Thema. Alle "M5" Themen, außer "StartM5", sind Erweiterungen.

Zumindest ich komme bei dieser falschen Bezeichnung, die Du und auch viele andere immer wieder fälschlich verwenden, durcheinander.

Hast Du auch mal den Einbau in andere "M5" Themen als "ProgressM5" versucht? Es ist anzunehmen, dass dieser Block in gar keinem "M5" Thema funktionieren wird.

[Volker]

Ich rede von Start M5 und dem daneben - das ist fü mich das M5 Standard Theme Tommy und da geht der Block bei beiden.

EngineM5 - geht
ApexM5 - geht nicht
FantasyM5 - geht nicht

[Tommy Herrmann]

Das weiß ich doch - Du bezeichnest aber immer das Standard-Thema als "M5" - so etwas gibt es nicht.

Es wäre nett, wenn Du dieses Standard-Thema auch korrekt als "Mobirise 5" bezeichnest - eben so wie es auch dort steht.

"M5" ist also hier keine Abkürzung sondern die Produkt-Bezeichnung aller Themen-Erweiterungen.