Das Script sollte so laufen, schließlich hat es ja auch in der Demo funktioniert die ich dir gepostet hatte.

Es sollte also drei mögliche Ursachen geben:

• Es gibt einfach kein Element in deinem Markup mit der ID "div-test".
• Du hast einen anderen Fehler in deinem Script, der die Ausführung des ganzen Scripts verhindert. Einfach überprüfen, indem du die Javascript-Konsole deines Browsers öffnet. (Normalerweise in den Entwicklertools die du über F12 erreichen kannst)
• Das onload-Event wird nicht ausgeführt, weil es an anderer Stelle im Script überschrieben wurde. Um zu überprüfen ob das der Fall ist, kannst du mittels console.log("Test"); in der Funktion überprüfen, ob diese ausgeführt wird. (Die Ausgabe des Logs erfolgt in der o.g. Javascript-Konsole)Aus dem Grund sollte man Events immer möglichst über addEventListener binden! Außerdem eignet sich für dein Vorhaben das DOMContentLoaded-Event mehr, denn es wird aufgerufen wenn das Dokument fertig geladen und geparst ist und wartet nicht auf die Darstellung der Elemente. (Wie das onLoad-Event)https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListenerhttps://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

document.addEventListener("DOMContentLoaded", function() { /* ... */ });

Falls o.g. nicht weiterhilft, dann bräuchte man mehr Einblicke auf das Script, das Markup, die Ausgabe der Konsole und Co.

Muss das a-Element denn als block gerendert werden, oder kannst du inline-block in Erwägung ziehen? Letztere sollte dein Problem lösen.

Die alternative, weniger schöne Lösung wäre es, das List-Style zu entfernen und mittels li:before und content: "\25CF " das Bullet selbst setzen.

Eine richtigen Oberbegriff dafür gibt es jetzt nicht, das eheste wären "Beschreibungssprachen".

Die von dir genannten Seitenbeschreibungssprachen (die allerdings auch zu den Beschreibungssprachen gehören) geben genauere Angaben zur Gestaltung des Dokuments: Wo was sein muss, wie was aussehen muss. Genau das wird in HTML und CSS aufgeteilt. (HTML soll nur die Struktur der Daten beschreiben, CSS die Darstellung dieser)
Ein Beispiel für eine Seitenbeschreibungssprache ist das Portable Document Format. (PDF)

Was aber noch viel wichtiger ist: HTML und CSS sind keine Scriptsprachen, denn Scriptsprachen sind eine Untergruppe der Programmiersprachen.

Einen genaueren Oberbegriff als Beschreibungssprachen wüsste ich jetzt allerdings nicht.

Die bereits genannten Antworten zentrieren das Navigationsmenü - wenn es das ist was du willst. (Sprich horizontal mittig) Allerdings sehe ich, dass du auch top und bottom angegeben hast, also möchtest du vielleicht dass es mittig im Viewport ist? (sowohl horizontal als auch vertikal)

In dem Falle kannst du mit der CSS Flexbox arbeiten, indem du einen Wrapper über den gesamten Viewport legst und die Eigenschaften "align-items" und "justify-content" auf "center" setzt:

https://jsfiddle.net/g2h2mn1f/

Dafür kannst du einfach die position-Eigenschaft auf "fixed" setzen und das Bild mittels "bottom" und ggf. "left" / "right" positionieren. Das Bild wird so platziert, dass die jeweilige Kante des Bildes den angegebenen Abstand zur jeweiliigen Kante des Viewports hat. (D.h. bei "right: 20px" wird die rechte Kante des Bildes 20px von der rechten Kante des Viewports entfernt dargestellt)

Das Verschwinden kannst du dann über das Scroll-Event mit Javascript lösen:

https://developer.mozilla.org/en-US/docs/Web/Events/scroll

Einfach das Scroll Event an das Dokument binden und dann über scrollTop die Scrollposition erfragen:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

Falls diese größer als 0 ist, entsprechend das Style anpassen. Kleine Demo: (mit jQuery und div-Container statt Bild, Prinzip bleibt gleich)

https://jsfiddle.net/7grs1r11/1/

Das Ganze ist relativ simpel, je nach dem was du vor hast. Den Größten Teil nehmen dir die CSS Transitions ab, die zugehörigen Klassen setzt du dann einfach über Javascript. Nun gibt es aber viele Möglichkeiten, dein Vorhaben zu interpretieren, das Grundprinzip sollte jedoch im Großen und Ganzen gleichbleiben.

Im Grunde solltest du einfach nur das Scroll-Event verwenden:

https://developer.mozilla.org/en-US/docs/Web/Events/scroll

Dieses bindest du an das Dokument-Objekt und überprüfst dann die aktuelle Scrollposition. Ist sie größer als 0, dann wurde gescrollt und du setzt entsprechend die Klasse die die veränderte Breite, Farbe etc. hat. (Hierbei musst du ggf. mit margin arbeiten, falls du die Navigation zentriert haben willst.) Ist die Scrollposition jedoch 0, entfernst du die Klasse einfach ggf.

Den Rest (das Ändern der Farbe, das Setzen und Zurücksetzen der Breite etc.) kannst du dann den CSS Transitions überlassen:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_Transitions/Using\_CSS\_transitions

Falls du an weiteren Scrollpositionen im Dokument bspw. die Farbe ändern möchte (geht jetzt nicht genau aus deinem Text hervor), dann funktioniert das relativ ähnlich: Du suchst einfach nach dem nähsten dieser Punkte (in dem unterem Beispiel: jede Sektion) und falls diese bspw. eine bestimmte Klasse (unten: "section-dark") fügst du eine zusätzliche Klasse der Navigation zu mit der entsprechenden Farbe.

Zur Positionsbestimmung der Elemente kannst du Element.getBoundingClientRect() verwenden, welches das Rechteck des Elements mit Positionsangaben relativ zum Viewport zurückgibt:

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Hier eine Demo die die oben genannten Sachen zeigt: (Der Einfachheit halber benutze ich jQuery und SASS)

https://jsfiddle.net/43mmyar4/

Falls das nicht das ist, was du gesucht hast, dann müsstest du dich nochmal etwas genauer ausdrücken.

Edit: Ich lese gerade, dass das Verhalten komplett über Javascript laufen soll, darf ich fragen wieso? Immerhin nimmt dir CSS einen guten Teil der Arbeit ab, ansonsten müsstest du bspw. jQuery.animate (wenn ich mich nicht irre müssen Farbanimationen nachgerüstet werden) o.ä. benutzen.

Es fällt schwer deiner Frage zu folgen, ehrlich gesagt weiß ich nicht

worauf du genau hinauswillst. (Inwiefern die ganze Breite ausnutzen?
Sodass sie auf volle Breite gestreckt werden? Oder dass sie sich auf
voller Breite verteilen? Oder was komplett anderes? Ersteres klingt
bisschen seltsam, wenn das Quadrate bleiben sollen.)

Allerdings glaube ich, dass CSS Flexbox das ist, wonach du suchst:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_Flexible\_Box\_Layout/Using\_CSS\_flexible\_boxes

Kleine Demonstration: (Nur eine kleine Vorschau, mit Flexbox lässt sich noch viel mehr machen als das was hier gezeigt wird) https://jsfiddle.net/cufeaay9/

Falls das nicht hilft, braucht es schon eine genauere Beschreibung deines Problems.

Du hast hier zwar schon eine Lösung bekommen, allerdings scheint es mir, wenn ich mir deinen Code anschaue, dass einige Missverständnisse in Bezug auf RegExp bestehen. Ich versuche diese hier mal aufzuklären.

Die Syntax mit den Slashes (/pattern/flags) erstellt ein RegExp-Objekt, das Ergebnis ist also das gleiche wie bei new RegExp("pattern", "flags"). Du benutzt beides doppelt, das brauchst du an der Stelle nicht.

Der Vorteil an dem RegExp-Konstruktor ist der, dass du RegExp-Objekte aus String-Variablen erstellen kannst, da du bei dem Shorthand mit den Slashes keine Variablen einsetzen kannst. D.h. du willst an der Stelle folgendes:

var Suchmuster = new RegExp(f2, "g");

Außerdem macht die Zeile

if(Suchmuster.test() === -1)

relativ wenig Sinn, da einerseits kein String übergeben wird der überprüft werden soll und die test()-Funktion nur true oder false zurückgibt.

Ganz ohne Javascript geht das jedenfalls nicht. Kenne mich jetzt nicht speziell mit Jimdo aus, allerdings scheint es wohl die Möglichkeit zu geben, Widgets zu erstellen die das über Javascript ermöglichen könnten.

Bildgröße ließen sich ggf. einfach über die CSS width/height Properties regeln, was sonstige Filter angeht gibt es auch die CSS-filter-Property:
https://developer.mozilla.org/de/docs/Web/CSS/filter

Damit wären die meisten Sachen abgedeckt. Was du mit "Bildart" meinst, weiß ich allerdings nicht.

Für spezielleres was mit Bildmanipulation zu tun hat und was von dem o.g. nicht abgedeckt wird, müsstest du dich neben den zugehörigen Algorithmen auch mit dem HTML Canvas-Element
https://developer.mozilla.org/en-US/docs/Web/API/Canvas\_API/Tutorial
https://developer.mozilla.org/en-US/docs/Web/API/Canvas\_API

und ggf. mit WebGL (wobei Canvas meist ausreicht)
https://developer.mozilla.org/en-US/docs/Web/API/WebGL\_API/Tutorial
https://developer.mozilla.org/en-US/docs/Web/API/WebGL\_API

auseinandersetzen. Ohne einigermaßen gutes Verständnis von Javascript und HTML kommst du da allerdings nicht weiter.

Ansonsten könntest du vielleicht noch schauen, ob es bereits ein Widget gibt dass deinen Wünschen entspricht und es dann einbinden.

Da du hier die for-in-Schleife ansprichst, gehe ich auch nochmal direkt darauf ein.

Vorab aber: In deinem Falle nicht die beste Methode, nach der du suchst. Du suchst eher nach forEach oder einfach nach einer normalen for-Schleife bei der du einen Integer hochzählst. (Also was bereits schon alles genannt wurde)

Die for-in-Anweisung durchläuft Attribute/Eigenschaften von Objekten. (Also auch Arrays und Co.) Dabei werden nur aufzählbare Eigenschaften durchlaufen. (Was allerdings der Standardfall ist)

Hierbei ist die Reihenfolge jedoch unwichtig/willkürlich, weshalb das ggf. nicht das ist was du möchtest.

Eine Implementation sähe ungefähr wie folgt aus:

for(var id in auto)
console.log(auto[id]);

Der Wert den id erhält ist dabei nicht der Wert des Arrayfeldes, sondern nur der Name der Eigenschaft. (in dem Falle also "0", "1" und "2") Auf den Wert musst du dann manuell zugreifen. (D.h. hierbei handelt es sich nicht wirklich um ein for-each Äquivalent)

Siehe auch:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

Ansonsten gibts noch das neue for-of-Statement das zum ES6-Standard gehört, mit dem das ganze in neueren Browsern auch möglich wäre:

[Code-Beispiel als Antwort hierauf da die Formatierung durcheinandergeraten ist]

Hierbei nimmt die Variable (in dem Falle value) den Wert der jeweiligen Eigenschaft an. Außerdem wird bspw. die Index-Reihenfolge bei den Arrays berücksichtigt, was ja bei for-in nicht der Fall ist.

Aktuell aber noch von Abzuraten, auch wenn das jetzt nicht das absolut neueste ist, aber der Internet Explorer (der ja immer noch genutzt wird) unterstützt das Feature scheinbar nicht.

Siehe auch:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

Es kommt mehr drauf an, was genau du als Fehler betrachtest. Irgendwelche Anzeigefehler aufgrund von nicht mehr unterstützten Features? An sich eher unwarhscheinlich da die meisten Browser diese noch aus Gründen der Abwärtskompatibilität unterstützen. (auch bekannt als "Quirks-Modus")

Das dein Markup am Ende aber möglicherweise nicht mehr gültig bzw. valide ist, kann sein. Um auf Nummer sicher zu gehen, solltest du deinen Code dann entsprechend an HTML5 anpassen.

Falls hilfreich: Ich hatte vor kurzem hier eine etwas längere Antwort geschrieben in Bezug auf einen Wechsel von HTML4 zu HTML5, falls das also von Interesse sein könnte hier der Link:
https://www.gutefrage.net/frage/html-4-zu-html-5#answer-203882589

Es gibt zwei größere Punkte die du beim Wechsel auf HTML5 beachten solltest:

Einerseits wird sehr viel mehr Wert auf die Semantik gelegt, d.h. dass Elemente mehr beschreibend in Bezug auf den Inhalt sind, womit man also den Inhalt besser voneinander abtrennen kann. Beispielhaft "header", footer" und "nav"-Elemente für - offenbar - Header, Footer und die Navigation.

Diese Elemente werden dabei nicht wirklich anders dargestellt als bspw. div-Elemente. Mehr dazu hier:
http://www.w3schools.com/html/html5_semantic_elements.asp

Der zweite Punkt wäre, dass HTML5 nur die Struktur einer Seite beschreibt, d.h. sämtliche Elemente die sich auf die Darstellung von Elementen bezieht, sind in HTML5 nicht mehr gültig. Das gilt auch für Attribute.

So gibt es bspw. das "center"-Element nicht mehr, das "align"-Attribut ist auch ungültig. Elemente die die Schriftart bspw. beschreiben (font-Element) oder die anderweitig die Darstellung festlegen (marquee-Element) gibts auch nicht mehr. Klar werden sie noch im Browser funktionieren, aber das nur weil die Browser das aus Gründen der Abwärtskompatibilität unterstützen. Sie dürften es jederzeit entfernen.

Diese Ganzen darstellerischen Sachen sollten ab jetzt nämlich über CSS erledigt werden, also falls da was spezielles erwünscht ist.

Auch sollte man jetzt zur Textformatierung nicht mehr Elemente wie "b" oder "i" verwenden - diese wurden durch die Elemente "strong" und "em" ersetzt. Was man hier bemerken kann: Die Namen "strong" und "em" (emphasize) geben nur Angaben über die Wichtigkeit derer Inhalte, nicht über die Darstellung wie es "bold" und "italic" tun. Was der Browser daraus macht, bleibt dem selbst überlassen.

Das wären so ziemlich die zwei grundlegendsten Punkte. Ansonsten gibt es immer hier und dort kleinere Änderungen (Doctype ist nur noch <!DOCTYPE html>) bzw. Neuerungen (wie canvas, audio und video) aber darüber wirst du schon irgendwie stolpern.

Weiß nicht, ob es in deinem Anwendungsfall hilfreich sein könnte, denn es handelt sich hierbei um experimentelle Technologie, allerdings möchte ich ergänzend eine CSS-Only Lösung hinzufügen.

Was die Kompatibilität angeht: Die Lösung wird nur vom Firefox weitgehend unterstützt. IE und Safari sollen wohl auch hier und da was umgesetzt haben, allerdings sollten das wohl sehr unfertige Lösungen sein.

Desweiteren werden im Moment größere Änderungen an dem Modul vorgenommen, das heißt also dass einige Eigenschaften sehr wahrscheinlich abgeschafft werden.

Für deinen Fall kann das CSS Modul "CSS Scroll Snap Points Moduel Level 1" von Interesse sein. Dabei lassen sich Snap-Points in einem scrollbaren Container festlegen, zu denen automatisch hingescrollt werden wenn in die entsprechende Richtung gescrollt wird.

Relevant sind dabei die Eigenschaften scroll-snap-type (womit sich die Art und Weise festlegen lässt) und scroll-snap-points-y. (bzw. scroll-snap-points-x bei horizontalem Scrolling)

Letztere Eigenschaft (scroll-snap-points-x bzw. scroll-snap-points-y) fallen übrigens unter den o.g. Änderungen, d.h. diese werden abgeschafft werden.

Hier eine kleine Demo: (Funktioniert wohl nur im Firefox 39+):
https://jsfiddle.net/ke27ffut/

Genauere Informationen kannst du hier entnehmen:
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-points-y
https://developer.mozilla.org/en-US/docs/tag/CSS%20Scroll%20Snap%20Points

Hier ein genereller Überblick über die ganzen Eigenschaften mit Erklärungen: (Funktionieren alle aber nicht zwingend)
https://css-tricks.com/introducing-css-scroll-snap-points/

Und hier nochmal ein Link zur W3C-Spezifikation des Moduls:
https://www.w3.org/TR/css-snappoints-1/

Um dir dabei helfen zu können sind durchaus mehr Informationen nötig. Du redest davon, dass du dabei bist eine App mit Javascript zu entwickeln, d.h. also dass wir hier von einem ungewöhnlicheren Kontext ausgehen. (Da Android Apps bspw. normalerweise in Java programmiert werden etc.) Und ohne das Framework zu kennen, kann dir leider keiner dabei helfen.

Das heißt: Hast du dich nirgends falsch ausgedrückt? Falls dem so sein sollte, dann müsstest du weitere Informationen bspw. zum Framework dass du nutzt geben etc., vielleicht kann dann ja wer weiterhelfen.

Eine Alternative zu den prozentualen Angaben ist die CSS Flexbox. Funktioniert relativ einfach und musst da auch nicht mit floats arbeiten.

Hier mal der MDN-Link dazu:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

Hier liegt wahrscheinlich ein anderes Problem vor (Quellcode wie schon geschrieben bitte auf http://pastebin.com o.ä. Seiten posten, da der Code hier z.T. interpretiert wird) allerdings trotzdem nochmal ergänzend: Text zentrieren über CSS.

<div style="text-align: center">Text</div>

Die anderen Antworten (Zentrieren über das center-Element oder das align-Attribut) sind veraltet bzw. nicht mehr gültig, d.h. sie werden von HTML5 nicht mehr unterstützt. (Auch wenn sie noch funktionieren mögen)

In Javascript ist quasi alles ein Objekt und du kannst Objekte definieren indem du eine entsprechende Funktion erstellst und diese mit dem new-Operator aufrufst. Kannst in der Funktion dann auch ohne Probleme this verwenden.

function Example(b) {
  this.a = 12;
  this.b = b;
  this.foo = function() {
    console.log(this.a+this.b);
  }
}

var obj = new Example(500);
obj.foo(); // Ausgabe: 512

Klassen und Konstruktoren im herkömlichen Sinne gibt es eigentlich nicht, bzw. die Funktionen sind quasi die Klassen und der Inhalt der Funktion quasi der Konstruktor.

Allerdings gibts mit dem ECMAScript 6 Draft welches mittlerweile in den modernsten Browserversionen weitgehend umgesetzt ist auch die Möglichkeit Klassen zu erstellen. Hast da natürlich dann aber das Problem der Browserkompatibilität.

class Example {
  constructor(b) {
    this.a = 12;
    this.b = b;
  }

  foo() {
    console.log(this.a+this.b);
  }
}

let obj = new Example(500);
obj.foo(); // Ausgabe: 512

(Gibt übrigens auch Vererbung:)

class Example2 extends Example {
  constructor(c, ...pars) {
    super(...pars);
    this.c = c;
  }

  bar() {
    this.a *= this.c;
    this.foo();
  }
}

let obj2 = new Example2(3, 500);
obj2.foo(); // Ausgabe: 512
obj2.bar(); // Ausgabe: 536

Bei den Klassen ist zu beachten, dass diese zwingend erst definiert sein müssen, bevor sie benutzt werden können. D.h., folgendes geht nicht:

let obj3 = Example3();
class Example3 {
  constructor() {
    this.a = 500;
  }
}

Die obigen Beispiele hier als Demo: (Benötigte Browserversion: (inkl. spätere Versionen) Chrome 42/49, Firefox 45, Edge 13, Safari 9)

https://jsfiddle.net/j8u54763/

Weiteres zu den Klassendefinitionen findest du hier:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Wenn ich dich richtig verstehe (d.h. du willst die Extension mit einem Userscript so erweitern, dass der Content mittig platziert wird mit gleichmäßigem Abstand zu den Seiten?), dann setzt du einfach über JavaScript die nötigen CSS Werte.

In CSS erreicht man das, indem man der margin-Eigenschaft "0 auto" (d.h. automatische Berechnung des Außenabstandes nach links/rechts und kein Außenabstand nach oben/unten) zuweist und eine Breite für das Element festlegt. Über Javascript also wie folgt:

var reviews = document.getElementById("reviews");
reviews.style.margin = "0 auto";
reviews.style.width = "80%";

Jetzt mal ausgehend davon, dass Tampermonkey da kein großes Drumrum noch zusätzlich braucht, da ich damit noch nie gearbeitet habe.

Bitte Codesnippets möglichst immer extern posten, die hier zu lesen kann sehr anstrengend sein.

Ansonsten einfach genau so wie du das bereits im Code stehen hast über $().attr("contenteditable", true) bzw. false entsprechend. Aber ich nehme mal an dass das nicht die Antwort ist nach der du suchst - daher müsstest du nochmal genauer sagen was du nun willst.

Ich sehe zumindest, dass du das mit dem Umstellen von contenteditable bisher nur in #btn4.click (auf #btn4) machst, erstellst aber oben drüber ein tr-Element wo du contenteditable auf false setzt. Mit anderen Worten: Fällt mir
grad auch schwer zu erraten was du willst.

HTML Code wird ggf. beim Posten hier entfernt (bzw. teilweise interpretiert), daher HTML Code (und eigentlich am besten jede Art von Code) immer extern posten, seis http://pastebin.com, https://jsfiddle.com, https://codepen.io oder ähnliches.

Außerdem wäre es hilfreich zu wissen, was genau passieren soll.