Search the Community
Showing results for tags 'JQuery'.
-
https://www.zebra-tara.ru/catalogue/store-box jQuery(document).ready(function ($) { $('#grid_list_selector li').click(function (e) { e.preventDefault(); var $clicked_item = $(this); var $set_mode = $clicked_item.data("view-mode"); $('#grid_list_selector li').removeClass("active"); $clicked_item.setClass("active"); $("#product_list").removeClass("grid list").setClass($set_mode); var Cookies2 = Cookies.noConflict(); if (Cookies2) { Cookies2.set('grid-list', $set_mode, {expires: 365}); } }) }); не возьму в тол, почему не работает переключалка? Должна меняться нажатая кнопка и меняться класс у списка продуктов. Подскажите, что я снова упустил?
-
Данный вариант —> var i = parseInt($("#sli").css('margin-left')); Индентичен варианту —> var i = parseInt(document.getElementById('sli').style.marginLeft). Но, по какой-то причине, второй вариант не работает. То есть, я не могу стиль вложить в переменную в JavaScript, а в JQuery такое возможно. И при изменении стиля типо left в javascript, мне нужно указывать что-то вроде 100 + 'px', а такой момент отсутствует в JQuery, сойдут обычные числа. Был бы благодарен, если бы на мои вопросы были ответы, потому что мне не понятна такая работа кода.
- 2 replies
-
- jquery
- javascript
-
(and 2 more)
Tagged with:
-
Envo. Библиотека для организации и наследования плагинов jQuery
smike posted a question in JavaScript
Понимаю что во времена Angular, React и прочих фреймоврков может быть не очень актуально, но все же решил опубликовать свою простенькую библиотеку для огранизации плагинов старого доброго jQuery. Библиотека решает следующие задачи: Организация кода плагина в виде псевдо-класса Наследование плагинов Передача параметров в плагин Подключение плагинов к странице Ajax-перзагрузка плагинов Подписка на события Если кому интересно, прошу сюда: https://bitbucket.org/grifix/envo Примеры использования тут: https://bitbucket.org/grifix/envo/sr...les/?at=master Пример плагина: (function ($) { var parent = envo.Plugin; // Плагин от которого наследуется данный плагин var prototype = envo.makePluginPrototype( 'demo.PluginA', // Название псевдо-класса плагина (используется при наследовнии) 'demo_pluginA', // Имя плагина (используется для подключиня плагина к DOM-элементам) parent, { message: 'Hello world!' //Конфигурация плагина по умолчанию } ); // Функция которая подключается к плагину в момент наложения его на DOM елемент prototype.init = function () { var that = this; that.elButton = that.find('button'); that.elButton.click(function () { that.showMessage(); }); parent.prototype.init.call(that); }; // Метод псевдо-класса плагина prototype.showMessage = function () { var that = this; alert(that.cfg.message); return that.el(); }; })(jQuery); Плагин кототрый наследует предыдущий плагин: (function ($) { var parent = demo.PluginA; var prototype = envo.makePluginPrototype( 'demo.PluginB', 'demo_pluginB', parent ); prototype.showMessage = function () { var that = this; parent.prototype.showMessage.call(that); confirm("Are you sure!"); return that.el(); }; })(jQuery);- 2 replies
-
- наследование
- plugin
-
(and 1 more)
Tagged with:
-
Ищу работу. Верстаю страницы любой сложности из psd макетов. Владею адаптивной вёрсткой, а также css3/javascript/jquery анимацией. Сделаю Ваш заказ быстро, дёшево, адаптивно, кроссбраузерно. Email: churilov2312@gmail.com Facebook: https://www.facebook.com/profile.php?id=100019043504185&ref=bookmarks Так же можете просто писать мне в личку
-
Здравствуйте, добрые форумчане) Очень нужна Ваша помошью Нужно сделать такой календарь с выбором диапазона дат и выводом ниже, совершенно не вижу выхода Прикрутила плагин Jquery datapicker но он дает только выпадающее меню у инпута Очень надеюсь на Ваашу помощь
-
$("#lik").on('click', function() { var i = parseInt($("h1").css('margin-left')); i = i + parseInt($(this).attr('data-move')); $("h1").animate({marginLeft: i}, 0200) }); Дан код jquery, в котором по нажатию на кнопку происходит смещение оступа влево по значению аттрибута data-move. Вопрос: как мне написать код, чтобы при следующем нажатии после смещения он возвращал значение на место?
-
$("button#lol").on('click', function(){ var s = document.getElementById("val1"); var c = document.getElementById("val2"); s.hidden = !s.hidden; c.hidden = !c.hidden; }); В данном коде у объекта с айди val 1, val2 есть аттрибут отображения hidden. Почему изначально объекты на html-страницы скрыты, когда я им этот пустой аттрибут задаю, хотя по стандарту они должны отображаться? Как сделать скрытым и снова открыть объект?
- 3 replies
-
- javascript
- html
-
(and 1 more)
Tagged with:
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript" src="script's.js"></script> <style> .text-jquery { margin: 0 0 0 30px; transition: 4s; } h1 { position: relative; } </style> </head> <body> <input id="val1" type="text"><br><br> <input id="val2" type="text"><br><br> <button id="as">Посчитать!</button> <button id="lol">Сместить!</button> <button id="lik"></button> <h1>LOL</h1> </body> </html> Как мне сделать в jquery, чтобы при каждом нажатии на кнопку с id="lik" у меня h1 смещался влево на 15px?
-
Дан код: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript" src="script's.js"></script> <style> input { position: relative; transition: all ease 1s; } </style> </head> <body> <input id="val1" type="text"><br><br> <input id="val2" type="text"><br><br> <button>Посчитать!</button> <button id="lol">Сместить!</button> </body> </html> И его скрипт: $('document').ready(function() { $('button').on('click', function(){ var value1, value2; value1 = $('#val1').val(); value2 = $('#val2').val(); value1 = parseInt(value1); value2 = parseInt(value2); value3 = value1 + value2; alert(value3); }); $('button#lol').on('click', function() { $('#val1, #val2').css( { border: '2px solid red', left: '50px' } ); }) }); И первая проблема: при нажатии на кнопку "Сместить!" у меня вылетает алёрт со значением "NaN", а потом работает сам скрипт. И вторая: почему в коде не работает плавное смещение вправо? В html задал параметр стиля, но плавного перехода нет. Только плавная смена цвета. Как исправить NaN и плавный переход? Если возможно, объясните поподробнее.
-
Удалил строчку в коде какую не знаю и перестало выводится на сайте, 3 блока которые под слайдером все норм, голову сломал исправить не могу. Помогите люди добрые. Сайт: http://3r.com.ua/ Код: <div class="index-container"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="index_block"> <div class="header_slider"> <script type="mce-text/javascript" src="{{skin url=''}}js/camera.js"></script> <script type="mce-text/javascript">// <![CDATA[ /* index slider */ jQuery(function(){ jQuery('#camera_wrap').camera({ alignmen: 'topCenter', height: '400px', minHeight: '50px', loader : bar, navigation: false, fx: 'simpleFade', navigationHover:false, thumbnails: true, playPause: false }); }); // ]]></script> <div class="fluid_container"> <div id="camera_wrap" class="camera_wrap camera_orange_skin"> <div data-src="{{skin url=''}}images/slider_pic1.jpg" data-link="specials.html"> <div class="camera_caption fadeIn"> <div class="right_slider_side sl_1"> <h2>Материнские платы</h2> <p> </p> <h4>восстановленные</h4> <h4> </h4> </div> </div> </div> </div> <div data-src="{{skin url=''}}images/slider_pic2.jpg" data-link="tripods.html"> <div class="camera_caption fadeIn"> <div class="right_slider_side sl_2"> <h2>Сервера IBM и HP </h2> <h4>International Business Machines</h4> <h4>Hewlett-Packard</h4> <p> </p> </div> </div> </div> </div> </div> </div> <div data-src="{{skin url=''}}images/slider_pic3.jpg" data-link="video-cameras.html"> <div class="camera_caption fadeIn"> <div class="right_slider_side sl_3"> <h2>Ноутбуки</h2> <h4>восстановленные</h4> </div> </div> </div> </div> <div class="clear"> </div> </div> <div class="banners_block"> <div class="banner ban1"> <div class="ban_img"><img alt="" src="{{skin url='images/index_img1.jpg'}}" /></div> <div class="ban_wrap"> <h2>Быстрая доставка</h2> <p>Способы доставки и оплата! </p> <div class="shop_now"><span>Перейти</span></div> </div> </div> <div class="banner ban2"> <div class="ban_img"><img alt="" src="{{skin url='images/index_img2.jpg'}}" /></div> <div class="ban_wrap"> <h2>Подтверждение гарантии</h2> <p>Гарантия 1, 2, 3 месяца!</p> <div class="shop_now"><span>Перейти</span></div> </div> </div> <div class="banner ban3"> <div class="ban_img"><img alt="" src="{{skin url='images/index_img3.jpg'}}" /></div> <div class="ban_wrap"> <h2>Возврат денег</h2> <p>Мы гарантируем возврат денег если товар не подошел или находится не робочем состоянии!</p> <div class="shop_now"><span>Перейти</span></div> </div> </div> </div>
-
<div class="wrap" id="post_1"> <div class="post"> <div class="post-header"> <h2 class="post-name">Заголовок</h2> </div> <div class="post-content-desc"> <p class="content-desc-p">краткое описание статьи</p> </div> <div class="post-content" style="display:none;"> <p class="content-p">полный текст статьи</p> </div> <a href="" class="content-desc-button">Подробнее..</a> </div> </div> задача, нужно при нажатии на кнопку "Подробнее" скрыть див с классом post-content-desc, и открыть див с классом post-content, при этом постов много на странице а при нажатии действия должны происходить лишь с тем постом на котором была нажата кнопка "Подробнее", может кто подсказать как решить эту задачу? или хотя бы дать пару советов (подробнее можно разглядеть все на изображении)
-
Добрый день. Подскажите пожалуйста как правильно реализовать данное меню или список, не знаю как правильней назвать. Нужно чтобы при нажатии на город появлялся блок с информацией и загорался определенное место на карте. Если с появлением блока более менее понятно, то как позиционировать эти красные (активные) города, чтобы они не съезжали с карты на разных разрешениях. Буду благодарен ссылкам на демо и примеры. С меня кофе тому кто поможет мне найти хорошее решение =)
-
Сделаю сайт по вменяемой цене. Блог, корпоративный сайт, визитка, лэндинг, страницы мероприятий. Есть портфолио на Behance.
-
$('.b_70543').click(function (e) { var t = e.target; e.preventDefault(); e.stopPropagation(); if ((t.tagName = "A") || (t.className = "item-data")) { $('.m_modal').addClass('show'); if ($(t).data('btn') === 'button') { var parent = $(t).parent().parent().parent().parent(); } else { var parent = $(t).parent().parent(); } console.log(parent); var productArr = $(parent).find('.content-wrapper .content-holder .title-holder .title p').text(); var productArr = productArr.split(' | '); var productName = productArr[1]; var descr = productArr[0]; var p = $(parent).find('.price-holder .price p').text() var price = p; // var price = price.replace(','); var inputName = $('.m_modal').find('#product-name'); var inputPrice = $('.m_modal').find('#product-price'); var inputDescr = $('.m_modal').find('#product-descr'); $(inputName).text(productName); $(inputPrice).text(price); $(inputDescr).text(descr); console.log(price); console.log(descr); console.log(productName) } }) Ребята есть вот такой, он отвечает за клик по блоку товара, и в зависимости от глубины клика присваивает родителя, чтобы подтянуть название товара и цену, как мне остановить всплытие события прям вот сразу после клика, чтоб он возвращал мне один единственный элемент, сейчас возвращает два, может в if что то напутано Нужно чтобы по клику вернулся только элемент по которому произошел клик Или может по клику как то можно зацепить родителя по классу именно в этом блоке
-
jquery Не срабатывает on("click", function) для динамического элемента
d0ublezer0 posted a question in JavaScript
В корзине динамически формируется выбор вариантов доставки, из которого должен выбираться пункт выдачи. но событие клика на варианте доставки не срабатывает для проверки работы нужно что-то положить в корзину, например https://www.road.media/avtomagnitoly/ford/5861-detail собственно, корзина: https://www.road.media/cart После клика на первом варианте (пункт выдачи СДЕК), должен раскрыться список пунктов выдачи (город у каждого будет свой, определяется автоматически по России): За раскрытие списка и обработку дальнейшего выбора пункта выдачи отвечает файл https://www.road.media/plugins/vmshipment/transportadoras/cdek_script.js Выглядит он так: jQuery(document).ready(function ($) { $('.cdek_shipment').on("click", function () { var $ship_id = $(this).attr("data-id"); var $ship_pvz = $(this).attr("data-pvz"); var $ship_map = $(this).attr("data-map"); console.log('Выбран вариант доставки'); $(this).first(".cdek_outpost_list").slideToggle(); }); var $notator = $("#customer_note_field"); var $pvz_map = $("#map"); $(".cdek_outpost_list input").on("change", function () { var $pvz = $(this); console.log('PVZ выбран'); $notator.empty().append("Заберу по адресу:" + $pvz.attr("data-address")); if ($pvz_map.length > 0) { // карта существует, предполагаем что можем выводить в нее console.log("map exists"); } }); }); .cdek_shipment создаётся другим скриптом уже после загрузки страницы, я на это повлиять не могу. Более того, каждый раз при смене города, блок с вариантами доставки создаётся заново. Где я ошибся? Помогите разобраться, пожалуйста. UPD: Нашел как перенавесить событие. теперь другой вопрос $("#ajaxshipping").on("click", '.cdek_shipment', function () { // как тут получить объект .cdek_shipment для манипуляций? )}; -
Как удалить / изменить класс у «сквозного» блока на всех страницах
Drunk_Monkey posted a question in JavaScript
Добрый день подскажите, как менять класс, буду очень благодарен примеру, у сквозного блока, который выводиться на всех страницах (к примеру блок с преимуществами в шапке сайта, который можно скрывать показывать по клику, если он скрыт на главной, то не будет показываться на других страницах, до клика по иконке) И можно ли реализовать смену класса на определенное время (куки?) 1 час или сутки. -
bootstrap Переключение слайдов BOOTSTRAP Carousel по клике по тексту
UnWind posted a question in HTML Coding
Здравствуйте дамы и господа!) У меня к Вам такой вопрос, как можно правильно реализовать следующее: Мне нужно, чтобы при клике на строку/слово в тексте, галерея BOOTSTRAP Galerey переключалась на требуемый слайд и у слова, связанного с активным слайдов появлялось выделение в виде смены цвета текста, и подчеркиванием. Так же мне нужно, чтобы это работало и было связано с автоматической сменой слайдов. Т.е. слайды к примеру менялись бы каждые секунд 5-ть, при этом слова в тексте автоматически бы выделялись в зависимости от активного слайда. К примеру текст такой: И такая галерея: <div class="col-xs-12 col-sm-12 col-lg-offset-1 col-lg-4 carousel slide article-slide" id="searchAndReplace"> <div class="carousel-inner cont-slider"> <div class="item active"> <img class="img-responsive" alt="Google company" title="Google company" src="<%=request.getContextPath() %>/lib/upload/img/270220172230.png"> </div> <div class="item "> <img class="img-responsive" alt="Real phone" title="Real phone" src="<%=request.getContextPath() %>/lib/upload/img/270220172245.png"> </div> </div> </div> Как такое реализовать ? Заранее благодарю Вас за ответ!- 2 replies
-
- jquery
- java script
-
(and 2 more)
Tagged with:
-
Ребята дайте наводку как обнулить первый if чтобы после опускания вниз мой заголовок переместился влево а потом вверх, толи голова не варит уже то ли я чего не знаю.
-
Всем привет, нужна помощь в пролитии света на одну из тем в JS, называется она делегирование событий, Кантор на своем сайте приводит пример с табличкой и изменение цвета. Хорошо это я понял как у него работает и тему понял, НО! Когда я начинаю писать свой JS код, вещать обработчик на общего родителя, например есть вот такая разметка , и я хочу чтобы при по кнопке в любом из блоков мой wrapper-slider становился display:block; Не получаеться написать правильный JS для этого дела((( Ну или так же есть скрипт увеличения цены и количества товара, но мне пришлось на каждый блок вещать свой обработчик так как по другому к сожалению не могу додуматься как, теорию читал, но тех примеров оказалось мало для понимания( HELP ME!
-
Вот есть сайт, который работает и всё у него нормально, но со временем есть задача поставить больше страниц и конечно же "ухаживать" за ними. С недавних пор научился с одной страницы добавлять несколько объектов на все остальные куда они нужны. Так вот, я добавляю класс, добавляю инструкцию в js и чтобы например 1 див создать, мне нужно приписать ему класс, приписать в js ему функцию, и добавить на сайт в виде этого дива, Можно ли как нибудь создать такую форму, где заполнив данные, на сайт автоматически добавлялись эти нужные блоки, то есть, к примеру. : есть <div class="style">Что-то</div> и это уже есть на сайте, он содержит какой то блок с информацией, А есть необходимость чтобы введя в форму этот "style" он создавал нужный блок с настройками, автоматически добавлял ему css указанную, по типу .style {width:100px;height:100px;} чтобы между <div> ВОТ ТУТ </div> помещалось то что указанно в форме, например тект, чтобы была возможность выбрать картинку, Но суть в том что, чтобы эта форма добавляла в JS правило где содержится функция для этого класса .style , и чтобы не залезать в js просто редактировать его сразу из формы Чтобы он сам автоматически добавлял то что ему указанно, ну и чтобы сразу добавлял на нужную страницу Можно хотя бы узнать где такое найти, попробую сам изучить это, чтобы намного облегчить себе работу с сайтом. Да даже этот сайт в пример, я ввёл в окошки название страницы и информацию, и он вывел тут блок в котором вся суть, и присвоил ему нужный класс с функциями, Только мне ещё js нужно подключить к этому делу
-
Здравствуйте. Предлагаю свои услуги по верстке PSD макетов в HTML5/CSS3 с использованием несложных скриптов jQuery на основе bootstrap. Чистый, структурированный код. Внедрение различных jQuery плагинов и скриптов. Цена для каждого проекта индивидуальна и зависит от сложности макета и необходимого функционала. По цене со мной всегда можно договориться. Оплата: - WebMoney Интересует долгосрочное сотрудничество. Контакты: email: 3dben@mail.ru Skype: скидываю в л/с Примеры верстки:
-
На странице есть много картинок, и чтобы сделать предварительную загрузку не комильфо прогонять каждый путь через массив, ибо путей много и вручную это долго. Как можно сделать по другому? Мой вариант будет правильным? При нажатии на маленькое изображение должно появляться большое без загрузки. $('.wrapper img').each(function(){ var att =$(this).attr('src'); var qwe = /(\.\w{3,4}$)/; att=att.replace(qwe,'_q.jpg'); var newI= $('<img src="'+att+'">'); $(this).click(function(){ $('.open').append('newI'); }); });
-
В чём заключается соль такого поведения: если изменить атрибут scr который пустой то плавный переход не происходит Если же в scr уже есть пусть к картинке и его изменить то, плавный переход работает корректно. Нажмите на qwe для сравнения
-
$('div').animate({ transform: 'translateX(400px)' }); Код корректен, но не работает. Как применить анимацию с перемещением блока на 400px?
-
Добрый день, реализовываю мега меню использую плагины Bootsrap: tabs и collapse ссылка на прототип (codpen) Нужная логика: При клике на родительскую категорию (Одежда, Техника, Для дома) открываются в сайдбаре, ее дочерние категории. — реализовано По клику на дочернюю категорию открывается, в правой колонке, содержимое связанного с дочерней категорией таба — реализовано Подкатегории (Мужская одежда, Женская …) первой родительской категории (Одежда) открыты по умолчанию — реализовано При клике на другую родительскую категорию, открываются ее дочерние и скрываются дочерние категории, предыдущей активной — реализовано При клике на родительскую категорию и открытии ее дочерних должен активироваться таб связанный с первой дочерней категорией — частично реализовано, срабатывает только один раз (при первом клике, на последующих, не срабатывет) При повторном клике на родительскую категорию с открытыми дочерними, дочерние скрываются + скрываться таб связанный с одной из ее дочерних категоий — не реализовано скрытие таба Возникли сложности со скрытием табов (последний пункт списка с логикой) и активацией таба первой дочерней категории, при клике по родительской. Код: $('li.panel').click(function() { $(this).children().find('a:first').tab('show'); Открывает таб первой подкатегории только один раз. Если я на примере кликну по род. категории «Техника», то откроются ее дочерние категории (Смартфоны, Планшеты) и активируется так первой подкатегории (Смартфоны) скриншот, но если если я после этого, к примеру, кликну по другой род. категории «Одежда», а потом снова кликну по категории «Техника», таб связанный с первой дочерней «Смартфоны» не будет активен — скриншот.