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:
var arr = ["a", "b", "c", "d"];
alert (arr[arr.length - 1]);Dies müsste alles leisten, was Du haben willst:
https://datatables.net/examples/basic_init/scroll_y.html
Scrollbar, fester Kopf, sortierbar.
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.
Könnte dann so aussehen:
<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 <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>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.
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:
<!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>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.
Frage hat sich geklärt, inzwischen verstehe ich es.
Aber wo sind die Beiträge von manuel?
Meine Frage bezog sich auf diese Konfiguration:
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.
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.
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.
Was ist denn ein Returnwert in einem Objekt?
Das ist der Radiohack. Er ermöglicht es, Elemente auf Klick zu ändern. Kern der Sache ist dieses:
.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.
Dann versuch mal dieses:
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);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?
Ja, das ist realisierbar. Vor einiger Zeit habe ich mal dies entwickelt:
<!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>Das Aussehen kannst Du mit CSS nach deinen Wünschen gestalten.
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:
<!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>CSS
li.dropdown {
position: relative;
}
.cover {
position: absolute;
border: none;
top: 0;
left: 0;
display:inline-block;
z-index: -1;
}Sollte man zum Funktionieren bringen können. Poste doch noch Mal das aktuelle HTML und CSS. URL geht wohl nicht, wenn es Intranet ist.
Ich versuche es mal anders: Bestätige oder korrigiere mal folgendes:
Du möchtest die Tabelle sortierbar machen? Das funktioniert sehr gut mit dem jQuery-Plugin Datatables. Man müsste prüfen, ob es möglich ist, jQuery und dieses Plugin in einem Userscript einzubinden.
Du möchtest zusätzliche Infos über die API lesen und in der Tabelle hinzu fügen? Dass man die User-ID aus der Tabelle lesen kann, habe ich jetzt verstanden.
Möchtest Du die vorhandene Tabelle erweitern und ändern oder eine Kopie mit den Erweiterungen anlegen?
Stimmt die Klasse? In deinem ersten Posting lautet sie einfach "Support". Ich hatte es getestet, indem ich eine Testseite mit deinem HTML und CSS angelegt habe und es hatte funktioniert.
Dieses Javascript:
<form name="Autodaten" action="" method="get" enctype="text/plain">
Hersteller: <input id="autohersteller" type="text" name="autoerzeuger" value="" size="20" maxlength="50" onkeyup="" /><br>
Farbe: <input id="farbevonauto" type="text" name="" value="" size="5" maxlength="10" onkeyup=""/><br>
Max. Geschwindigkeit: <input id="geschw" type="text" name="" value="" size="5" maxlength="10" onkeyup=""/><br>
<input type="submit" name="" value="Sichern" />
</form>
<script>
var autoerzeuger = document.getElementById ('autohersteller').value;
document.write
var autofarbe = document.getElementById ("farbevonauto").value;
var maximalGeschwindig = document.getElementById ("geschw").value;
document.write ( autoerzeuger + " " + autofarbe + " mit Höchstgeschwindigkeit: " + maximalGeschwindig + " sind im Formular angegeben worden.");wird sofort beim Laden der Seite aufgerufen. Zu dem Zeitpunkt sind alle Eingabefelder noch leer. Um eine Aktion auszulösen, wenn in einem Eingabefeld etwas eingegeben wird, kommst Du um Eventhandler nicht herum.
Und dieses:
document.getElementById ("autohersteller").innerHTML.valuekann nicht funktionieren; entweder value (bei Eingabefeldern) oder innerHTML (z. B. bei span oder div).
Ich habe mal dieses ausgearbeitet:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Beispiel mit Objektorientierter Programmierung</title>
<meta charset="utf-8">
</head>
<body>
<form name="Autodaten" action="" method="get" enctype="text/plain">
Hersteller: <input id="autohersteller" type="text" name="autoerzeuger" value="" size="20" maxlength="50" onkeyup="" /><br>
Farbe: <input id="farbevonauto" type="text" name="" value="" size="5" maxlength="10" onkeyup="" /><br>
Max. Geschwindigkeit: <input id="geschw" type="text" name="" value="" size="5" maxlength="10" onkeyup="" /><br>
<input type="submit" name="" value="Sichern" />
</form>
<div id="anzeige"></div>
<script>
var dasAuto = null;
function eingabenUebernehmen() {
var hersteller = autohersteller.value;
var farbe = farbevonauto.value;
var geschwindigkeit = geschw.value;
if (hersteller != "" && farbe != "" && geschwindigkeit != "") {
dasAuto = new Auto(hersteller, farbe, geschwindigkeit)
dasAuto.anzeigen("anzeige");
}
}
autohersteller.addEventListener("change", eingabenUebernehmen);
farbevonauto.addEventListener("change", eingabenUebernehmen);
geschw.addEventListener("change", eingabenUebernehmen);
document.querySelector("form[name='Autodaten']").addEventListener("submit", function(e) {
e.preventDefault();
});
// Objektbauplan über function
function Auto (autoerzeuger, autofarbe, maximalGeschwindig)
{
// Eigenschaften
this.farbe = autofarbe;
this.hersteller = autoerzeuger;
this.stillstand = 0;
this.speedNow = 0;
this.maxSpeed = maximalGeschwindig;
// Methoden
this.beschleunigen_um = function (kmh)
{
this.speedNow +=kmh;
document.write('<br>Beschleunigt um: ');
document.write( kmh);
document.write(' km/h auf km/h: ');
document.write(this.speedNow);
if (this.speedNow > this.maxSpeed)
{
document.write('<p>' + this.speedNow);
document.write (' km/h geht Nicht - daher wird gedrosselt auf ' + this.maxSpeed + ' km/h!<br>');
this.speedNow = this.maxSpeed;
}
}
this.bremsen_um = function (kmh)
{
this.speedNow -= kmh;
document.write('<br>Abgebremst um: ');
document.write( kmh);
document.write(' km/h auf km/h: ');
document.write(this.speedNow);
if (this.speedNow < this.stillstand)
{
document.write('<p> Geht nicht - Das Auto steht jetzt!<br>');
this.speedNow = this.stillstand;
}
}
this.anzeigen = function(id)
{
var anzei = document.getElementById(id);
anzei.innerHTML = 'Hersteller: ' + this.hersteller + " Farbe: " + this.farbe + ' Höchstgeschwindigkeit: ' + this.maxSpeed;
}
}
</script>
</body>
</html>Damit kannst Du ja mal versuchen, zu beschleunigen und zu bremsen.