Beiträge von Sempervivum

Sempervivum · 12. September 2017

Das kann man entweder mit absoluter Positionierung oder mit negativem Margin machen, etwa so:

https://jsfiddle.net/Sempervivum/3vh7zck0/4/

Sempervivum · 12. September 2017

Die Funktion add() habe ich in der Doku nicht gefunden, dafür jedoch die Funktion file(). Wenn ich dabei die Option binary auf true setze und dieses:

http://www.henryalgus.com/read…-files-using-jquery-ajax/

anwende, komme ich zu diesem Code:

Code

<script src="js/jszip.min.js"></script>
    <script type="text/javascript" src="//stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
    <script type="text/javascript" src="js/fileSaver.js"></script>
</head>
<body>
    <button id="blob" class="btn btn-primary">click to download</button>
    <script>
        jQuery("#blob").on("click", function () {
            //var promise = $.get("test.pdf");
            //zip.file("test.pdf", promise, {binary: true});
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'test.pdf', true);
            xhr.responseType = 'blob';
            xhr.onload = function (e) {
                if (this.status == 200) {
                    // get binary data as a response
                    var blob = this.response;
                    var zip = new JSZip();
                    zip.file("test.pdf", blob, { binary: true });
                    zip.generateAsync({ type: "blob" }).then(function (blob) { // 1) generate the zip file
                        saveAs(blob, "test.zip");                          // 2) trigger the download
                    }, function (err) {
                        jQuery("#blob").text(err);
                    });
                }
            };
            xhr.send();
        });
    </script>

Alles anzeigen

Sempervivum · 12. September 2017

Meinst Du diese Anordnung, die man hier im Forum links von einem Posting sieht, mit Profilbild und Benutzername?

Sempervivum · 12. September 2017

Zitat

Das Problem ist wenn ich daneben eine Section machen möchte (Zur hauptseite) dann verschiebt es sich auf den Article.

Das Problem hat man immer bei fixierten Elementen. Du musst bei der Section daneben z. B. ein margin von der Breite des fixierten Elementes anbringen, um sie nach rechts zu verschieben. Oder eine Lösung ohne Fixierung verwenden, wie sie MrMurphy hier für eine vertikale Anordnung demonstriert hat:
http://boratb.bplaced.net/index55.html

Sempervivum · 6. September 2017

Habe ich jetzt nicht getestet, aber der Fehler liegt sehr wahrscheinlich in Zeile 14:

Code

var Tu=((OverallRadius*(1+Bar))*0.97);

Liest man Bar aus einem input-Feld aus, handelt es sich um einen String. In dem Fall werden beim "+"-Operator zwei Strings zusammen gefügt:

"1" + "1.7" ergibt "11.7" statt 2.7. Abhilfe, indem "Bar" in Float umgewandelt wird:

Code

var Tu=((OverallRadius*(1+parseFloat(Bar)))*0.97);

Sempervivum · 6. September 2017

Zwei Fehler:

Code

onBlur="CalculateCircumference(document.Rad.Diameter.value,document.Rad.Profile.value,document.Rad.Width.Bar.value)"

Es fehlt der vierte Parameter und beim dritten ist das ".Bar" zu viel.

So muss der Aufruf lauten:

Code

onClick="CalculateCircumference(document.Rad.Diameter.value, document.Rad.Profile.value, document.Rad.Width.value, document.Rad.Bar.value)"

Sempervivum · 5. September 2017

In Posting #3 stehen in den Zeilen 37, 47, 57, 93 noch Aufrufe von CalculateCircumference ohne den Parameter "Bar".

Sempervivum · 5. September 2017

Jetzt hast Du nur einen der Aufrufe erweitert. ?

Sempervivum · 5. September 2017

In der Definition deiner Funktion CalculateCircumference() definierst Du zwar den Parameter "Bar" aber in den Aufrufen versorgst Du ihn nicht, sondern nur drei Parameter.

Sempervivum · 5. September 2017

Ich habe es herunter geladen und versucht, es anzupasssen, aber bin leider nicht zum Ziel gekommen. Wenn ich versuche, das Menü zu verschieben, wird es nicht mehr richtig angezeigt.

Was ist denn dieses "fusion"? Template? CMS? Editor?

Sempervivum · 2. September 2017

Ich habe sie am Anfang meiner Berufstätigkeit in den 80-ern kennen gelernt. Sind ebenso wie Struktogrammeditoren in der Versenkung verschwunden. Vermutlich weil jeder, der einiger Maßen abstrakt denken kann, einen Programmcode mit Kontrollstrukturen auch so lesen und schreiben kann.

Sempervivum · 1. September 2017

Ist das Problem noch aktuell?

Sempervivum · 30. August 2017

Zitat

Solltest du oder wer anders noch einen ratschlag oder tipp haben immer raus da mit

Da will ich dich beim Wort nehmen: Missbrauchen von Tabellen für Layout-Zwecke ist nicht mehr zeitgemäß. Eine gute Alternative ist das Flexlayout. Um es zu demonstrieren, habe ich mal eine Karte darauf umgestellt:

Code

<style>
        .card_overlay {
            display: flex;
            height: 100vh;
            width: 100vw;
            align-items: center;
            justify-content: center;
            background-color: black;
        }

        .card_content {
            display: inline-flex;
            flex-direction: column;
            position: relative;
        }

        .card_case {
            background-image: url(http://file2.npage.de/014720/85/bilder/case.png);
            width: 299px;
            height: 435px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .txtwhite {
            color: white;
        }

        .card_icons {
            display: flex;
            justify-content: space-around;
            padding-bottom: 5px;
        }

        .card_icons div {
            display: inline-flex;
            align-items: center;
        }

        .card_icons div span {
            margin-left: 5px;
        }

        .switch_card {
            position: absolute;
            top: calc(50% - 25px);
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    </style>
    <div class="card_overlay" id="fade">
        <div class="card_content" id="card1">
            <div class="card_icons">
                <div>
                    <img height="17" src="http://file2.npage.de/014720/85/bilder/stapel.png" width="24" />
                    <span class="txtwhite">1/20</span>
                </div>
                <div>
                    <img height="17" src="http://file2.npage.de/014720/85/bilder/ex.png" width="14" />
                    <span class="txtwhite">0/2</span>
                </div>
                <div>
                    <img src="http://file2.npage.de/014720/85/bilder/ur.png" />
                </div>
            </div>
            <div class="card_case">
                <img src="http://file2.npage.de/014720/85/bilder/big_grabwaechters_vasall.png" />
            </div>
            <div class="switch_card">
                <a data-toshow="card2" href="javascript:void(0)" unselectable="off">
                    <img src="http://file2.npage.de/014720/85/bilder/links2a.gif" />
                </a>
                <a data-toshow="card2" href="javascript:void(0)">
                    <img src="http://file2.npage.de/014720/85/bilder/rechts2a.gif" />
                </a>
            </div>
            <div class="back_to">
                <a class="back" href="javascript:void(0)" unselectable="off">
                    <img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" />
                </a>
            </div>
        </div>
    </div>

Alles anzeigen

Ich habe, soweit es ging, auf absolute Maßangaben verzichtet. Ausnahme: Das .card_case, wo ich die Maße absolut angeben musste, damit sie dem Hintergrundbild entsprechen. Alternativen wäre eher noch schlechter gewesen. Durch relative Maße und selbst anpassende Container wird dir u. U. die Arbeit erleichtert, wenn Du weitere Elemente hinzu fügst. Du schriebst ja, dass das der Fall sein wird.

Möglicherweise könnte man noch die a-Tag weg rationalisieren und die Clickhandler direkt auf die Grafiken registrieren.

Sempervivum · 30. August 2017

Doch, natürlich ist das umsetzbar. Dazu würde ich empfehlen, die Suchfelder in die Tabelle zu integrieren, so wie in dem Beispiel bei Datatables. Dann den Index der Spalte ermittlen, so wie z. B. hier beschrieben:

https://stackoverflow.com/ques…d-column-number-in-jquery

Wenn Du die Suchfelder lieber unabhängig lassen willst, empfehle ich, den Spaltenindex als data-Attribut zu definieren. Dann kannst Du zunächst über die Zeilen iterieren und dann mit eq(idx) das richtige td-Element adressieren.

Sempervivum · 30. August 2017

Dafür gibt es ein sehr gutes Plugin namens datatables:

https://datatables.net

Suchen ist sowohl global auch auch spaltenweise möglich:

https://datatables.net/examples/api/multi_filter.html

Zitat

Searching on individual columns can be performed using the columns().search() and column().search() methods.

Sempervivum · 30. August 2017

Auf dieser Seite finde ich den fraglichen Code nicht?

Sempervivum · 29. August 2017

Bei mir funktioniert es einwandfrei. Ich benutze jQuery 1.10.2. Das von Google sollte kein Problem sein. Kannst Du es online stellen und die URL posten?

Sempervivum · 29. August 2017

Irgendwo ist da das Overlay verloren gegangen. Wenn ich es hinzu füge, klappt es mit dem Verdunkeln.

Sempervivum · 29. August 2017

Zitat

nur ein kleine Problem ist da noch card_overlay wird nicht geladen oder es greift so nicht mehr die background-color.

Hast Du auch die letzte Version von meinem Skript? Ich hatte zwei Mal editiert, weil ich das mit dem Overlay vergessen hatte.

Wenn es nicht funktioniert, dann poste noch einmal deinen neuen Code.

Sempervivum · 28. August 2017

Na gut, dann lasse ich mal alle Verbesserungsvorschläge außen vor:

Code

<table>
        <tbody>
            <tr>
                <td>
                    <a data-toshow="card1" href="javascript:void(0)">
                        <img src="http://file2.npage.de/014720/85/bilder/grabwaechters_vasall.png" title="Grabwächters Vasall" />
                    </a>
                    <a data-toshow="card2" href="javascript:void(0)">
                        <img src="http://file2.npage.de/014720/85/bilder/des_kaenguru.png" title="Grabwächters Vasall" />
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="card_content" id="card1">
        <table id="card_icons">
            <tbody>
                <tr>
                    <td align="left" width="80">
                        <img height="17" src="http://file2.npage.de/014720/85/bilder/stapel.png" width="24" /><font color="white"> 1/20</font>
                    </td>
                    <td align="left" width="60">
                        <img height="17" src="http://file2.npage.de/014720/85/bilder/ex.png" width="14" /><font color="white"> 0/ 2</font>
                    </td>
                    <td align="right">
                        <img src="http://file2.npage.de/014720/85/bilder/ur.png" />
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="card_case">
            <tbody>
                <tr>
                    <td align="center" valign="middle">
                        <img src="http://file2.npage.de/014720/85/bilder/big_grabwaechters_vasall.png" />
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="switch_card">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tbody>
                    <tr>
                        <td align="left">
                            <a data-toshow="card2" href="javascript:void(0)"  unselectable="off">
                                <img src="http://file2.npage.de/014720/85/bilder/links2a.gif" />
                            </a>
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td align="right">
                            <a data-toshow="card2" href="javascript:void(0)" >
                                <img src="http://file2.npage.de/014720/85/bilder/rechts2a.gif" />
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="back_to">
            <a class="back" href="javascript:void(0)" unselectable="off"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></a>
        </div>
    </div>
    <script>
        $("a[data-toshow]").on("click", function () {
            $(".card_content").hide();
            var idtoshow = $(this).data("toshow");
            $("#" + idtoshow).show();
            $(".card_overlay").show();
        });
        $("a.back").on("click", function () {
            $(".card_content").hide();
            $(".card_overlay").hide();
        });
    </script

Alles anzeigen

Das Javascript kannst Du dann in eine externe Datei auslagern. Ich habe jQuery benutzt, Du musst es einbinden, damit das Skript funktioniert.

Den Links, die eine Großansicht aufschalten, habe ich ein data-Attribut gegeben, das festlegt, welche Karte angezeigt werden soll.

Bei dem back-Buttton war das nicht nötig, weil damit ja das Overlay und die Kartenansicht unsichtbar gemacht werden sollen.

Beiträge von Sempervivum

Box Problem

Dynamischer Download mehrerer Dateien

Box Problem

Box Problem

JavaScript <-> Input Feld ist nicht nutzbar

JavaScript <-> Input Feld ist nicht nutzbar

JavaScript <-> Input Feld ist nicht nutzbar

JavaScript <-> Input Feld ist nicht nutzbar

JavaScript <-> Input Feld ist nicht nutzbar

Navigation Bar position right

Flussdiagramme

Navigation Bar position right

HTML javascript in eine script.js umwandeln/schreiben

Javascript - Suche in nur jeweils einer Tabellenspalte

Javascript - Suche in nur jeweils einer Tabellenspalte

HTML javascript in eine script.js umwandeln/schreiben

HTML javascript in eine script.js umwandeln/schreiben

HTML javascript in eine script.js umwandeln/schreiben

HTML javascript in eine script.js umwandeln/schreiben

HTML javascript in eine script.js umwandeln/schreiben