Jump to content

nikki4

User
 View Profile  See their activity

  • Posts

    151

  • Joined

  • Last visited

 Content Type 

Everything posted by nikki4

  1. nikki4
    Вопрос как сделать такую форму, может есть скрипт? как вообще такое называется. внизу экрана плавает кнопочка - это понятно position:fixed; а то что внутри - display:none; нажимаешь на неё - кнопка display:none; а то что под ней становиться видимым - вся форма с отправкой сообщения. ну и с таким эффектом красивым. потом нажимаешь куда-нить. или на крестик, и форма сворачивается обратно или может плагин под вордпресс такой есть?
  2. nikki4
    Посмотрел пример на этом сайте в справочнике, но почему-то не работает. если top у стики стоит в пределах размера экрана - то все ОК. если же поставить например: top:4000px; тогда стики не срабатывает, в чем дело? https://jsfiddle.net/9ngc98we/ <!DOCTYPE html> <html lang="ru"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>Пример CSS3 position: sticky</title> <style> body { margin: 0; text-align: center; font-family: sans-serif; } .fixed { position: fixed; top: 0; } .sticky { position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; top: 10px; width: 100%; background: #F6D565; padding: 25px 0; text-transform: uppercase; } </style> </head> <body> <p style="margin-bottom:100px;">Верх этой страницы</p> <h3 class="sticky">Супер удивительный заголовок</h3> <p style="margin-top:500px;">Там еще?</p> <p style="margin-top:500px;">Тут еще!</p> <p style="margin-top:500px;">Там еще?</p> <p style="margin-top:500px;">Тут еще!</p> <p style="margin-top:500px;">Там еще?</p> <p style="margin-top:500px;">Тут еще!</p> <p style="margin-top:500px;">Тут еще!</p> <p style="margin-top:500px;">Тут еще!</p> <p style="margin-top:500px;">Тут еще!</p> <p style="margin-top:500px;">Тут еще!</p> <p style="margin-top:500px;">Низ страницы!</p> <script> var sticky = document.querySelector('.sticky'); var origOffsetY = sticky.offsetTop; function onScroll(e) { window.scrollY >= origOffsetY ? sticky.classList.add('fixed') : sticky.classList.remove('fixed'); } document.addEventListener('scroll', onScroll); </script> </body></html> пробовал заменить скрипт на <script> $(window).on("scroll", function() { var scroll_from_top = $(document).scrollTop(); $(".sticky").toggleClass("fixed", (scroll_from_top > 10)); }); </script> вообще не работает. почитал выше, надо так понимаю jquery подключить к примеру выше попробовал на сайте где он включен но не помогло <script> $(window).on("scroll", function() { var scroll_from_top = $(document).scrollTop(); $("#lsb").toggleClass("fixed", (scroll_from_top > 1000)); }); </script> нашел рабочий скрипт, он делает он просто плавающий блок, а как сюда добавить условие, что только после 2000px например начинает позиция fixed? <script type="text/javascript"> $(function() { var offset = $("#lsb").offset(); var topPadding = 15; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $("#lsb").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding}); } else {$("#lsb").stop().animate({marginTop: 0});};}); }); </script>
  3. nikki4
    нашел один из сайтов, где сделали такую штуку, что тоже хочу: <div class="ad airSticky airSticky_relative" style="width: 277px;"> как только пролистываешь до опредленного момента: <div class="ad airSticky airSticky_fixed" style="width: 277px; position: fixed; top: 0px;"> http://ablexur.ru/pervye-blyuda/sup-s-yajcom-i-vermishelyu/ это и есть тот js? можно как-то вытащить этот скрипт? впрочем посмотрю те варианты, что предложили уже выше, а то забыл про эту тему. а тут вдруг вспомнил, как увидел этот сайт
  4. nikki4
    Спасибо, работает, так лучше!
  5. nikki4
    Сейчас стоит флешкнопка. Но флеш устарел и потому подлежит замене. Нашел вот такое: <audio src=".....mp3"; ?>" controls></audio> Но он выводит вместе с кнопками звука, времени и прочее. А надо просто - нажал на кнопку- появился звук. т.е. фактически одна кнопка Play и больше ничего не нужно. Пробовал убрать слово: controls - но тогда вообще ничего не отображает. ps: нашел вариант решения: <audio id="audio1" src=".....mp3"></audio> <button id="play">Play</button> <script type="text/javascript"> var audioElement = document.getElementById('audio1'); document.getElementById('play').addEventListener('click', function(){ audioElement.play(); }, false); </script> работает правда, только если 1 кнопка
  6. nikki4
    ОК. Спасибо. Возник еще такой вот вопрос реально ли такое сделать при помощи css, чтобы комментарии (желтый блок) оказался под сайдбаром? при этом сайдбар был под контентом http://cssdeck.com/labs/znxog0r3 просто там очень длинная простыня комментариев при помощи плагина создается, из-за чего сайдбары с рекламой видеть не будут. вот хотелось бы чтобы в мобильной версии сайдбар уезжал под контент, но при этом не под комментарии пока в общем решил сжать комментарии.. ограничение на страницу...
  7. nikki4
    Спасибо. Но столкнулся теперь с тем, что левые блоки они друг по другом, а надо чтобы lsb1 и lsb2 были в одном ряду с отступами. http://cssdeck.com/labs/r2hxrqjv float:left; для сайдбаров не работает. читаю, что для флекса не работает такое. если я правильно понял, то для сайдбаров нужно создавать еще один флекс контейнер, только с отображением в ряд, а не в колонку? а там уже justify-content использовать. вот, сделал так: http://cssdeck.com/labs/ywkssnfb просто не хочется добавлять дополнительный блок, мало ли, как на это поисковики отреагируют, что изменилась структура. может есть какой-то другой способ?
  8. nikki4
    Есть сайт с такой структурой: сайдбар1 сайдбар2 контент http://cssdeck.com/labs/3r2rkid7 Можно ли как-то визуально переместить контент наверх?
  9. nikki4
    На некоторых сайтах видел такую штуковину: справа висят блоки рекламы/подписки. и когда посетитель пролистывает до самого конца, что в сайдбаре становится пусто, то один из блоков становится плавающим. наверное это js? но какое свойство отвечает, что если страница пролистана на 1200 пикселей например, тогда присвоить блоку фиксированную позицию. причем чтобы это работало только на декстопах. так как в мобильной версии сайдбар убирается под контент у футера. т.е.: если разрешение экрана>980px и пролистано 1200px класс такой-то = position:fixed;
  10. nikki4
    1. Сайт никому ничего не должен. Сайт - просто витрина контента. А чтобы он приносил деньги, нужно чтобы его посещали. А чтобы заглядывали, нужно предложить что-то лучше чем у других, либо что-то уникальное. И при этом был бы на это достаточный спрос. 2. реклама (контекст, тизеры, ссылки, баннеры, спа), сервис, прямые рекламодатели. чтобы зарабатывать на своем сайте, нужно учить сео и интернет-маркетинг, СММ, еще будет плюсом знание арбитража и копирайтинга. html, css,php и прочее - это для создания сайта. а для их продвижения и развития уже нужно совершенно другие навыки и знания.
  11. nikki4
    Пример страницы, если нажать на картинку снизу - открывается во весь размер, вместо того чтобы компактно в зависимости от размера монитора. http://www.vvd.su/o-nas/novosti/novosti-kompanii/item/133-bolshoj-bannyj-festival-2016-v-sochi нашел такое: background: url(images/mybg.png) 100% 100% no-repeat; /* Добавляем фон */ background-size: cover; /* Масштабируем фон */ но что-то не то обрезается..
  12. nikki4
    Однажды на кулинарных сайтах видел, что при наведении на фотку - справа вылезает табличка с ингредиентами. Вот вопрос как это делается? вот в частности такая структура сейчас на сайте: <p><a class="thumbnail" href="/"> <img class="thumb" src="/.jpg"> </a> </p> <p>Игредиенты</p> <ul>....</ul> <p>Время приготовления:</p> <p>Выход:</p> Как понимаю надо сделать див от ингредиентов до выхода, присвоить ему класс. и дисплей: ноун сделать. Но как быть, чтобы это всплывалось при наведении на картинку выше? Да и еще где-то сбоку?
  13. nikki4
    http://www.vvd.su/aktsii/item/126-sdelaj-selfi-vyigraj-iphone сделал карту ссылок, что при наведении на ссылку в картинке выделяется ссылка. но при мобильно-планшетной версии (меньше 767пх)- стили с позициями ссылок исчезают. Почему это происходит? Впрочем всеравно, что поехало,в мобильной версии такие мелкие надписи на картинке и вовсе не видно. Я хотел ссылки подвинуть - а их #raz a:nth-of-type(1) совсем исчезли.
  14. nikki4
    Под большим фото есть миниатюры. У них есть свойство флоат:лефт. поидее должны по левому краю быть, но нет. видно, что 4я миниатюра, помещена почему-то в центре второго ряда картинок. вот страница с примером Было там как-то больше фоток, так там и вовсе дырка оказалось в одном из рядов. От чего такое происходит?
  15. nikki4
    Меню второго уровня двигает контент. Посмотрел в чем причина может быть - пробовал ставить абсолютную позицию, но тогда меню второго уровня не вылезает. вот сайт http://kernmetal.ru/
  16. nikki4
    В сайдбаре есть блок с тизерами, их там много. Потому просто position:fixed не подойдет иначе будет видна лишь малая часть Вот вопрос - можно ли и если да, то как сделать так, что если человек прокрутил статью вниз на 1500 пикселей, то этот блок становится со свойством margin-top:1500px; это чувствую как-то с JS связано..
  17. nikki4
    движок где-то формирует следующий код. как я понял при помощи js. в котором ничего не понял. <div class="caroufredsel_wrapper" style="display: block; text-align: justify; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 754px; height: 397px; margin: 0px; overflow: hidden; cursor: move;"><script type="text/javascript">var isIE8 = jQuery.browser.msie && + jQuery.browser.version === 8;if (isIE8 ) { function sliderInit6() { jQuery('.product-related #slider').carouFredSel({ auto: false, circular: false, infinite: false, prev: '#prev_2', next: '#next_2', mousewheel: false, height: null, swipe: { onMouse: false, onTouch: false }, responsive: true, width: '100%', scroll: 1, items: { width: 320, height: null, // optionally resize item-height visible: { min: 1, max: 4 } } }); }} else {function sliderInit6() { jQuery('#slider').carouFredSel({ auto :false , circular: false, infinite: false, prev: '#prev_2', next: '#next_2', mousewheel: false, swipe: { onMouse: true, onTouch: true }, responsive: true, width: '100%', height: null, scroll: 1, items: { width: 320, height: null, // optionally resize item-height visible: { min: 1, max: 4 } } }); }}jQuery(function(){ jQuery('.product-related-products .hasTooltip').tooltip('hide'); jQuery('.list_carousel').addClass('loader'); jQuery(window).load(function() { jQuery('.list_carousel').removeClass('loader'); // remove the loader when window gets loaded. jQuery('.product-related #slider').show(); sliderInit6(); });}); jQuery(document).ready(function($) { $(function() { $('.product-related div.prod-row').each(function() { var tip = $(this).find('div.count_holder_small'); $(this).hover( function() { tip.appendTo('body'); }, function() { tip.appendTo(this); } ).mousemove(function(e) { var x = e.pageX + 60, y = e.pageY - 50, w = tip.width(), h = tip.height(), dx = $(window).width() - (x + w), dy = $(window).height() - (y + h); if ( dx < 50 ) x = e.pageX - w - 60; if ( dy < 50 ) y = e.pageY - h + 130; tip.css({ left: x, top: y }); }); }); });});</script>задача, чтобы в мобильной версии не обрезался один из блоков похожих товаров. выявил, что нужно в .caroufredsel_wrapper надо заменить hidden на visible пишу в конце css файла: .caroufredsel_wrapper {overflow: visible !important;}но стиль не заменяется. как сделать чтобы заменился?
  18. nikki4
    ранее делал в инструментах разработчика в ФФ и хроме. Там все ок. Смотрю с телефона - все поехало Глянул со стороннего сервиса - опять поехало в шапке блок, подобном как на телефоне. Почему? может из-за того что там в em а не px? или шрифт в мобильном не поддерживается? (abel) да, походу из-за шрифта...
  19. nikki4
    Однажды видел такую штуку: если зайти с мобильного телефона и начать прокручивать экран вниз - слева появляется стрелочка на право. если провести пальцем по экрану слева на право - вылезает превьюшка похожих статей. Хотел такую вот штуку на сайте поставить. Как это вообще называется? что гуглить? Может готовые скрипты есть, или что-то для этого нужно почитать? т.е. есть обычный блок слева - похожие статьи. вот хотелось бы в мобильной версии сделать чтобы он был таким вот выдвижным.
  20. nikki4
    Обычное меню .menu li{ display: inline-block; } .menu a {display:block; float:left;}.menu a {border: 1px solid #c8c8c8;padding-left:10px;padding-right:10px;}.menu ul { margin: 0 auto; text-align: center;}https://codepen.io/anon/pen/PZawQY Как сделать,чтобы границ не было между блоками? если к li прописать float: left; - они убираются но в таком случае исчезает центрирование по центру экрана.
  21. nikki4
    валидатором проверял. всего пару ошибок, Element noindex not allowed as child of element div in this context. (Suppressing further errors from this subtree.)Using the meta element to specify the document-wide default language is obsolete. Consider specifying the language on the root element instead.The language attribute on the script element is obsoleteThe element noscript must not appear as a descendant of the noscript element.чем еще можно выявить? Само все заработало! Я хоть и вносил ряд правок, но они не связанны были никак с этим.. Может дело в кеше? но почему тогда сторонний сервис выдал принтскрином тоже версию. не ту. хотя нет.. некоторые страницы норм, некоторые нет.. проверил сторонним сервисом, уже другим, который делает скриншоты сайта. так он видит так же как и у меня - некоторые нормально, а некоторые криво ошибку выявил, спасибо Лошаре за подсказку. При обновлении джумлы, я еще обновил плагины, в частности там в ручную правил кое что в коде.. ну вот с дивом там накосячил
  22. nikki4
    Обновил джумлу с 2 до 3 версии. Смотрю верстка стала кривой. В шаблоне и исходном коде показывается следующее: <div id="wrapper"><div id="menu"></div><div id="container"></div><div id="left"></div><div id="footer"></div></div>А фактически на самом деле выглядит все так: <div id="wrapper"><div id="menu"></div><div id="container"><div id="left"></div><div id="footer"></div></div></div>Как такое может быть? что исходный код пишет другое- правильное. думал может у меня с кешем что-то, но проверил сторонним сервисом - тот сделал скрин и там тоже поехавшая верстка
  23. nikki4
    Вот есть каталог электропечек для бани, со следующими стилями: .elpechi - стиль тела этой страницы, чтобы не применялось к другим аналогичным .marg - блок с каталогом печей .cat_row - блок с рядами (компонент разбивает товары по рядам) .floatleft - блок карточки товара со своими стилями. задача - отцентрировать. поидее это делается так, но не работает: .elpechi .marg .cat_row {margin:0 auto;}пробовал так: .elpechi .marg {margin:0 auto;}тоже не центрирует. текущие стили: .cat_row { float: left;}.elpechi .marg .cat_row .floatleft { background: #fff none repeat scroll 0 0; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 0 5px #c2c0c0; display: block; float: left; height: 357px; margin: 14px 0 14px 28px; padding: 10px; text-align: center; width: 277px;}
  24. nikki4
    Из фотки сделал новый фон (он виден по краям только на больших экранах>1280px) http://www.vvd.su/ Но на каждой странице он по разному отображается. Сначала я думал это связанно с разными шаблонами страниц привязанных к пунктам меню и там всякие отступы. Однако нашел, вот есть две идентичные страницы про трубы каменки, один шаблон, даже текст почти тот же. http://www.vvd.su/dymokhodnye-sistemy1/keramicheskie-dymokhody/truba-kamenka http://www.vvd.su/dymokhodnye-sistemy1/keramicheskie-dymokhody/truba-kamenka-1 тем не менее фон плавает -это можно заметить если открыть в двух вкладках и переходить между ними как зафиксировать фоновую картинку, чтобы везде была одинаковая? а то как-то раздражает, что при каждом клике она куда-то едет. ps: вот код тела с той самой картинкой: body { background: rgba(0, 0, 0, 0) url("/templates/t3_blank/images/bg.jpg") repeat scroll center center; color: #000; font-family: Arial,Helvetica,sans-serif; font-size: 12px; line-height: 20px; margin: 0 auto; max-width: 1280px; overflow: visible; padding: 0 !important;}
  25. nikki4
    так в том то и дело, что это не текстура, а снимок реальной коры с зеркалки. причем линии по диагонали. впрочем я вырезал маленький кусочек 300-350 стало текстурой спасибо, сжало до 70кб.. на 20%
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept