eugen35

В ОБЩЕМ-ТО ПРИМЕР ВЁРСТКИ (html + css + js) И ПОВЕДЕНИЯ ЗДЕСЬ : jsfiddle.net/6o0pkL54/9/ Только тут цвета,размеры и отступы не такие, как у гугл или мэйл календаря....(СДЕЛАЙТЕ КАК ТАМ) + Вот какая проблема, КОТОРУЮ НУЖНО РЕШИТЬ: - при развёрнутой строке "Весь день" #tabbodyDiv вылезает из #week; - при развёрнутой строке "Весь день" границы столбцов в этой строке не отображаются или отображаются не во всю ширину этой строки... Обе проблемы мне понятно как решить... Однако в принципе БЫЛ БЫ РАД СОТРУДНИЧАТЬ С НОРМАЛЬНЫМ ВЕРСТАЛЬЩИКОМ для периодических таких мелких заказов. И оставляю это для Вас, чтобы посмотреть, кто может решать такие и аналогичные задачи... ПС А вообще – вдруг я чего намудрил с вёрсткой и можно ещё чего проще и красивее сделать (например, меня смущает мелкое несовпадение ширины столбцов в шапке и в теле таблицы)? ЗАДАЧА: Гугл – строка "Весь день" (вторая строка после строкой с наименованиями дней недели) свёрнута – clip2net.com/s/iVkbk7 эта же строка свёрнута – смотрим мероприятия из неё, не разворачивая "весь день" clip2net.com/s/iVkc2O эта же строка развёрнута – clip2net.com/s/iVkbNu как работает гугл при изменении размера окна (резина): clip2net.com/s/iVkcm8 Мэйл – строка "Весь день" свёрнута – clip2net.com/s/iVkd6E эта же строка свёрнута – смотрим мероприятия из неё, не разворачивая "весь день" – clip2net.com/s/iVkdDa эта же строка развёрнута – clip2net.com/s/iVkdQC как работает гугл при изменении размера окна (полурезина – сжимание ширины до определённой ширины): clip2net.com/s/iVke8K Задача – сверстать (ТОЛЬКО html + css) недельный календарь (Только ту область, которую показываю в скриншотах), резиновый или полурезиновый. Мне бы хотелось, чтобы выглядел как mail.ru, но был резиновый как гугл. Требования: семантичная вёрстка без излишеств... Для свёртывания и развёртывания строки сделать так: псевдокласс css для развёрнутой строки "Весь день" – .rolledDown, псевдокласс свёрнутой строки – нет класса .rolledDown. Для просмотра мероприятий, не разворачивая весь день, заводим псевдокласс css .rolledDown уже для UL, в котором перечислены события данного дня. СТОИМОСТЬ 1200 руб. (можете свою предложить)

http://jsfiddle.net/yxhzsk4m/1/ Первая строка таблицы ссылается на datalist. При выборе одного из значений фон меняется на жёлтый. А хочется, чтобы остался серым, ну или тем, которым укажу. Как это сделать? (:valid, вроде в этом случае не действует....) ПС Классно было бы также ограничить ввод в это поле только указанным в datalist списком значений. нельзя ли это сделать через pattern (в общем без JS)??? (В этом случае вроде рекомендуется использовать селект, но отказался от него из-за того, что он всегда ставит margin left и right + 3px, если рядом есть какой-либо элемент. А если нет, то не ставит!!! И красивой таблицы не получается... И высота у селекта меньше на 2 px, к счастью с margin такого косяка нет! http://jsfiddle.net/yxhzsk4m/2/ - понятно, что я могу в зависимости от положения select в таблице установить ему margin-left и margin-right, но мне бы хотелось такое решение, которое бы работало вне зависимости от положения в таблице)

В данном примере всё замечательно, конечно. Да только внутри одного svg много блоков и стрелок хотел поместить и их таскать по ОТДЕЛЬНОСТИ... поэтому данное решение не подходит ( Хотя уже думаю о гибриде... Блоки на HTML, стрелки - на SVG. Каждая стрелка будет при этом в своём SVG.... Но конечно изначально хотел не так.. Гибрид меня пока привлекает тем, что contenteditable в html есть, а в SVG его нет ( (ну и подозрением, что ещё на много подводных камней от незнания SVG натолкнусь ((

Затеял тут сделать простой редактор схем процессов. И подумал, чтобы линии в месте пересечения полукругом друг друга огибали сделать всё на Svg. И кажется так в дальнейшем будет больше преимуществ. Без svg всё просто стрелочки бы тоже дивами рисовал (там мона и треугольнички дивами к ним приделать... по большому счёту можно и полукруги сделать ..) Вот например, как я таскаю див и текст в него могу вбивать: http://jsfiddle.net/5g55uyjn/1/ А вот с svg начались непонятки. Но совершенно не понял, как тупо текст внутрь rect или внутрь circle поместить. А потом таскать это одним махом... Думал просто можно текст вставить... Нельзя вроде... Думал для этого <g> служит... Помещу туда <rect> и <text>. И буду таскать всё за <g> (см. http://jsfiddle.net/5g55uyjn/4/ ). А вроде нет. Через <g> мона задавать им общие css-свойства... А x и y это их аттрибуты, а не css-свойства и посему задаются вроде им отдельно. Ну сделал так: http://jsfiddle.net/5g55uyjn/3/ - ну так тут текст не таскается (( Могу конечно замутить скрипт перетаскивания, который одновременно будет менять ОТДЕЛЬНО x,y у всех вложенных в <g> элементов ПУТЕМ ИХ БАНАЛЬНОГО ПЕРЕБОРА. Но неужели нет ПРОСТОГО способа задать текст внутрь rect или внутрь circle?

Switch74, прошу Вас мне на почту отписаться (у меня нет доступа к лс).... Есть предложение. Почта: eugen35@mail.ru

ВАЖНО! Хотелось бы использовать стандартное (последний утверждённый вариант) xml-описание счёта-фактуры и стандартный xslt для неё. Ну и хорошо бы его где-то желательно автоматически брать, а не ручками забивать. 1400 рублей - стоимость задания. Сделать веб-приложение (фронтэнд, если нужно, с меня), в которое вбиваешь требуемые реквизиты счёта-фактуры, а оно генерит xml. А по отдельной кнопке с использованием xslt позволяет распечатать этот xml. Код должен быть хорошо откомментирован. Хранить этот счёт-фактуру не нужно где-либо. Поскольку это чисто учебное приложение для меня.

цена этого задания 2000 рублей. (без постскриптума (ПС) - там просто жду совета) Про JS - не знаю - можно ли через него работать с WebDAV? По идее-то можно? http://ru.wikipedia.org/wiki/WebDAV У меня стоит Apache (последняя версия). Туда входит WebDAV. Не знаю только, запущен ли WebDAV. Вопросы (оформить в виде вэб-приложения с этими функциями, <b>фронтэнд ему если нужно я сделаю</b>): 1) если не запущен WebDAV - показать как запускать его (и держать постоянно включённым) 2) показать, как получить список файлов и папок 3) скачать файл и заблокировать для записи на сервере 4) закачать отредактированный файл обратно (и указать новую версию), разблокировать 5) записать метаданные, изменить метаданные, осуществлять поиск по метаданным 6) в итоговом коде должны быть нормальные комментарии Пояснить что ещё можно сделать с -Работа с любым типом объектов (не только файлы); - Поддержка одновременной работы над несколькими объектами (не совсем понимаю, что значат эти пункты из википедии) ПС И ещё: А) мне казалось, что WebDAV позволяет, ткнув на файл на вебстранице, обеспечить его скачивание и автоматическое открытие его в Word, например, а затем редактирование, сохранение и закрытие - и при этом он автоматически закачается обратно на сервер? Или это уже другая технология? Подскажите, какая? Б) не подскажете, как делают так, что вордовские и pdf-овские файлы смотрят прямо в браузере? Можно ли их при этом ещё и править и сохранять?

Диаграмма Ганта - продолжить разработку. Описание текущего кода и его работу можете увидеть в задании. Сам код - в http://jsfiddle.net/PWvL5/ Стоимость: 1500 руб. за проект. Описание работы скрипта. Работает в общем-то банально. В общем используются три вида функций: 1) функция для определения числа дней в месяце getDaysinMonth(). 2) функция для определения начала предыдущего/последующего периода prevNextPeriod(). (аргументы дата, для которой нужно определить предыдущий период, dir – направление (предыдущий или последующий), значения prev, prev+, next, next+. Разница с плюсом в том, что если дата, для которой нужно определить предыдущий период, итак является началом периода, то при prev она же и возвращается, а при prev+ возвращается дата периода, идущего перед этим периодом. То же самое с next и next+). 3) функция для определения формата вывода названия периода (формат вывода даты) – getUnit(). Они иногда присутствуют в нескольких модификациях (отдельно для дней недели, отдельно для месяцев и т.д.). Есть 10 шкал (1 шкала это объект) в массиве. Каждая шкала состоит из двух кусков: мелкие деления (mainUnit) и крупные деления (unit). Т.е. в одном крупном делении несколько мелких. Ну и помимо этого навешано несколько методов: (prevNextPeriod() – отдельно для мелких и крупных делений, getUnit()– отдельно для мелких и крупных делений) и т.п. Также есть полезное свойство/метод unitLength – для мелких делений оно содержит примитив – ширину для их отображения на экране в px. А для крупных делений это метод, который возвращает расчётную ширину в px для их отражения на экране (а сделать это пришлось из-за того, что у месяцев разная длина). Ну а дальше нарисовать любую шкалу (<table><td>) не проблема: берём заданную дату начала шкалы, вставляем <td>, затем берём с помощью prevNextPeriod следующий период и снова рисуем <td>, пока следующий период не станет больше заданной даты окончания шкалы. (код длиной в пять строчек) Ну и осталось добавить в масштабе выбранной шкалы задачи - activities (есть дата начала и дата конца задачи). Вычисляю разницу в милисекундах от заданного начала шкалы до даты начала задачи, затем, зная отображаемую ширину мелких делений, посредством деления, перевожу дату начала в координату left задачи в масштабе данной шкалы. Тоже самое с датой конца задачи. Добавляю задачу. (код длиной в 8 строчек) Чего хочу: 0) я в коде поизлишествовал (не сразу у меня сложилось такое мнение и есть лишние кусочки), буду рад если его перепишете короче и нагляднее и правильнее (тут цена по договорённости) 1) сделайте модификацию prevNextPeriod() для квартала, полугодия, года и подключите к соответствующим объектам шкалы (времени Вам на это потребуется 30-60 минут с отладкой). 1,5) среднюю горизонтальную border между шкалой крупных и мелких делений уберите (см. скришоты) 1,7) сделайте, чтобы не по двойному клику переключались шкалы, а по ctrl+колёсико мыши вверх/вниз. 2) ниже сетки добавить столбцы, обозначающие рабочее время (оно берётся из функции– смотри пункт 5 ниже и получается округлением до ближайшего периода) - С 9 до 18-00, С 13-00 до 14-00 перерыв на обед. В предпраздничные дни – до 17-00. СКРИНШОТЫ ПРИЛОЖЕНЫ (0-3 – для шкал 0-3 соответственно, а далее серые столбцы не рисуются у всех шкал далее будет просто белое поле – смотри скриншот 4). 3) дату старта диаграммы и дату окончания диаграммы устанавливать автоматически, исходя из списка задач (от начала самой ранней задачи, до конца самой поздней задачи); (15-30 минут) 4) высоту задач и отступов (кстати, это класс .gantChartBar) между ними сделать в виде переменной; (5-10 минут) 5) сделать функцию для определения по дате: рабочий день, предпраздничный или выходной/праздничный. Ну и для выдачи расписания рабочего времени по дате, выдача в виде массива – что то вроде: индекс 0 значение 9-13-00, индекс 1 значение 14-00-18-00. 6) ну и наконец, сделать так, чтобы дата конца задачи считалась с использованием функции с -аргументами: дата начала, длительность задачи – на выходе получаем дату окончания. При этом: - Если длительность задана в днях, часах, минутах – считаются только рабочие дни, часы, минуты (см. п.5 функция определения рабочего времени). - Если длительность задана в месяцах, кварталах, полугодиях, годах – календарное время используется. 7) Ну и всё это описать – ещё подробнее, чем я здесь описал + комментариев поболее чем я в коде сделал. Это ещё не всё – остальное – за отдельную оплату. Разумеется, права на разработку и код принадлежат мне ).

Есть ли веб-сервис или API, чтобы узнавать, какие дни рабочие, какие предпраздничные, какие выходные? Самому каждый год править массив с праздниками кажется нелогичным. Видел пару тем: http://www.cyberforum.ru/android-dev/thread1048345.html http://htmlweb.ru/service/holidays.php. Но там не совсем под описанную задачу подходит. Мне кажется в Google или Yandex календарь должна быть такая функция? Но как -то с разгону не нашёл...

Спасибо, интересную тему создали Только я не понимаю необходимости в max-width. Я убрал ее из скрипта - вроде все работает как надо: http://jsfiddle.net/KT5TC/16/ Всё дело в том, что тогда Вы не сможете сделать ни дивы, ни таблицу меньше их width и/ или их содержимого. Попробуйте ячейку таблицы сделать по ширине меньше чем текст в ней. Или попробуйте рамочный див сделать меньше 400px.

В общем тут с учётом комментов с ещё одного форума получилось вот что: http://jsfiddle.net/KT5TC/15/. Вместо width в скрипте стал работать с min-width и max-width одновременно. Вообще-то я не хотел модифицировать скрипт, чтобы он был универсальным.. Но в таком варианте он вроде бы и остался универсальным. И при этом нет лишних дивов внутри таблицы!

нетtable-layout: fixed; только для ускорения загрузки таблицы будет работать. При изменении окна таблица всё равно будет сжиматься.

угу... в сообщении выше именно такой пример вам и привёл (http://jsfiddle.net/KT5TC/12/). просто вставил див в заголовок второго столбца пока - увидел результат положительный и дальше не стал править

пасибо. вам. пока остановлюсь на таком решении - смотрите второй столбец (там резайсабле див внутри ячейки) - такое поведение меня полностью устраивает. Хотя изначально хотел избежать неосмысмленных фиксов в вёрстке ( http://jsfiddle.net/KT5TC/12/

Программно то я мог бы поменять ширину таблицы вместе с шириной столбца... Но мне кажется это не айс. Раз таблица может автоопределять свою ширину из ширины столбцов - вот бы этим воспользоваться? ТОЛЬКО ВОТ ЗАЧЕМ ОНА ПЫТАЕТСЯ ПОДСТРОИТЬСЯ ПОД РАЗМЕР ЭКРАНА И КАК ЭТО ОТМЕНИТЬ? Ума не приложу!? ( Она же итак меняет свою ширину при изменении размеров столбцов, если ширина таблицы не указана...

Спасибо,Switch74 огромное! Изящно) Правда, при этом ответ на вопрос 2 всё ещё не работает ( http://jsfiddle.net/KT5TC/8/ Потащите розовый див вправо за границу внешнего дива, - он станет шире внешнего дива и полосу прокрутки активирует. Потащите любой из столбцов вправо - они дойдут до границы, а дальше нет (( Мне нужно чтобы талица вела и в вопросе 2 нормально. И ещё оказалось, что: 1. увеличиваем столбец - ок. 2. уменьшаем внешний div - столбец всё равно уменьшается, только не так страшно как раньше. Мне нужно, чтобы столбец вообще не уменьшался при уменьшении ширины родителя

Вот ссылка на мой код, где можно всё попробовать: http://jsfiddle.net/KT5TC/1/ Менять ширину элемента можно, наведя мышь на правый его край, далее - зажимаете левую кнопку мыши и меняете размер элемента. 1. Попробуйте уменьшить размер внешнего div (двойная рамка) меньше ширины таблицы - таблица начнёт сжиматься. Тот же эффект Вы достигнете если просто будете уменьшать размер окна браузера. 2. Попробуйте увеличить размер СТОЛБЦА таблицы (хочу менять именно ширину столбцов и чтобы край таблицы при этом менялся автоматически - для таблицы я не задаю WIDTH). Если Вы увеличиваете его так, что край таблицы достигает края внешнего div, то ширина столбца начинает увеличиваться, а таблица пытается остаться на странице полностью, уменьшая ширину других столбцов). 3. Примечательно, что розовый div ведёт себя вполне корректно - если все те же действия применить к нему. http://jsfiddle.net/KT5TC/ - здесь розовый див шире таблицы, чтобы Вы увидели его поведение. ВОПРОС: МНЕ ОЧЕНЬ НУЖНО ЧТОБЫ ТАБЛИЦА ВЕЛА СЕБЯ КАК РОЗОВЫЙ ДИВ В ОБОИХ СЛУЧАЯХ! А именно если она по АВТОМАТИЧЕСКОЙ ширине должна стать больше родительского элемента - чтобы становилась и при этом становилась активной полоса прокрутки. И НЕ ИСПОЛЬЗОВАТЬ ДЛЯ ЭТОГО ДОПОЛНЕНИЯ В JS-коде! Можно ли вообще это сделать вёрсткой (css + html)?