Павел Антонов

никак, менять структуру верстки и делать элементы визуально так как надо, но без вложенности

Это все знается по дефолту, а флекс учится за полчаса, потом практика.
Где-то на тостере уже давали ссылку эту, очень хорошее пособие по флексам flexboxfroggy.com

Здесь поможет повесить на body position relative если нет то обернуть весь контент в div.wrapper например и ему давать overflow, это особенности ios

В общем ни один из вариантов не подошел, использовал jquery sly сделал все как по макету, и скролл и стрелки и превьюхи, всем спс

По ховеру выполнять вызов следующего/предыдущего слайда

$("#идентификатор вашей карусели").slick('slickNext'); //следующий слайд
$("#идентификатор вашей карусели").slick('slickPrev'); //предыдущий слайд

Ну и примерно так вешаете на ховер эти действия:

$("левый край карусели").hover(function(){
   $("#идентификатор вашей карусели").slick('slickPrev')
})

Сделал 2мя паралельными слайдерами, связал их js между собой, вопрос закрыт.
Результат тут

$(".класс кнопки").click(function(){
    $(".класс меню").toggleClass("visible");
})

.класс меню{
   overflow:hidden;
   width:0; 
   transition:all 0.2s ease;
}
.класс меню.visible{
   width:700px; //например   
}

пример тут

Можно не width менять а позицию left/right все зависит от вашего макета)

Всё сверстал, додумался как сделать лучше :) всем спс помог position:absolut и отрицательный left для позиционирования зеленой полосы

обновил свой пример из вопроса в связи с правильным решением, готовый вариант получился такой

ну у тебя все правильно просто тебе нужно при изменении селекта делать и вот это

ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText($("#textInput").val(), 20, 20);

иначе просто изменений в контексте канвас не происходит)
https://jsfiddle.net/4f10me0d/

какой-то бред понаписали что один, что второй.

<img src="/images/img.jpg">
<input type="text">

и в js

$("img").click(function(){
   $("input").val($(this).attr("src")); //появился в инпуте /images/img.jpg 
});

пример codepen.io/freislot/pen/apjGpN

я думаю можно, я бы сделал div'ами с разным border-radius'ом ну и position:absolute, думаю пригодился бы

codepen.io/freislot/pen/ZLoaKd
Примерно так, ну вы понимаете это на скорую руку в качестве примера, нет времени выставлять все красиво, думаю суть моего метода ясна

Даниил Шарко @scronheim
Чет не работает

var width;
jQuery("tr td:last-child").click(function(){
width = jQuery("#myTbl").width();
jQuery("#myDiv").append("<div style='width:"+width+"px'></div>");
})

А вы вот так сделайте :))
P.S нет у тега div атрибута width, есть атрибут style с нужными свойствами) повнимательнее надо

Разобрался с PACE, вопрос снят, извините

Пока реализовал так codepen.io/freislot/pen/PbMpow
Прорисовку линий от иконок к центру тоже реализовал но закомментировал, дизайнер передумал :)

Решил

var img = new Image();   // Создаём новый объект Image
img.src = 'imgcss/wide.png'; // Устанавливаем путь к источнику
context.drawImage(img, this.x, this.y, 50, 26); //рисуем картинку в канвас