Vertikale Lesezeichenleiste, Script und CSS

Mira_Belle

Zitat von 2002Andreas

Zitat von Mira_Belle

frei konfigurierbare Seitenleiste,

Nein, sondern wie er geschrieben hat:

Zitat von Horstmann

positioniert die Lesezeichenleiste als vertikale Liste an die Seite

Ok, Du hast recht!

Das Script reicht es halt nur mit weiteren Funktionen an, z.B. "hovern".

Nachtrag.

Aber, es wäre ja möglich, das Script den Wünschen von Horstmann anzupassen.

Und das "hovern" lässt sich ja ab und anschalten.

Angepasst wäre es ja eine zusätzliche Seitenleiste

und die Firefox interne Sidebar lässt sich dennoch nutzen, wenn man den will.

Zitat von Horstmann

Genau das; eingeblendet reduziert die (zusätzliche) Seitenleiste das Browserfenster, ausgeblendet wächst das Browserfenster wieder zu voller Breite ; ansonsten wäre diese Seitenleiste idealerweise wie eine zusätliche toolbar, nur eben vertikal .
...

Hoffe, Du bekommst das hin.

Endor

Also etwas hätte ich da noch.
Ist noch nicht die ganze Lösung, aber ein Anfang.
Dieses Script fügt eine Vertikale Symbolleiste ein, die mit Schaltfläche ein

und ausgeblendet werden kann. Inhalt, also Schaltflächen usw.

müssen über den Symbolleiste anpassen Dialog eingefügt werden.
Ich habe versucht den Inhalt der Lesezeichenleiste auch rein zu schieben,

das geht, wird aber nicht untereinander dargestellt. Da müsste man dann
mit CSS arbeiten.

Hier das Script ist glaube ich auch von Aborix:

JavaScript

(function() {
/*******************************************************************************/


    if (location != 'chrome://browser/content/browser.xhtml') {
        return;
    }


/*******************************************************************************/

    // Background Color
    var vb_bg_color = '#f6f6f6';
    // Border Color
    var vb_border_color = 'rgb(0,128,0)';
    // Number of columns
    var vb_cols = 1;
    // Visibility on Start
    var vb_visibilityOnStart = 1;

    // Button Icon, if Toolbar is visible
    vb_isVisibleImage = 'url("data:image/x-icon;base64,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")';
    // Button Icon, if Toolbar is hidden
    vb_isHiddenImage = 'url("data:image/x-icon;base64,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")';


/*******************************************************************************/


    var vb_h = window.outerHeight;
    var vb_minH = vb_h/20;
    var vb_maxH = vb_h/2;
    var vb_width = 40;
    var vb_totalwidth = vb_cols * vb_width;


    var vb_style = '\
    box-sizing: content-box !important; \
    background-color: ' + vb_bg_color + ' !important; \
    min-width: ' + vb_totalwidth + 'px !important; \
    max-width: ' + vb_totalwidth + 'px !important; \
    min-height: ' + vb_minH + 'px !important; \
    max-height: ' + vb_maxH + 'px !important; \
    position: absolute !important; \
    right: 17px !important; \
    padding: 5px 0 !important; \
    border: 2px ridge ' + vb_border_color + '; \
    border-radius: 10px !important; \
    z-index: 1 !important; \
    ';

    var vb_element = document.getElementById('navigator-toolbox');
    var vb_toolbar = document.createElement('toolbar');
    vb_toolbar.id = 'fp-toolbar';
    vb_toolbar.setAttribute('customizable', true);
    vb_toolbar.setAttribute('mode', 'icons');
    vb_toolbar.setAttribute('style', vb_style);    
    vb_element.appendChild( vb_toolbar );
    vb_toolbar.setAttribute('collapsed', false);        


    CustomizableUI.registerArea( 'fp-toolbar' , { legacy: true } );
    CustomizableUI.registerToolbarNode(vb_toolbar);


    setTimeout(function(){ 
        var tmp_positionInfo = vb_toolbar.getBoundingClientRect();
        var tmp_height = tmp_positionInfo.height;
        var vb_ptop = ( vb_h - tmp_height ) / 2; 
        vb_toolbar.style.top = vb_ptop + 'px';

        if( vb_visibilityOnStart == 0 ) {
            vb_toolbar.setAttribute('collapsed', true);
        }
    }, 500);    


/*******************************************************************************/


    try {
        Components.utils.import("resource:///modules/CustomizableUI.jsm");
        CustomizableUI.createWidget({
            id: "fp-toggle-toolbar",
            defaultArea: CustomizableUI.AREA_NAVBAR,
            removable: true,
            label: "Vertical Toolbar",
            tooltiptext: "Vertical Toolbar",
                        onClick: function() {
                var node = document.getElementById('fp-toolbar');
                var isCollapsed = node.getAttribute('collapsed');
                if( isCollapsed == 'false' ) {
                    node.setAttribute( 'collapsed' , 'true' );
                    node.style.visibility = 'collapse';
                    document.getElementById(this.id).style.listStyleImage = vb_isHiddenImage;
                } else {
                    node.setAttribute( 'collapsed' , 'false' );
                    node.style.visibility = 'visible';
                    document.getElementById(this.id).style.listStyleImage = vb_isVisibleImage;
                }
            },
            onCreated: function(aNode) {
                if( vb_visibilityOnStart == 1 ) {
                    aNode.style.listStyleImage = vb_isVisibleImage;
                } else {
                    aNode.style.listStyleImage = vb_isHiddenImage;
                }
                return aNode;
            }
        });
    } catch (e) {
        Components.utils.reportError(e);
    };


/*******************************************************************************/
})();

Alles anzeigen

Hoffe das hilft weiter.

Mfg.
Endor

2002Andreas

Zitat von Endor

wird aber nicht untereinander dargestellt.

Hallo Endor.

Das Problem habe ich auch mit dem Script von Aris

Ich habe mal etwas rumgebastelt, funktioniert nicht einwandfrei, aber evtl. kann man das ja als Grundlage nehmen

So sieht das hier aus:

Mit diesem CSS Code zusätzlich:

CSS

#PlacesToolbar {
  transform: rotate(90deg) !important;
   min-width: 50px !important;
}

menuitem.bookmark-item {
    max-width: 160px !important;  
}

#PlacesToolbar menupopup[placespopup="true"]::part(arrowscrollbox) {
  margin-top: 155px !important;
  min-height:  680px !important;
}

Alles anzeigen

Im Script von Aris habe ich außerdem die Zeile 38 geändert zu:

var addonbar_v_width = "180px"; // toolbar width

Nach Installation vom Script, und öffnen vom Anpassenfenster, wird die neue Toolbar waagerecht angezeigt.

Dann muss man den Button aus der Lesezeichensymbolleiste in die neue Leiste verschieben.

Horstmann

Zitat von 2002Andreas

Im Script von Aris habe ich außerdem die Zeile 38 geändert zu:

Zitat von Endor

wird aber nicht untereinander dargestellt.

Hallo Endor.
Das Problem habe ich auch mit dem Script von Aris
var addonbar_v_width = "180px"; // toolbar width
Nach Installation vom Script, und öffnen vom Anpassenfenster, wird die neue Toolbar waagerecht angezeigt.
Dann muss man den Button aus der Lesezeichensymbolleiste in die neue Leiste verschieben.

Alles anzeigen

Das ist noch in Arbeit, gut die Hälfte davon ist entweder unnötig oder muss weiter angepasst werden, aber für's erste bekomme ich die Lesezeicheneinträge damit untereinander dargestellt :

CSS

#PlacesToolbarItems > .bookmark-item > .toolbarbutton-text {
    text-align: start !important;
}

@-moz-document url("chrome://browser/content/browser.xhtml") {


:root:not([inDOMFullscreen]) {
--uc-vertical-toolbar-width: 130px;
}

#PersonalToolbar {
height: 100vh !important;
max-height: 100vh !important;
position: fixed;
display: flex;
flex-direction: column;
left: 0;
width: var(--uc-vertical-toolbar-width);
min-width: var(--uc-vertical-toolbar-width);
z-index: 2 !important;
}


#personal-bookmarks,
#PlacesToolbar,
#PlacesToolbar > hbox {
-moz-box-orient: vertical !important;
}


#PlacesToolbarItems {
display: flex;
flex-direction: column;
/*flex-wrap: wrap;*/
overflow-x: visible;
overflow-y: auto;
}


#PersonalToolbar .toolbarbutton-1 {
padding-block: 10px !important;
}


#PersonalToolbar #PlacesToolbarItems > .bookmark-item {
padding-block: 4px !important;
}


#PlacesToolbarItems {
-moz-window-dragging: no-drag;
}


#PlacesToolbar #PlacesChevron {
display: none;
}
}

Alles anzeigen

Im Prinzip ist das der vertikale Lesezeichen Code vom Otherguy mit minimaler Änderung, was sehr ähnlich ist mit dem CSS für die mehrzeilige Lesezeichenleiste aus dem Forum hier .

Im Aris Skript ist die Breite auf 130px gesetzt, wie Andreas es beschrieben hat , die gleiche Breite habe ich dann erstmal einfach in die CSS gesetzt .

Ebenfalls wie von Andreas beschrieben ist das Vorgehen zum Verschieben der Lesezeichen in die neue Leiste .

Das geht alles noch viel eleganter, und die Abstände der Zeilen in der Lesezeichenleiste werden mit diesem CSS ignoriert, da muss ich wohl noch mit spezifischeren Selektoren rangehen , aber es ist ein Anfang .

Ids aus dem Aris Script zum Spielen, und die Hintergrundfarbe hilft zur Übersicht beim Testen :

CSS

#tooglebutton_addonbar_v {
list-style-image: url("bookmark-cap-32.png") !important;
}


#addonbar_v {
background-color: orange !important;
}

Kleiner Button im Anhang .

Und natürlich nicht zu vergessen : Dankeschön für Eure Hilfe !

Horstmann

Zitat von Endor

Also etwas hätte ich da noch.
Ist noch nicht die ganze Lösung, aber ein Anfang.
Dieses Script fügt eine Vertikale Symbolleiste ein, die mit Schaltfläche ein
und ausgeblendet werden kann. Inhalt, also Schaltflächen usw.
müssen über den Symbolleiste anpassen Dialog eingefügt werden.
Ich habe versucht den Inhalt der Lesezeichenleiste auch rein zu schieben,
das geht, wird aber nicht untereinander dargestellt. Da müsste man dann
mit CSS arbeiten.

Hier das Script ist glaube ich auch von Aborix:
.....
Hoffe das hilft weiter.
Mfg.
Endor

Alles anzeigen

Das ist wirklich pfiffig; veilleicht nicht was ich persönlich für diesen speziellen Zweck benutzen würde, aber eine Bereicherung für die Scriptsammlung , vielen Dank !

Mit dem (groben) CSS von meinem Beitrag davor sitzen die Lesezeichen auch untereinander; die popup Fenster muss man halt dann nach Belieben anpassen .

Aber noch eine spezifische Frage an die Runde :

Ich arbeite weiter an bzw. mit dem Script von Aris , funktioniert soweit prima , nur eines ist etwas unschön : die Übergänge zwischen Leiste auf und Leiste zu sind sehr ruckhaft .

Beim Ein- und Ausblenden der Seitenleiste,während sich das Browserfenster in der Breite anpasst, gibt es keine Animation bzw. transition Phase, und zudem blitzt auf der rechten Seite kurz die Scrollbar auf , nach innen versetzt, bis sich das Fenster komplett justiert hat .

Die reguläre Sidebar zum Beispiel macht das geschmeidiger, wie ja auch zu erwarten ist .

Hättet Ihr evtl. Ideen dazu um das abzumildern ?

Hier nochmal der Link zum Originalscript .

Falls es was bringt ; in den Browserwerkzeugen lässt sich diese CSS für die Aris Toolbar auslesen ( Breite im Script schon auf 130px geändert ) :

CSS

#addonbar_v {
-moz-appearance: none !important;
background-color: var(--toolbar-bgcolor);
background-image: var(--toolbar-bgimage);
background-clip: padding-box;
color: var(--toolbar-color, inherit);
}


#main-window:-moz-lwtheme #addonbar_v {
background: var(--lwt-accent-color) !important;
}


#main-window[lwtheme-image="true"]:-moz-lwtheme #addonbar_v {
background: var(--lwt-header-image) !important;
background-position: 0vw 50vh !important;
}


#main-window:not([customizing]) #toolbox_abv:not([collapsed="true"]),
#main-window:not([customizing]) #addonbar_v:not([collapsed="true"]) {
min-width: 130px;
width: 130px;
max-width: 130px;
}


#main-window[chromehidden="menubar toolbar location directories status extrachrome "] #toolbox_abv:not([collapsed="true"]),
#main-window[chromehidden="menubar toolbar location directories status extrachrome "] #addonbar_v:not([collapsed="true"]),
#main-window[sizemode="fullscreen"] #toolbox_abv:not([collapsed="true"]),
#main-window[sizemode="fullscreen"] #addonbar_v:not([collapsed="true"]) {
min-width: 0px;
width: 0px;
max-width: 0px;
}


#main-window[customizing] #addonbar_v {
outline: 1px dashed !important;
outline-offset: -2px !important;
}


#addonbar_v:-moz-lwtheme {
background: var(--lwt-header-image) !important;
background-position: 100vw 50vh !important;
}


#addonbar_v toolbarbutton,
#addonbar_v toolbar .toolbarbutton-1 {
padding: 0 !important;
}


#addonbar_v {
-moz-border-end: 1px solid var(--sidebar-border-color,rgba(0,0,0,0.1)) !important;
}

Alles anzeigen

uwe_p

Also ich habe dank freundlicher Helfer per CSS meine Sidebar so schön umgestaltet, dass sie immer sichtbar sein soll und für mich nichts anderes darstellt als eine zweite (senkrechte) Lesezeichen-Symbol-Leiste. Dinge wie sidebar-header, sidebar-search-container und die Pfeil-Symbole links unsichtbar gemacht, schöne Trenn-Linien und eine bunte Animation als rechten Rand. Fast eine Sünde, solches vom Bildschirm verschwinden zu lassen , zumal mein 16:10-Bildschirm so viel Horizontale hat gegenüber den vorigen mit 4:3 und 5:4.

Das ist übrigen der Code, welcher die Schönheit erzeugt:

CSS

@-moz-document url("chrome://browser/content/browser.xhtml"),
url("chrome://browser/content/places/bookmarksSidebar.xhtml") {
#bookmarks-view, #sidebar-box, .sidebar-placesTreechildren,
#placesList > treechildren {
-moz-appearance: none !important;
font-size: 14px !important}}

@-moz-document url(chrome://browser/content/places/bookmarksSidebar.xhtml) {
treechildren::-moz-tree-indentation {width: 0 !important}}

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

treechildren {--default-focusring: 0 !important}

.sidebar-placesTreechildren[view="bookmarks-view"] {
margin-top: -72px !important;
margin-bottom: -75px !important}

#sidebar {min-width: 66% !important}

#sidebar-splitter {
width: 3px !important;
border: 0 !important;
background-image: linear-gradient(0deg, red, red, yellow,
lightgreen, cyan, lightblue, violet, red, red) !important;
background-size: 100% 555% !important;
animation: splitter 22s steps(77) infinite !important}

@keyframes splitter {from {background-position: 0 0} to
{background-position: 0 100%}}

.sidebar-placesTree treechildren::-moz-tree-row {
height: 39px !important;
border-bottom: 3px solid #947FA6 !important;
border-top: 3px solid #947FA6 !important;
border-left: 0 !important;
border-right: 0 !important}

.sidebar-placesTree treechildren::-moz-tree-image{margin-left: -18px !important}

treechildren::-moz-tree-cell-text {text-decoration: none !important}

treechildren::-moz-tree-row(hover) {background: #555 !important}

Alles anzeigen

Horstmann

Zitat von uwe_p

Also ich habe dank freundlicher Helfer per CSS meine Sidebar so schön umgestaltet, dass sie immer sichtbar sein soll und für mich nichts anderes darstellt als eine zweite (senkrechte) Lesezeichen-Symbol-Leiste. Dinge wie sidebar-header, sidebar-search-container und die Pfeil-Symbole links unsichtbar gemacht, schöne Trenn-Linien und eine bunte Animation als rechten Rand. Fast eine Sünde, solches vom Bildschirm verschwinden zu lassen , zumal mein 16:10-Bildschirm so viel Horizontale hat gegenüber den vorigen mit 4:3 und 5:4.

Das ist übrigen der Code, welcher die Schönheit erzeugt:

Auch nicht schlecht, obwohl ich selber eher farbneutraler unterwegs bin .

Beim Projekt vertikale Lesezeichenleiste zum Einklappen gibt's auch was Neues ; erstmal hab ich die CSS tapfer und radikal reduziert .

Zusätzlich zum Script von Aris benutze ich nur noch das hier zur groben ersten Anpassung ; die Breite ist im Script eingetragen ( geht auch im CSS ) .

CSS

/*  Bookmarks text left  */

#PlacesToolbarItems > .bookmark-item > .toolbarbutton-text {
text-align: start !important;
padding-left: 6px !important;
}

/*  Bookmarks vertical  */

#PlacesToolbarItems {
display: flex;
flex-direction: column;
}

/*  Bookmarks 1st popup position  */

#PlacesToolbar menupopup:nth-child(1) {
margin-left: 150px  !important;
margin-top: -31px  !important;
}

Alles anzeigen

Zum stylen benutze ich die IDs #addonbar_v , #tooglebutton_addonbar_v, #PlacesToolbar und #personal-bookmarks ; #PersonalToolbar geht nicht, weil man ja die eigentliche Lesezeichenleiste nicht benutzt, sondern die neue #addonbar_v .

Eigentlich logisch, hat aber einen Moment gedauert bis ich drauf kam .

Zum Herumschieben im Symbolleiste anpassen Fenster hilft mir das hier :

CSS

#addonbar_v[customizing] {
background-color: orange !important;
}

Und nach ein paar zusätzlichen Schönheitsreparaturen sieht das Ganze momentan so aus - nicht ausführlich getestet, und wie schon erwähnt ist die Animation der Breitenanpassung beim Ein/Ausklappen etwas grob , aber immerhin .

Mira_Belle

Ich bin mal auf Dein Endresultat gespannt.

Nutzen werde ich sie dann wahrscheinlich nicht, da 27' und ich z.Z. die Lesezeichenleiste per Script ausblende.

Aber wer weis, aus probieren würde ich Dein Ergebnis ja doch schon mal.

Horstmann

Zitat von Mira_Belle

Ich bin mal auf Dein Endresultat gespannt.
Nutzen werde ich sie dann wahrscheinlich nicht, da 27' und ich z.Z. die Lesezeichenleiste per Script ausblende.
Aber wer weis, aus probieren würde ich Dein Ergebnis ja doch schon mal.

Welches Script benutzt Du denn dafür ?

Ich habe dieses hier im alltäglichen Gebrauch, für die normale horizontale Lesezeichenleiste .

Mira_Belle

Zitat von Horstmann

Welches Script benutzt Du denn dafür ?
Ich habe dieses hier im alltäglichen Gebrauch, für die normale horizontale Lesezeichenleiste .

Jup, genau dieses!

Kann mir jemand etwas einfügen, damit die Leiste per default ausgeblendet ist?

Oder geht das nicht?

Horstmann

Zitat von Mira_Belle

Jup, genau dieses!
Kann mir jemand etwas einfügen, damit die Leiste per default ausgeblendet ist?
Oder geht das nicht?

Genau das habe ich auch kürzlich ausprobiert ; hier ist was bei mir zu funktionieren scheint :

Im Script habe ich in den oberen Zeilen das hier verändert bzw. eingefügt ( Vorsicht, ich habe keine Ahnung vom Scripten ! ) :

JavaScript

// JavaScript Document
//Button_PersonalToolbar.uc.js


var d2 = document.getElementById('PersonalToolbar');


(function ptbut() {


if (location != 'chrome://browser/content/browser.xul' && location != 'chrome://browser/content/browser.xhtml')
return;
d2.style.visibility = "collapse";
try {
CustomizableUI.createWidget({ ........

Alles anzeigen

Also nur die beiden Zeilen ( hier: 5 und 13 ) eingefügt .

Aber wie gesagt, ich habe keine Ahnung davon, hab das nur von einer anderen Version des Scripts übernommen und mit etwas rumprobieren reinkopiert .

Ein Experte kann Dir sicher eine sauberere Lösung anbieten , wäre vielleicht auch was für den originalen Thread .

Mira_Belle

Danke für den Tipp!

Habe mir meinen Beitrag #4 noch mal angesehen,

und mir fiel es wie Schuppen von den Augen.

Schaut jetzt bei mir so aus!

JavaScript

// JavaScript Document
//Button_PersonalToolbar.uc.js
// Source file https://www.camp-firefox.de/forum/thema/134920-schaltfl%C3%A4che-um-lesezeichen-leiste-ein-auszublenden/?postID=1205823#post1205823

 
    var off = document.getElementById('PersonalToolbar');
    off.style.visibility = "collapse";


(function ptbut() {

Funktioniert.

Ob's richtig ist ¯\_(ツ)_/¯

Horstmann

Zitat von Mira_Belle
Danke für den Tipp!
Habe mir meinen Beitrag #4 noch mal angesehen,
und mir fiel es wie Schuppen von den Augen.
Schaut jetzt bei mir so aus!
JavaScript
// JavaScript Document
//Button_PersonalToolbar.uc.js
// Source file https://www.camp-firefox.de/forum/thema/134920-schaltfl%C3%A4che-um-lesezeichen-leiste-ein-auszublenden/?postID=1205823#post1205823

 
    var off = document.getElementById('PersonalToolbar');
    off.style.visibility = "collapse";


(function ptbut() {
Funktioniert.
Ob's richtig ist ¯\_(ツ)_/¯
Alles anzeigen

Cool, funktioniert bei mir auch , Danke !

Mira_Belle

Ich bekomme es einfach nicht gebacken!

Es gibt eine Funktion in JavaScript um Elemente auszublenden.

function hide_elements()

im zusammenspiel mit document.getElementById(elementName).style.display='none';

Aber ich bekomme es einfach nicht hin.

Hier mal der komplette Code.

JavaScript

// Elemente ausblenden
// Mit show_elements() können einzelne oder mehrere Elemente
// via hide_elements('ElementIDone','ElementIDtwo','ElementIDthree')
// ausgeblendet werden.
function hide_elements()
 {
  var elementNames = hide_elements.arguments;
  for (var i=0; i<elementNames.length; i++)
   {
     var elementName = elementNames[i];
     document.getElementById(elementName).style.display='none';
   }
 }

Alles anzeigen

Quelle

Sören Hentzschel

Es wäre sicher hilfreich, wenn du den relevanten Code zeigen statt nur andeuten würdest. So lässt sich dazu ja nichts sagen. Dein Beitrag jetzt ist der einzige im gesamten Forum, in dem hide_elements vorkommt.

Mira_Belle

Zitat von Sören Hentzschel

Es wäre sicher hilfreich, wenn du den relevanten Code zeigen statt nur andeuten würdest. So lässt sich dazu ja nichts sagen. Dein Beitrag jetzt ist der einzige im gesamten Forum, in dem hide_elements vorkommt.

Sorry, musste zwischendurch was erledigen.

Hatte aber vor den Code, bzw. auch die Quelle zu nennen.

Sören Hentzschel

Und was ist der Aufruf der Funktion, der letztlich nicht funktioniert?

Horstmann

Zitat von Mira_Belle

Ich bekomme es einfach nicht gebacken!
Es gibt eine Funktion in JavaScript um Elemente auszublenden.
function hide_elements()
im zusammenspiel mit document.getElementById(elementName).style.display='none';
Aber ich bekomme es einfach nicht hin.

Jeztz bin ich etwas verwirrt - geht's dabei um die ursprüngliche Frage - das Anpassen des Browserfensters beim Schliessen einer seitlichen Leiste ?

Mira_Belle

Zitat von Sören Hentzschel

Und was ist der Aufruf der Funktion, der letztlich nicht funktioniert?

Dir Frage ist so wie sie da steht falsch gestellt.

Ich nutze das Button_PersonalToolbar.uc.js, nur ist beim Start des Firefox

die Lesezeichen-Symbolleiste sichtbar.

Als Notlösung haben "wir", wie hier beschrieben

einfach eingefügt.

Auch wenn es funktioniert, bin ich mir sicher, dass das so nicht richtig ist.

Also habe ich mich auf die Suche gemacht und bin über diesen Code gestolpert.

Nur leider, was auch immer ich versuchte, ich bekam es einfach nicht gebacken,

diesen in das JavaScript Button_PersonalToolbar.uc.js unter zubekommen,

sodass es auch funktioniert!

Zitat von Horstmann

Jeztz bin ich etwas verwirrt - geht's dabei um die ursprüngliche Frage - das Anpassen des Browserfensters beim Schliessen einer seitlichen Leiste ?

Letztendlich auch.

Horstmann

Zitat von Mira_Belle

Ich nutze das Button_PersonalToolbar.uc.js, nur ist beim Start des Firefox
die Lesezeichen-Symbolleiste sichtbar.
Als Notlösung haben "wir", wie hier beschrieben
einfach eingefügt.

In dem Thread zum Toggle Button ist die Festlegung vom Startzustand eigentlich schn öfters definiert worden, in den Scripts die gepostet wurden.

BrokenHeart hat eine super Variante angeboten, die das Problem mit der mehrere Fenster übergreifenden Buttonfunktion löst .

Nur der Startzustand war dabei weggefallen , war aber ja auch nicht angefragt .

Beide unserer Notlösungen scheinen zu funktionieren, zumindest auf meiner Seite ; die Frage scheint mir eher ob man den Code eleganter einpflegen kann, als dass man eine komplett andere Lösung braucht .

Vertikale Lesezeichenleiste, Script und CSS

Ähnliche Themen

Lesezeichen-Popups einfärben und Buttons näher zusammenrücken.