Search the Community
Showing results for tags 'js'.
-
Суть вопроса: в HTML страничке реализована анимация средствами CSS: // CSS .fon_animate{ ...width: 0px; animation: timing_left 2s ease forwards;}@keyframes timing_left { 100%{ width: 400px; margin-left: 0px; }}//HTML <div class = "fon_animate" style="top:250px; animation-delay: 1s"> <img src = "../res/img/blank.png"></div>Необходимо по кнопке клавиатуры, например пробел, либо сокращать время анимации до нуля, либо переходить к 100% анимации. Я так понимаю это можно реализовать средствами JQuery. Очень буду рад и благодарен за помощь!
-
Здравствуйте. Задумка: использовать плагин (jquery) Easyzoom на галерее картинок, предназначенный для показа увеличенного фрагмента изображения. Лупа, короче. Работа плагина следующая. <a href='src_pic_lrg'><img src='src_pic_sml'></a>- при наведении курсора на картинку(точнее на ссылку) плагин берет href, в котором указан большой вариант картинки и показывает ее в отдельном div. Это все отлично. но я имею набор картинок, которые переключаются в одном div. Проблема в том, что как ни переключай ссылки, все равно считываться будет href, который написан последним. то есть не переключается вовсе. я переключал zIndex div'ов, в каждом из которых помещено по ссылке. экспериментировал с display:none на div и самих ссылках. Все равно последний href как насквозь все собой пронзает. Может идейку какую кто подскажет, как с картинками a href переключать. у cloudzoom это реализовано каким-то макаром, но я так и не врубился как... привожу минимальный, но аналогичный по механизму код . <!DOCTYPE html><html><head><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script type="text/javascript" src="js/easyzoom.js"></script><script type='text/javascript'>jQuery(function($){$('a.zoom').easyZoom();});</script><style> #myDIV { position: absolute; top: 130px; left: 30px; width: 420px; height: 310px; background-color: lightblue; border: 1px solid black;} #DIV2 { position: absolute; top: 130px; left: 30px; width: 420px; height: 310px; background-color: coral; border: 1px solid black; }#easy_zoom{width:600px;height:400px; border:5px solid #eee;background:#fff;color:#333;position:absolute;top:60px;left:500px;overflow:hidden;-moz-box-shadow:0 0 10px #777;-webkit-box-shadow:0 0 10px #777;box-shadow:0 0 10px #777;line-height:400px;text-align:center;}</style></head><body><button onclick="myFunc()">меняем</button><div id="DIV2"><a id='forsh0' class='zoom' href='foto4.jpg'><img class='pict' width=420 height=310 src='foto4.jpg '></a></div><div id="myDIV"><a id='forsh1' class='zoom' href='foto5.jpg'><img class='pict' width=420 height=310 src='foto5.jpg '></a></div><script>function myFunc() { document.getElementById("myDiv").style.zIndex = "-1";}</script></body></html>
-
Здравствуйте. Я подключаю файл со скриптом с помощи js var script = document.createElement('script'); script.src = 'script.js'; document.documentElement.appendChild(script);Но перед подключением мне надо проверить не подключён ли уже этот файл. Как мне это реализовать?
-
Приветствую камрады! Появилась у меня задачка: необходимо скопировать часть html кода сгенерированного у пользователя на странице сайта и передать на сервер. Интересующий код является сторонним виджетом js с использованием jquery. Есть ли какая либо возможность скопировать исходный код виджета у пользователя? Можно по запросу разрешения у пользователя. Лично сам рассматриваю примерно такой вариант: Пользователю предлагается форма копирования, в которой находится виджет. Пользователь его копирует в свободную форму и отправляет на сервер. Как этот процесс можно реализовать?
-
Ребята, всем привет! Занимаюсь версткой проекта, адаптивного, и потребовалось сделать так, чтобы при разрешении экрана менее 700 пикселей, у одного элемента менялся класс. (при этом у него задано 2 класса, что-то типа: class="one two") Изменить нужно именно второй класс "two". Через @media - не вариант, мне конкретно нужно присвоить новый класс элементу. Понимаю, что это нужно сделать средствами js, но как - ума не приложу.. Очень буду рад за подсказку! Понимаю, что вопрос нубовский, но очень надеюсь на вашу помощь..
-
У меня есть скрипт function gal1(){document.getElementById('mg').addEventListener('click',function(){document.getElementById('golova').setAttribute('href','g.mg.html');},false)}он запускается нажатием кнопки<div onclick="num=1; gal1(); gal(); " class="min" id="mg"><img src="img\mg.jpg" style="height:100px ; "></div>но дело в том,что срабатывает после нажатия 2 раз на кнопку,а нужно на 1,как исправить?
-
Доброго времени суток, уважаемые форумчане! Подскажите пожалуйста, не могу понять, что не так с jQuery jplayer. При загрузке страницы в Хроме бесконечная обработка запроса, если обновить страницу в консольке наблюдаю ошибку 403. Права доступа к файлам 0644, пути прописаны правильно, что не так? audiorussia.com Код: $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { oga: "/audio/1.ogg", mp3: "/audio/1.mp3" }); }, swfPath: "/js", supplied: "oga, mp3", play: function() { $(this).jPlayer("pauseOthers"); }, wmode: "window", smoothPlayBar: true, keyEnabled: true});
-
Пациент: http://demo.imatte.us/fomru/project_people.html Выпадающие меню при клике на эти ссылки работают не правильно. При клике открывается меню, но при выводе курсора из этих меню оно скрывается. Если после этого наводить курсор на любую из этих ссылок, то откроется их меню. Подскажите, как сделать чтобы при unhover'е меню не скрывалось, и при уже открытом меню при наведении на другую ссылку не открывалось другое меню. Спасибо.
-
Здравствуйте! Необходимо сделать 3 HTML страницы: • Главное окно • Lobby • My profile Последовательность загрузки: 1. Главное окно https://www.dropbox.com/s/iv0dl4pms1gvnbo/1.jpg?dl=0 2. После загрузки главного окна загружается вкладка Lobby https://www.dropbox.com/s/yolcrdfhk36b5w1/2.jpg?dl=0 3. После загрузки Lobby загружается цветной фон https://www.dropbox.com/s/zxbvwa4vdvjpx7v/3.jpg?dl=0 Описание Lobby: • Lobby - это просто графика, в этой вкладке должна работать только кнопка MENU. • По клику на кнопке MENU, меню открывается / закрывается. https://www.dropbox.com/s/v3exqtxmevg2d53/4.jpg?dl=0 • В меню нужно, чтобы работал первый пункт (My Profile). • По клику на My Profile загружается, или становится активной, если уже загружена, вкладка My profile. https://www.dropbox.com/s/y7m908tr2lbm04a/5.jpg?dl=0 Описание My profile: • My profile – это сверстанная форма. • Кнопка ON/OFF – это визуализация checkbox’a (on – checked, off – unchecked) • По нажатию на кнопку SEND MESSAGE TO OTHER WINDOWS, все окна, кроме My profile, должны получить сообщение ‘Message for all’. • По нажатию на кнопку SEND MESSAGE TO LOBBY, окно Lobby должно получить сообщение ‘Message for Lobby’. • Когда окно получает сообщение, оно должно вывести в консоль свой URL и полученное сообщение. • По нажатию на кнопку X или CLOSE вкладка My Profile закрывается и активной становится вкладка Lobby. Подскажите просто как правильно это все сделать? Спасибо.
-
Отредактировать стили оформления текста в стороннем приложении WizNote
Kostenelo posted a question in HTML Coding
Для начала вступление: WizNote - это сервис мульплатформенных заметок, копия известного Evernote https://evernote.com/intl/ru/, но с доступными оффлайн базами данных на мобильных устройствах и некоторым другим интересным функционалом. Подробнее здесь http://4pda.ru/forum/index.php?s=&showtopic=415318&view=findpost&p=33841551 Особенностью клиента WizNote под Windows (под другие платформы наверное тоже) является открытая и простая архитектура программы: заметки это заархивированные html странички, программа основана на движке браузера (возможно Chromium), а значительная часть функционала реализована плагинами с помощью JS, CSS и т.п. Задача: Отредактировать стили оформления текста во встроенном редакторе HTML приложения WizNote, которые вызываются по нажатию кнопки Style панели редактирования. Лично меня смущают огромные отступы вверх и вниз для стилей типа "Heading 4, 5, 6". Полагаю, что файлы, которые отвечают за стили и функционал редактора хранятся здесь: Wiz\WizTools\htmleditor\ Но поиском по отображаемому имени стиля я их не нашел (не программист ). Прошу помочь разобраться как отредактировать встроенные стили оформления текста. файлы из папки "htmleditor" https://yadi.sk/d/xOEruow9abW2B полностью клиента можно скачать здесь http://www.wiznote.com/download/ P.S.: напрямую с разработчиками общаться трудновато, потому что они китайцы -
Почему бы разработчикам браузеров не сделать инъекцию популярных библиотек, фреймворков?, дабы не качать от куда то, просто вызвать как любой объект или метод javascript, ведь уже меньше будет запросов на сервак, или возникнут какие то проблемы? Если нужна более новая версия к примеру того же angular, можно уже просто тогда загрузить.
- 19 replies
-
- 1
-
-
- javascript
- jquery
- (and 2 more)
-
Диаграмма Ганта - продолжить разработку. Описание текущего кода и его работу можете увидеть в задании. Сам код - в 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) Ну и всё это описать – ещё подробнее, чем я здесь описал + комментариев поболее чем я в коде сделал. Это ещё не всё – остальное – за отдельную оплату. Разумеется, права на разработку и код принадлежат мне ). -
http://codepen.io/anon/pen/gbtcf уверен, там какая-то маленькая ошибка. Таб простой дико и ясен. Нужный эффект при active у меня записан как .menu li:active{...}, а скрипт дает значение active только когда не .menu li:active, а .menu a: active. И в скрипте менял хоть убей, но не то) и чего-то не удаляет класы перед назначием нового
-
Добрый день! Меня зовут Павел Кулигин, и я ищу верстальщика к себе в команду. Я работаю в качестве ведущего дизайнера над проектами нескольких компаний: 2Тбанк, Wildberries, FE Credit. Мне нужен человек, который будет верстать макеты сайтов. Пример: http://www.pavelkuligin.ru/LK2/ Профессиональные требования: html5, css3, js (на уровне: оживить калькулятор, доработать плагин, реализовать несложные анимации), знание или желание изучить фреймворки и препроцессоры будет для вас плюсом. (я не сторонник фреймворков и в своей работе мы стараемся сделать собственный css-фреймворк для каждого проекта). Личные качества: высокий уровень ответственности, стремление сделать свою работу лучше других, быстрая скорость работы, понимание принципа: верстальщик тоже дизайнер ( ) Оплата по-часовая (250-300 рублей) В связи с такими ценами мне нужен начинающий верстальщик, готовый расти быстрыми темпами. В будущем уровень зарплат будет увеличен.
-
Смена класов(отдельно) для пунктов меню Вот есть такая структура меню: и есть такой вот скриптик для отображения активной вкладки меню: Вопрос в следующем. Как сделать, чтобы добавление класса происходило индивидуально, а не как сейчас(что к любому активному пункту добавляется класс "activeClass")?
-
вот весь код http://codepen.io/anon/pen/hcyka Проблема в том, что при выборе пункта, он не остается активным, до выбора следующего. Я смотрел все темы на этом форуме и ничего не нашел для моего случая. Главная загвоздка в том, что блок, где отображается инфа и блок, где пункты меню - не должны быть вместе, а раздельно (т.к. пункты должны быть в меню, которое выезжает сбоку, а контент закреплен отдельно от меню) прошу, сделайте мне кодик) там я так понимаю надо дописать js. А я в js не шарю почти) Всем зарание спасибо огромное.
-
вот код http://codepen.io/anon/pen/hcyka Есть кнопки, они сделаны инпутом. Вот в чем проблема: я нажимаю , к примеру, блог и оно выделяется (:focus) и меняется контент. Теперь отведи курсор и щелкни в пустое место - выделение пропало. Вопрос: как сделать чтобы оно держало выделенным до тех пор, пока я не нажму другую кнопку из меню
-
Ребят, может туплю, но чёт не могу понять, почему возвращается такое значение: slideLine.addEventListener("click",function(e){ var x = e.offsetX==undefined?e.layerX:e.offsetX; // позиция клика var slideLine = document.getElementById('slideLine'); var blackout = $('#slideBlackOut'); var d = blackout.css('width', x+'px'); // смещение полосы alert(blackout.css('width')); Есть такой код, но переменная alert возвращает значение не x+'px', а то, что было задано до него. При следующем клике x+'px' (ширину) заданный при первом клике. При следующем - во втором случае заданные и т.д. Как вернуть текущую ширину, подскажите пожалуйста
-
Привет! Суть затеи такова: Есть таблица в центре сайта 5х9. В каждой таблице есть картинка 130х130 пикселей. Каждая такая картинка через промежуток времени меняется на вторую и потом на третью. Каждая на какую-то свою. Суть затеи похожа как на этом сайте. Я новичок, потому скачал скрипт по смене картинки на java и использовал его. Хотел чтобы получилось приблизительно как на этом сайте: http://evraz.com/ Скачал скрипт, по инструкции надо сделать так: После тега body ставить такой код: <script type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> Там где будет картинка, ставить такой код: <img src="images/ax1/1.png" alt="" id="slide_show1" width="130" height="130">И в конце перед тегом /body ставить сам ява код% <script type="text/javascript">var imgs1 = ["images/ax1/1.png","images/ax1/2.png","images/ax1/3.png"];var text1 = ['Картинка 1','<a href="index.html">Картинка 2</a>', '<font color="red">Картинка 3</font>'];var n1=0;time=800;play=setInterval("chgImg1(0)", 4000); function chgImg1(number1) {if (number1!=0) n1=number1-2; $('#slide_show1').fadeOut(time, function() { //для картинок $(this).attr('src', imgs1[n1]).fadeIn(time); }); $('#slide_text').fadeOut(time, function() { //для текста $(this).html(text1[n1]).fadeIn(time); }); n1++;if (n1>=imgs1.length) n1=0;}</script> Так как картинок 45, то и кодов сделал тоже 45(запарился).разница в кодах только в переменных n1,n2,n3 и функциях slide_show1, slide_show2....Но щас когда тестил, заметил, что у меня ваще какие-то левые картинки получаются, которых уже даже в этих папках нет, идут в разнобой...Может подскажите как сделать?
-
помогите пожалуйста написать костылик fiddle html: <div class="cell image_outer"> <label class="label">Фото</label> <div class="box_common_outer"> <div class="box_common"> <div class="box_common_inner"> <img src="/media/cache/61/ad/61ad85ae26431c6fa3de2438e73bd7d2.jpg" width="83" height="83"> </div> </div> </div> На данный момент: <a href="/media/userprofile/path_glory_photo/n_2.jpg">userprofile/path_glory_photo/n_2.jpg</a> <input id="path_glory_photo-clear_id" name="path_glory_photo-clear" type="checkbox"> <label for="path_glory_photo-clear_id">Очистить</label> <br> Изменить: <input id="id_path_glory_photo" name="path_glory_photo" type="file"></div>нужно: <div class="cell image_outer"> <label class="label">Фото</label> <div class="box_common_outer"> <div class="box_common"> <div class="box_common_inner"> <img src="/media/cache/61/ad/61ad85ae26431c6fa3de2438e73bd7d2.jpg" width="83" height="83"> </div> </div> </div> <input id="path_glory_photo-clear_id" name="path_glory_photo-clear" type="checkbox"> <label for="path_glory_photo-clear_id">Очистить</label> <input id="id_path_glory_photo" name="path_glory_photo" type="file"></div>моя попытка: var label = $('.image_outer .label');var thumb = $('.image_outer box_common_outer');var label2 = $('.image_outer label[for="path_glory_photo-clear_id"]');var photo_input = $('#id_path_glory_photo');var checkbox = $('#path_glory_photo-clear_id');$('.image_outer').empty().append(label).append(thumb).append(label2).append(photo_input).append(checkbox);в результате выводится: label, label2, photo_input, checkbox проблема в том, что не выводится ни thumb, ни вложенные в него элементы
-
как сделать чтобы блок wrapper расширялся в высоту если блок news выходит за его проеделы в блоке news генерируемый контент пробовал через min-height: 1000px; сейчас также как и на рисунке вот стили wrapper .wrapper {margin: 90px 0px 220px 220px;width: 1000px;border-radius: 3px;background-color: #f1f1f1;opacity: 0.7;min-height: 1000px;box-shadow: 0px 1px 0px;-moz-border-radius: 3px;-webkit-border-radius: 3px;-o-border-radius: 3px;-o-box-shadow: 0px 1px 0px;-moz-box-shadow: 0px 1px 0px;-webkit-box-shadow: 0px 1px 0px;}
-
Постановка: There is a cookie in place (or not) that stores different scores: {"somekey": 34, "sdf": 1,....} develop function that increment score for given key -
Здравствуйте, искал материал как осуществить проверку email. Нашел и очень много, но почему то они все разные. Трудность состоит в выборе регулярного выражения: /[a-z0-9-_]{2,1000}\@[a-z0-9\-\_]{2,100}\.[a-z0-9]{2,4}/gi; /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i/^\w+@\w+\.\w{2,4}$/i;/^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);И какую функция для проверки использовать email.match(regV); или regV.test(email); Заранее спасибо.
-
Есть стандартный Jquery UI аккордеон, у которого я указываю не стандартные иконки. Javascript: $("#additional-accordion").accordion({ icons: { header: "icon-chevron-down", activeHeader: "icon-chevron-up" }, heightStyle: "content", active: true, collapsible: true });Html: <div id="additional-accordion"> <h2> Дополнительно </h2> <div> Содержимое .... </div><div>И выходит что то типа этого: Html который генерируется: <h3 class="accordion-title ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-accordion-search-accordion-header-1" aria-controls="ui-accordion-search-accordion-panel-1" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon icon-chevron-down"></span>Вес</h3>И вот, нужно поменять <span> с иконкой, что бы он был после текста
