Jump to content
CMSTOOLS.ru - форум поддержки и развития CMS

Search the Community

Showing results for tags 'новый'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Front-end
    • HTML + CSS
    • JS + frameworks
  • Back-end
    • PHP
    • MySQL
    • Python
    • .NET/C/C++/C#
  • CMS
    • Всё о Vii Engine
    • Всё о DataLife Engine (DLE)
    • All about Invision Power System
    • All about AlphaCMS
    • Another CMS
  • Social Networks/Messengers
    • Telegram
    • Vkontakte
    • Discord
    • Bot development
  • Сервисы, софт
    • Linux
    • Windows
    • Сборки серверов
    • Apache, Nginx, .htaccess
  • Коммерция
    • Продажа
    • Услуги
    • Покупка
  • Общий раздел
    • Promotion and SEO
    • Web design, graphics
    • Website monetization
    • Your projects
    • Helping Users (general)
    • Болталка
    • Арбитраж
    • Корзина
  • CMS Tools - форум поддержки и развития CMS
    • Обязательно к прочтению!
    • Новостной блок CMSTools
    • Жалобы и предложения

Categories

  • VII ENGINE
    • Сборки vii engine
    • Модули, плагины, хаки vii engine
    • Шаблоны, дизайн, внешний вид
  • Alpha CMS
    • Релизы AlphaCMS
    • Модули, плагины, хаки AlphaCMS
    • Шаблоны, дизайн, внешний вид AlphaCMS
  • Invision Community
    • Releases IPS
    • Templates and appearance IPS
    • Components and modifications IPS
  • DataLifeEngine
    • Релизы DLE
    • DLE Templates
  • Front-end
    • HTML+CSS
  • Another CMS
    • Gaming CMS
    • Social CMS

Blogs

  • Блог Разработчика Vii-Engine
  • Создание социальной сети

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Сайт


Telegram


Skype


Jabber


ICQ


Интересы

Found 5 results

  1. Всем привет! Нет, я правда бешенный, раз я каждый день делаю что-то новое и обязательно публикую. Перед Вашими глазами обновленный раздел "Разработчикам" (как vk.com/dev). Скачивайте,комментируйте! Прошу при распространении этого раздела на других ресурсах, указывать, кто автор. Спасибо заранее! vkdevelopers.rar
  2. Дорогие друзья, думаю все соглашаться, что каждый год выдаётся нелегким, но надеюсь, 2019 будет переполненным любовью, счастьем и хорошими впечатлениями. Желаю вам преуспевать во всех своих начинаниях, не огорчаться при малейших неудачах и уметь находить выход с самых сложных ситуаций. Пусть каждая работа приносит удовольствие и любое дело будет в радость.) С новым 2019 годом!
  3. Доброго времени суток. Немного не понятна мне система создания новых страниц.. Ну, в mod.php подключить нужно php скрипт, в htaccess записать ссылку на него.. А как вывести регистрацию на новую страницу? | В общем то это и есть главный вопрос темы.
  4. Здравствуйте, дорогие посетители портала cmstools.ru! Уже скоро все будут праздновать Новый Год, и мы (администрация cmstools) решили немного обновить вид нашего портала.Уже сейчас вы можете видеть "новые": логотип, шапку и футер. Что же, нам остается поздравить вас с наступающими праздниками, и пожелать напутствия, успеха в ваших начинаниях, и удачи в новом году! Так же, для вас будет небольшой подарок, какой именно, узнаете по позже
  5. Внешний вид кнопки Идея заключается в том, чтобы, по аналогии с Вконтакте, переход наверх осуществлялся при клике по всей свободной левой части страницы, а не только по самой кнопке. Для этого составим следующий html-код: ⇑ Вверх Здесь все просто, в контейнер div с классом leftbar-wrap мы помещаем элемент a.left-controlbar, который и будет выполнять роль кнопки. Вложенные теги span использованы для визуального оформления: подсветки и вывода надписи. Теперь перейдем к описанию стилей для нашей боковой панели с кнопками. /* описание контейнера */ .leftbar-wrap { position: fixed; height: 100%; top: 0; left: 0; } /* описание кнопки «Вверх» */ .left-controlbar { height: 100%; display: block; text-decoration: none; } /* описание кнопки «Вернуться» */ #scroll-back { display: block; height: 100%; top: 0; display: none; text-align: center; } /* описание столбца фонового цвета для обеих кнопок */ .active-area { width: 100px; height: 100%; display: block; text-align: center; } /* задаем прозрачность фонового цвета при наведении на активную область страницы */ .leftbar-wrap:hover .active-area { background: rgba(99, 156, 191, 0.2); } /* делаем подсветку немного ярче при наведении на надпись */ .leftbar-wrap .active-area:hover { background: rgba(99, 156, 191, 0.3); } /* центрируем надпись у кнопок */ .bar-desc { top: 50%; position: relative; display: inline-block; } На этом с внешним видом, пожалуй, закончили. Управление кнопками Теперь необходимо вдохнуть в нашу разметку немного жизни. Для этого напишем небольшую функцию на javascript с применением фреймворка jQuery. function initSideControls() { var control_min_width = $('.active-area').width(); var content_width = $('#page').width(); //Здесь должна быть ширина вашего сайта (если верстка не резиновая). var window_width = $(window).width(); var $bar_wrap = $('.leftbar-wrap'); var $bar = $bar_wrap.find('.left-controlbar'); var $scroll_back = $('#scroll-back'); var prev_top = parseInt($scroll_back.attr('href').substr(1)); if (window_width - content_width - (2 * control_min_width) > 0) { $bar.show(); var bar_width = (window_width - content_width) / 2; $bar_wrap.css({width: bar_width}); if (!prev_top) $scroll_back.hide(); $bar.off('click').on('click', function(e) { e.preventDefault(); prev_top = $(window).scrollTop(); $('html, body').animate({scrollTop: 0}, 'normal', function() { $scroll_back.attr('href', '#' + prev_top).css({display: 'block', opacity: 0}).animate({opacity: 1}, 'fast'); }); }); } else { $bar.hide(); } } Алгоритм функции достаточно простой. После определения всех параметров, мы проверяем поместяться ли наши кнопки в область между левым краем окна браузера и контентом. Это необходимо для того, чтобы кнопки не налазили на содержимое сайта (функцию нужно вызывать каждый раз при изменении размеров окна браузера). Если размер области удовлетворяет условиям, то мы привязываем обработчик прокрутки к самой кнопке «Вверх». Теперь нужно инициализировать кнопки, вызвав нашу функцию в момент, когда страница полностью загружена. Для этого воспользуемся функцией $(document).ready() из фреймворка jQuery. $(document).ready(function() { var $scroll_back = $('#scroll-back'); var $bar = $('.left-controlbar'); var threshold = 300; //порог полной видимости кнопки при скроллинге $(window) /* функция, которая управляет видимостью кнопки "Вверх" в зависимости от положения полос прокрутки */ .scroll(function() { var new_opacity = ($(window).scrollTop() new_opacity ? $bar.show() : $bar.hide(); $bar.css({opacity: new_opacity}); var offset = parseInt($scroll_back.attr('href').substr(1)); if (new_opacity) { $scroll_back.hide(); } else { if (offset) $scroll_back.css({display: 'block', opacity: 0}).animate({opacity: 1}, 'fast'); } }) .scroll() /* связываем событие изменения размеров окна браузера и функцию инициализации кнопок */ .resize(initSideControls) .resize(); /* функция для возврата пользователя на место, с которого он поднялся вверх */ $scroll_back.click(function(e) { e.preventDefault(); $('html, body').animate({scrollTop: $(this).attr('href').substr(1)}, 'normal'); $(this).attr('href', '#0').hide(); }); }); На этом привязка логики к отображению закончена и можно радовать посетителей вашего сайта новым, стильным и удобным функционалом. Благодарю за внимание. P.S. Статья взята со стороннего ресурса.
×
×
  • Create New...