Ответы пользователя по тегу HTML
  • Как сверстать такой layout?

    UZER2006
    @UZER2006 Автор вопроса
    В общем, остановился на варианте, что без JS это реализовать невозможно.
    Ближе всего было решение с display:table и display:table-row.
    Всем спасибо!
    Ответ написан
    Комментировать
  • Как наиболее грамотно сверстать стрелочки?

    UZER2006
    @UZER2006
    Думаю, можно использовать идею из ответа выше, сами блоки сделать квадратными и без отступов, а стрелочку реализовать через :after с нависанием над следующим блоком через z-index.
    Роль голубого отступа будет выполнять аналогичного цвета правая граница стрелочки.
    Ответ написан
    Комментировать
  • Интерфейс админки: фиксированная или тянущаяся вёрстка

    UZER2006
    @UZER2006
    Так никто же не мешает принудительно урезать размеры элементов, которые плохо выглядят, если сильно растянутся. Главное, дизайн нормально продумать.
    А в целом мне админки больше нравятся с резиновой вёрсткой на всю страницу. Отмечу, например, ucoz.
    Ответ написан
    Комментировать
  • Определение смещения блока по оси Y?

    UZER2006
    @UZER2006
    Ничего сложного. Получаем положение блока, получаем высоту рабочей области окна. Задаём соответствующий scrollTop.

    jQuery
    $('body')[0].scrollTop = $('#block').position().top-$(window).height()/2;
    

    Чистый JS
    var el = document.getElementById('#block');
    var pos = 0;
    while el(offsetTop){
    	pos += el.offsetTop;
    	el = el.offsetParent;
    }
    document.body.offsetTop = pos - window.innerHeight / 2;
    

    Если нужно, можно ещё добавить поправку на размер элемента -> приплюсовать половину его высоты.
    Получить высоту -> $('#block').height() либо document.getElementById('#block').scrollHeight
    Ответ написан
  • Как google chrome заставить печатать фоновые изображения?

    UZER2006
    @UZER2006
    Попробуйте применить правило CSS
    -webkit-print-color-adjust:exact;
    
    Ответ написан
    1 комментарий
  • Chrome. Разработка расширения — live edit

    UZER2006
    @UZER2006
    Смотря что вы имеете в виду. Если background или контент-скрипты – нужно обновлять. Остальное должно подхватываться. Сейчас специально проверил, изменения в коде popup-окна подхватились сразу.
    Ответ написан
    Комментировать
  • Преобразовать верстку в инлайновую

    UZER2006
    @UZER2006
    Не совсем понял, в каком виде вы ожидаете получить инструмент.
    Google предлагает много вариантов. Из тех, которые не просят ссылку или готовый HTML (откуда они CSS тогда возьмут, если файл у меня на компе?), отметил этот.
    Ответ написан
    1 комментарий
  • Jquery ui dialog — Кто как использует?

    UZER2006
    @UZER2006
    По-моему, вопрос немного бессмысленный. На том же JS создать любой DIV, и на него навесить диалог.
    Я в своё время обернул это в удобную функцию, которая решила большинство задач с диалогами в проекте. А позже эта функция была обёрнута в другую, для визуальных AJAX-запросов к серверу, в т.ч. на два шага (редактирование, например).
    newDialog
    var globalDialogs = {};
    /*
    	buttons
    	icontent
    	height
    	width
    	title
    	onclose
    */
    function newDialog(options){
    	options['buttons'] = options.buttons || {'OK':'OK'};
    	options['icontent'] = options.icontent || 'load';
    	options['height'] = options.height || 'auto';
    	options['width'] = options.width || 'auto';
    	options['position'] = options.position || {my:"center",at:"center",of:window};
    	options['title'] = options.title || 'Request...';
    	options['onclose'] = options.onclose || function(){};
    	var shows = ['blind', 'clip', 'drop', 'fold', 'scale', 'slide'];
    	var hides = ['blind', 'clip', 'drop', 'explode', 'fold', 'hidhlight', 'puff', 'scale', 'slide'];
    	var ndd = document.createElement('div');
    	ndd.title = options.title;
    	ndd.id = 'dialog_'+dialogC;
    	if (options.icontent == 'load'){
    		$(ndd).html('<img src="img/load.gif" />');
    		$(ndd).attr('align','center');
    	}
    	else{
    		ndd.innerHTML = options.icontent;
    	}
    	if ($('#_title',ndd).get(0)){
    		ndd.title = $('#_title',ndd).val();
    		$('#_title',ndd).remove();
    	}
    	var butts = [];
    	for (var name in options.buttons){
    		butts[butts.length] = {text:name,click:options.buttons[name]};
    		if ((name == 'OK' || name == 'Cancel' || name == 'Close' || name == 'No') && !$.isFunction(options.buttons[name])){
    			butts[butts.length-1]['click'] = function(){$(this).dialog('close');};
    			butts[butts.length-1]['id'] = 'dialog_close_btn';
    		}
    	}
    	$(ndd).dialog({
    		autoOpen: false,
    		width: options.width,
    		height: options.height,
    		position: options.position,
    		//show: shows[Math.floor(Math.random()*shows.length)],
    		//hide: hides[Math.floor(Math.random()*hides.length)],
    		beforeClose : function(){$.fx.speeds._default = 1000;},
    		close : function(){$(this).html('');$.fx.speeds._default = 400;options.onclose.call(this);},
    		buttons: butts,
    	});
    	var icon = '';
    	for (var name in options.buttons){
    		icon = '';
    		if (name == 'OK'){
    			icon = 'ui-icon-check';
    		}
    		if (name == 'Cancel' || name == 'No' || name == 'Close'){
    			icon = 'ui-icon-closethick';
    		}
    		if (name == 'Update' || name == 'Save' || name == 'Process'){
    			icon = 'ui-icon-disk';
    		}
    		$('#dialog_'+dialogC).parent().find('button:contains("'+name+'")')
    			.button('option','icons',{primary:icon});
    			//.addClass('ui-button-text-icon-primary')
    			//.removeClass('ui-button-text-only')
    			//.prepend('<span class="ui-button-icon-primary ui-icon '+icon+'"></span>');
    	}
    	$(ndd).dialog('open');
    	dialogC++;
    	return dialogC-1;
    }
    
    Ответ написан
    1 комментарий