Skip to content

Instantly share code, notes, and snippets.

@aligator28
aligator28 / index.html
Created September 14, 2016 14:55
Движок сайта с перелистыванием страниц во время скроллинга (красиво!)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Scroll</title>
</head>
<body>
<div class="pages _1page" data-id="1">
<img src="https://unsplash.it/800/600/?random" alt="fashion">
@aligator28
aligator28 / input file in ie on change event
Created July 26, 2016 16:00
input file fires twice in IE срабатывает дважды - решение проблемы
$('#imageUpload') - это поле типа файл
$('#imageUpload').change() - эти методы срабатывают в ИЕ дважды
$('#imageUpload').on('change')
а вот правильное решение
$('#imageUpload').one('change', function(event){
console.log('change');
});
@aligator28
aligator28 / Показываем (скрываем) элементы страницы js
Created July 26, 2016 11:34
Показываем и скрываем неопределенное количество элементов страницы на javascript (jquery) - переключение табов
@extends('fx.index')
@section('content')
<link rel="stylesheet" type="text/css" href="{{ url('fx/css/obsidian.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url('fx/css/examples.css') }}">
<div class="row">
<div class="col-md-12">
<h2>code examples</h2>
<h4 id="php_title" data-val="php">PHP</h4>
<h4 id="js_title" data-val="js">JavaScript</h4>
Я первый раз, когда наткнулся на эту проблему, тоже долго думал, почему не хочет клик обрабатывать. А потом доперло, что событие то было навешано до того, как появились новые элементы!
Тогда еще существовал метод live(), который уже deprecated.
Вместо него теперь метод on(), но конструкция чуть сложнее выглядит. Объясню на примере:
Допустим у нас есть документ со структурой:
@aligator28
aligator28 / Растягивание меню по ширине страницы
Last active July 10, 2016 14:46
На всю ширину страницы растягиваются пункты меню в виде списка
.nav__list
text-align: justify
&:after
content: ""
height: 0
width: 100%
+inlineblock()
visibility: hidden
=inlineblock ($valine: top) //middle, bottom
!function(e){"function"==typeof define&&define.amd?define(["jquery","jquery-mousewheel","date-functions"],e):"object"==typeof exports?module.exports=e:e(jQuery)}(function(e){"use strict";function i(e,t,a){this.date=e,this.desc=t,this.style=a}var t={i18n:{ar:{months:["كانون الثاني","شباط","آذار","نيسان","مايو","حزيران","تموز","آب","أيلول","تشرين الأول","تشرين الثاني","كانون الأول"],dayOfWeekShort:["ن","ث","ع","خ","ج","س","ح"],dayOfWeek:["الأحد","الاثنين","الثلاثاء","الأربعاء","الخميس","الجمعة","السبت","الأحد"]},ro:{months:["Ianuarie","Februarie","Martie","Aprilie","Mai","Iunie","Iulie","August","Septembrie","Octombrie","Noiembrie","Decembrie"],dayOfWeekShort:["Du","Lu","Ma","Mi","Jo","Vi","Sâ"],dayOfWeek:["Duminică","Luni","Marţi","Miercuri","Joi","Vineri","Sâmbătă"]},id:{months:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],dayOfWeekShort:["Min","Sen","Sel","Rab","Kam","Jum","Sab"],dayOfWeek:["Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sa
@aligator28
aligator28 / Заглушка для старых IE
Created June 23, 2016 15:25
Заглушка для старых версий IE
<!--[if lt IE 9]>
<div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>
<div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'>
<a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'>
<img src='/ie_check/img//ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice' />
</a>
</div>
<div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
<div style='width: 75px; float: left;'>
<img src='/ie_check/img//ie6nomore-warning.jpg' alt='Warning!' />
@aligator28
aligator28 / Click_in_CSS.css
Created June 22, 2016 15:17
Click in Css Emulation
#btnControl {
display: none;
}
#btnControl:checked + label > img {
width: 70px;
height: 74px;
}
<input type="checkbox" id="btnControl"/>
<h3>Magnific Popup CSS3-based animation effects</h3>
<div class="links">
<h4>Text-based:</h4>
<ul id="inline-popups">
<li><a href="#test-popup" data-effect="mfp-zoom-in">Zoom</a></li>
<li><a href="#test-popup" data-effect="mfp-newspaper">Newspaper</a></li>
<li><a href="#test-popup" data-effect="mfp-move-horizontal">Horizontal move</a></li>
<li><a href="#test-popup" data-effect="mfp-move-from-top">Move from top</a></li>
<li><a href="#test-popup" data-effect="mfp-3d-unfold">3d unfold</a></li>
<li><a href="#test-popup" data-effect="mfp-zoom-out">Zoom-out</a></li>
@aligator28
aligator28 / Center DIV вертикальное выравнивание
Last active September 16, 2016 16:35
div centered horizontally and vertically
//first example (works good)
background: red
position: absolute
color: #fff
top: 50%
left: 50%
padding: 15px
-ms-transform: translateX(-50%) translateY(-50%)
-webkit-transform: translate(-50%,-50%)
transform: translate(-50%,-50%)