Search the Community
Showing results for tags 'js'.
-
Здравствуйте. Я начинающий верстальщик и решила взяться за нестандартную верстку сайта. Так как это мой первый опыт, я не знаю как сделать эту шапку сайта. Подскажите, с помощью каких модификаторов css это делается, или нужно использовать js? Может есть какие-нибудь примеры? з.ы. интересно так же, как делаются данные часы обратного отсчета в шапке. если у кого-нибудь найдётся пример на php буду премного благодарна
-
js Разработка клиентских веб-приложений. JavaScript, AJAX, JQuery.
skonline.design posted a topic in Job
Разработка клиентских веб-приложений. JavaScript, AJAX, JQuery. Мы занимаемся разработкой скриптов для оптимизации работы ваших сайтов и повышения взаимодействия с трафиком, добавлением визуальных эффектов. Также готовы взяться за решение нестандартных индивидуальных задач. SEO, внутренняя и внешняя поисковая оптимизация В своем составе имеем специалистов, занимающихся поисковой оптимизацией, повышением CTR на ваших сайтах, увеличением монетизации трафика с учётом различных особенностей тематики и конкурентоспособности ваших сайтов Услуги по разработке элементов администрирования контента, системы управления, работа с СУБД Оказываем услуги по разработке индивидуальных систем управления сайтом, по написаниюь серверных веб-приложений, а так же работаем с базами данных, занимаемся оптимизацией обработки данных. Оказываем всевозможные услуги по разработке статичных веб-приложений, работе с графикой. Цена на все услуги договорная -
Доброго времени суток. Столкнулся с проблемой, что иногда при открытии страницы сайта, он выдает мне страницу которая выглядит именно так Но после обновления страницы, все сново отображается так как надо, проблем с главной страницей сайта, не было замечено. Подскажите пожалуйста с чем это может быть связано, куда копать. Сайт перешел в мои руки недавно, так что какие были внесены изменения мне не известно. Все что мне известно, это что есть такая проблема. Очень нуждаюсь в професиональном совете. З.Ы. Сайт стоит на движке ВордПресс + ВуКомерс (интернет магазин) Ссылка на сайт После перехода на главную страницу по этой ссылке, просто погуляйте по сайту, по разным вкладкам или товарам, страница с ошибкой появится.
-
Есть код, к которому надо подкл js файл, но файл не хочет выполняться, а когда скрипт в html, то выполняеться Сам скрипт <script type="text/javascript"> $(document).ready(function(){ $(".mymagicoverbox").click(function() { $('#myfond_gris').fadeIn(300); var iddiv = $(this).attr("iddiv"); $('#'+iddiv).fadeIn(300); $('#myfond_gris').attr('opendiv',iddiv); return false; }); $('#myfond_gris, .mymagicoverbox_fermer').click(function() { var iddiv = $("#myfond_gris").attr('opendiv'); $('#myfond_gris').fadeOut(300); $('#'+iddiv).fadeOut(300); }); }); </script> Так не работает <html> <meta charset="UTF-8" /> <head> <title>Всплывающие модальные окна (popup) с помощью CSS и JS</title> <style type="text/css"> .fond { position:absolute; padding-top:45px; top:0; left:0; right:0; bottom:0; background-color:#f8b334; } .mymagicoverbox { display:inline-block; color:#ffffff; padding:10px; margin:10px; cursor:pointer; font-weight:300; font-family:'Roboto'; } .mymagicoverbox_fenetre { z-index:9999; position:fixed; margin-left:50%; top:100px; text-align:center; display:none; padding:5px; background-color:#ffffff; color:#97BF0D; font-style:normal; font-size:20px; font-weight:300; font-family:'Roboto'; } .mymagicoverbox_fenetreinterieur { text-align:center; overflow:auto; padding:10px; background-color:#ffffff; color:#666666; font-weight:400; font-family:'Roboto'; font-size:17px; border-top:1px solid #e7e7e7; margin-top:10px } .mymagicoverbox_fermer { color:#CB2025; cursor:pointer; font-weight:400; font-size:14px; font-style:normal font-family:'Roboto'; } #myfond_gris { display: none; background-color:#000000; opacity:0.7; width:100%; height:100%; z-index:9998; position:fixed; top:0; bottom:0; right:0; left:0; } </style> </head> <body> <div align="center" class="fond"> <div id="myfond_gris" opendiv=""></div> <div align="center" style="padding-top:35px;"> <div style="background-color:#00a096;" iddiv="box_1" class="mymagicoverbox"> Нажми на меня ! </div> <div style="background-color:#cb2025;" iddiv="box_2" class="mymagicoverbox"> И на меня тоже... </div> </div> <div id="box_1" class="mymagicoverbox_fenetre" style="left:-225px; width:450px;"> Заглавие первого модального окна! <div class="mymagicoverbox_fenetreinterieur" style="height:150px; "> <div align="center"> <br>Ты действительно любишь васаби? <br><br> <div style="width:100px" align="center" class="mymagicoverbox_fermer">НЕТ</div> </div> </div> </div> <link href='http://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700' rel='stylesheet' type='text/css'> <div id="box_2" class="mymagicoverbox_fenetre" style="left:-225px; width:450px;"> Заглавие второго модального окна! <div class="mymagicoverbox_fenetreinterieur" style="height:150px; "> <div align="center"> <br>Небо синее? <br><br> <div style="width:100px" align="center" class="mymagicoverbox_fermer">ДА</div> </div> </div> </div> <div style="padding-top:35px;" align="center"> <div style=" color:#ffffff; font-weight:300; font-size:30px; font-family:'Roboto';padding-top:20px;"><font style="font-weight:400;">Wordpress-club.com</font></div> </div> </div> </body> <script src="http://code.jquery.com/jquery-1.11.1.js"></script> <script src="/assets/js/popup.js"></script> </html> А вот так работает, но мне нужно скрипт сделать внешним <html> <meta charset="UTF-8" /> <head> <title>Всплывающие модальные окна (popup) с помощью CSS и JS</title> <style type="text/css"> .fond { position:absolute; padding-top:45px; top:0; left:0; right:0; bottom:0; background-color:#f8b334; } .mymagicoverbox { display:inline-block; color:#ffffff; padding:10px; margin:10px; cursor:pointer; font-weight:300; font-family:'Roboto'; } .mymagicoverbox_fenetre { z-index:9999; position:fixed; margin-left:50%; top:100px; text-align:center; display:none; padding:5px; background-color:#ffffff; color:#97BF0D; font-style:normal; font-size:20px; font-weight:300; font-family:'Roboto'; } .mymagicoverbox_fenetreinterieur { text-align:center; overflow:auto; padding:10px; background-color:#ffffff; color:#666666; font-weight:400; font-family:'Roboto'; font-size:17px; border-top:1px solid #e7e7e7; margin-top:10px } .mymagicoverbox_fermer { color:#CB2025; cursor:pointer; font-weight:400; font-size:14px; font-style:normal font-family:'Roboto'; } #myfond_gris { display: none; background-color:#000000; opacity:0.7; width:100%; height:100%; z-index:9998; position:fixed; top:0; bottom:0; right:0; left:0; } </style> </head> <body> <div align="center" class="fond"> <div id="myfond_gris" opendiv=""></div> <div align="center" style="padding-top:35px;"> <div style="background-color:#00a096;" iddiv="box_1" class="mymagicoverbox"> Нажми на меня ! </div> <div style="background-color:#cb2025;" iddiv="box_2" class="mymagicoverbox"> И на меня тоже... </div> </div> <div id="box_1" class="mymagicoverbox_fenetre" style="left:-225px; width:450px;"> Заглавие первого модального окна! <div class="mymagicoverbox_fenetreinterieur" style="height:150px; "> <div align="center"> <br>Ты действительно любишь васаби? <br><br> <div style="width:100px" align="center" class="mymagicoverbox_fermer">НЕТ</div> </div> </div> </div> <link href='http://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700' rel='stylesheet' type='text/css'> <div id="box_2" class="mymagicoverbox_fenetre" style="left:-225px; width:450px;"> Заглавие второго модального окна! <div class="mymagicoverbox_fenetreinterieur" style="height:150px; "> <div align="center"> <br>Небо синее? <br><br> <div style="width:100px" align="center" class="mymagicoverbox_fermer">ДА</div> </div> </div> </div> <div style="padding-top:35px;" align="center"> <div style=" color:#ffffff; font-weight:300; font-size:30px; font-family:'Roboto';padding-top:20px;"><font style="font-weight:400;">Wordpress-club.com</font></div> </div> </div> </body> <script src="http://code.jquery.com/jquery-1.11.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".mymagicoverbox").click(function() { $('#myfond_gris').fadeIn(300); var iddiv = $(this).attr("iddiv"); $('#'+iddiv).fadeIn(300); $('#myfond_gris').attr('opendiv',iddiv); return false; }); $('#myfond_gris, .mymagicoverbox_fermer').click(function() { var iddiv = $("#myfond_gris").attr('opendiv'); $('#myfond_gris').fadeOut(300); $('#'+iddiv).fadeOut(300); }); }); </script> </html>
-
Доброго времени суток всем, такая вот у меня смешная проблема... Не получается убрать стрелки и крестик тоже, а вот попробовал padding изменить все получилось, подскажите пожалуйста в чем причина? $container.find('a').fancybox({ 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 200, 'speedOut' : 200, 'overlayOpacity' : 0.6, 'arrows' : false }); если нужно какой либо еще код скажите, я все добавлю, заранее спасибо.
-
Доброго всем дня. Нужно сделать так, чтобы на фоне сайта дымился дым (клубился, вращался и.т.д), всегда, а в некоторых блоках дым должен двигаться, сжиматься или расширяться в зависимости от проскроливания страницы. Пожалуйста, подскажите, как это сделать лучше всего? Поставить на фон видео? Но его нельзя будет контролить скролом.
-
У меня есть картинка <input type = "image" class = "but1" id = "11">. Её айди 11. Как сделать так, чтобы при нажатии на эту картинку я получал её айди, то есть 11?
-
При скролле полоса должна заполняться. Как можно создать подобную форму? Есть ли примеры?
-
Как сделать что бы при открытии страницы воспроизводился случайный видеофайл на фоне
-
Здравствуйте, столкнулся с проблемой, которую не знаю как решить, она не критичная, и даже без ее решения все работает, но очень бы хотелось разобраться в причине ее появления и как от нее избавиться. В отладчике, заметил что к каждому моему скрипту прописанному в "голову" главной страницы он выдает ошибку. Ошибка которую я получаю А вот те самые скрипты: <script> $(document).ready(function(){ $('.flexslider').flexslider({ animation: "fade", start: function(slider){ $('body').removeClass('loading'); } }); }); </script> <script> $(document).ready(function() { $("#form").validate(); }); </script> P.S. Предпросмотр не работал =(
-
Здравствуйте. На моем сайте есть функция <option value="127.0.0.1:443">Server #1</option> Я замечал, что во многих сайтах, похожих на мой, вместо (код выше), у них <option value=":server1">Server #1</option> и при этом у них value также равен значению "127.0.0.1:443". Хочу также реализовать это на своем сайте, но не знаю как. Надеюсь на вашу помощь:) Мой сайт, где можете полностью посмотреть код: agarix.esy.es
-
Как сделать автоматическое действие в HTML? Как сделать так, чтобы при переходе на сайт, например, вот это действие... <a href="//google.com" target="_blank" onclick="location.href='//htmlbook.ru'">Текст</a> ...выполнялось БЕЗ клика человека на ссылку (в данном случае надписи "Текст")? Помогите, пожалуйста
-
Приветствую всех! В общем на html странице есть 2 блока: с приветствием и кнопкой и второй блок с калькулятором. Хотелось бы сделать, чтобы при нажатии на кнопку первый блок плавно сдвигался влево и исчезал(как бы за границу экрана), а второй плавно появлялся на его месте. Все как бы работает, но как я понял display:block ломает всю анимацию, то есть второй блок появляется не плавно. Подскажите как лучше это реализовать. Хотелось бы просто, без jQuery. Вот код <div id="content"> <div id="welcome"> <a href="#" id="try-it"/> </div> <div id="calc-wrapper"> </div> </div> #welcome { transition: all 1s ease-in; } #calc-wrapper { display: none; opacity: 0; transition: opacity 1.5s; } 'use strict'; let welcome = document.getElementById('welcome'); let tryIt = document.getElementById('try-it'); let wrapper = document.getElementById('calc-wrapper'); tryIt.addEventListener('click', function (event) { welcome.style = "transform: translate(-100%, 0);"; setInterval(function () { welcome.style = "display: none;"; wrapper.style = "display:block; opacity:1;"; }, 1000); });
-
Здравствуйте, я решил сделать сайт по шаблону от wix.com, я только учусь, вот не могу понять как сделать так что бы блок с картинкой заливался желтым с opacity 0.6 где-то и в то же время что бы эта картинка была ссылкой на саму себя но в окне галереи от fancybox. У меня заливка желтым уже стоит через hover, но картинка не работает как ссылка, если я убираю hover то ссылка становится активной и галлерея работает как задумано. Вот ссылка на шаблон сайта: http://ru.wix.com/website-template/view/html/1642?originUrl=http%3A%2F%2Fru.wix.com%2Fwebsite%2 Ftemplates%2Fhtml%2Fall%2F2&bookName=&galleryDocIn dex=7&category=all Вкладка "О нас", внизу есть фото команды, они при наведении на них мышкой заливаются желтым, а блок с текстом нет, у меня это работает, но не работает ссылка в картинке на галерею как в оригинальном шаблоне. Вот код HTML: <tr> <td id ="td1"> <div id="line1block7"> <div class="im"> <a class="gallery" rel="group" href="images/com_1big.jpg" width="240px" height="198px"> <imgsrc="images/com_1.jpg" width="240px" height="198px"> </a></div> <span class="emp1">Юлия Соколова</span><span class="empinfo1"><p class="text1">Руководитель студии<br><br>Это текст. Кликните дважды, чтобы отредактировать его. Расскажите посетителям сайта о себе, своих услугах и преимуществах.</p></span> </td> </div> Код CSS: .im{ width: 240px; height: 198px; margin-bottom: 5px; border: none; position: relative; } .im:hover{ transition:all .5s; background: yellow; content: " "; opacity: 0; position: absolute; top:0; bottom: 0; left: 0; right: 0; } div:hover .im:after{ opacity: .6; } .emp1, .empinfo1{ padding-left: 10px; } .emp1{ font-family: play, sans-serif; margin-top: 5px; padding-top: 15px; background-color: #CFCFCF; display: block; position: absolute; width: 230.2px; height: 29px; color: #FFFFFF; font-size: 19px; } Помогите пожалуйста разобраться с проблемой, а то я две недели над этим сидеть буду если не больше наверное, я уже в тупике, не знаю что дальше делать, или переписывать этот код и как-то изменять его частично.
-
Только начинаю набирать опыт сайтостроения. Окончил курсы PHP+MySQL+JS! Сделаю за минимальную плату адаптивный сайт/блог/landing-page. Моя почта : astonevart@gmail.com
-
Всем привет! Никак не могу разобраться, в чем тут дело. В интернете тоже никакой информации о таком странном поведении браузера не нашел. Все браузеры корректно загружают файлы, кроме Safari. Подписываюсь на событие progress объекта XMLHttpRequest.upload и вывожу в консоль данные о загрузке файлов: console.log(e.loaded + ' from ' + e.total + ': ' + e.loaded / e.total * 100); И вот, что вижу в консоли: (см. фото) Текст "Данные полностью загружены на сервер!" выводится внутри обработчика события XMLHttpRequest.upload.onload. То есть когда данные, казалось бы, полностью загрузились, Safari как будто повторно пытается их загрузить. Кто-нибудь сталкивался с такой проблемой? P.S.: Загрузка осуществляется по средством jQuery.ajax: xhr: function() { _xhr = $.ajaxSettings.xhr(); _xhr.upload.onprogress = function(e) { console.log(e.loaded + ' from ' + e.total + ': ' + e.loaded / e.total * 100); }; return _xhr; } До этого делал нативным способом. Поведение не меняется. Спасибо!
-
Всем привет! Заметил такую особенность, что при удалении тега <video> со страницы и даже при обnull'ении переменной видео все равно продолжает скачиваться с сервера. Как можно оставить загрузку? Спасибо!
-
Привет всем форумчанам, я верстаю сайты разной сложности. Стандартную верстку буду делать за 300 рублей, а если у вас сложный, пишите договоримся! Еще делаю натяжку шаблона на DLE. Спасибо за внимание!
-
Всем привет. Делаю кое-что, и вот понадобилось чтобы генерировалось число(например 9 цифр, без повторений, но с контролируемым повторением 0 в числе(то есть можно указывать количество нулей в числе)), а затем выводить картинки заранее закреплённые за этими цифрами. Даже не знаю с чего начать, подскажите пожалуйста.
-
Как и любой новичок, шарясь по сайтам с ответами на всевозможные мои вопросы я нашёл код, который должен выводить две картинки в рандомном местоположении(написан здешним Sensei вроде), но он почему-то не работает. Подскажите ошибку. <html> <head> <style type="text/css"> html, body { height: 100%; } img { position: absolute; } </style> </head> <body> <script> var img = document.querySelectorAll('img'), i = 0, max = img.length, left, top; for (; i < max; i += 1) { left = Math.round(Math.random() * (document.body.offsetWidth - 100)) + 'px'; top = Math.round(Math.random() * (document.body.offsetHeight - 100)) + 'px'; img[i].style.left = left; img[i].style.top = top; } </script> <img src="http://savepic.ru/11286158.png" > <img src="http://savepic.ru/11330177.png"> </body> </html>
-
Здравствуйте, подскажите как можно реализовать версию шапки для мобильного устройства, чтобы она была не такой пугающей как сейчас. Хотелось бы чтобы текст был более упорядочен или сделать его мельче, для мобильных устройств, т.к. он через чур большой. На сайте использую бутстрап и само меню так же написано с его применением. Вот ссылка на сайт. Буду благодарен любой помощи и любому совету.
-
Здравствуйте, я и с просьбой и вопросом одновременно. Есть корзина (ссылка) Я ее вкрутил в сайт, работает превосходно, хватает даже бесплатной версии, но есть вопрос, каталог у меня не то чтобы большой, но для каждого товара есть две цены (стандарт и премиум) и этот скрипт очень простой, но в каждую ценовую позицию нужно вставлять код скрипта, чтобы он выводил там именно тот товар, который мы добавляли в админпанеле. И так про скрипт пару слов сказал, теперь собственно вопрос и просьба (к делу как говориться) Вопрос: Можно ли допилить скрипт или скажем так эта функция так и так присутствует но я не в курсе, чтобы при изменении цены, она менялась сама и в каталоге, т.е. в админпанеле поменяли цену, она и на сайте поменялась (сейчас я все там ручками правлю) И собственно просьба: Если этой функции там нет, насколько сложно это сделать и сможет ли кто взяться за это дело? Я просто 0 если честно в ява, хоть и знаю про нее и пытался выучить ее, но на курсы иду только в октябре, и не думаю что смогу сделать сразу такое после курсов. Так что может ли мне кто с этим помочь? P.S. Корзина очень простая, там простая html разметка под таблицы и данные, а все остальное держится на js. P.S.S. Живой пример, того как это стоит и работает, если кому-то понадобиться, можете посмотреть у меня на сайте. (я только немного подкинул css, а так код не трогал)
-
Приветствую! Может кто-нибудь уже сталкивался с такими проблемами. Есть сайт http://stroymechanika.intelinets.ru/ Модалки fancybox (заказать звонок (http://take.ms/OeqbJ), оставить заявку (http://take.ms/0dCvS)) отображаются некорректно на мобильных устройствах. Выглядят слегка растянуто, примеры: http://take.ms/3YomPG http://take.ms/BktjY Модалки работают на type: ajax Инициализируются вот так: $.fancybox({ href: url, type: "ajax", openSpeed: 0, closeSpeed: 400, openEffect: 'none', padding: 0, beforeShow: function(){ $(".fancybox-overlay").addClass("r741-opened"); if(typeof callback === "function"){ callback(); } }, beforeClose: function(){ $(".fancybox-overlay").removeClass("r741-opened"); }, tpl: { wrap: '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div><div class="r741-message" ><div class="r741-message-inner" id="r741-message"></div></div></div>' } }) Что только не делал. В том числе все стили сносил, а все равно растянутая. Если еще подскажите почему на браузерах safari overlay наполовину перекрывает модалки, то вообще отлично будет.
-
$(function() { $('p').delay(1700).each(function(i) { $(this).delay((i++) * 50).fadeTo(1000, 1); }) }); Подскажите пожалуйста, как сделать так, чтобы после десятого параграфа цикл остановился и показались все остальные параграфы сразу? Спасибо заранее:)
-
Тривиальная задача, но не получается решить ее адекватно. Хочу сделать одностраничный сайт, с контентом , который будет подгружаться с php. Т.е. у меня будет несколько блоков в html, которые будут изменяться динамически. Данные я хочу брать из php, где они хранятся в массиве. <div class="menu"> <a href="#">Home</a> <a href="#">Product</a> <a href="#">Customers</a> </div> <div id="content"></div> Есть файл php с простым массивом, который возвращается в js <?php $arrayName = array('title' => 'Scheduling, CRM, and Invoicing Web Application - FieldPulse Software'); echo json_encode($arrayName); ?> json_encode возвращает строку {"title":"Scheduling, CRM, and Invoicing Web Application - FieldPulse Software"} Функция js, которая срабатывает после клика на ссылку. function loadPage(url) { $.ajax({ type: "POST", url: "content.php", data: 'page=' + url, dataType: "html", success: function(msg) { if (parseInt(msg) != 0) { msg = msg.substring(1, msg.length - 1); //удаляем символы { } в начале и конце строки $array = msg.split(":"); // разбиваем строку на массив по символу ":" $('title').html($array['title']); // новый title берем из массива, но в данном случае такой ячейки нет alert(msg); //для наглядности, выводит {"title":"Scheduling, CRM, and Invoicing Web Application - FieldPulse Software"} } else { alert ('file empty!'); } } }); } В результате такого разбиения получаем обычный массив. Мне надо получить ассоциативный массив где будет ячейка с именем "title" и она будет содержать соотв. строку из пхп. Как адекватно превратить результат выполнения функции json_encode в ассоциативный массив, чтобы можно было заменить необходимые поля в html?
