Ответы пользователя по тегу JavaScript
  • Как убрать лишний код при просмотре сайта на мобильных устройствах?

    Zoxon
    @Zoxon
    Веб-разработчик
    Проверять по useragent и просто не отображать банальным if
    Но тут есть подводные камни.
    Ответ написан
    2 комментария
  • Есть 1aaaaaaaa?

    Zoxon
    @Zoxon
    Веб-разработчик
    JQuery умеет только скриптовые анимации. Если хотите css анимации жонглируйте классами либо попробуйте jquery.transit
    Если вам нужен только фейд, то я бы сделал так codepen.io/Zoxon/pen/RaLabN
    Ответ написан
  • Какие альтернативы jquery ui для форм?

    Zoxon
    @Zoxon
    Веб-разработчик
    dimox.name/jquery-form-styler - select, checkbox, radio, number, file
    www.dropzonejs.com - file dnd
    ionden.com/a/plugins/ion.rangeSlider/index.html - range slider
    Ответ написан
    Комментировать
  • Как добавить класс при клике, а потом удалить при клике за пределами открывшегося блока?

    Zoxon
    @Zoxon
    Веб-разработчик
    Простейший дропдаун codepen.io/Zoxon/pen/YwpLpK
    Ответ написан
    Комментировать
  • Как передать данные из CkEditor через jquery form?

    Zoxon
    @Zoxon
    Веб-разработчик
    docs.ckeditor.com/#!/guide/dev_jquery-section-subm...

    Можно еще так
    $('button').click(function(event){
    	event.preventDefault();
    	alert($('.form').serialize());
    	// ajax код $('.form').serialize() суем в дата
    	$.ajax({
    		type: "POST",
    		data: $('.form').serialize(),
    		url: $('.form').attr('action'),
    		success: function(data) {
    			...
    		}
    	});
    });
    Ответ написан
    Комментировать
  • Как правильно настроить gulp-image-resize?

    Zoxon
    @Zoxon
    Веб-разработчик
    1. Поменяйте return gulp.src('src/img/') на return gulp.src('src/img/**/*.{jpg,png}'))
    2. Попробуйте использовать imageMagick, а не GraphicsMagick (imageMagick: true)
    3. Дополнительно добавьте оптимизацию с gulp-changed
    var changed = require("gulp-changed");
    
    gulp.task('imgresize', function () {
       return gulp.src('src/img/')
          .pipe(changed("build"))
          .pipe(imageresize({ 
            width : 100,
            height : 100,
            crop : true,
            upscale : false
          }))
         .pipe(gulp.dest('build/img/'));
    });
    Ответ написан
    3 комментария
  • Browser-sync на gulp перезагружает браузер два раза, но изменения не видны?

    Zoxon
    @Zoxon
    Веб-разработчик
    Не знаю какая версия у в вас используется, но в общем починить можно так.
    Пришлось обновить конфиг browserSync по текущей версии, он отличается.
    Затем заменить gulp.watch на пакет gulp-watch, и использовать run-sequence для запуска тасков, и добавить инкрементал билд для jade, по тому как сборка длилась очень долго.
    Получился такой gulpfile.js

    'use strict';
    
    // Инициализируем плагины
    var gulp = require('gulp'),
    	jade = require('gulp-jade'),
    	stylus = require('gulp-stylus'),
    	autoprefixer = require('autoprefixer-stylus'),
    	imagemin = require('gulp-imagemin'),
    	browserSync = require('browser-sync').create(),
    	cssbeautify = require('gulp-cssbeautify'),
    	gutil = require('gulp-util'),
    	newer = require('gulp-newer'),
    	include = require('gulp-include'),
    	rename = require("gulp-rename"),
    	uglify = require('gulp-uglify'),
    	imageminPngquant = require('imagemin-pngquant'),
    	csscomb = require('gulp-csscomb'),
    	csso = require('gulp-csso'),
    	gulpFilter = require('gulp-filter'),
    	plumber = require('gulp-plumber'),
    	del = require('del'),
    	runSequence = require('run-sequence'),
    	watch = require('gulp-watch'),
    	gulpZip = require('gulp-zip'),
    	nodePath = require('path'),
    	jadeInheritance = require('gulp-jade-inheritance'),
    	gulpif = require('gulp-if'),
    	cached = require('gulp-cached'),
    	changed = require('gulp-changed'),
    	filter = require('gulp-filter');
    
    // Функция обработки ошибок
    var errorHandler = function(err) {
    	gutil.log([(err.name + ' in ' + err.plugin).bold.red, '', err.message, ''].join('\n'));
    
    	if (gutil.env.beep) {
    		gutil.beep();
    	}
    
    	this.emit('end');
    };
    
    var correctNumber = function correctNumber(number) {
    	return number < 10 ? '0' + number : number;
    };
    
    // Return timestamp
    var getDateTime = function getDateTime() {
    	var now = new Date();
    	var year = now.getFullYear();
    	var month = correctNumber(now.getMonth() + 1);
    	var day = correctNumber(now.getDate());
    	var hours = correctNumber(now.getHours());
    	var minutes = correctNumber(now.getMinutes());
    	return year + '-' + month + '-' + day + '-' + hours + minutes;
    };
    
    // Имена папок
    var config = {
    	path: {
    		source: 'source',
    		dist: 'public',
    		assets: 'assets',
    		partials: 'blocks',
    		js: 'js',
    		css: 'css',
    		images: 'img'
    	}
    };
    
    // Настройки плагинов
    var plugins = {
    	browserSync: {
    		options: {
    			server: {
    				baseDir: './public'
    			}
    		}
    	},
    
    	autoprefixer: {
    		options: {
    			browsers: [
    					'last 2 version',
    					'Chrome >= 20',
    					'Firefox >= 20',
    					'Opera >= 12',
    					'Android 2.3',
    					'Android >= 4',
    					'iOS >= 6',
    					'Safari >= 6',
    					'Explorer >= 8'
    				],
    			cascade: false
    		}
    	},
    
    	stylus: {
    		options: {}
    	},
    
    	cssbeautify: {
    		options: {
    			indent: '	',
    			autosemicolon: true
    		}
    	},
    
    	jade: {
    		options: {
    			pretty: '\t',
    			basedir: config.path.source
    		}
    	},
    
    	jadeInheritance: {
    		options: {basedir: config.path.source}
    	},
    
    	imagemin: {
    		options: {
    			optimizationLevel: 3,
    			progressive: true,
    			interlaced: true,
    			svgoPlugins: [{removeViewBox: false}],
    			use: [imageminPngquant()]
    		}
    	},
    
    	rename: {
    		options: {
    			suffix: ".min"
    		}
    	}
    }
    
    // Пути к файлам
    var path = {
    	source: {
    		html: [
    			config.path.source + '/**/*.jade',
    			'!' + config.path.source + '/' + config.path.partials + '/**/*.jade'
    		],
    		css: [
    			config.path.source + '/**/*.styl',
    			'!' + config.path.source + '/**/_*.styl',
    			'!' + config.path.source + '/' + config.path.css + '/lib/**/*.styl'
    		],
    		img: config.path.source + '/' + config.path.images + '/**/*.{jpg,jpeg,png,gif,svg}',
    		js: config.path.source + '/' + config.path.js + '/*.js',
    		copy: config.path.assets + '/**/*'
    	},
    
    	dest: {
    		html: config.path.dist,
    		css: config.path.dist,
    		img: config.path.dist + '/' + config.path.images,
    		js: config.path.dist + '/' + config.path.js,
    		copy: config.path.dist
    	},
    
    	watch: {
    		html: config.path.source + '/**/*.jade',
    		css: config.path.source + '/**/*.styl',
    		img: config.path.source + '/' + config.path.images + '/**/*.{jpg,jpeg,png,gif,svg}',
    		js: config.path.source + '/**/*.js',
    		copy: config.path.assets + '/**/*'
    	}
    };
    
    // Локальный сервер
    gulp.task('browser-sync', function() {
    	return browserSync.init(plugins.browserSync.options);
    });
    
    gulp.task('bs-reload', function (cb) {
    	browserSync.reload();
    });
    
    // Собираем Stylus
    gulp.task('stylus', function() {
    	return gulp.src(path.source.css)
    		.pipe(plumber({
    			errorHandler: errorHandler
    		}))
    		.pipe(stylus({
    			use: [
    				autoprefixer(plugins.autoprefixer.options)
    			]
    		}))
    		.pipe(cssbeautify(plugins.cssbeautify.options))
    		.pipe(csscomb())
    		.pipe(gulp.dest(path.dest.css))
    		.pipe(browserSync.stream())
    		.pipe(csso())
    		.pipe(rename({suffix: '.min'}))
    		.pipe(gulp.dest(path.dest.css));
    });
    
    // Собираем html из Jade
    gulp.task('jade', function() {
    	return gulp.src('source/**/*.jade')
    		.pipe(plumber({
    			errorHandler: errorHandler
    		}))
    		.pipe(cached('jade'))
    		.pipe(gulpif(global.isWatching, jadeInheritance({basedir: 'source'})))
    		.pipe(filter(function (file) {
    			return !/source[\\\/]blocks/.test(file.path);
    		}))
    		.pipe(jade(plugins.jade.options))
    		.pipe(gulp.dest(path.dest.html));
    });
    
    // Копируем и минимизируем изображения
    gulp.task('images', function() {
    	return gulp.src(path.source.img)
    		.pipe(plumber({
    			errorHandler: errorHandler
    		}))
    		.pipe(newer(path.dest.img))
    		.pipe(imagemin(plugins.imagemin.options))
    		.pipe(gulp.dest(path.dest.img));
    });
    
    // Копируем файлы
    gulp.task('copy', function() {
    	return gulp.src(path.source.copy)
    		.pipe(plumber({
    			errorHandler: errorHandler
    		}))
    		.pipe(newer(path.dest.copy))
    		.pipe(gulp.dest(path.dest.copy))
    		.pipe(gulpFilter(['**/*.js', '!**/*.min.js']))
    		.pipe(uglify())
    		.pipe(rename({suffix: '.min'}))
    		.pipe(gulp.dest(path.dest.css));
    });
    
    // Собираем JS
    gulp.task('plugins', function() {
    	return gulp.src(path.source.js)
    		.pipe(plumber({
    			errorHandler: errorHandler
    		}))
    		.pipe(include())
    		.pipe(gulp.dest(path.dest.js))
    		.pipe(uglify().on('error', gutil.log))
    		.pipe(rename(plugins.rename.options))
    		.pipe(gulp.dest(path.dest.js));
    });
    
    // Отчистка папки public
    gulp.task('cleanup', function(cb) {
    	return del(config.path.dist + '/*', cb);
    });
    
    gulp.task('build-zip', function() {
    	var prjName = 'dist';
    	var rootFolderName = nodePath.basename(__dirname);
    
    	if (!rootFolderName || typeof rootFolderName === 'string') {
    		prjName = rootFolderName;
    	}
    
    	var datetime = '-' + getDateTime();
    	var zipName = prjName + datetime + '.zip';
    
    	return gulp.src('public/**/*')
    		.pipe(gulpZip(zipName))
    		.pipe(gulp.dest('zip'));
    });
    
    gulp.task('build', function (cb) {
    	return runSequence(
    		[
    			'stylus',
    			'jade',
    			'images',
    			'plugins',
    			'copy'
    		],
    		cb
    	);
    });
    
    gulp.task('zip', function (cb) {
    	return runSequence(
    		'cleanup',
    		'build',
    		'build-zip',
    		cb
    	);
    });
    
    gulp.task('watch', function () {
    	global.isWatching = true;
    
    	watch(path.watch.css, function() {
    		return runSequence('stylus');
    	});
    
    	watch('source/**/*.jade', function() {
    		return runSequence('jade', browserSync.reload);
    	});
    
    	watch(path.watch.img, function() {
    		return runSequence('images', browserSync.reload);
    	});
    
    	watch(path.watch.js, function() {
    		return runSequence('plugins', browserSync.reload);
    	});
    
    	watch(path.watch.copy, function() {
    		return runSequence('copy', browserSync.reload);
    	});
    
    });
    
    gulp.task('default', function (cb) {
    	return runSequence(
    		'build',
    		'browser-sync',
    		'watch',
    		cb
    	);
    });


    package.json
    {
      "name": "gulp-front",
      "version": "3.0.0",
      "homepage": "https://github.com/Zoxon/gulp-front",
      "license": "MIT",
      "description": "Простой путь разработки с Jade и Stylus",
      "repository": {
        "type": "git",
        "url": "http://github.com/Zoxon/gulp-front.git"
      },
      "author": "Velicko Konstantin <zoxon.box@gmail.com> (http://github.com/Zoxon)",
      "licenses": {
        "type": "MIT",
        "url": "http://github.com/Zoxon/gulp-front/blob/master/license.txt"
      },
      "bugs": {
        "url": "http://github.com/Zoxon/gulp-front/issues"
      },
      "dependencies": {
        "autoprefixer-stylus": "^0.9.1",
        "browser-sync": "^2.10.0",
        "del": "^2.1.0",
        "gulp": "^3.9.1",
        "gulp-cached": "^1.1.0",
        "gulp-changed": "^1.3.0",
        "gulp-cssbeautify": "^0.1.3",
        "gulp-csscomb": "^3.0.6",
        "gulp-csso": "^1.0.1",
        "gulp-filter": "^3.0.1",
        "gulp-if": "^2.0.0",
        "gulp-imagemin": "^2.3.0",
        "gulp-include": "^2.0.2",
        "gulp-jade": "^1.1.0",
        "gulp-jade-inheritance": "^0.5.4",
        "gulp-newer": "^1.1.0",
        "gulp-plumber": "^1.0.1",
        "gulp-rename": "^1.2.2",
        "gulp-stylus": "^2.0.7",
        "gulp-uglify": "^1.5.1",
        "gulp-util": "^3.0.6",
        "gulp-watch": "^4.3.5",
        "gulp-zip": "^3.2.0",
        "imagemin-pngquant": "^4.2.0",
        "run-sequence": "^1.1.5"
      }
    }


    Если у вас старая структура папок (в корне папка assets, public, source), то попробуйте просто заменить эти файлы
    Ответ написан
    Комментировать
  • Что использовать в своем Front-End workflow?

    Zoxon
    @Zoxon
    Веб-разработчик
    Попробуйте использовать мой велосипед
    gulp-front
    Ответ написан
    Комментировать
  • Как сделать автоматическую высоту для блока с position:fixed?

    Zoxon
    @Zoxon
    Веб-разработчик
    codepen.io/Zoxon/pen/dGJEgJ
    Нажимайте кнопки «View Compiled» чтобы посмотреть css и html
    Ответ написан
    Комментировать
  • Какой jquery плагин использовать для стилизации select?

    Zoxon
    @Zoxon
    Веб-разработчик
    Ответ написан
    Комментировать
  • Ошибка Unexpected token } указывает на тег HTML?

    Zoxon
    @Zoxon
    Веб-разработчик
    Ошибка где то в этом говнокоде
    /*========= Первичная загрузка окна ======================================*/
    window.onload=function(){
        fResize();
    };
    
    /*========= При уменьшении размера окна Меню заменяется кнопкой ==========*/
    window.onresize=function(){
        fResize();
        fScroll();
    };
    
    function fResize() {
        if (window.innerWidth<722){
            document.getElementById('idivNavigation').innerHTML = '<i class="fa fa-bars fa-2x naviButton"></i>';
        }
        else {
            document.getElementById('idivNavigation').innerHTML ='<ul class="navMenu">' +
            '<li class="navMenuItem"><a href="#Home" id ="idHome" onclick="changeButtonsBackground("idHome")">HOME</a></li>' +
            '<li class="navMenuItem"><a href="#About" id ="idAbout" onclick="changeButtonsBackground("idAbout")">ABOUT</a></li>' +
            '<li class="navMenuItem"><a href="#Work" id ="idWork" onclick="changeButtonsBackground("idWork")">WORK</a></li>' +
            '<li class="navMenuItem"><a href="#Blog" id ="idBlog" onclick="changeButtonsBackground("idBlog")">BLOG</a></li>' +
            '<li class="navMenuItem"><a href="#Contact" id ="idContact" onclick="changeButtonsBackground("idContact")">CONTACT</a></li>' +
            '</ul>';
        }
    
        window.varHome = $('#idivPurpleContainer').offset().top;
        window.varAbout = $("#idivGreenContainer").offset().top;
        window.varWork = $('#idivWhiteContainer').offset().top;
    }
    
    
    /*========= При клике на пункт Меню он подсвечивается темным Бекграундом =====*/
    
    var itemId;
    function changeButtonsBackground(itemId){
        document.getElementById('idHome').style.backgroundColor="#8e58a3";
        document.getElementById('idAbout').style.backgroundColor="#8e58a3";
        document.getElementById('idWork').style.backgroundColor="#8e58a3";
        document.getElementById('idBlog').style.backgroundColor="#8e58a3";
        document.getElementById('idContact').style.backgroundColor="#8e58a3";
        document.getElementById(itemId).style.backgroundColor ="#5f376f";
    }
    
    /*========= Плавный Скроллинг до Якоря при клике на пункт Меню ===============*/
    /*
    $(function($) {
        $.localScroll({
            duration: 1000,
            hash: false });
    });
     */
    /*========= При Скроллинге подсвечиваеются текущие пункты Меню ===============*/
    window.onscroll=function() {
        fScroll();
    };
    function fScroll() {
        var vScrollPosition;
        vScrollPosition = $(window).scrollTop() + 200; // Добавляем 200 пикселей
    
        if (vScrollPosition < window.varAbout) {
            document.getElementById('idHome').style.backgroundColor = "#5f376f";
            document.getElementById('idAbout').style.backgroundColor = "#8e58a3";
            document.getElementById('idWork').style.backgroundColor = "#8e58a3";
            document.getElementById('idBlog').style.backgroundColor = "#8e58a3";
            document.getElementById('idContact').style.backgroundColor = "#8e58a3";
    
        }
        else if (vScrollPosition > window.varAbout && vScrollPosition < window.varWork) {
            document.getElementById('idHome').style.backgroundColor = "#8e58a3";
            document.getElementById('idAbout').style.backgroundColor = "#5f376f";
            document.getElementById('idWork').style.backgroundColor = "#8e58a3";
            document.getElementById('idBlog').style.backgroundColor = "#8e58a3";
            document.getElementById('idContact').style.backgroundColor = "#8e58a3";
        }
        else if (vScrollPosition > window.varWork) {
            document.getElementById('idHome').style.backgroundColor = "#8e58a3";
            document.getElementById('idAbout').style.backgroundColor = "#8e58a3";
            document.getElementById('idWork').style.backgroundColor = "#5f376f";
            document.getElementById('idBlog').style.backgroundColor = "#8e58a3";
            document.getElementById('idContact').style.backgroundColor = "#8e58a3";
        }
    }

    Скорее всего в районе changeButtonsBackground(itemId)
    И такой вопрос зачем вам JQ?

    В этой функции хватило бы элментарного скрипта что то вроде
    $('.navMenuItem').click(function(event) {
    	//Код анимированного перехода, можно даже без плугинов сделать
    
    	$('.navMenuItem').removeClass('navMenuItem_active');
    	$(this).addClass('navMenuItem_active');
    });

    .navMenuItem_active {
       background-color: #8e58a3;
    }
    Ответ написан
  • Как сделать выборку элементов в jQuery?

    Zoxon
    @Zoxon
    Веб-разработчик
    var maxHeight = 0;
    $('li').each(function() {
    	var $this = $(this);
    
    	$this.each(function() {
    		var height = $(this).height();
    
    		if (height > maxHeight) {
    			maxHeight = height;
    		}
    	});
    
    });
    $('li').height(maxHeight);

    Надо проверить работоспособность, вроде все правильно
    Ответ написан
    Комментировать
  • Где странице скрипт, отвечающий за "шевеление" картинок (в исходном коде не видно)?

    Zoxon
    @Zoxon
    Веб-разработчик
    Посмотрите инспектором, на mouseover висит скрипт, только он минифицированный и склееный. Имя у него тоже генерится

    (function($, undefined) {
        $.widget("ui.pfCatEffects", {
            options: {},
            _init: function() {
                this.$this = this.element;
                this.$childs = this.$this.find('li');
                this._cling([440, 500], [440, 500], "marginLeft", "marginTop");
            },
            _cling: function(d, c, a, b) {
                this.$childs.find('img').each(function(j, e) {
                    var x = $(e),
                        u = 0,
                        m = 0,
                        s = 0,
                        q = 0,
                        g = a || "left",
                        o = b || "top",
                        f = parseInt(x.css(g)),
                        v = parseInt(x.css(o)),
                        p = false,
                        n, k, r = function(i, h) {
                            return i > 0 ? Math.pow(i, h) : -Math.pow(-i, h)
                        };
                    x.hover(function(h) {
                        if (typeof h.offsetX === "undefined" || typeof h.offsetY === "undefined") {
                            var t = $(h.target).offset();
                            h.offsetX = h.pageX - t.left;
                            h.offsetY = h.pageY - t.top;
                        }
                        clearTimeout(n);
                        clearTimeout(k);
                        x.stop(0, 1);
                        n = setTimeout(function() {
                            p = true
                        }, 10);
                        u = x.width() / 2;
                        m = x.height() / 2;
                        s = h.pageX - (h.offsetX || h.layerX) + u;
                        q = h.pageY - (h.offsetY || h.layerY) + m;
                        kw = d ? (d[0] - u) / d[1] : 0.2;
                        kh = c ? (c[0] - m) / c[1] : 0.2
                    }, function() {
                        clearTimeout(n);
                        clearTimeout(k);
                        k = setTimeout(function() {
                            p = false;
                            var h = {};
                            h[g] = [f, "easeOutElastic"];
                            h[o] = [v, "easeOutElastic"];
                            x.animate(h, 1000)
                        }, 100)
                    }).mousemove(function(i) {
                        if (p) {
                            var h = {};
                            h[g] = f + r(i.pageX - s, kw);
                            h[o] = v + r(i.pageY - q, kh);
                            x.css(h)
                        }
                        return false
                    })
                })
            }
        });
    })(jQuery);;

    $('.ny .content-menu').pfCatEffects();
    Ответ написан
    Комментировать
  • Как сделать кнопку активной по умолчанию в jquery?

    Zoxon
    @Zoxon
    Веб-разработчик
    Примерно так
    <a href="#" class="b-button">Кнопка</a>
    $('.b-button').addClass('b-button_active');
    .b-button_active {
    background: green;
    }
    Ответ написан
    Комментировать