Плагин для стилизации select

[Heidel]

Плагин для стилизации select

https://select2.github.io/

Задать плейсхолдер, отключить поле поиска и задать ширину

$(".custom-select").select2({
		placeholder: "Все категории",
		minimumResultsForSearch: Infinity,
		width: 170
	});	

Чтобы отображался placeholder, первый option списка select нужно сделать пустым.

Стилизация

/* select2 */
.select2-selection {
	outline: none;
}

.select2-container--default .select2-selection--single {
	border: 1px solid #ccc;
    border-radius: 0;
}

.select2-container--default .select2-results__option[aria-selected=true] {
	background-color: @light_yellow;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: @orange;
    color: white;
}

@темы: Plugins, Select, jQuery, Плагин для стилизации select, Ссылки

---

Верстка писем

[Heidel]

http://habrahabr.ru/company/pechkin/blog/182964/

http://habrahabr.ru/post/180013/

http://habrahabr.ru/company/pechkin/blog/255819/

Тестирование
https://putsmail.com/

Автоматический CSS-Inliner HTML-кода
http://labs.pechkin-mail.ru/inliner/?utm_source=habr&utm_medium=referral&utm_campaign=email_css_rules

@темы: Верстка, Верстка писем, Автоматический CSS-Inliner HTML-кода, Ссылки

---

Прозрачный треугольник под выбранным пунктом меню

[Heidel]

Прозрачный треугольник под выбранным пунктом меню

http://stackoverflow.com/questions/22198705/menu-with-inset-transparent-triangle

http://codepen.io/Paulie-D/pen/LawCb

http://stackoverflow.com/questions/22267955/navbar-active-link-with-a-transparent-triangle

http://jsfiddle.net/fM9mh/1/

@темы: Верстка, Прозрачный треугольник под выбранным пунктом меню, CSS3, Ссылки

---

CSS анимации

[Heidel]

http://habrahabr.ru/company/htmlacademy/blog/255583/

https://htmlacademy.ru/courses/80

@темы: Верстка, CSS анимации, Учебники, CSS3, Ссылки

---

Настройка Grunt

[Heidel]

Настройка Grunt

npm install
npm install -g grunt-cli

npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-less --save-dev
npm install --save-dev grunt-recess

@темы: Grunt

---

Скрипт для выбора рейтинга

[netcat-na-diary]

Скрипт для выбора рейтинга

jQuery скрипт

$('.rating').each(function () {
    for (var i = 0; i < 5; i++) {
        $(this).append('<span class="star">');
    }
    var rating = $(this).data('rating'),
        $stars = $(this).children();
    if (rating > 0) {
        $stars.filter(':lt(' + rating + ')').addClass('selected');
    }
    $stars.hover(function () {
        var idx = $(this).index();
        $stars.removeClass('selected').slice(0, idx + 1).addClass('selected');
    }, function () {
        var rating = $(this).parent().data('rating');
        $stars.removeClass('selected').slice(0, rating).addClass('selected');
    }).click(function () {

        $(this).parent().data('rating', $(this).index() + 1);
    });

});

http://jsfiddle.net/g46afg64/2/

http://stackoverflow.com/questions/29567449/jquery-sсript-for-choosing-rating/29568267

Разметка и скрипт из верстки
http://jsfiddle.net/xzf094as/3/

@темы: jQuery, Stackoverflow, Скрипт для выбора рейтинга, Ссылки

---

Вызвать jQuery функцию

[Heidel]

jQuery функция

function starsMouseMove(n) {
    var i = $(this).offset().left,
        t = Math.floor((n.pageX - i)),
        w;
    if (t > 0 && t < 20) {
        w = 20;
    } else if (t >= 20 && t < 40) {
        w = 40;
    } else if (t >= 40 && t < 60) {
        w = 60;
    } else if (t >= 60 && t < 80) {
        w = 80;
    } else if (t >= 80 && t <= 100) {
        w = 100;
    }
    $(".stars_width", $(this)).css("width", w + "%");
    $(this).parent().find('#rating-input').val(w / 10);
};

Варианты вызова функции:
1 способ

$('.stars').hover(starsMouseMove);

2 способ

$('.stars').hover(function(e) {
    $.proxy(starsMouseMove, this, e);
});

3 способ

$('.stars').hover(function(e) {
    starsMouseMove(e, this);
});

function starsMouseMove(n, el) {
    var $el = $(el);

    // rest of your code...
}

http://stackoverflow.com/questions/29564367/how-to-use-jquery-function-on-hover

@темы: jQuery, Вызвать jQuery функцию, Stackoverflow, Ссылки

---

Formstone

[Heidel]

Formstone — набор компонентов

http://formstone.it/

@темы: Plugins, Верстка, Formstone, CSS3, Ссылки

---

Simple Effects for Drop-Down Lists

[Heidel]

Simple Effects for Drop-Down Lists

http://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/

@темы: Plugins, jQuery, Simple Effects for Drop-Down Lists, Ссылки

---

Chosen - плагин для стилизации select

[Heidel]

Chosen - плагин для стилизации select

http://harvesthq.github.io/chosen/options.html

@темы: Plugins, jQuery, Chosen - плагин для стилизации select, Ссылки

---

[Heidel]

http://jsfiddle.net/9oa9f1pj/10/

---

jQuery Mouse Direction Plugin

[Heidel]

jQuery Mouse Direction Plugin

Определение направления движения мыши
http://hasin.me/2011/12/20/jquery-mouse-direction-plugin/

@темы: Plugins, Верстка, jQuery, jQuery Mouse Direction Plugin, Ссылки

---

Fade Slider

[Heidel]

HTML

<ul id="slider1" class="images-list">
							<li style="background: red">11</li>
							<li style="background: green">22</li>
							<li style="background: blue">33</li>
						</ul>
						
						<ul class="controls">
							<li class="active"></li>
							<li></li>
							<li></li>
						</ul>

jQuery

$.fn.slider = function () {
		var $this = this;
		var $controls = $this.nextAll('.controls').first();
		var index = 0;
		var n = 2;
	    
		$this.find('li:gt(0)').hide();
	    setInterval(function () {
	        $this.find('li:first-child').fadeOut('slow')
				.next('li').fadeIn('slow')
	            .end().appendTo($this);
			
			if ($controls.find('li.active').next('li').length) {
				$controls.find('li.active').removeClass('active').next('li').addClass('active');
			} else {
				$controls.find('li.active').removeClass('active').parent().find('li:first-child').addClass('active');
			};
	    },
	    4000);
	};


$('#slider1').slider();

http://jsfiddle.net/u9d3xa1q/17/

С индексами
http://jsfiddle.net/9a24rdro/2/

@темы: Plugins, Верстка, jQuery, Fade Slider, Ссылки

---

CMS

[Heidel]

Создать CMS - ссылка на хэшкод

@темы: CMS, PHP, Учебники, Ссылки

---

Simple Fade SlideShow

[Heidel]

Simple Fade SlideShow

http://www.simplefadeslideshow.com/

@темы: Plugins, jQuery, Simple Fade SlideShow, Ссылки

---

CSS3 Keyframes Animation Generator

[Heidel]

CSS3 Keyframes Animation Generator

http://cssanimate.com/

@темы: CSS3 Keyframes Animation Generator, Генератор анимаций, CSS3, Ссылки

---

Одна фиксированная и одна резиновая колонка

[Heidel]

Одна фиксированная и одна резиновая колонка

http://softwaremaniacs.org/blog/2006/02/01/flex-and-fixed-columns-any-order/

HTML

<div id="container">
  <div id="main">...</div>
  <div id="sidebar">...</div>
</div>

CSS

#container {
  padding-left:409px;
    overflow: hidden;
}
#main {
  float:left; width:100%;
    background:red;
}
#sidebar {
  float:left; width:409px;
  margin-left:-409px;
    background:blue;
    position:relative; left:-100%;
}

http://jsfiddle.net/b2cze67h/5/

@темы: Верстка, Одна фиксированная и одна резиновая колонка, Ссылки

---

[Heidel]

Какая-то шняга по верстке

http://greensock.com/

@темы: Верстка, GreenSock, Ссылки

---

Chrome: популярные расширения для разработчиков

[Heidel]

Chrome: популярные расширения для разработчиков

http://habrahabr.ru/post/254175/?mobile=no

@темы: Chrome: популярные расширения для разработчиков, Google Chrome, Ссылки

---

Диагональные полоски с помощью CSS3

[Heidel]

Диагональные полоски с помощью CSS3

http://css-blog.ru/css3-stripes

@темы: Верстка, Диагональные полоски с помощью CSS3, CSS3, Ссылки