Profruit banner

Умен звънец в openHAB

16 декември 2023

Телефонът е винаги с мен и сега, където и да се намирам получавам известие от openHAB, че някой е позвънил и чака пред вратата. А ако ме няма вкъщи става ясно часа и датата на последното позвъняване.

Tasmota Multipress

30 септември 2023

Идеята е Sonoff Touch T1 US 2 в салона, да управлява освен своето осветление и това в кухнята, а още вентилатора.

DIY 12V 1A WiFi Router UPS

22 април 2023

При поредно прекъсване на захранването вкъщи, батерията на нoтбука и двата UPS автоматично превключват на аварийно захранване и едновременно полита съобщение за конфуза

Zigbee2MQTT клониране

21 януари 2023

... как да клонираме съществуваща настройка на Zigbee2MQTT без да се налага последвало интервю на zigbee-устройствата.

LD2410 - бюджетен датчик присъствие в openHAB

11 февруари 2023

Цената на HLK-LD2410 зададе име на поредната тема в моя блог. С негова помощ се постига "народен" датчик присъствие в домашната автоматизация. . ...


Идеята на подобен бутон е да върне потребителя от дъното на страницата към нейното начало, нещо като навигация. За целта до този момент ползвах възможностите само на HTML. Увлечен от възможностите на jQuery реших да разчупя модела и го поднеса в по-добра светлина, а заедно покажа как става на мой задморски приятел. Всеки друг заинтересуван да се чувства приобщен.

jQuery ще модифицира бутона по следния начин. Когато сме горе в прозореца на браузъра или върнали в това място, бутонът ще бъде невидим и няма да дразни окото с неуместното си присъствие. Спуснем ли се надолу по документа, бутонът ще изплува в конкретна точка на браузъра, предлагайки сервис.

В мрежата се срещат редица готови решения. Аз обаче ги намирам за несъвършени. Те работят само при включен интерпретатор в браузъра. А е повече от ясно, че битуват и такива оригинали, които чули с края на ухото си, изключват изпълнение на javascript под претекст, че така са по-неуязвими в мрежата. Това ме накара да помисля и за тях, и решението се сведе до обединения на старото с новото.


A-Ha - Don't Do Me Any Favours
В качеството на интерактивен елемент използвам указател (link), който се цели в котва. Това е познат начин и ще работи при изключен JavaScript. Цел на нашия бутон е обичаен div, разполoжен непосредствено след таг <body>.

НА РАБОТА


HTML структура

<html>
 <head>
<script src="jquery.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
 </head>
<body>
<div id="ontop"><noscript><p>javascript is off</p></noscript></div>
 <div id="wrapper">
  <div id="header"></div>
  <div id="content"></div>
  <div id="footer"></div>
 </div>
<div id="backtotop" title="Нагоре"><a class="katapult" href="#ontop" ></a></div>
</body>
</html>
div-елементът има присвоен идентификатор под име ontop. Идентификаторите предлагат удобството да бъдат цел. Отделно ще го стилизираме с CSS. div-елементът съдържа тагове <noscript></noscript>. Тези тагове сработват при изключена поддръжка на скриптове. Вътре между тях е поместен параграф, който ще напомня на потребителя за изключен JavaScript. Например, "Вашият браузър не поддържа JavaScript!".

CSS

#backtotop {
    position: fixed;
    bottom: 10px;
    right:10px;
}
   a.katapult {
    width: 25px;
    height: 25px;
    background: url("image.gif") no-repeat 0 0;
    display: block;
}
   a.katapult:hover {
    background-color: #f5ec82;
    border: 1px solid red;
    -webkit-transition: 2s;
    -moz-transition: 2s;
    transition: 2s;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
   noscript p {
    background-color: #FFFCDF;
    border-bottom: 1px solid #303134;
    color: #DC6919;
    font: bold 14px Verdana;
    line-height: 3;
    text-align: center;
    text-transform: uppercase;
}
В стиловете нищо свръхестествено не се забелязва. Основата на оформлението залага на фиксирано позициониране на бутона. Останалото е пълна свобода на въображението и резонно впрегнах възможностите на CSS3.

jQuery скрипт

$(document).ready(function(){
 $("#backtotop").hide();
 $(function () {
  $(window).scroll(function () {
   if ($(this).scrollTop() > 400) {
    $('#backtotop').fadeIn();
   } else {
    $('#backtotop').fadeOut();
   }
  });
  $('#backtotop a').click(function () {
   $('body,html').animate({
    scrollTop: 0
   }, 1300);
   return false;
  });
 });
});
JavaScript доверяваме на framework jQuery по разбираеми причини. В ред 2 прихващаме идентификатора на бутона, за да го скрием. След което в анонимна функция указваме, че към прозореца на браузъра закачаме метод scroll().

В ред 5 (> 400) определям след колко пиксела да изгрее бутона. Ако значението е 0, ще реагира мигновено, въпрос на вкус. Следват метод fadeIn(), показващ бутона.

В ред 11 закачаме на атрибут а от идентификатор backtotop, да следи клик. При настъпване на събитието, се изпълнява метод анимация и скролиране в изходна позиция.

В ред 14 указваме в милисекунди за колко време да тече анимацията, а в ред 15 забраняваме дефолтното държание на браузъра.

Отлично! Постигнахме желаното.

DEMO


Погледнете долу в дясно за малка червена стрелка. Това е.
Изключете изпълнението на JavaScript и презаредете страницата. Би следвало да се появи сигнална лента в жълто с предупреждаващ надпис.






до нови срещи   ^.^
12.10.2011 profruit 


|

5 Response to "Бутон обратно горе"

  1. зайче Said,

    Ехаа, добавил си ефект. Ще се пробва XD

     

  2. Profruit Said,

    Еее, ти не живееш ли от другата страна на морето все още?

     

  3. зайче Said,

    Мда, що? Очаква се да не се види ефекта ли? Убаф е, заплюх си го и ще си го ползвам със здраве ^^

     

  4. Profruit Said,

    ...тогава продължаваш да си задморски приятел от анонса, те затова.

    мега глобални етикети
    -------------------------------------------
    центровка на запалването на волга газ 24
    какво означава името ми erhan
    маски за бал
    команда за изтриване на лубунту
    кожуси от турция
    редактиране на файл с putty
    венци пенчев
    как да превърнем убунту в windows
    eлектронно запалване за вартбург
    kulturisti photoshop
    блог долината на слепите пясъци
    милко кертиков
    kak da ubiem vampir
    турски кожуси
    руски презерватив
    как се слага кирилица на ubuntu без български
    температурата извън самолета
    уроспии
    css главата на ламята
    чилийски филм публичен дом
    www.koja ot leipard
    зимни боти булдозер
    къща музей пабло неруда
    ubuntu трикове
    пабло неруда живял в град музей
    дракула няма отражение в огледалата
    валентин башев
    къси клавиши луникс
    kilometrash za stella

     

  5. зайче Said,

    Все изпаднали в голяма нужда откриват блога ти като панацея XD
    Малко отсам морето:
    -------------------------------------------
    i6iaz ot kakvo se polo4ava i kakvo e
    таралеж на скара
    youtube qkoruda (това особено ме озадачи)
    как да направя арак (нещо за поркане е)
    tseli chovek s banan
    самые большие люди в мире
    дори спрелия часовник показва верния час (веднъж дневно, бих добавил)
    похудение фото до и после
    kak se vika na golia ohliuv (??)
    изображения на снежанка
    s dve dumi
    za6to ne e pravilno da se pi6e kmetica
    zenski orgazam kakvo e 4ustvoto
    kak e pravilno da se kage kogo ili kogo
    карощи коментаряь
    vrediteli pq domati

     

Публикуване на коментар

Този блог е реинкарнация на първите ми опити за споделяне в нета. На времето започнах с къси разкази на преживяното. После се обезсмисли и превърнах блога си в системно радио. Пиша единствено неща, които карат душата ми да живее: openHAB, Ubuntu, Споделено и т.н. Това е моето системно радио, разбирате ли? Моята вълна и вие сте на нея сега.

Архив на блога