Вы можете создать переменную newHeight
непосредственно перед настройкой высоты. Таким образом, в вашем запросе вы будете использовать переменную вместо текста JS.
var numberHours = 100;
var newHeight = 1000 / numberHours + "px";
$(".cd-schedule .events .top-info").click(function () {
$(".cd-schedule .events .top-info").css("height", newHeight);
});
.top-info {
background: black;
height: 100px;
width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cd-schedule">
<div class="events">
<div class="top-info"></div>
</div>
</div>
Даже при том, что Вы сказали, что требуется избежать его, я предложу Flash. Вы могли легко использовать Flash 6 или 7, и они имеют a> 90%-й уровень принятия. Я был бы удивлен, могли ли Вы получить тот уровень поддержки с JavaScript. Flash является действительно записью, однажды выполненной где угодно, который сократит Ваше время разработки.
Смотрите на RaphaelJS... это - перекрестная реализация браузера рисования функций, с помощью Холста, VML или SVG где это возможно. Я не уверен, позволяет ли это пользователям потянуть для себя из поля, но это могло бы быть достойное внимания.
Используйте dojox.gfx. Это - перекрестный браузер (SVG/VML/Canvas/Silverlight), и похоже, что это отвечает всем требованиям. Можно загрузить его с основного сайта Dojo. Можно попробовать его тесты и демонстрации. Предупреждение: последние два канала будут медленными, потому что код был приспособлен для отладки проблем, не для скорости (не минимизированный, не объединенный, не сжатый, подаваемый от файлового сервера).
Это - очень умная и очень расширяемая библиотека, с которой я столкнулся некоторое время назад: JS-графика
Я добавил бы немного к ответу Kieron; сайт Water Zorn имеет очень хорошо известный пакет векторной графики. Я использовал его в крупном приложении, и это интегрировалось красиво с.NET и рукописным JavaScript. Я также использовал его перетаскивание API для сглаживания перетаскивания элементов HTML.