Beiträge von Sempervivum

Sempervivum

"dropdown menu click pure css", da findet man sehr vieles.

Sempervivum

Mit den richtigen Suchbegriffen findet man Beispiele für so etwas leicht, z. B. dieses:

Javascript ist nicht unbedingt erforderlich.

Sempervivum

Zitat

Mir erschliesst sich der Sinn nicht.

Der Sinn erschließt sich mir auch nicht. Ich habe nur den Wunsch von hunny-design umgesetzt. Wenn man möchte, dass dies nach einem erneuten Laden die Grundeinstellung sein soll, müsste man es in geeigneter Form speichern, z. b. im Localstorage.

Zitat

Dein eventListener macht doch genau das, was sowieso bei einer Auswahl erfolgt: Die Option ist selected

Nein, die Option ist zwar selektiert und die Pseudoklasse :selected ist gesetzt und selectedIndex verweist auf die selektierte Option, aber, wie ich schon geschrieben habe, folgt das Attribut "selected" dem nicht. Benutze den HTML-Inspektor, um dich davon zu überzeugen.

Sempervivum

Man lernt nie aus: Ich hätte geschworen, dass die Eigenschaft selected dynamisch ist und mit wechselt, wenn man eine neue Option auswählt. Ist jedoch offenbar nicht der Fall, wenn ich meinem HTML-Inspektor glauben kann. Auf den zweiten Blick jedoch einleuchtend, denn ein Attribut ist etwas anderes als die Pseudoklasse :selected.

Dieses sollte jedoch funktionieren:

Code

    <select id="sel1">
        <option value="opt1" selected>opt 1</option>
        <option value="opt2">opt 2</option>
        <option value="opt3">opt 3</option>
    </select>
    <script>
        sel1.addEventListener("change", function () {
            for (var i = 0; i < sel1.options.length; i++) {
                sel1.options[i].removeAttribute("selected");
            }
            sel1.options[sel1.selectedIndex].setAttribute("selected", "");
        })
    </script>

Alles anzeigen

Sempervivum

Zitat

habe kleine frage zwischen durch

Code

var aa = blabla

for(a=0;a<=aa.lenght;a++;)

var test =aa.bla bla[a].innerHTML;

alert(test)

}

so wird mir der alert ja öffters angezeigt.

ich möchte aber den letzten haben,also das ende von lenght.

Deinen Code verstehe ich nicht vollständig, aber das letzte Element in einem Array bekommst Du so:

Code

var arr = ["a", "b", "c", "d"];
alert (arr[arr.length - 1]);

Sempervivum

Dies müsste alles leisten, was Du haben willst:

https://datatables.net/examples/basic_init/scroll_y.html

Scrollbar, fester Kopf, sortierbar.

Sempervivum

Zitat

habe die zeile zwar zum stehen bekommen ,aber dann hat sich sich der tabellenbreite nicht angepasst ( weil tabelle mal breiter ist und mal nicht )..

dann habe ich die tabellenbreite ausgelesen und wollte das dann über css bzw über id dann die breite der kopfzeile anpassen,was komischerweisse nicht geklappt hat ...

Hat dabei das Sortieren noch funktioniert? Wenn ja, empfehle ich, diesen Versuch weiter zu führen. Es sollte möglich sein, mit Javascript die Breite des Kopfes anzupassen. Poste doch mal diese Lösung.

Sempervivum

Könnte dann so aussehen:

Code

<style>
        #pdfviewer {
            display: inline-block;
        }

        #toolbar {
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            #toolbar img, #toolbar input {
                margin: 0 10px;
            }
    </style>
    <div id="pdfviewer">
        <div id="toolbar">
            <img id="nextbtn" src="images/buttondown.png" />
            <img id="prevbtn" src="images/buttonup.png" />
            Seite&nbsp;<span id="pagedisp"></span>
            <input id="pageinput" />
            <img id="savebtn" src="images/buttondownload.png" />
        </div>
    </div>
    <script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
    <script src="js/download.js"></script>
    <script>
        var oReq = new XMLHttpRequest();
        oReq.open("GET", "testmultipage.pdf", true);
        oReq.responseType = "arraybuffer";

        oReq.onload = function (oEvent) {
            PDFJS.getDocument({ data: oReq.response }).then(function getPdfHelloWorld(pdf) {
                var pageCount = pdf.pdfInfo.numPages;
                function renderPage(pageNr) {
                    var canvas = document.createElement("canvas");
                    pdfviewer.appendChild(canvas);
                    canvas.id = "page-" + pageNr;
                    pdf.getPage(pageNr).then(function getPageHelloWorld(page) {
                        var scale = 1.0;
                        var viewport = page.getViewport(scale);
                        // Prepare canvas using PDF page dimensions.
                        var context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        // Render PDF page into canvas context.
                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
                        page.render(renderContext);
                    });
                }
                function displayPage() {
                    var cv = document.querySelectorAll("#pdfviewer canvas");
                    for (var i = 0; i < cv.length; i++) {
                        if (cv[i].id == "page-" + pageNr) cv[i].style.display = "block";
                        else cv[i].style.display = "none";
                    }
                    pagedisp.innerHTML = pageNr + "/" + pageCount;
                    pageinput.value = pageNr;
                }
                for (var pageNr = 1; pageNr <= pageCount; pageNr++) {
                    renderPage(pageNr);
                }
                var pageNr = 1;
                displayPage();
                nextbtn.addEventListener("click", function () {
                    if (pageNr < pageCount) {
                        pageNr++;
                        displayPage();
                    }
                });
                prevbtn.addEventListener("click", function () {
                    if (pageNr > 1) {
                        pageNr--;
                        displayPage();
                    }
                });
                pageinput.addEventListener("change", function () {
                    pageNr = parseInt(this.value);
                    displayPage();
                });
                savebtn.addEventListener("click", function () {
                    download(oReq.response, "testdownload.pdf");
                });
            });
        }
        oReq.send(null);
    </script>

Alles anzeigen

Sempervivum

Der Gedanke ist sicher nicht falsch. Das Problem ist nur, dass die aktuelle Seite immer in das selbe Canvas gerendert wird. Ich erwarte, dass dann dort nur die letzte Seite zu sehen ist. Man müsste also für jede Seite ein neues Canvas anlegen.

Alternativ eine Funktion zum Blättern anlegen: Pfeiltasten für vor und zurück und zusätzlich ein Eingabefeld wo die Seitennummer angezeigt wird und man sie ändern kann. Wenn ich mich richtig erinnere, macht es so der Betrachter des Browsers für ein object-Tag.

Sempervivum

Eine Alternative ist, das PDF nicht in einem object-Element anzuzeigen sondern als Grafik mit pdf.js.

Dieses konnte ich relativ schnell recherchieren und es funktioniert im IE:

HTML

<!doctype html>
    <html>
    <head>
        <title>Intranet</title>
        <link rel="stylesheet" type="text/css" href="../css/reset.css">
        <link rel="stylesheet" type="text/css" href="thread16-2.css">
        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
        <link href="../CSS/icon.css" rel="stylesheet" type="text/css">
        <script src="../js/jquery.js"></script>
        <script src="../js/menu.js"></script>
    </head>
    <body>
        <center><img class="scaled" src="../images/Header_Intranet_Black.png" alt="Testbild" /></center>
        <header class="container">
            <nav class="navbar">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="../HauptD/index.php">Intranet</a>
                    </div>
                    <div class="collapse navbar-collapse" id="menu">
                        <ul class="navbar-nav">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle">Ramsperger<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="../InterneMitteilungen/InterneMitteilungen.php" type="application/pdf">Interne Mitteilungen</a></li>
                                    <li><a href="../Aktuelles/aktuelles.php">Akutelles</a></li>
                                    <li><a href="../Aktuelles/Ansprechpersonen.php">Ansprechpartner</a></li>
                                    <li><a href="../Aktuelles/Besprechungsraum.php">Termine Besprechungsraum</a></li>
                                    <li><a href="../Sonstiges/Identifizierung_GwG.php">Identifizierung Geldwäsche-Gesetz</a></li>
                                    <li><a href="../Sonstiges/Geldwaesche-Prozess.php">Geldwäsche-Prozess</a></li>
                                    <li><a href="../Sonstiges/012016.php">Unfallregulierung</a></li>
                                    <li><a href="../Administration/filemanager.php">Administration</a></li>
                                    <li><a href="../Arbeitssicherheit_Gesundheitsschutz/AsGs.php">Arbeitssicherheit Gesundheitschutz</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle">CROSS-System<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="../Cross/Support.php">HOTLINE - IS-Handel</a></li>
                                    <li><a href="../Cross/Eingangsrechnungskontrolle.php">Eingangsrechnungskontrolle</a></li>
                                    <li><a href="../Cross/Beschreibung_interne_GF_KD.php">Interne Geschäftsfälle KD</a></li>
                                    <li><a href="../Cross/SalesHandbuch.php">Handbuch NW / GW</a></li>
                                    <li> <a href="../Cross/SKR51-ALL-interne_GeschaeftsfaelleNGW.php">Interne Geschäftsfälle NGW</a></li>
                                    <li><a href="../Cross/SMS_und_E-Mail.php">Benachrichtigung via SMS und E-Mail</a></li>
                                    <li> <a href="../Cross/ServiceHandbuch.php">Werkstattplaner Umsteiger</a> </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
        <!-- Seiteninhalt -->
        <canvas id="the-canvas" style="border: 1px solid black;"></canvas>
        <script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
        <script>
            var oReq = new XMLHttpRequest();
            oReq.open("GET", "test1.pdf", true);
            oReq.responseType = "arraybuffer";

            oReq.onload = function (oEvent) {
                PDFJS.getDocument({ data: oReq.response }).then(function getPdfHelloWorld(pdf) {
                    // Fetch the first page.
                    pdf.getPage(1).then(function getPageHelloWorld(page) {
                        var scale = 1.5;
                        var viewport = page.getViewport(scale);
                        // Prepare canvas using PDF page dimensions.
                        var canvas = document.getElementById('the-canvas');
                        var context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        // Render PDF page into canvas context.
                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
                        page.render(renderContext);
                    });
                });
            }
            oReq.send(null);
        </script>
    </body>
</html>

Alles anzeigen

Sempervivum

Diese Anweisung soll dafür sorgen, dass .mainimg den gesamten freien Bereich rechts von den Thumbnails ausfüllt. Die 100% beziehen sich dabei auf das Elternelement. Und die 50px die abgezogen werden sind die Breite der Thumbnails.

Sempervivum

Frage hat sich geklärt, inzwischen verstehe ich es.

Aber wo sind die Beiträge von manuel?

Sempervivum

Meine Frage bezog sich auf diese Konfiguration:

Code

function Func1(par1, par2) {
    this.param1 = par1;
    this.param2 = par2;
    return {par3: this.param1 + this.param2};
}
var myobj1 = new Func1(7, 13);

Welchen Sinn und welchen Effekt hat dabei der Returnwert?

Aber wahrscheinlich hast Du etwas anderes gemeint.

Sempervivum

Zitat

ich kann dann aber den IMGs auch sagen das sie sich Automatisch an einen gegebenen Rahmen wo das Bild dann groß dargestellt werden soll anpassen ?

Ja, dieser Rahmen wäre .mainimg. Das figure-Tag hat per Default relativ großzügige Margins, so dass die Bilder diesen Rahmen nicht vollstänig ausfüllen. Ist das unerwünscht, kann man diese jedoch leicht auf 0 setzen.

Zitat

Macht es denn überhaupt Sinn das so in HTML zu schreiben? Oder sollte man da eher auf javascript zurück greifen? Hatte jedoch auch letztens gelesen, dass man so viel wie möglich in html "Programmieren" soll, damit die Seite dann auch ohne JavaScript funktionsfähig ist/bleibt da es wohl vorkommt das java von manchen Browsern geblockt wird?

Gute Frage, darüber wird viel diskutiert. Der Browser führt Javascript nur dann nicht aus, wenn der Benutzer es explizit ausgeschaltet hat. Tut er das, muss er akzeptieren, dass viele Seiten dann nicht korrekt angezeigt werden.

Sempervivum

Was ist denn ein Returnwert in einem Objekt?

Sempervivum

Das ist der Radiohack. Er ermöglicht es, Elemente auf Klick zu ändern. Kern der Sache ist dieses:

Code

            .mainimg input:checked + figure {
                display: block;
                opacity: 1;
            }

Man verwendet Radiobuttons und versteckt sie. Ist ein Radiobutton gecheckt, wird das figure-Element, das unmittelbar darauf folgt ("+"), sichtbar gemacht. Hier wird dafür opacity verwendet, um ein Überblenden zu erzielen.

Sempervivum

Dann versuch mal dieses:

Code

        let result = items.filter(function(item) {
            let pth = item.path;
            if (pth.lastIndexOf(".config") != -1) {
                let matches = pth.match(/\//g);
                if (matches.length == 1) {
                    return true;
                } else {
                    return false;
                }
            } else {
                return false;
            }
        });
        console.log (result);

Alles anzeigen

Sempervivum

Zitat

Aufgabe ist also zuerst nach .config zu filtern und dann nach einer datei die nur ein / hat

Verstehe ich das richtig: path soll auf ".config" enden und genau ein "/" enthalten?

Sempervivum

Ja, das ist realisierbar. Vor einiger Zeit habe ich mal dies entwickelt:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>


    <style>
        .thumbs {
            display: inline-block;
            width: 50px;
            vertical-align: top;
        }

            .thumbs img {
                width: 50px;
                height: auto;
            }

        .mainimg {
            position: relative;
            display: inline-block;
            height: 400px;
            width: calc(100% - 50px);
        }

            .mainimg input {
                display: none;
            }

            .mainimg figure {
                position: absolute;
                width: 100%;
                height: auto;
                left: 0;
                top: 0;
                opacity: 0;
                transition: opacity ease 3s;
            }
            .mainimg figure img {
                width: 70%;
                height: auto;
                float: left;
            }
            .mainimg figure figcaption {
                display: inline;
            }

            .mainimg input:checked + figure {
                display: block;
                opacity: 1;
            }
    </style>
    <div class="thumbs">
        <label for="img1"><img src="images/dia0.jpg" /></label>
        <label for="img2"><img src="images/dia1.jpg" /></label>
        <label for="img3"><img src="images/dia2.jpg" /></label>
    </div><div class="mainimg">
        <input type="radio" name="radio-mainimg" id="img1" />
        <figure><img src="images/dia0.jpg" /><figcaption>Caption for image 1</figcaption></figure>
        <input type="radio" name="radio-mainimg" id="img2" checked />
        <figure><img src="images/dia1.jpg" /><figcaption>Caption for image 2</figcaption></figure>
        <input type="radio" name="radio-mainimg" id="img3" />
        <figure><img src="images/dia2.jpg" /><figcaption>Caption for image 3</figcaption></figure>
    </div>
</body>

</html>

Alles anzeigen

Das Aussehen kannst Du mit CSS nach deinen Wünschen gestalten.

Sempervivum

Die Aussage, dass es bei mir funktioniert, muss ich zurück ziehen. Ich habe da wohl etwas mit den Browsern durcheinander gebracht, das mit dem background funktioniert bei mir auch nicht.

Ich habe jedoch dieses gefunden:

http://jsfiddle.net/Jordan/gDuCE/

und versucht, in deine Seite einzubauen. Funktioniert im Prinzip aber noch nicht perfekt. Vielleicht kannst Du mit CSS die Animation auf das .cover abbilden, so dass man auf die zyklische Bearbeitung verzichten kann.

HTML:

HTML

<!doctype html>
    <html>
    <head>
        <title>Intranet</title>
        <link rel="stylesheet" type="text/css" href="../css/reset.css">
        <link rel="stylesheet" type="text/css" href="thread16-2.css">
        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
        <link href="../CSS/icon.css" rel="stylesheet" type="text/css">
        <script src="../js/jquery.js"></script>
        <script src="../js/menu.js"></script>
    </head>
    <body>
        <center><img class="scaled" src="../images/Header_Intranet_Black.png" alt="Testbild" /></center>
        <header class="container">
            <nav class="navbar">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="../HauptD/index.php">Intranet</a>
                    </div>
                    <div class="collapse navbar-collapse" id="menu">
                        <ul class="navbar-nav">
                            <li class="dropdown">
                                <iframe class="cover" src="about:blank"></iframe>
                                <a href="#" class="dropdown-toggle">Ramsperger<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="../InterneMitteilungen/InterneMitteilungen.php" type="application/pdf">Interne Mitteilungen</a></li>
                                    <li><a href="../Aktuelles/aktuelles.php">Akutelles</a></li>
                                    <li><a href="../Aktuelles/Ansprechpersonen.php">Ansprechpartner</a></li>
                                    <li><a href="../Aktuelles/Besprechungsraum.php">Termine Besprechungsraum</a></li>
                                    <li><a href="../Sonstiges/Identifizierung_GwG.php">Identifizierung Geldwäsche-Gesetz</a></li>
                                    <li><a href="../Sonstiges/Geldwaesche-Prozess.php">Geldwäsche-Prozess</a></li>
                                    <li><a href="../Sonstiges/012016.php">Unfallregulierung</a></li>
                                    <li><a href="../Administration/filemanager.php">Administration</a></li>
                                    <li><a href="../Arbeitssicherheit_Gesundheitsschutz/AsGs.php">Arbeitssicherheit Gesundheitschutz</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <iframe class="cover" src="about:blank"></iframe>
                                <a href="#" class="dropdown-toggle">CROSS-System<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="../Cross/Support.php">HOTLINE - IS-Handel</a></li>
                                    <li><a href="../Cross/Eingangsrechnungskontrolle.php">Eingangsrechnungskontrolle</a></li>
                                    <li><a href="../Cross/Beschreibung_interne_GF_KD.php">Interne Geschäftsfälle KD</a></li>
                                    <li><a href="../Cross/SalesHandbuch.php">Handbuch NW / GW</a></li>
                                    <li> <a href="../Cross/SKR51-ALL-interne_GeschaeftsfaelleNGW.php">Interne Geschäftsfälle NGW</a></li>
                                    <li><a href="../Cross/SMS_und_E-Mail.php">Benachrichtigung via SMS und E-Mail</a></li>
                                    <li> <a href="../Cross/ServiceHandbuch.php">Werkstattplaner Umsteiger</a> </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
        <!-- Seiteninhalt -->
        <object class="Support" data="test1.pdf" type="application/pdf" wmode="transparent"><param name="wmode" value="transparent" /></object>
        <script>
            setInterval(function () {
                $("li.dropdown").each(function (idx, ele) {
                    var ul = $(this).find("ul.dropdown-menu");
                    var iframe = $(this).find("iframe.cover");
                    var w = ul.width();
                    var h = ul.height() + 10;
                    var pos = ul.position();
                    var left = pos.left;
                    var op = ul.css("opacity");
                    if (op == "1") disp = "block"; else disp = "none";
                    var top = pos.top;
                    iframe.width(w).height(h).css({ top: top + "px", left: left + "px", display: disp });
                });
            }, 100);
        </script>
    </body>
</html>

Alles anzeigen

CSS

Code

li.dropdown {
    position: relative;
}
    .cover {
        position: absolute;
        border: none;
        top: 0;
        left: 0;
        display:inline-block;
        z-index: -1;
    }

Alles anzeigen

Beiträge von Sempervivum

Dropdown-Menü soll nach Klick auf ein Hauptmenü stehen bleiben

Dropdown-Menü soll nach Klick auf ein Hauptmenü stehen bleiben

Entfernen von selected

Entfernen von selected

tabelle sortieren

tabelle sortieren

tabelle sortieren

Mit CSS ein Object in den Hintergrund legen

Mit CSS ein Object in den Hintergrund legen

Mit CSS ein Object in den Hintergrund legen

Kleines Bild per Klick/Mouseover groß und an einer bestimmten Position anzeigen

Problem beim JASON Array auslesen

Problem beim JASON Array auslesen

Kleines Bild per Klick/Mouseover groß und an einer bestimmten Position anzeigen

Problem beim JASON Array auslesen

Kleines Bild per Klick/Mouseover groß und an einer bestimmten Position anzeigen

Javascript Objekte Filtern mit Array.filter

Javascript Objekte Filtern mit Array.filter

Kleines Bild per Klick/Mouseover groß und an einer bestimmten Position anzeigen

Mit CSS ein Object in den Hintergrund legen