Hallo zusammen,
ich habe mir selbst ein kleines Tool für die Erstellung und Anzeige eines Zeitstrahls programmiert und dies über ein das Inhaltselement Emdeb eingebunden.
Soweit so gut. Jetzt das Problem. Zur Erstellung des Zeitstrahls möchte ich die Seite gern Passwortgeschütz nutzen, das nicht jeder wie er möchte dort was eintragen kann.
Sobald ich den Passwortschutz drin habe und mich anmelde bleibt der Inhalt im Inhaltselement leer. Nehme ich den Passwortschutz raus werden auch alle im Inhaltselement enthaltene Inhalte wieder korrekt angezeigt.
Grüße Enrico
vor 2 Monaten
Ohne deine Website, den Code deines Tools und Details deines Hostings zu kennen, kann man dein Problem nicht ohne Weiteres lösen.
Viele Grüße
Thomas
0
vor 2 Monaten
OK hier der Code. Wie gesagt finde es komisch das der Code ohne Passwortschutz perfekt angezeigt wird. Nur noch mal zum besseren Verständnis ich nutze den Passwortschutz direkt vom Designer der Webseitenstruktur.
Link zur Webseite: https://lodenau.de/Extras/Geschichte
Passwortschutz ist aktuell aus.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geschichte von Lodenau</title>
<style>
body {
font-family: 'Times New Roman', serif;
background-color: #f4f4f4;
padding: 20px;
text-align: center;
}
.timeline {
position: relative;
max-width: 800px;
margin: auto;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background: #7b3f00;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
.event {
position: relative;
width: 45%;
padding: 20px;
background: white;
box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
border-radius: 8px;
margin: 20px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.left {
left: 0;
text-align: center;
}
.right {
left: 50%;
}
.event h3 {
margin: 0;
color: #7b3f00;
font-size: 24px;
}
.event h4 {
margin: 5px 0;
color: #333;
font-size: 20px;
}
.event p {
margin: 5px 0 0;
cursor: pointer;
white-space: pre-line; /* Add this line */
}
.event img {
width: 30%;
max-width: 100px;
border: 5px solid #7b3f00;
border-radius: 8px;
margin-top: 10px;
cursor: pointer;
transition: transform 0.3s ease;
}
.event img:hover {
transform: scale(1.8);
}
.event::before {
content: '';
position: absolute;
top: 50%;
width: 20px;
height: 20px;
background: #7b3f00;
border-radius: 50%;
transform: translateY(-50%);
}
.left::before {
right: -10px;
}
.right::before {
left: -10px;
}
.read-more {
color: #1e90ff;
font-weight: bold;
}
@media (max-width: 768px) {
.timeline::after {
left: 20px;
}
.event {
width: calc(100% - 40px);
margin-left: 40px;
margin-right: 0;
}
.left, .right {
left: 0;
text-align: left;
}
.left::before, .right::before {
left: 10px;
}
}
</style>
</head>
<body>
<h2>Geschichte von Lodenau</h2>
<div class="timeline" id="timeline"></div>
<script>
async function loadEvents() {
let response = await fetch('events.json');
let events = await response.json();
events.sort((a, b) => new Date(a.date.split('-').reverse().join('-')) - new Date(b.date.split('-').reverse().join('-'))); // Sortiere chronologisch
let timeline = document.getElementById('timeline');
timeline.innerHTML = '';
events.forEach((event, index) => {
let div = document.createElement('div');
div.className = 'event ' + (index % 2 === 0 ? 'left' : 'right');
let formattedDate = event.date.split('-').join('-');
let shortText = event.text.length > 300 ? event.text.substring(0, 300) + '... <span class="read-more">weiter lesen</span>' : event.text;
div.innerHTML = `
<h3>${formattedDate}</h3>
<h4>${event.title}</h4>
<p onclick="toggleText(this)">${shortText}</p>
${event.image ? `<img src="uploads/${event.image}" alt="Bild" onclick="openImage(this)">` : ''}
`;
div.dataset.fullText = event.text;
timeline.appendChild(div);
});
}
function toggleText(element) {
let fullText = element.parentElement.dataset.fullText;
if (element.innerText.includes('weiter lesen')) {
element.innerHTML = fullText + ' <span class="read-more">weniger anzeigen</span>';
} else {
element.innerHTML = fullText.substring(0, 300) + '... <span class="read-more">weiter lesen</span>';
}
}
function openImage(img) {
let newTab = window.open();
newTab.document.write('<img src="' + img.src + '" style="width:100%">');
}
function showSuccessMessage() {
document.getElementById("success-message").style.display = "block";
setTimeout(() => {
document.getElementById("success-message").style.display = "none";
}, 3000);
}
if (window.location.search.includes("success=true")) {
showSuccessMessage();
}
loadEvents();
</script>
</body>
</html>
2
Antwort
von
vor 2 Monaten
Hallo @enrico-draeger,
vielen Dank für den Code. Ich werde mir das mal genau ansehen und dir dann ein Feedback geben. Hab ein kleines bisschen Geduld.
Viele Grüße
Christine Kn
Antwort
von
vor 2 Monaten
Hallo @enrico-draeger,
ich habe eine Rückmeldung von den Kollegen im Backend erhalten.
Das Ganze liegt an der Art, wie das Embed-Widget funktioniert. Was du mit dem Widget machen möchtest, geht leider nicht. Sobald der Passwortschutz aktiviert ist, kann das Embed-Widget den Inhalt nicht anzeigen.
Freundliche Grüße
Kerstin Kl.
Uneingeloggter Nutzer
Antwort
von
Uneingeloggter Nutzer
Frage
von