Петр Петров

На js

Главную роль играют правые отступы в CSS.

Какое приложение?
Single page application – Ember.js, React.js, Backbone.js
Mobile application – PhoneGap, CocoonJS, Qt

Демо

<form action="" method="" accept-charset="utf-8">
	<input type="checkbox" name="option1" value="1">
	<input type="checkbox" name="option2" value="2">
	<input type="checkbox" name="option3" value="3">
	<input type="checkbox" name="option4" value="4">
	<input type="text">
	<input type="submit" value="Отправить">
</form>

<script>

var GetValue = (function() {
  function GetValue() {
    this.init();
    this.events();
  }

  GetValue.prototype.init = function() {
  	this.form = document.querySelector('form');
  	this.textInput = this.form.querySelector('input[type="text"]');
  	this.checkboxes = [].slice.call(this.form.querySelectorAll('input[type="checkbox"]'));
  	this.arraySelected = new Array();
  };

  GetValue.prototype.events = function() {
  	return this.checkboxes.forEach((function(_this) {
  	  return function(el) {
	      return el.addEventListener('click', function() {
	        return _this.set(el);
	      });
  	  };
  	})(this));
  };

  GetValue.prototype.set = function (el) {
  	if (this.arraySelected.indexOf(el.value) >= 0) {
  		this.arraySelected.splice(this.arraySelected.indexOf(el.value), 1);
  		this.textInput.value = this.arraySelected;
  	} else {
  		this.arraySelected.push(el.value)
  		this.textInput.value = this.arraySelected;
  	}
  };

  return GetValue;

})();

new GetValue();

</script>

<nav>
		<ul>
			<li><a href="#home">Домой</a></li>
			<li><a href="#about">О нас</a></li>
		</ul>
	</nav>
	<div id="home">
		<!-- Some content -->
	</div>
	<div id="about">
		<!-- Some content -->
	</div>

	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
	<script>
		$('nav a[href^="#"]').on('click', function() {
			var target = $(this.hash);
			$('html, body').clearQueue().animate({ scrollTop: target.offset().top }, 1500);
			return false;
		});
	</script>

$(function(){
    var $blocks = $('.blocks .block'),
        l = $blocks.length,
    	cur = 0;
    setInterval(function(){
        $blocks.eq(cur).removeClass('active');
        cur < l - 1 ? cur++ : cur = 0;
        $blocks.eq(cur).addClass('active');
    }, 1000);
});

а еще можно проверить после добавления файла

function checkFile(target) {
	document.body.onfocus = function() {
		target.value.length
			? console.log("Файл выбран")
			: console.log("Файл не выбран");
	};
}

Для простого слайдера все гуд, но slides.length надо засунуть в переменную :)