Доброго времени суток!

Мне хотелось бы иметь кнопку,которая выполняла бы вот такую функцию:

При наведении курсора мыши например на #menubar-items или на #toolbar-menubar появлялась бы с анимацией панель вкладок(#PersonalToolbar).
А по умолчанию была бы скрыта.
Не получается воплотить это при помощи Сustom Buttons.При помощи внесения кода в userChrome.css всё выходит.

Вот пример:

#PersonalToolbar:not([customizing]){
    padding: 5px 5px 2px 5px !important;
    opacity: 0.0 !important;
    position: fixed !important;
    top: 0 !important;
    right: 0px !important;
    z-index: 9999 !important;
    width: auto !important;
    -moz-border-radius:0 0 0 10px;
    -moz-box-shadow:-1px 1px 3px #555;
    -moz-transition: all 1s ease-in-out 0s !important;
    background-image: -moz-linear-gradient(top,#D6E2F2, #CAD6E4) !important;
}
#navigator-toolbox:hover #PersonalToolbar, #navigator-toolbox[customizing] #PersonalToolbar{
    top: 81px !important;
    opacity: 1.0 !important;
    -moz-transition: all .33s ease-in-out !important;
}
#navigator-toolbox[customizing] #PersonalToolbar{
    -moz-transition: none !important;
}

Но использование этого кода не удобно.Так как панель вкладок выезжает при наведении на #navigator-toolbox.
То есть при наведении на всю верхнюю часть браузера.А хотелось бы,чтобы панель вкладок выезжала именно при наведении на кокретный элемент.

Можно ли это реализовать при помощи  Сustom Buttons?
Если кто знает,но не имеет времени разобраться то хотябы подскажите ниточку.
А то я слышу звон не знаю где он.

Читая подробно форум и изучая структуру кода пользователей, мой звон становится всё громче.
Я скорее всего найду решение той просьбы,что изложил выше.
Прошу ответьте только в том случае если у вас есть много свободного времени.
Прошу прощение за безпокойство.

questman
вы иностранец и используете какой-то переводчик вроде PROMT?
Вашу проблему можно решить и грамотно составленным CSS стилем.
Прочитайте мою статью "Уроки стилеписания на CSS", где рассказывается про Комбинаторы.

Выделить код

Код:

#PersonalToolbar:not([customizing]):not(:hover) { display: none; }
#toolbar-menubar:hover ~ #PersonalToolbar { display: -moz-box; }
iDev.Pi пишет

questman
вы иностранец и используете какой-то переводчик вроде PROMT?
Вашу проблему можно решить и грамотно составленным CSS стилем.
Прочитайте мою статью "Уроки стилеписания на CSS", где рассказывается про Комбинаторы.

Выделить код

Код:

#PersonalToolbar:not([customizing]) { display: none; }
#toolbar-menubar:hover ~ #PersonalToolbar, #PersonalToolbar:hover { display: -moz-box; }

Я не иностранец.Возможно вы так подумали,что я написал "Я хочу иметь".Обычно так иностранцы говорят "Я ХОЧУ ИМЕТЬ С ВАМИ РАЗГОВОР",что то в этом роде.
Или вы не поняли поговорку "Слышу звон но не знаю где он".Этим я хотел сказать,что немного понимаю но мне нужен толчёк в правильном направлении.
Впреть буду писать по самобытней.
Вашу статью я читал.С неё у меня то и всё начилось.Я имеею ввиду увлечение изменением интерфейса FireFox и прочих фитч.
А код этот не подходит.Мне нужно сделать всё на Custom Buttons.При помощи css это не возможно.

questman пишет

Я не иностранец.Возможно вы так подумали

Нет, я так подумал потому, что столько ошибок не лепят даже пятиклассники.

questman пишет

При помощи css это не возможно.

Возможно. Я предоставил рабочий код. Вот тут я даже устроил разбор того, как он работает.

iDev.Pi пишет
questman пишет

Я не иностранец.Возможно вы так подумали

Нет, я так подумал потому, что столько ошибок не лепят даже пятиклассники.

questman пишет

При помощи css это не возможно.

Возможно. Я предоставил рабочий код. Вот тут я даже устроил разбор того, как он работает.

Я думал это серьёзный форум.
А тут за какие то две ошибки тыкают тебя носом в топик.Тем более это не орфографические ошибки а тупые опечатки.Вот не думал,что получу столько оскорблений.
Хотя сам был предельно вежлив.Если на то пошло,то по числу ошибок мы с вами в одном классе.Заканчиваем начальную школу.
Хочу сообщить,что я разбираюсь в css и я не новичок.То,что я хочу сделать ещё раз повторяю нельзя решить на  css.Это можно сделать только на JavaScript.Поэтому и
написал в раздел о Custom Buttons.Я не когда  не обращаюсь с тупыми и глупыми вопросами.Хотел получит ответ,а получил оценку по русскому языку.
Прочитайте внимательно мою просьбу и код тоже.
Хотя теперь уже не надо.Я всего лишь просил направить меня по правильному пути.А не выполнить тупой запрос,как вы выразились.
Можете удалить эту тему и меня тоже из пользователей.Всё равно вопросы задавать нельзя.Тогда зачем регистрировался,читать можно и так.
 
Скорее всего вам не понравится мой ответ.Но зато порадует,что в нём нет ошибок.

questman
кисо обиделось?

Мой код - без анимации, если не копаться в кривом стиле из 1-ого сообщения, а лишь выполнить озвученное требование, то замена

#navigator-toolbox:hover

на

#toolbar-menubar:hover ~

в коде выполняет это требование.

questman пишет

Скорее всего вам не понравится мой ответ.Но зато порадует,что в нём нет ошибок.

Спасибо, от души посмеялся :lol:

questman пишет

Доброго времени суток!

Мне хотелось бы иметь кнопку,которая выполняла бы вот такую функцию:

При наведении курсора мыши например на #menubar-items или на #toolbar-menubar появлялась бы с анимацией панель вкладок(#PersonalToolbar).
А по умолчанию была бы скрыта.

Использование: положите код в любую Custom Buttons кнопку, в инициализацию. Не обязательно создавать новую CB кнопку, можно использовать уже существующую.

Выделить код

Код:

//Personal Toolbar - auto hide
(function () {
  // выходим, если функция уже выполнялась......
  if (window.bmRun == 'stop') return;
  window.bmRun = String('stop');
  
  //Объявляем 'bmToolbar', 'menubar'.......
  var bmToolbar = document.getElementById("PersonalToolbar");
  var menubar = document.getElementById("toolbar-menubar");
  
  //добавляем обработчики для обработки мышиных событий......
  //если курсор мыши на Панели меню, запускаем функцию 'bmShow'
  menubar.addEventListener('mouseover', bmShow, false);
  //если курсор мыши на странице, запускаем функцию 'bmClose'
  gBrowser.addEventListener('mouseover', bmClose, false);

  //показывать 'Панель закладок'.....
  function bmShow(event) {
  bmToolbar.setAttribute("style", "visibility:visible");
  };

  //убрать 'Панель закладок'.....
  function bmClose(event){
  bmToolbar.setAttribute("style", "visibility: collapse;");
  };

  //убрать 'Панель закладок' при запуске браузера - запускаем функцию 'bmClose'....
  bmClose;
   
  //включить 'Панель закладок' при запуске браузера....
  setToolbarVisibility(bmToolbar, bmToolbar.collapsed);
  
})();
iDev.Pi пишет

questman
кисо обиделось?

Мой код - без анимации, если не копаться в кривом стиле из 1-ого сообщения, а лишь выполнить озвученное требование, то замена

#navigator-toolbox:hover

на

#toolbar-menubar:hover ~

в коде выполняет это требование.

questman пишет

Скорее всего вам не понравится мой ответ.Но зато порадует,что в нём нет ошибок.

Спасибо, от души посмеялся :lol:

Спасибо работает великолепно!.
Если бы код из первого сообщения был прямой,то я тогда не спрашивал бы.
Мне не был знаком знак  ~  в css.Всего объять не возможно.
Немного подредактировал код и получилось просто красота.Теперь при наведении на #toolbar-menubar панель закладок
плавно выезжает слева из за экрана.

P.S
Если в этом сообщении будут ошибки,я не виноват.Ну не работает у меня проверка орфографии в FireFox.Почему,не знаю.Проверяет только английский текст.
"Кисо" будешь называть свою бабу,понял?

14-12-2011 22:28:34

bunda1 пишет
questman пишет

Доброго времени суток!

Мне хотелось бы иметь кнопку,которая выполняла бы вот такую функцию:

При наведении курсора мыши например на #menubar-items или на #toolbar-menubar появлялась бы с анимацией панель вкладок(#PersonalToolbar).
А по умолчанию была бы скрыта.

Использование: положите код в любую Custom Buttons кнопку, в инициализацию. Не обязательно создавать новую CB кнопку, можно использовать уже существующую.

Выделить код

Код:

//Personal Toolbar - auto hide
(function () {
  // выходим, если функция уже выполнялась......
  if (window.bmRun == 'stop') return;
  window.bmRun = String('stop');
  
  //Объявляем 'bmToolbar', 'menubar'.......
  var bmToolbar = document.getElementById("PersonalToolbar");
  var menubar = document.getElementById("toolbar-menubar");
  
  //добавляем обработчики для обработки мышиных событий......
  //если курсор мыши на Панели меню, запускаем функцию 'bmShow'
  menubar.addEventListener('mouseover', bmShow, false);
  //если курсор мыши на странице, запускаем функцию 'bmClose'
  gBrowser.addEventListener('mouseover', bmClose, false);//'mousemove'

  //показывать 'Панель закладок'.....
  function bmShow(event) {
  bmToolbar.setAttribute("style", "visibility:visible");
  };

  //убрать 'Панель закладок'.....
  function bmClose(event){
  bmToolbar.setAttribute("style", "visibility: collapse;");
  };

  //убрать 'Панель закладок' при запуске браузера - запускаем функцию 'bmClose'....
  bmClose;
   
  //включить 'Панель закладок' при запуске браузера....
  setToolbarVisibility(bmToolbar, bmToolbar.collapsed);
  
})();

Спасибо,тоже работает.Немного поправлю под себя и будет класс.
Теперь у меня два решения этой проблемки.
Ещё раз благодарю.

questman пишет

панель вкладок(#PersonalToolbar)

Речь все таки о панели ЗАкладок, а не вкладок.

questman пишет

Теперь у меня два решения этой проблемки.

Если нужно получить быстрый доступ к скрытой по умолчанию панели закладок , то это можно реализовать еще как минимум двумя оригинальными способами:
1. С помощью Сustom Buttons - кнопка Toggle through toolbars, циклический переключатель двух-трех-четырех-... панелей (настроить ее под свои нужды).
2. Создать кнопку использовав этот способ - Как создать вертикальную панель закладок? (проще всего).

Панель закладок будет "выезжать" )) ... но без анимации
Пользуюсь обеими способами, очень удобно. )