Seitenpanel als Overlay?
-
Hallo,
gibt es eine Möglichkeit Seitenpanel als Overlay zu zeigen, damit beim ausklappen die Webseitenansicht nicht verunstaltet wird.
Ich glaub ich bin einer der wenigen, der noch Monitor mit einem Seitenverhältnis von 4:3 benutzt. Der Platz ist also kostbar und Panel soll nur bei Bedarf ausgeklappt werden. Das Ausklappen ist super animiert und so stört aber trotzdem. Wäre super, wenn eine Möglichkeit gäbe Panel als so Art Menü zu öffnen (welches dann von selbst verschwindet).
Vielen Dank im Voraus!
-
https://forum.vivaldi.net/topic/10590/overlay-panels/36?page=2
Erledigt den ersten Wunsch. Am Menü wird noch gearbeitet, auch gibt es eine Möglichkeit das gesamte Panel verschwinden zu lassen, wenn der Mauszeiger nicht darüber ist. -
@nase38 Dein Code hat schwerwiegende Fehler. Zuallererst einmal hast du zweimal vergessen korrekt zu kommentieren/unkommentieren
/transition: max-width 0.5s ease 0.5s, opacity 0s ease 1.1s;/
/transition: max-width 0.5s ease 0s;/
aber selbst wenn ich das berichtige, bekomme ich nur einen grauen Hintergrund in Vivaldi -- kein einziger Seiteninhalt wird angezeigt, und das Panel ist sowieso nicht zu sehen. -
@luetage
Kannst Du mir das genau erklären was ich wohin einfügen muss, damit das mit den Overlay funktioniert. -
Die Erklärung gibts hier: https://forum.vivaldi.net/topic/10549/modding-vivaldi/
Für diesen Mod brauchst du nur eine Datei namens
custom.js
erstellen, den Code einfügen und im Vivaldi Programm direkt im Vivaldi Ordner (nicht style Ordner) speichern. Dann selbige Datei imbrowser.html
Code aufrufen. -
Okay, und welchen Code soll ich da einfügen?
Auf der verlinkten Seite sind einige Codes... -
Probier einfach alle aus und verwend den der dir am ehesten zusagt. Allerdings ist der Link direkt zu einem js-mod, alles andere sind css mods.
-
Ah, jetzt hab ich es bzw ich hatte es falsch verstanden.
Hatte angenommen das wenn man mit dem Mauszeiger über die Reiter (Lesezeichen, Download usw) beim Panel fährt, das sich diese Menüs automatisch öffnen/schließen, das wäre auch ein geiles Feature :-). -
@rayzon Ich denke, ein Öffnen auf :hover ließe sich programmieren. Bin mir auch nicht sicher, ob das nicht jemand schon versucht hat. Hmmm
-
@luetage said in Seitenpanel als Overlay?:
https://forum.vivaldi.net/topic/10590/overlay-panels/36?page=2
Erledigt den ersten Wunsch. Am Menü wird noch gearbeitet, auch gibt es eine Möglichkeit das gesamte Panel verschwinden zu lassen, wenn der Mauszeiger nicht darüber ist.Super Mega Cool! Hat wunderbar funktioniert!
Anleitung auf Deutsch, für "Nichtprogrammierer"
1: man sucht wo vivaldi installiert ist. In meinem Fall brauche ich den Ordner C:/Benutzer/[Name]/Local/Vivaldi/Application/1.13.1008.32/resources/vivaldi
2: In diesem Ordner erstellt man eine Datei namens z. B. overlay-panel.js
3: in diese Datei kopiert man den Inhalt aus dem Post (das große dunkle Fenster):
https://forum.vivaldi.net/topic/10590/overlay-panels/37?page=2Notiz: Will man, dass Overlay-Modus von Haus aus immer aktiviert ist - ersetzt man den Absatz "// startup setting" durch den Code darunter (nächstes kleine dunkle Fenster) "// startup in overlay mode" komplett
4: Datei schließen und speichern
5: Man öffnet demnächst die Datei (gleich hier im Ordner) browser.html, dort sucht man nach so etwas ähnlichem wie "<script src="bundle.js"></script>" (so werden die Skripte gestartet) und fügt eine neue Zeile gleich darunter (oder darüber, ist egal, Hauptsache noch vor "</body>") mit dem Inhalt "<script src="overlay-panel.js"></script>" (so starten wir das unsere Skript)
6: Vivladi neustarten
7: Enjoy
-
Hi,
also wenn ich den Browser öffne ist das Overlay immer deaktiviert, obwohl ich die Zeile geändert hab...?
Version: 1.13.1008.21 (Offizieller Build) (64-Bit) -
Mach einfach eine Kopie des Inhalts deiner
custom.js
Datei und füg sie hier ein.
Dann kann ich dir wahrscheinlich sagen, warum es nicht funktioniert.
Bitte einen Code-Block erstellen der mit einer Zeile der Zeichen ``` beginnt und mit einer Zeile ``` endet -
setTimeout(function wait() { var adr = document.querySelector(".toolbar-addressbar.toolbar"); if (adr != null) { // Panel Overlay Toggle var switchS = document.getElementById('switch'); var btnS = document.createElement('button'); var svgS = document.createElementNS("http://www.w3.org/2000/svg", "svg"); var pathS = document.createElementNS("http://www.w3.org/2000/svg", "path"); var circE = "d: path('M 13 13m -6, 0a 6,6 0 1,0 12,0a 6,6 0 1,0 -12,0 M 13 13m -4, 0a 4,4 0 1,0 8,0a 4,4 0 1,0 -8,0 M 13 13m -2, 0a 2,2 0 1,0 4,0a 2,2 0 1,0 -4,0'); fill-rule: evenodd"; var circD = "d: path('M 13 13m -5.5, 0a 5.5,5.5 0 1,0 11,0a 5.5,5.5 0 1,0 -11,0 M 13 13m -2, 0a 2,2 0 1,0 4,0a 2,2 0 1,0 -4,0'); fill-rule: evenodd"; var csso = '#main .inner{position:relative}#panels-container{position:absolute;z-index:1;top:0;bottom:0}.toolbar-addressbar.toolbar{z-index:2}#panels-container.right{right:0}#panels-container.left + #webview-container,#panels-container.left ~ #tabs-container.left{margin-left:34px}#panels-container.right ~ #webview-container,#panels-container.right ~ #tabs-container.right{margin-right:34px}#browser.tabs-right #webview-container{margin-right:0}#panels-container.left.switcher + #webview-container,#panels-container.left.switcher ~ #tabs-container.left{margin-left:0}#panels-container.right.switcher ~ #webview-container,#panels-container.right.switcher ~ #tabs-container.right{margin-right:0}#browser.tabs-right #webview-container{margin-right:0}#browser.fullscreen #webview-container,#browser.fullscreen #tabs-container{margin-left:0 !important;margin-right:0 !important}#browser.fullscreen #panels-container{position:relative}'; btnS.classList.add('preferences'); btnS.id = 'overlay'; btnS.setAttribute("tabindex", "-1"); svgS.setAttributeNS(null, "width", "26"); svgS.setAttributeNS(null, "height", "26"); svgS.setAttributeNS(null, "viewBox", "0 0 26 26"); switchS.lastChild.style = "margin-top: 0px"; switchS.insertBefore(btnS,switchS.lastChild); btnS.appendChild(svgS); svgS.appendChild(pathS); // startup in overlay mode var styleS = document.createElement('style'); styleS.type = 'text/css'; styleS.innerHTML = csso; document.getElementsByTagName('head')[0].appendChild(styleS); btnS.setAttribute("title", "Disable Overlay"); pathS.style = circE; var mode = 1; // toggle logic document.getElementById('overlay').addEventListener('click', function() { if (mode == 0) { styleS.innerHTML = csso; btnS.setAttribute("title", "Disable Overlay"); pathS.style = circE; mode = 1; } else { styleS.innerHTML = ''; btnS.setAttribute("title", "Enable Overlay"); pathS.style = circD; mode = 0; } }); } else { setTimeout(wait, 300); } }, 300);
-
Der obere und untere Teil haben es nicht in die "Box" geschafft.
Weiß nicht wie man das komplett anzeigen kann? -
Du musst den gesamten Code zwischen die Zeichen legen. Ist aber auch egal. Ich hab mein ganzes Setup gelöscht und deinen Code verwendet. Browser startet im Overlay Modus. Auch neue Fenster werden im Overlay Modus gestartet. Code ist richtig, überrascht mich, dass es bei dir nicht klappt.
Nur so als Zusatz: Habe seitdem den css Teil des originalen Codes geändert, du verwendest derzeit eine überholte Version -- behebt ein Problem in Fullscreen und mit Such-Leiste. Hat aber nichts damit zu tun, dass der Start bei dir im Normal Modus abläuft.
-
Seltsam das es bei nicht funktioniert...
Welche Zeichen sind das?
Was meinst Du mit überholt? Ist halt Stock. -
@luetage said in Seitenpanel als Overlay?:
Bitte einen Code-Block erstellen der mit einer Zeile der Zeichen
```
beginnt und mit einer Zeile```
endet@Gwen-Dragon editierte meinen Beitrag und fügte diesen Satz hinzu. Das Forum verwendet Markdown:
http://commonmark.org/help/
Moderatoren sind offenbar dazu angehalten sicherzustellen, das etwaiger Code auch benutzerfreundlich dargestellt wird.Mit überholt meine ich, dass ich meinen Post editiert habe, und der Code nun neu ist. Jedenfalls der css Teil. Du besuchst einfach noch einmal diesen Link
https://forum.vivaldi.net/topic/10590/overlay-panels/37?page=2
und kopierst den Code erneut. -
@gwen-dragon Du hast den Code aber falsch formatiert -- Der gesamte Beitrag ist ein einziger Block. Anfang und Ende sind noch immer exkludiert
-
Auch muss/darf? ich etwas beifügen. Die Code Darstellung in diesem Forum ist unpraktisch und fehlerbehaftet. Was meine ich damit? Unpraktisch, weil man den Code nicht lesen kann. Es gibt keine automatischen Line-Breaks und man muss immer scrollen (horizontal so wie vertikal). Und fehlerbehaftet, weil man den Code nicht mit einem Kürzel auswählen kann. Ich habe es nicht nur einmal erlebt, dass jemand behauptet Code funktioniert nicht, und dann stellt sich heraus der Nutzer hatte ein paar Zeilen vergessen. Dieser Umstand kommt zu Stande, gerade weil man scrollen muss. Und scrollen und auswählen sind halt zwei Umstände, die nicht gut zusammengehen.
Nun ist mir bewusst, dass es diese Code Darstellung gibt, um zu verhindern, das es unendliche Schlangen von Code auf einer Seite gibt. Darum wäre eine mögliche Lösung Spoiler für Code einzuführen: Wenn man den Spoiler öffnet sieht man den ganzen Code (formatiert, mit automatischen Zeilenumbrüchen und ohne jegliches scrollen).
Geschätzte Leserschaft: Danke für Ihre Aufmerksamkeit ^^
-
Also ich habe es doch noch hinbekommen (war natürlich ein Fehler von mir...) :-).