Как сделать резиновый svg?

Наверно вы не знакомы с svg

Что нужно знать о верстке резины?

Pashkes: Ну тогда смежно учи английский обязательно. Большинство полезной информации в интернете именно на английском)))

Что все-таки должен уметь делать frond-end-разработчик?

пол года работаю в этой компании. А до этого еще был опыт) Неплохо это значит на 5/10

Что все-таки должен уметь делать frond-end-разработчик?

Так пишешь, как-будто это унизительно. К слову вы то знаете лучше мою ситуацию чем я.

Что все-таки должен уметь делать frond-end-разработчик?

Все то что запускается в браузере - ваша зона ответственности? Я всегда думал, что frond-end - это разработка пользовательского интерфейса. Видимо я чего-то не понимаю. Просто в разработке и так слишком много всего надо знать (например canvas 2d или 3d), чтобы отвлекаться на серверную часть.

Что все-таки должен уметь делать frond-end-разработчик?

p.s. прочитал много тем в интернете. Но порой люди говорят слишком разные вещи.

Как сверстать такое меню (адаптив)?

Зачем использовать плагины jquery для таких простых задач? На каждый случай жизни у типичного веб-разработчика есть чужая библиотека...

Как правильно использовать addEventListener?

sasha: Да уже все) Я разобрался. Это было немного трудно объяснить, т.к. я сам точно не знал, что мне нужно. В общем все теперь работает.

Как правильно использовать addEventListener?

sasha: Криво копируется код просто))) Тут в комментах overflow:hidden у блока)))) Поэтому он скрывает, что не влезло))))) п.с. код теперь работает, например, в ff4

Как правильно использовать addEventListener?

sasha: function catalogAnimation(event){

if(ww<1024){return false;}

if(event=="load"){

window.catalogAnimation.ftLiItems = $$(".main_page footer ul");
window.catalogAnimation.contBlock = $(".main_page .index-anim2");
window.catalogAnimation.items = $$(".catalog-list > a");
window.catalogAnimation.darkBlock = $(".main_page .dark_block");

window.catalogAnimation.pos1="",window.catalogAnimation.pos2="",window.catalogAnimation.pos3="",window.catalogAnimation.pos4="",window.catalogAnimation.pos5="",window.catalogAnimation.pos6="";

window.catalogAnimation.mh="",window.catalogAnimation.type1="top",window.catalogAnimation.type2="top";

window.catalogAnimation.scr1="",window.catalogAnimation.scr2="",window.catalogAnimation.setRdy=false,window.catalogAnimation.point1=false,window.catalogAnimation.point2=false;

}

function setMainHeight(){
main.style.height = footer.offsetHeight + catalogAnimation.mh + "px";
}

if(event!="scroll"){

function catSetValues(){

catalogAnimation.mh = height*4.5;
catalogAnimation.scr2 =height*3.5;
catalogAnimation.scr1 = catalogAnimation.scr2 - (height/100)*75;

catalogAnimation.pos6 = catalogAnimation.scr1;
catalogAnimation.pos1 = 0;
catalogAnimation.pos2 = catalogAnimation.scr1 / 2;
catalogAnimation.pos3 = catalogAnimation.pos2 / 2;
catalogAnimation.pos4 = catalogAnimation.pos3 + catalogAnimation.pos2;
catalogAnimation.pos5 = catalogAnimation.pos2;
setMainHeight();

}catSetValues();

}

if(event!="scroll"){return false;}

function tY(el,value){
if(supTransform=="3d"){
el.style[prefixes.Transform] = "translate3d(0,"+value+"px,0)";
}else if(supTransform=="2d"){
el.style[prefixes.Transform] = "translateY("+value+"px)";
}else{
el.style.bottom = value+"px";
}
}

function doAnim(){

if(ww<=1024){return false;}

if(scroll >= catalogAnimation.scr1){catalogAnimation.point1 = false;}else{catalogAnimation.point1 = true;}
if(scroll >= catalogAnimation.scr2){catalogAnimation.point2 = false;}else{catalogAnimation.point2 = true;}


// Первая точка скролла
if(!catalogAnimation.point1 && catalogAnimation.type1 != "top"){
addClass(main,"mp_anim2");
catalogAnimation.type1 = "top";
}else if(catalogAnimation.point1 && catalogAnimation.type1 != "bottom"){
removeClass(main,"mp_anim2");
catalogAnimation.type1 = "bottom";
}

//Вторая точка сролла
if(!catalogAnimation.point2 && catalogAnimation.type2 != "top"){

catalogAnimation.contBlock.style.marginTop = catalogAnimation.scr2 + "px";
addClass(main,"mp_anim1");

function showFooter(ul){
var ind=0;
function scaleLi(){
if(!(catalogAnimation.ftLiItems[ul].querySelectorAll("li").length>ind)){return false;}
setTimeout(function(){
addClass(catalogAnimation.ftLiItems[ul].querySelectorAll("li")[ind],"active_li");
ind++;
scaleLi();
},80);
}scaleLi();
}for(var i=0;i=0 && scroll <= catalogAnimation.scr1) || catalogAnimation.setRdy == false){}else{return false;}

catalogAnimation.darkBlock.style.opacity = (1.1/100)*(100-((scroll*100) / catalogAnimation.scr1));

if(scroll >= catalogAnimation.pos1 && scroll <= catalogAnimation.pos2){
res1 = (height/100) * ((scroll)*100)/(catalogAnimation.pos2 - catalogAnimation.pos1);
tY(catalogAnimation.items[0],-res1);
}else if(scroll >= catalogAnimation.pos2){tY(catalogAnimation.items[0],-height);
}else{tY(catalogAnimation.items[0],0);}

///////////////////////////////////////////////////////////////////////////////////

if(scroll >= catalogAnimation.pos3 && scroll <= catalogAnimation.pos4){
catalogAnimation.setRdy = true;
res2 = (height/100)*((scroll - catalogAnimation.pos3)*100)/(catalogAnimation.pos4 - catalogAnimation.pos3);
tY(catalogAnimation.items[1],-res2);
}else if(scroll >= catalogAnimation.pos4){tY(catalogAnimation.items[1],-height);
}else{tY(catalogAnimation.items[1],0);}

///////////////////////////////////////////////////////////////////////////////////

if(scroll >= catalogAnimation.pos5 && scroll <= catalogAnimation.pos6){
res3 = (height/100)*((scroll - catalogAnimation.pos5)*100)/(catalogAnimation.pos6 - catalogAnimation.pos5);
tY(catalogAnimation.items[2],-res3);
}else if(scroll <= catalogAnimation.pos5){tY(catalogAnimation.items[2],0);
}else{tY(catalogAnimation.items[2],-height);}

}doAnim();

}

// События

window.onresize=function(){
///////////////////////
height=doc.clientHeight;
width=doc.clientWidth;
ww=window.innerWidth;
wh=window.innerHeight;
//////////////////////
setWindowSize();
catalogAnimation("resize");
footerAccordion();
}

window.onload=function(){
setPrefixes();
initGlobals();
////////////////////////////
loader();
playVideo();
footerAccordion();
setWindowSize();
catalogAnimation("load");
mobMenu();
}

window.onscroll=function(){
scroll=document.body.scrollTop || doc.scrollTop;
catalogAnimation("scroll");
}

Вот что получилось, я уже определился как это делать. По-другому не знаю даже как.

Как правильно использовать addEventListener?

п.с. это не jquery ;))

Как правильно использовать addEventListener?

Вот функция параллакса, допустим. function catalogAnimation(){

if(ww<1024){return false;}

var ftLiItems = $$(".main_page footer ul");
var contBlock = $(".main_page .index-anim2");
var ind1 = $(".main_page .index-anim1");
var items = $$(".catalog-list > a");
var darkBlock = $(".main_page .dark_block");
var catList = $(".main_page .catalog-list");
var pos1,pos2,pos3,pos4,pos5,pos6,mh,res1,res2,res3,type1="top",type2="top",scr1,scr2,setRdy=false,point1=false,point2=false;

function setMainHeight(){
main.style.height = footer.offsetHeight+mh+"px";
}

function catSetValues(){

mh = height*4.5;
scr2=height*3.5;
scr1=scr2-(height/100)*75;

pos6=scr1;
pos1=0;
pos2=scr1/2;
pos3 = pos2/2;
pos4=pos3+pos2;
pos5=pos2;
setMainHeight();

}catSetValues();
window.addEventListener("resize",catSetValues);


function tY(el,value){
if(supTransform=="3d"){
el.style[prefixes.Transform] = "translate3d(0,"+value+"px,0)";
}else if(supTransform=="2d"){
el.style[prefixes.Transform] = "translateY("+value+"px)";
}else{
el.style.bottom = value+"px";
}
}

function doAnim(){

if(ww<=1024){return false;}

if(scroll>=scr1){point1=false;}else{point1=true;}
if(scroll>=scr2){point2=false;}else{point2=true;}


// Первая точка скролла
if(!point1 && type1!="top"){
addClass(main,"mp_anim2");
type1="top";
}else if(point1 && type1!="bottom"){
removeClass(main,"mp_anim2");
type1="bottom";
}

//Вторая точка сролла
if(!point2 && type2!="top"){

contBlock.style.marginTop = scr2 + "px";
addClass(main,"mp_anim1");

function showFooter(ul){
var ind=0;
function scaleLi(){
if(!(ftLiItems[ul].querySelectorAll("li").length>ind)){return false;}
setTimeout(function(){
addClass(ftLiItems[ul].querySelectorAll("li")[ind],"active_li");
ind++;
scaleLi();
},80);
}scaleLi();
}for(var i=0;i=0 && scroll<=scr1) || setRdy==false){}else{return false;}

darkBlock.style.opacity = (1.1/100)*(100-((scroll*100)/scr1));

if(scroll>=pos1 && scroll<=pos2){
res1 = (height/100)*((scroll)*100)/(pos2-pos1);
tY(items[0],-res1);
}else if(scroll>=pos2){tY(items[0],-height);
}else{tY(items[0],0);}

if(scroll>=pos3 && scroll<=pos4){
setRdy = true;
res2 = (height/100)*((scroll-pos3)*100)/(pos4-pos3);
tY(items[1],-res2);
}else if(scroll>=pos4){tY(items[1],-height);
}else{tY(items[1],0);}

if(scroll>=pos5 && scroll<=pos6){
res3 = (height/100)*((scroll-pos5)*100)/(pos6-pos5);
tY(items[2],-res3);
}else if(scroll<=pos5){tY(items[2],0);
}else{tY(items[2],-height);}

}doAnim();
window.addEventListener("scroll",doAnim);
}

Трудно читать, но реальный пример. Вверху все переменные. Делать их глобальными это как-то неправильно что ли. В таком случае кода, функции событий могут использовать локальные переменные. То есть выполняется лишь нужный клочок кода, который обновляет какое-либо значение на новое.

Можно ли сделать, чтобы не учитывалась высота инспектора в хроме?

А, спасибо. Просто не знал, что надо зажимать кнопку мыши, чтобы появился выбор. Всегда только сменой позиции окна пользовался.

Почему не работает svg в firefox?

Andrew: Да я уже разобрался. Оказывается просто я плохую стать по svg читал. Там использовались запятые. Другие браузеры игнорируют их. А ff - нет. Запятые в атрибуте d элемента path.

Какие браузеры поддерживают getTotalLength()?

Andrew: +

Как отслеживать масштабирование браузера на мобильных и планшетах?

HoHsi: Мне нужно, чтобы она выполнялось именно при ресайзе, а не при масштабировании.

Как отслеживать масштабирование браузера на мобильных и планшетах?

Событие "resize". На этом событии весит функция, которая подстраивает слайдер под разрешение экрана.

Как сделать плавное появление блока при прокрутке вниз (например, 300px)?

Зачем jquery в данном примере?))

Как проверить поддерживает ли браузер transform3D Javascript'ом?

Алексей Уколов: Я объяснил, что плохо знаю javascript. Так используйте библиотеку, верно?

Как проверить поддерживает ли браузер transform3D Javascript'ом?

Алексей Уколов: Я просто уверен, что там маленький кусочек кода. Мне не надо писать программу. Вы наверно и сами не разбираетесь, раз не смогли указать какой кусочек кода отвечает за эту проверку. Ну в общем понятно, типичный Тостеровчанин ;DDD. Кидают в ответ либо готовую библиотеку, либо призывают погуглить. Все можете не отвечать, с вами все понятно ))))