Punta de Choros

27 декември 2009

На 2009г й оставаха 120ч съществуване. От календара падна поредния лист с дата 27 декември и към 10.30ч сутринта ме събуди звън от телефона.

Инсталация на Microsoft шрифтове в Ubuntu 16.04

14 януари 2017

нсталация на Microsoft шрифтове в Ubuntu се поражда от идеята браузърите в различните системи, да показват еднакво текстовото съдържанието на интернет страниците.

Ubuntu 16.04 инсталация на USB disk on Key

19 ноември 2016

Арсеналът ми от мобилни компютри съдържа Fujitsu Lifebook AH530. Това е бюджетна машина от 2011г на Intel Core i5-480M процесор и 4GB DDR3 RAM памет.

gparted

Paragon ExtFS for Windows

30 юли 2016

ExtFS for Windows е утилита на Paragon Software разработена през 2013г. Тя представлява решение, предоставящо пълен достъп на четене и на запис до раздели ...

msvcr100.dll is missing Windows 10

04 октомври 2016

Майк Патерсън от Plixer, компания по компютърната сигурност, публикува доклад , че Windows 10 изпраща данни в криптиран вид от вашата машина на всеки пет минути. Той е направил максимума, за да спре изтичането, но системата продължавала да изпраща информация.


Идеята на подобен бутон е да върне потребителя от дъното на страницата към нейното начало, нещо като навигация. За целта до този момент ползвах възможностите само на 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. am-am Said,

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

     

  2. Profruit Said,

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

     

  3. am-am 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. am-am 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

     

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

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

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