Beiträge von Sempervivum

Sempervivum

Nimmt sich nicht viel. Bisher bezog sich ja alles auf das Speichern. Wenn es ganz etwas anderes ist, kannst Du ja einen neuen Thread anfangen.

Sempervivum

Ich habe mal das Codepen und die Umschaltung auf das Hamburger-Menü zusammen geführt. Fehlt noch die Formatierung des vertikalen Menüs, wenn es durch Klick auf das Hamburger-Symbol aufgeklappt wird.

HTML

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

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        input#cb-slim-menu {
            display: none;
        }

        #slim-menu {
            display: none;
        }

        /* #main-menu ul {
            display: flex;
            flex-direction: row;
            list-style: none;
        } */

        @media screen and (max-width: 460px) {
            #main-menu ul {
                display: none;
                flex-direction: column;
            }
            input#cb-slim-menu:checked~ul {
                display: flex;
            }
            #slim-menu {
                display: inline-block;
            }
        }
    </style>
    <style>
        /* Formatierung aus Codepen */

        nav ul {
            padding: 0;
            margin: 0;
            list-style: none;
            position: relative;
            display:flex;
            flex-wrap: wrap;
        }

        nav ul li {
            display: inline-block;
            background-color: #E64A19;
        }

        nav a {
            display: block;
            padding: 0 10px;
            color: #FFF;
            font-size: 20px;
            line-height: 60px;
            text-decoration: none;
        }

        nav a:hover {
            background-color: #000000;
        }

        /* Hide Dropdowns by Default */

        nav ul ul {
            display: none;
            position: absolute;
            top: 60px;
            /* the height of the main nav */
        }

        /* Display Dropdowns on Hover */

        nav ul li:hover>ul {
            display: inherit;
        }

        /* Fisrt Tier Dropdown */

        nav ul ul li {
            width: 170px;
            float: none;
            display: list-item;
            position: relative;
        }

        /* Second, Third and more Tiers    */

        nav ul ul ul li {
            position: relative;
            top: -60px;
            left: 170px;
        }


        /* Change this in order to change the Dropdown symbol */

        li>a:after {
            content: ' +';
        }

        li>a:only-child:after {
            content: '';
        }
    </style>
</head>

<body>
    <!-- |||||||||||||||  NAVIGATION BAR  |||||||||||||||  -->
    <nav class="nav-menu" id="main-menu">
        <input id="cb-slim-menu" type="checkbox" />
        <label for="cb-slim-menu">
            <span id="slim-menu">
                <i class="fa fa-fw fa-bars"></i>
            </span>
        </label>
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">WordPress</a>
                <!-- First Tier Drop Down -->
                <ul>
                    <li>
                        <a href="#">Themes</a>
                    </li>
                    <li>
                        <a href="#">Plugins</a>
                    </li>
                    <li>
                        <a href="#">Tutorials</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Web Design</a>
                <!-- First Tier Drop Down -->
                <ul>
                    <li>
                        <a href="#">Resources</a>
                    </li>
                    <li>
                        <a href="#">Links</a>
                    </li>
                    <li>
                        <a href="#">Tutorials</a>
                        <!-- Second Tier Drop Down -->
                        <ul>
                            <li>
                                <a href="#">HTML/CSS</a>
                            </li>
                            <li>
                                <a href="#">jQuery</a>
                            </li>
                            <li>
                                <a href="#">Other</a>
                                <!-- Third Tier Drop Down -->
                                <ul>
                                    <li>
                                        <a href="#">Stuff</a>
                                    </li>
                                    <li>
                                        <a href="#">Things</a>
                                    </li>
                                    <li>
                                        <a href="#">Other Stuff</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Graphic Design</a>
            </li>
            <li>
                <a href="#">Inspiration</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
        </ul>
    </nav>

</body>

</html>

Alles anzeigen

Sempervivum

Nein, das musst Du dann selber zusammen fügen.

Sempervivum

Hier z. B.:

https://codepen.io/andornagy/pen/xhiJH

Brauchst Du nur die Farben anzupassen.

Sempervivum

Das sollte auch nur demonstrieren, wie man die Umschaltung zwischen dem horizontalen Menü und dem Hamburger-Menü macht. Und das geht am besten und am einfachsten mit Mediaqueries.

Wenn es dir dagegen um die Dropdown-Funktion geht, findest Du sicher Beispiele im Netz, wie man das macht.

Sempervivum

Diese Frage wird immer wieder gestellt und ich habe vor einiger Zeit mal jemand anders die Lösung gezeigt. Aus diesem Code kannst Du ersehen, wie es funktioniert:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        input#cb-slim-menu {
            display: none;
        }

        #slim-menu {
            display: none;
        }
        #main-menu ul {
            display: flex;
            flex-direction: row;
            list-style: none;
        }

        @media screen and (max-width: 460px) {
            #main-menu ul {
                display: none;
                flex-direction: column;
            }
            input#cb-slim-menu:checked  ~ ul {
                display: flex;
            }
            #slim-menu {
                display: inline-block;
            }
        }
    </style>
</head>
<body>
    <!-- |||||||||||||||  NAVIGATION BAR  |||||||||||||||  -->
    <div class="nav-menu" id="main-menu">
        <input id="cb-slim-menu" type="checkbox" />
        <label for="cb-slim-menu"><span id="slim-menu"><i class="fa fa-fw fa-bars"></i></span></label>
        <ul>
            <li>
            <a href="http://domain.com/"><i class="fa fa-fw fa-home"></i><span class="main-menu-text"> Home</span></a>
            </li>
            <li>
                <a href="http://domain.com/about.html#testimonials"><i class="fa fa-fw fa-thumbs-o-up"></i><span class="main-menu-text"> Testimonials</span></a>
            </li>
            <li>
                <a href="http://domain.com/about.html"><i class="fa fa-fw fa-info-circle"></i><span class="main-menu-text"> About</span></a>
            </li>
            <li>
                <a href="http://domain.com/faq.html"><i class="fa fa-fw fa-question-circle"></i><span class="main-menu-text"> FAQ</span></a>
            </li>
            <li>
                <a href="http://domain.com/contact.html"><i class="fa fa-fw fa-paper-plane-o"></i><span class="main-menu-text"> Contact</span></a>
            </li>
        </ul>
    </div>

</body>
</html>

Alles anzeigen

Sempervivum

Code

<link href="css/navigation.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Du ziehst erst dein eigenes CSS und dann das von Bootstrap ein. Damit läufst Du Gefahr, dass deines durch Bootstrap überschrieben wird. Kehre die Reihenfolge um und beobachte, ob es dann besser funktioniert. Dies ist keine Garantie für den Erfolg, da sich, unabhängig von der Reihenfolge, das CSS durchsetzt, das spezifischer ist.

Sempervivum

Wenn es sehr viele Fotos sind, empfiehlt es sich, gleich auf dem Server mit PHP zu filtern. Ein geeignetes Filterkriterium zu finden ist u. U. nicht so einfach:

Das Beste wäre das Aufnahmedatum in den EXIF-Informationen, aber dabei kann man nicht sicher sein, ob diese vorhanden sind. Sie können z. B. bei einer Bearbeitung verloren gegangen sein. Zweite Möglichkeit ist der Zeitpunkt der Erstellung der Datei. Problem dabei: Dies ist in der Regel der Zeitpunkt, wann die Datei auf den Server hochgeladen wurde und der kann erheblich vom Zeitpunkt der Aufnahme abweichen. Wenn Du die Website jetzt neu aufbaust sowieso.

Zunächst würde ich empfehlen, mit einem PHP-Skript eine Bestandsaufnahme zu machen, ob die EXIF-Informationen vorhanden sind.

Sempervivum

Gleich hier bei HTML-Seminar anfangen:

https://www.html-seminar.de/css-flexbox.htm

Hier sehe ich auch häufig nach:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Einige erweiterte Möglichkeiten mit margin:

https://stackoverflow.com/questions/3255…856609#33856609

Sempervivum

Manche sagen ja, "geht nicht - gibt's nicht" und das mit dem URL-Parameter funktioniert tatsächlich:

Seite 2 mit dem Button:

HTML

<!doctype html>
<html lang="en">
<head>
    <title>Test download</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="html-docx-js-master/dist/html-docx.js"></script>
    <script src="js/download.js"></script>
</head>
<body>
    <iframe id="iframe" src="save-as-docx-content.html"></iframe>
    <button onclick="save();">Als DOCX peichern</button>
        <script>
        function save() {
            $("#iframe").attr("src", "save-as-docx-content.html?save=true");
        }
    </script>
</body>
</html>

Alles anzeigen

Seite 1 mit der Tabelle:

HTML

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

<head>
    <title>Test download</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="html-docx-js-master/dist/html-docx.js"></script>
    <script src="js/download.js"></script>
</head>

<body>
    <table id="table">

    </table>
    <script>
        document.getElementById("table").innerHTML = "<tr><td>Zelle 1</td><td>Zelle 2</td></tr>";
        function save() {
            var thehtml = $("html");
            thehtml.find("script").remove();
            var doc = '<!doctype html><html>' + thehtml.html() + '</html>';
            var converted = htmlDocx.asBlob(doc, { orientation: 'portrait' });
            download(converted, "specification.docx", "application/vnd.openxmlformats-officedocument.wordprocessingml.document");
        }
        if (window.location.href.indexOf("save=true") != -1) save();
    </script>
</body>

</html>

Alles anzeigen

Sempervivum

Zitat

Also wenn ich z.B. einen Button auf Seite 2 betätige führt das dazu, dass für den Button auf Seite 1 die click() Methode ausgeführt wird.

Eigentlich kein Problem, aber leider wäre das, genau so wie das Auslesen des HTML, ein Cross-Domain-Zugriff und würde genau so vom Browser abgewiesen.

Was man versuchen könnte, ist, einen URL-Parameter beim Einbinden an die Seite 1 zu übergeben, die das Speichern veranlasst. Werde ich versuchen ...

Sempervivum

Zitat

Das Script siehst Du unter: https://www.preiswerter-buchen.de/traffics_resize.html

OK, das ist also das Skript. Und wo wird das eingebunden? Auf https://www.preiswerter-buchen.de/test/ liefert die Textsuche nach <script 136 Treffer!

Sempervivum

Jetzt wird mir das Problem klar: Bei mir funktioniert es, weil ich lokal mit einem Webserver teste. Du möchtest es jedoch lokal laufen lassen ohne Webserver. Und dann blockt Chrome es wegen Cross-Origin-Gesichtspunkten. Auf Anhieb fällt mir da keine Lösung ein. Einziehen mit PHP entfällt ja dann auch. Ich überlege weiter.

Sempervivum

Was funktioniert denn nicht? Lass den iFrame zunächst sichtbar - wird die Seite mit der Tabelle angezeigt? Wird der Speichern-Dialog eingeblendet, wo man das Verzeichnis auswählt? Kommen Fehler in der Console?

Sempervivum

Zitat

Jetzt wird mir die komplette Seite 1 angezeigt. Ich hatte jetzt den Ansatz nur den Button hier zu sehen, also den Rest im iFrame auszublenden

Wenn Du den iFrame nicht sehen möchtest, ist es kein Problem, ihn mit CSS und display:none unsichtbar zu machen.

Ich habe mal schnell ein Demo gemacht. Seite 2 mit dem Button und dem iFrame:

HTML

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

<head>
    <title>Test download</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="html-docx-js-master/dist/html-docx.js"></script>
    <script src="js/download.js"></script>
</head>

<body>
    <iframe id="iframe" src="save-as-docx-content.html"></iframe>
    <button onclick="save();">Als DOCX peichern</button>
        <script>
        function save() {
            var iFrame = document.getElementById("iframe");
            var thehtml = $(iFrame.contentWindow.document).find("html");
            thehtml.find("script").remove();
            var doc = '<!doctype html><html>' + thehtml.html() + '</html>';
            var converted = htmlDocx.asBlob(doc, { orientation: 'portrait' });

            download(converted, "specification.docx", "application/vnd.openxmlformats-officedocument.wordprocessingml.document");
        }
    </script>
</body>

</html>

Alles anzeigen

Und save-as-docx-content.html ist die Seite mit der Tabelle, die gespeichert werden soll und dem Skript, das sie erzeugt.

Aber möglicher Weise verstehe ich dich noch falsch.

Sempervivum

Da hatte entweder ich dich oder Du mich falsch verstanden. Du hattest geschrieben:

Zitat

kann ich diesen Button auch in eine andere HTML Seite einbauen, sodass aber trotzdem diese (mit der Tabelle) gespeichert wird?

Sagen wir Seite 1 ist die mit der Tabelle, die gespeichert werden soll und Seite 2 die mit dem Button. Auf Seite 2 wird jetzt Seite 1 in einem iFrame eingebunden. Drückt man den Button auf Seite 2 wird der Inhalt von Seite 1 aus dem iFrame eingelesen und gespeichert. Wenn dies nicht das ist, was Du dir vorgestellt hast, korrigiere mich.

Sempervivum

Auch das ist mit Flexlayout kein Problem. Hier wird beschrieben, wie man es mit margin:auto macht:

https://stackoverflow.com/questions/3255…856609#33856609

Du brauchst nur dem p-Element ein margin-auto zu geben, dann rutscht der Button nach unten und das p-Element wird im freien Raum zentriert. Voraussetzung ist, dass genug Platz vorhanden ist.

Siehe Screenshot:

html-seminar.de/woltlab/attachment/1495/

Sempervivum

Der Grund, warum es nicht funktioniert, ist, dass die Seite, die eingebunden wird, auf einer anderen Domain liegt als die Elternseite. Daher wird der Zugriff auf den Inhalt dieses iFrame vom Browser geblockt. (Stichwort same-origin-policy). Unklar ist mir dann, warum es auf https://www.preiswerter-buchen.de/test/ funktionieren kann. Gib mir doch mal einen Hinweis, wo das Skript zu finden ist, das die Höhe anpasst.

Sempervivum

Gern geschehen.

Zitat

kann ich diesen Button auch in eine andere HTML Seite einbauen, sodass aber trotzdem diese (mit der Tabelle) gespeichert wird?

Auch dafür ist mir eine einfache Lösung eingefallen: Da dies offensichtlich nicht Cross-Domain ist, kannst Du das Dokument auf der Seite, wo der Button ist, in einen iFrame einlesen und von dort das HTML auslesen.

Sempervivum

PS: Ich habe einen Online-Viewer gefunden und damit wird die Tabelle korrekt angezeigt. D. h. das Skript funktioniert.

Beiträge von Sempervivum

Speichern einer HTML Seite

Navbar Toggler

Navbar Toggler

Navbar Toggler

Navbar Toggler

Navbar Toggler

HTML Greift selten auf CSS zu

Foto Filter

Grid, Flexbox und andere CSS-Gemeinheiten

Speichern einer HTML Seite

Speichern einer HTML Seite

In iFrame resize integrieren

Speichern einer HTML Seite

Speichern einer HTML Seite

Speichern einer HTML Seite

Speichern einer HTML Seite

Vier Vierecke im Vollbild anpassbar

In iFrame resize integrieren

Speichern einer HTML Seite

Speichern einer HTML Seite