Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.06.2015, 12:15
Аватар для KosBeg
Профессор
Отправить личное сообщение для KosBeg Посмотреть профиль Найти все сообщения от KosBeg
 
Регистрация: 22.05.2015
Сообщений: 384

nanobar.js - очень легкий прогрес-бар
Всем привет!
Сам не знаю нафига , написал(а точнее отредактировал) такую штуку
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>nanobar.js</title>
  </head>

<script>
var Nanobar = (function () {
'use strict';
var Bar, Nanobar, move, place, init,

move = function () {
  var self = this,
  dist = this.width - this.here;

  if (dist < 0.1 && dist > -0.1) {
  place.call( this, this.here );
  this.moving = false;
    if (this.width == 100) {
      this.el.style.height = 0;
      setTimeout( function () {
        self.cont.el.removeChild( self.el );
      }, 300);
    }
  } else {
      place.call( this, this.width - (dist/10) );
      setTimeout( function () {
        self.go();
      }, 20);
  }
};

  place = function (num) {
    this.width = num;
    this.el.style.width = this.width + '%';
  };

  init = function () {
    var bar = new Bar( this );
    this.bars.unshift( bar );
  };

  Bar = function ( cont ) {
    this.el = document.createElement( 'div' );
    this.el.id = 'nanobar';
    this.width = 0;
    this.here = 0;
    this.moving = false;
    this.cont = cont;
    cont.el.appendChild( this.el );
  };

  Bar.prototype.go = function (num) {
    if (num) {
      this.here = num;
      if (!this.moving) {
        this.moving = true;
        move.call( this );
      }
    } else if (this.moving) {
      move.call( this );
    }
  };

  Nanobar = function () {
    var el;
    this.bars = [];
    el = this.el = document.createElement( 'div' );
    this.el.id = 'nanodiv';
    el.style.position = 'fixed';
    document.getElementsByTagName( 'body' )[0].appendChild( el );
    init.call( this );
  };


  Nanobar.prototype.go = function (p) {
    this.bars[0].go( p );
    if (p == 100) {
      init.call( this );
    }
  };

	return Nanobar;
})();
</script>

  <body>

		<div class="container">
			<br>
			<h1>nanobar.js</h1>
			<br>
			<div class="general-buttons">
				<button class="doc_go" onClick="nanobar.go(30)">nanobar.go(30)</button>
				<button class="doc_go" onClick="nanobar.go(60)">nanobar.go(60)</button>
				<button class="doc_go" onClick="nanobar.go(100)">nanobar.go(100)</button>
			</div>
			<br>
			<hr>
			<br>
			<p>© 2015 <a href="https://github.com/jacoborus">jacoborus</a> - <a href="https://raw.github.com/jacoborus/nanobar/master/LICENSE">MIT License</a></p>
		</div>

<script>
  var nanobar = new Nanobar();
  nanobar.go(50);
</script>
  </body>

<style>
/* стилизация страници */
*{
  margin:0;
  padding:0;
}
.container{margin:0 auto;max-width: 800px;}

/* /\/\/\/\/\/\/\/\/\/\/\ */

body {
  margin: 0; /* удаляем отступы */
}

#nanobar {
  background: #ff0000; /* фон */
  border-radius: 0px 5px 5px 0px; /* закругление углов */
  z-index: 9999; /* верхний индекс */
  -webkit-box-shadow: 2px 2px 5px 0px #000000; /* тень для chrome */
  -moz-box-shadow: 2px 2px 5px 0px #000000; /* тень для firexox */
  box-shadow: 2px 2px 5px 0px #000000; /* тень для остальных браузеров */
  filter: progid:DXImageTransform.Microsoft.shadow(direction=135, color=#000000, strength=4); /* тень для Internet Explorer */
  
  width: 0; /* без этого полоска не хочет прятаться =) */
  height: 4px; /* ширина полоски */
  clear: both;

  -webkit-transition: all ease; /* анимация для chrome */
  -moz-transition: all ease; /* анимация для firexox */
  -o-transition: all ease; /* анимация для opera */
  transition: all ease; /* анимация для остальных браузеров */
}

#nanodiv {
  width: 100%;
  height: 5px;
  z-Index: 9999;
  top: 0;
}
</style>

</html>

Я написал от лени(просто нефиг делать), а нафига и сам не знаю
Помогите нее куда нибудь применить
Ответить с цитированием
  #2 (permalink)  
Старый 16.06.2015, 12:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

KosBeg,
какой смысл в удалении при 100% ?
Ответить с цитированием
  #3 (permalink)  
Старый 16.06.2015, 12:50
Аватар для KosBeg
Профессор
Отправить личное сообщение для KosBeg Посмотреть профиль Найти все сообщения от KosBeg
 
Регистрация: 22.05.2015
Сообщений: 384

Сообщение от рони
какой смысл в удалении при 100% ?
а черт его знает
PS: это форк https://github.com/jacoborus/nanobar/
Ответить с цитированием
  #4 (permalink)  
Старый 16.06.2015, 12:53
Аватар для KosBeg
Профессор
Отправить личное сообщение для KosBeg Посмотреть профиль Найти все сообщения от KosBeg
 
Регистрация: 22.05.2015
Сообщений: 384

Сообщение от рони
какой смысл в удалении при 100% ?
стоп!
имеется в виду зачем после заполения на 100% удалять его?
Так на ютубе же удаляют)))
Ответить с цитированием
  #5 (permalink)  
Старый 16.06.2015, 12:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от KosBeg
имеется в виду зачем после заполения на 100% удалять его?
Так на ютубе же удаляют)))
непостижимая для меня логика
Ответить с цитированием
  #6 (permalink)  
Старый 16.06.2015, 12:59
Аватар для KosBeg
Профессор
Отправить личное сообщение для KosBeg Посмотреть профиль Найти все сообщения от KosBeg
 
Регистрация: 22.05.2015
Сообщений: 384

Сообщение от рони
непостижимая для меня логика
это как-бэ прогрег-бар аякс запроса, как на ютубе)
я надеюсь вы видели когда делается переход на другую страницу, его удаляют))
даже лично мне кажется что его УДАЛЯТЬ НУЖНО!!!
Я пробывал не удалять - получается глупо...
Он постоянно в верху страницы
Ответить с цитированием
  #7 (permalink)  
Старый 16.06.2015, 14:54
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Не понимаю, зачем столько JavaScript кода.
<style>
  #bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    background: red;
    box-sizing: border-box;
    -webkit-box-shadow: 1px 1px 6px 0px #333;
    -moz-box-shadow: 1px 1px 6px 0px #333;
    box-shadow: 1px 1px 6px 0px #333;
    -o-transition: 1s width ease;
    -ms-transition: 1s width ease;
    -moz-transition: 1s width ease;
    -webkit-transition: 1s width ease;
    transition: 1s width ease;
    width: 0;
  }
</style>
<div id="bar" class="zero-width"></div>
<button onclick="document.getElementById('bar').style.width='30%';">(30)</button>
<button onclick="document.getElementById('bar').style.width='60%';">(60)</button>
<button onclick="document.getElementById('bar').style.width='100%';">(100)</button>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #8 (permalink)  
Старый 16.06.2015, 15:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от KosBeg
Помогите нее куда нибудь применить
индикация скрола
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>nanobar.js</title>
    <style>
/* стилизация страници */
*{
  margin:0;
  padding:0;
}
.container{margin:0 40%; position:  absolute; top: 98%; left 0; width: 280px;}

/* /\/\/\/\/\/\/\/\/\/\/\ */

body {
  margin: 0; /* удаляем отступы */
  height: 1500px;
   position: relative;
}

#nanobar {
  background: #ff0000; /* фон */
  border-radius: 0px 5px 5px 0px; /* закругление углов */
  z-index: 9999; /* верхний индекс */
  -webkit-box-shadow: 2px 2px 5px 0px #000000; /* тень для chrome */
  -moz-box-shadow: 2px 2px 5px 0px #000000; /* тень для firexox */
  box-shadow: 2px 2px 5px 0px #000000; /* тень для остальных браузеров */
  filter: progid:DXImageTransform.Microsoft.shadow(direction=135, color=#000000, strength=4); /* тень для Internet Explorer */

  width: 0; /* без этого полоска не хочет прятаться =) */
  height: 4px; /* ширина полоски */
  clear: both;

  -webkit-transition: all 0.8s ease; /* анимация для chrome */
  -moz-transition: all 0.8s ease; /* анимация для firexox */
  -o-transition: all 0.8s ease; /* анимация для opera */
  transition: all 0.8s ease; /* анимация для остальных браузеров */
}

#nanodiv {
  width: 100%;
  height: 5px;
  z-Index: 9999;
  top: 0;
}
</style>
  </head>

<script>
var Nanobar = (function () {
'use strict';
var Bar, Nanobar, init,
  init = function () {
    var bar = new Bar( this );
    this.bars.unshift( bar );
  };

  Bar = function ( cont ) {
    this.el = document.createElement( 'div' );
    this.el.id = 'nanobar';
    this.width = 0;
    this.here = 0;
    this.moving = false;
    this.cont = cont;
    cont.el.appendChild( this.el );
  };

  Bar.prototype.go = function (num) {
    this.el.style.width = num + '%';
  };

  Nanobar = function () {
    var el;
    this.bars = [];
    el = this.el = document.createElement( 'div' );
    this.el.id = 'nanodiv';
    el.style.position = 'fixed';
    document.getElementsByTagName( 'body' )[0].appendChild( el );
    init.call( this );
  };


  Nanobar.prototype.go = function (p) {
    this.bars[0].go( p );

  };

	return Nanobar;
})();
</script>

  <body>

		<div class="container">
		  			<p>© 2015 <a href="https://github.com/jacoborus">jacoborus</a> - <a href="https://raw.github.com/jacoborus/nanobar/master/LICENSE">MIT License</a></p>
		</div>

<script>
  var nanobar = new Nanobar();
  window.onscroll = function() {
    var height = window.innerHeight; //Высота экрана пользователя
    var scrollHeight = document.body.scrollHeight; //Высота всей страницы
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop; //Получаем при каждой прокуртке позицию скроллинга
    var pos = (scrollTop/(scrollHeight-height))*100;
    nanobar.go(pos);
}
  window.onscroll()
</script>
  </body>



</html>

Последний раз редактировалось рони, 16.06.2015 в 15:21.
Ответить с цитированием
  #9 (permalink)  
Старый 16.06.2015, 15:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

devote,

половину выкинул, оказалось можно почти всё
Ответить с цитированием
  #10 (permalink)  
Старый 16.06.2015, 17:03
Аватар для KosBeg
Профессор
Отправить личное сообщение для KosBeg Посмотреть профиль Найти все сообщения от KosBeg
 
Регистрация: 22.05.2015
Сообщений: 384

Сообщение от рони
половину выкинул, оказалось можно почти всё
Сообщение от devote
Не понимаю, зачем столько JavaScript кода.
пойду повешусь

PS: я сегодня что-то не то курнул
целый день с меня прет позитифф
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск