JavaScript
- 24 ответа
- 0 вопросов
8
Вклад в тег
<html>
<head>
<style type="text/css">
* {
/* обычно все нормальные адекватные верстальщики юзают css-reset поэтому
тут просто масло-масляное. такие правила в нем всегда есть, но они необходимы на самом деле.*/
padding: 0;
margin: 0;
box-sizing: border-box;
}
body,
html {
background-color: orange;
height: 100%;
/* растягиваем корневой элемент и боди на всю высоту окна браузера.
да, даже если контента 10 страниц - эти элементы будут именно по размеру окна */
}
.wrapper {
min-height: 100%;
/* обертка должна быть не-меньше чем всё окно целиком. это растягивает враппер
на всю высоту окна браузера (как минимум). если контента больше чем одна страница -
правило будет просто опускаться, и враппер будет заниматься столько, сколько нужно */
padding-bottom: 80px;
/* вообще, указывать надо чуть больше, либо добавлять main отдельный нижний маржин.
если этого не делать футер будет очень близко к main поэтому нужен отступ.
обычно 15-16 пикселей (спейсер) */
}
footer {
background-color: green;
height: 80px;
/* мы знаем высоту футера и указываем ее */
margin-top: -80px;
/* основная суть всего способа - отрицательный верхний маржин затягивает футер наверх на всю
собственную высоту футера. соль в том что враппер, идущей по потоку документа перед футером уже занял
всю высоту окна. и если мы этого не сделаем то футер всегда будет ниже нижней границы окна
даже когда контента не будет, плюс, появится полоса прокрутки. отрицательный маржин
нивелирует этот эффект и футер оказывается "прибит" к полу */
}
</style>
</head>
<body>
<div class="wrapper">
<header></header>
<main>я майн</main>
</div>
<footer>пыщщ пыщщ</footer>
</body>
</html><html>
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body,
html {
background-color: orange;
height: 100%;
}
.wrapper {
min-height: 100%;
/* теперь паддинг не нужен */
/* погорячился - все таки нужен )) */
padding-bottom:80px;
}
footer {
background-color: green;
min-height: 80px;
/* чтобы футер не схлапывался в нулевую высоту когда в нем пусто */
height: 80px;
margin-top: -80px;
/* можно не убирать, чтобы оставить совместимость с чем то без JS */
}
</style>
</head>
<body>
<div class="wrapper">
<header></header>
<main>я майн</main>
</div>
<footer>а я футер! ололо</footer>
<script src="http://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// сначала подождем загрузки
// объявим переменные, чтобы заново не выбирать каждый раз те же ноды
var footerHeight, $footer = $('footer'),
$main = $('main');
$(window).resize(function() {
// вешаем обработчик на изменение размеров страницы - т.е. если меняется ширина страницы,
// или высота, даже если в футер кто то потом аяксом что то подгрузит -
// сработает ресайз и все сам поменяет
footerHeight = $footer.height('auto').height();
// важный момент - чтобы "снять" правильную высоту элемента - надо чтобы поток документа сам
// назначил верную высоту футеру. а для этого сделаем её "auto". даже если забыли/не захотели убрать
// из стилей жестко прописаную высоту - инлайн стиль перебивает весом, и поэтому высота
// будет такая "как надо". потом снимаем мерку, и юзаем её
$main.css({
'paddingBottom': (footerHeight + 15)
});
// не забываем кемел-кейс для значений-через-дефис
$footer.css({
'height': footerHeight,
'marginTop': (footerHeight * -1)
})
}).trigger('resize'); // после навешивания обработчиков насильно запускаем первый ресайз
})
</script>
</body>
</html>var X = 52;
console.time('someFunction1');
for (var i=0,x=0; i < 10000; i++) {
if ([52, 62, 72, 82, 92].indexOf(X) !== -1) {
x++;
}
}
console.log(x);
console.timeEnd('someFunction1');
console.log('--------------');
console.time('someFunction2');
for (var i=0,y=0; i < 10000; i++) {
switch (X) {
case 52:
case 62:
case 72:
case 82:
case 92:
y++;
break;
}
}
console.log(y);
console.timeEnd('someFunction2');
console.log('--------------');
console.time('someFunction3');
for (var i=0,z=0; i < 10000; i++) {
if({52:1, 62:1, 72:1, 82:1, 92:1}[X]) { z++; }
}
console.log(z);
console.timeEnd('someFunction3');10000
someFunction1: 2.541ms
--------------
10000
someFunction2: 1.192ms
--------------
10000
someFunction3: 3.676msvar coords = {
'showMap_1':{
[55.66837606904998,37.484163499999944]
},
'showMap_2':{
[55.66266356906509,37.478000999999914]
},
...
}$('tr[id=^showMap]').click(function() {
myMap.setZoom( 15 );
myMap.panTo(coords[$(this).attr('id')],{flying:1});
TweenMax.to(window, 0.5, {scrollTo:{y: document.getElementById("map").offsetTop-10}})
});