hp), высоту окна (hw)smax = hp - hw и минимальный smin = 0hmax) и конечный (hmin) размеры целевого элементаs)ds = smax - smin = smax
dh = hmax - hmins / ds = h / dh , где h - приращение высоты целевого элементаh = hmax - (dh * s) / dsh = (dh * s) / ds + hminvar element = document.getElementById('d');
var hp = document.body.scrollHeight,
hw = window.innerHeight,
smax = hp - hw,
smin = 0,
hmin = 100,
hmax = 300,
ds = smax - smin,
dh = hmax - hmin;
window.addEventListener('scroll', function () {
var s = window.pageYOffset; // current scrollTop
var h = hmax - (dh * s) / ds;
element.style.height = h + 'px';
});var element = document.getElementById('d');
var hmin = 100,
hmax = 300;
window.addEventListener('scroll', function () {
var s = window.pageYOffset; // current scrollTop
var h = hmax - ((hmax - hmin) * s) / (document.body.scrollHeight - window.innerHeight);
element.style.height = h + 'px';
});gameColor = clr; // Меняем черный на зеленый
сonsole.log("After: "+gameColor); // After: greenvar game = new GameWindow(500,500, "canv"); // Функции-конструкторы принято именовать с большой буквы
game.setColor("green"); // Присваиваем зеленый цветfunction GameWindow(width, height, id){
document.write("<canvas width="+width+" height="+height+" id="+id+"></canvas>"); // пиздец, конечно, ну да ладно =)
this.canvas = document.getElementById(id);
this.width = width;
this.height = height;
this.color = "black"; // initial color
this.ctx = this.canvas.getContext("2d");
console.log("Before: " + this.color);
this.fillCanvas();
}
GameWindow.prototype.fillCanvas = function(){
this.ctx.fillStyle = this.color;
this.ctx.fillRect(0,0, this.width, this.height);
}
GameWindow.prototype.setColor = function(color){
console.log("After: " + color); // After: green
this.color = color; // Меняем черный на зеленый
this.fillCanvas();
}Как их [frontend и backend] вообще связывать?
Как делать backend?
Как выбирать хостинг
и как вообще выглядит "загрузка" сайта на хостинг?
Какие технологии использовать?
$('#ddmenu li').hover( // обрабатываем событие :hover
// В this у нас будет элемент li
// Начинайте читать со второй функции, будет понятнее
// функия выполнится при наведении мыши
function () {
// Достать из data-атрибута* ссылку на таймер и очистить его
// Таким образом, если мы увели мышку с элемента, и тут же
// сразу навели обратно, не будет моргания выпадашки
clearTimeout($.data(this,'timer'));
// Выбираем ul внутри наведенного li
// Останавливаем анимации, если они не успели закончится
// И начинаем новую анимацию slideDown (показываем выпадашку)
$('ul',this).stop(true,true).slideDown(200);
},
// функия выполнится при уходе мыши
function () {
// В this (элемент li) в data-атрибут* под именем timer запишем
// результат функции setTimeout (ссылка на таймер)
$.data(this,'timer', setTimeout(
// Proxy "протаскивает" контекст this внутрь функции
$.proxy(
function() { // Функция, внутрь которой пробросится контекст
// Благодаря прокси здесь this по-прежнему указывает на li
// Получается мы выбираем ul внутри наведенного li
// Останавливаем анимации, если они не успели закончится
// И начинаем новую анимацию slideUp (скрываем выпадашку, видимо)
$('ul',this).stop(true,true).slideUp(200);
},
this // пробрасываемый контекст - наведенный элемент
),
100 // таймаут, через 0.1 сек после ухода мыши выполнится функция закрытия
));
}
);function f() { console.log(2) }
(function() {
var f;
f(); // f локальная и сейчас undefined
f = function() { console.log(1) } // и только тут в нее пишется ссылка на функцию
})();
f();function f() { console.log(2) }
(function() {
f(); // f функция из родительского скоупа
f = function() { console.log(1) } // а тут она просто перезаписывается
})();
f();$(function () {
$('[data-toggle="ajax"]').on('submit', function (e) {
e.preventDefault();
let $form = $(this);
let $formLoading = $('.ajax-form__loading', $form);
let $button = $('[type="submit"]', $form);
let data = $form.serialize();
let action = $form.data('action') || $form.attr('action');
let method = $form.attr('method');
let response = $form.data('response') || 'html';
console.log('Response type: ', response);
$button.attr('disabled', true);
$formLoading.addClass('show');
$form.trigger('beforeSend');
$.ajax({
url : action,
type : method,
data : data,
dataType: response
}).then(function (data) {
console.log('success', arguments);
$formLoading.removeClass('show');
$button.attr('disabled', false);
$form.trigger('success', [data]);
}).fail(function () {
console.log('error', arguments);
$formLoading.removeClass('show');
$button.attr('disabled', false);
$form.trigger('error');
});
});
});на подобие jade но с html синтаксисом