Altes Köln

Widget:GOV-Test: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
<!--Test-Widget von Christopher zum Austesten des GOV-Aufrufes (eigentlich für das GenWiki)-->
<!--Test-Widget von Christopher zum Austesten des GOV-Aufrufes (eigentlich für das GenWiki)-->
<h1>Ajax-Variante mit wiki</h1>
<h1>Ajax-Variante mit wiki</h1>
<div id="widget-container" style="position: relative; overflow: hidden;">
<div id="widget-container">
     <div id="content" style="overflow: auto;"></div>
     <div id="content">
        <p>Dies ist ein statischer Testinhalt.</p>
        <table>
            <tr><th>Header 1</th><th>Header 2</th></tr>
            <tr><td>Wert 1</td><td>Wert 2</td></tr>
        </table>
    </div>
</div>
</div>
<script>
    (function() {
        // Festgelegter Servername
        const serverBaseURL = "https://gov.genealogy.net";
        fetch('https://gov.genealogy.net/item/wikihtml/SCHERGJO54EJ')
            .then(response => {
                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
                return response.text();
            })
            .then(html => {
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = html;
                // Links anpassen
                const links = tempDiv.querySelectorAll('a[href^="/"]');
                links.forEach(link => {
                    link.href = serverBaseURL + link.getAttribute('href');
                });
                // Bilder anpassen
                const images = tempDiv.querySelectorAll('img[src^="/"]');
                images.forEach(img => {
                    img.src = serverBaseURL + img.getAttribute('src');
                });
                // Inhalt gezielt in den Widget-Container einfügen
                const contentDiv = document.getElementById('content');
                contentDiv.innerHTML = tempDiv.innerHTML;
                // Styling von Tabellen (innerhalb des Widgets)
                const tables = contentDiv.querySelectorAll('table');
                tables.forEach(table => {
                    table.style.width = '100%';
                    table.style.fontFamily = 'Arial, sans-serif';
                });
            })
            .catch(error => console.error('Fehler beim Laden:', error));
    })();
</script>


<style>
<style>
    /* Widget-Container */
     #widget-container {
     #widget-container {
        width: 100%; /* Volle Breite nutzen */
        max-width: 800px; /* Maximale Breite */
        margin: 20px auto; /* Zentriert mit Abstand */
        padding: 10px; /* Innenabstand */
        border: 1px solid #ccc; /* Rahmen für Sichtbarkeit */
        background-color: #f9f9f9; /* Heller Hintergrund */
        overflow: hidden; /* Inhalte innerhalb des Containers begrenzen */
    }
    /* Inhalte des Widgets */
    #content {
        overflow: auto; /* Scrolling für Inhalte */
    }
    /* Tabellen innerhalb des Widgets */
    #widget-container table {
        border-collapse: collapse;
         width: 100%;
         width: 100%;
    }
        max-width: 800px;
 
         margin: 20px auto;
    #widget-container td, #widget-container th {
         padding: 10px;
         border: 1px solid #ddd;
         border: 1px solid #ccc;
         padding: 8px;
         background-color: #f9f9f9;
    }
        overflow: auto; /* Begrenzung der Inhalte */
 
    #widget-container th {
         text-align: left;
         background-color: #f2f2f2;
     }
     }
</style>
</style>




Version vom 21. Januar 2025, 13:54 Uhr

Ajax-Variante mit wiki

Dies ist ein statischer Testinhalt.

Header 1Header 2
Wert 1Wert 2

<style> 

   #widget-container {
       width: 100%;
       max-width: 800px;
       margin: 20px auto;
       padding: 10px;
       border: 1px solid #ccc;
       background-color: #f9f9f9;
       overflow: auto; /* Begrenzung der Inhalte */
   }

</style>


Variante: Einfacher iframe mit

Variante: responsiv mit

<style> 

   body {
     margin: 0;
     padding: 0;
     font-family: Arial, sans-serif;
   }

   .iframe-container {
     width: 100%; /* Container hat immer die volle Breite des Viewports */
     position: relative; /* Wichtig für absolute Positionierung */
     padding-top: 56.25%; /* Seitenverhältnis 16:9 */
  
   }

   iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100vw; /* Breite des Viewports */
     height: calc(100vw * 0.5625); /* Höhe proportional zur Breite (16:9) */
     transform-origin: top left; /* Skalierung startet oben links */
   }

   /* Media Queries für kleinere Bildschirme */
   @media (max-width: 768px) {
     iframe {
       transform: scale(0.9); /* Skaliere den iframe-Inhalt */
     }
   }

   @media (max-width: 480px) {
     iframe {
       transform: scale(0.8); /* Weitere Skalierung für kleine Geräte */
     }
   }
 </style>





Abgerufen von „https://altes-koeln.de/index.php?title=Widget:GOV-Test&oldid=78122“
Cookies helfen uns bei der Bereitstellung von Altes Köln. Durch die Nutzung von Altes Köln erklärst du dich damit einverstanden, dass wir Cookies speichern.