Sidebar Hover Code anpassen

Zitat von BrokenHeart

Bitte testen:

Hast du sehr gut gemacht, funktioniert wie erwünscht und gedacht

BrokenHeart:

Das Skript funktioniert bestens. Nur wird damit ignoriert, dass ich die Sidebar rechts haben möchte. Kannst du das auch noch ermöglichen?

Ich oute mich jetzt mal und frage nach, wie genau ich das Script nutze. Ich habe es in meine userChrome.css gepackt. Aber Firefox zeigt mir keine Sidebar an. Wollte es einfach mal probieren ... Hab das sicher falsch gemacht, oder?

Zitat von DenalB

Ich habe es in meine userChrome.css gepackt.

Die Datei hat nichts mit Skripten zu tun.

Du hast die Vorbereitung zur Nutzung von Scripten im Firefox gemacht?

Lies das bitte mal dazu:

Vorbereitung zur Nutzung von Scripten

andreas:

Dein Code funktioniert auch, aber ebenso am linken Rand statt rechts.

Sollte man eher JS oder CSS verwenden?

Zitat von 2002Andreas

Die Datei hat nichts mit Skripten zu tun.

Hätte ich mir auch denken können ... Das Eine sind CSS-Deklarationen und das Andere sind Java Skripte. Ich Dummerchen.

Zitat von 2002Andreas

Du hast die Vorbereitung zur Nutzung von Scripten im Firefox gemacht?

Natürlich nicht. Hatte mich damit bisher noch gar nicht beschäftigt. Das gepostete Ergebnis als Bild sah aber super aus und da wollte ich das einfach mal eben probieren.

Also nehme ich mir als Nächstes deinen Link zur Brust. Danke!

Zitat von geldhuegel

Sollte man eher JS oder CSS verwenden?

Bei CSS funktioniert das reinziehen mit Öffnung der Sidebar nicht.

Bei dem Skript dagegen schon.

Zitat von DenalB

als Nächstes deinen Link zur Brust.

Ganz in Ruhe machen, dann klappt das auch.

Zitat von geldhuegel

dass ich die Sidebar rechts haben möchte.

Ich kann dir dafür nur einen CSS Code anbieten.

Wenn du magst, dann teste bitte mal.

/*Sidebar rechte Seite per hover*/

#menu_bookmarksSidebar {
     display: -moz-box !important;
}

#bookmarks-view-children {
     margin-top: -160px !important;
     margin-left: -15px !important;
}

#sidebar-header {
    display: none !important;
}

#sidebar-search-container {
    display: none !important;
}

#sidebar-box {
  position: relative;
  min-width: 3px !important;
  max-width: 3px !important;
  z-index: 1;
}

#sidebar-splitter { 
  display: none;
}

#sidebar-header {
  overflow: hidden;
  padding: 0 !important;
}

#sidebar-box { 
  direction: rtl !important;
}

#sidebar-header,
#sidebar {
  background-color: inherit !important;
  border-left: 1px solid grey !important;
  transition: min-width 300ms linear 5s !important; /*Zeit raus - rein*/
  min-width: 3px !important; 
}

#sidebar-box:hover > #sidebar-header,
#sidebar-box:hover > #sidebar {
  min-width: 230px !important;
  transition-delay: 100ms !important;
}

Du musst dann aber erst die Sidebar öffnen, dann den Link reinziehen.

Wichtig:

Das in #40 gepostete Skript habe ich wieder gelöscht, da es fehlerhaft ist. Das Skript arbeitet zwar (soweit ich das testen konnte) problemlos, aber wenn man das Skript wieder aus dem Chrome Ordner entfernt, so bleiben Einstellungen für die Sidebar erhalten, die sich nicht so einfach wieder rückgängig machen lassen. Es wird. z.B. die Höhe des Sidebar-Inhalts auf die letzte Fenstergröße reduziert bzw. erweitert. Dieses Verhalten zeigt sich nur in FF107+ (frühere Versionen, außer der ESR, habe ich nicht). In der ESR zeigt sich dieses Verhalten nicht!

Ich möchte jedem, der das Skript aus #40 ausprobiert hat, dringend raten, das Skript zu löschen und nachfolgendes Reset-Skript einmal zu starten, auch wenn man keine Änderungen an der Sidebar festgestellt hat! Mit dem kleinen Skript werden einfach alle Positions- und Größenangaben der Sidebar wieder auf die Standardwerte gesetzt. Natürlich sollte vor Neustart das fehlerhafte Skript aus dem chrome Ordner entfernt werden. Nachdem die Standardwerte wieder hergestellt wurden, bitte das Reset-Skript wieder aus dem chrome Ordner entfernen, da sonst die Standardwerte bei jedem Start wieder gesetzt werden.

Sorry für die Unannehmlichkeiten! Ich werde das Skript überarbeiten und dann eine neue Version hier wieder einstellen...

"use strict";

(function() {

    if (!window.gBrowser){
        return;
    }

    let sidebarBox = document.querySelector('#browser>#sidebar-box');
    let sidebar = document.querySelector('#browser>#sidebar-box>#sidebar');
    
    //Reset -----
    sidebarBox.style.minHeight = "";
    sidebarBox.style.maxHeight = "";
    sidebarBox.style.marginLeft = ""; 
    sidebarBox.style.marginRight = ""; 
    sidebarBox.style.width = "";
    sidebarBox.style.height = "";
    sidebar.style.minHeight = "";
    sidebar.style.maxHeight = "";
    //Reset -----

}) ();

BrokenHeart:

Danke für die Info!

Ich hatte in dem CSS Teil deines Skripts noch top: 125 eingefügt damit die Sidebar nicht so weit oben anfängt. Das hat aber keine Auswirkungen gehabt. Habe ja auch vom Programmieren keine Ahnung.

Wäre so etwas, neben dem "Sidebar rechts" auch möglich?

Ich hoffe, dass meine Wünsche nicht unverschämt sind. Ist doch bald Weihnachten.

Zitat von geldhuegel

"Sidebar rechts"

Beitrag Nr. 48 hattest du mal getestet?

Zitat

Du musst dann aber erst die Sidebar öffnen, dann den Link reinziehen.

Das war bei deinem alten Code auch so.

Wie ich deinen Zusatzcode #48 verwenden soll weiß ich nicht so recht. Füge ich ihn mit dem aus #28 zusammen oder rufe ich ihn gesondert auf: ich habe dann keine Sidebar mehr.

Zitat von geldhuegel

Füge ich ihn mit dem aus #28 zusammen oder rufe ich ihn gesondert auf

Nur den Code aus Beitrag Nr. 48 nehmen.

Danke. Das hatte ich vollkommen falsch verstanden.

Der Code aus #48 arbeitet prima. Ich habe in sidebar-box noch top: 70; eingefügt, in Zeile 37 auf 3 sek verkürzt und min-width in Zeile 38 auf 300px erhöht. Da ich Header und die Suche angezeigt haben will, habe ich die entsprechenden Zeilen entfernt.

2002Andreas ich danke dir von Herzen.

Jetzt bin ich mal gespannt, ob BrokenHeart nochmal mit einem Skript kommt.

Zitat von geldhuegel

ich danke dir von Herzen.

Freut mich wenn ich dir damit helfen konnte, war wie immer gern geschehen

PS:

Hat ja leider eine ganze Weile gedauert bei mir.

Zitat von geldhuegel

Jetzt bin ich mal gespannt, ob BrokenHeart nochmal mit einem Skript kommt.

Momentan leider nicht, da ich das Problem, welches ich in #49 beschrieben habe, nicht lösen konnte. Auch wenn das Skript wirklich gut funktioniert, so kann ich hier kein Skript veröffentlichen, welches dauerhaft Größenangaben zur Sidebar ändert. Diese Änderung wird erst sichtbar, wenn man das Skript wieder entfernt und kann dann nur noch mit einem 2. Skript wieder rückgängig gemacht werden.

In der FF102 ESR gibt es diesen Effekt nicht und ich weiß einfach nicht, was ich anpassen muss, dass es auch in den aktuellen Release/PreRelease-Versionen funktioniert...

Jede Größenanpassung der Sidebar durch den Benutzer wird vermutlich persistent in der 'xulstore.json' gespeichert. Die Erkenntnis als solches, bringt mich aber auch nicht weiter, da ich nicht konkret weiß, was sich geändert hat...

Ist die Speicherung in Bezug auf die Sidebar jetzt ein neues Verhalten?

Wie definiert man denn in dem Code, ab wann beim Hovern die Sidebar eingeblendet wird? Mir ist es noch zu "weit" eingestellt, also es soll nur erscheinen, wenn ich mit der Maus näher am linken Rand bin. Mein Code:

@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xhtml"),
url("chrome://browser/content/browser.xhtml") {
    
#bookmarks-view,sidebarheader,#sidebar-box,.sidebar-placesTreechildren,#sidebar-search-label,#sidebar-search-container,#placesList > treechildren{
appearance: none!important;
background:#d1cdc8!important}

#menu_bookmarksSidebar {
     display: -moz-box !important;
     }

#bookmarks-view-children {
     margin-top: -120px !important;
     margin-left: -15px !important;
    }

#sidebar-header {
    display: none !important;
    }

#sidebar-search-container {
    display: none !important;
    }

#sidebar-box {
    display: block !important;
    position: fixed!important;
    top: 116px;
    bottom: -35px;
    width: 0px !important;
    overflow-x: hidden !important;
    appearance: none !important;
    border: 1px solid transparent !important;
    border-left: 0 !important;
    opacity: 0 !important;
    transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
    }

#sidebar-box:hover {
    z-index: 3 !important;
    width: 230px !important; 
    opacity: 1 !important;
    transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
    }

Zitat von testerer

Mir ist es noch zu "weit" eingestellt

Das ist ja auch den alte Code denn du nutzt.

Darum gibt es ja jetzt extra neue

Teste bitte:

/*Sidebar per hover*/

#sidebar-box {
  margin-left: -4.5px !important; /*Abstand zum Rand links, evtl. anpassen*/
  position: relative;
  min-width: 0 !important;
  max-width: 0 !important;
  z-index: 1;
}

#sidebar-splitter { 
  display: none;
}

#sidebar-header {
  overflow: hidden;
  padding: 0 !important;
}

#sidebar-header,
#sidebar {
  background-color: inherit !important; /*Hintergrundfarbe vom Theme*/
  border-right: 5px solid transparent !important; /*Rahmen rechts für die Mausberührung, wichtig bei eigener Farbe für den Hintergrund der Sidebar*/  
  transition: min-width 300ms linear 3s !important; /*Zeit für raus/rein*/
  min-width: 0 !important; 
}

#sidebar-box:hover > #sidebar-header,
#sidebar-box:hover > #sidebar {
  min-width: 230px !important;
  transition-delay: 100ms !important; /*Zeit für raus*/
}

Der geht, aber das Verhalten beim Einblenden ist "langsamer" als vorher. Kann man es anpassen, dass sie schneller erscheint und verblasst?

Zitat von testerer

schneller erscheint und verblasst?

Verblasst wird mit dem Code nichts.

Ansonsten mal die Werte in Zeile:

24 und 31 ändern.