The Rpsl Blog » css

Scrollbar и центрирование

Rpsl — Mon, 15 Aug 2011 09:45:00 +0000

Столкнулся сегодня с косяком, допустим есть однотипные страницы, на которых основной контент автоматически центрируется.

#content {
   margin: 0 auto;
}

Так вот, при загрузке страницы, до момента пока основной контент еще не подгрузился, а шапка уже появилась, то scroll'a справа нету, как только контент подгружается, то сбоку появляется scrollbar и весь контент из-за этого прыгает на несколько пикселей влево. В целом этот баг можно решить, если задать основному блоку min-height, но это не универсальное решение. Тем более это может вызывать косяки, если вдруг окажется, что контента у нас на странице нету, будет большой вентум.

Думали-думали, не знали что делать, в итоге решили сделать как у fb, что бы скроллбар был всегда на странице, не важно активный или нет.

body {
   overflow-y: scroll;
}

Возможно это не самое лучшее решение, но гарантировано убирает проблему с прыганьем контента и избавляет от вероятности появления вентумов на странице.

Может расскажите другие способы решения?

Еще немного про собеседования

Rpsl — Sun, 13 Mar 2011 14:46:04 +0000

Решил дополнить поднятую тему про собеседования и рассказать о вопросах которые задают чаще всего.

Изначально, я хотел в этом посте написать все самые интересные вопросы и дополнить их ответами, но когда начал его писать, то понял что ответы тут не нужны. Те кому это действительно надо, сами порешают данные задачи, остальные могут просто пролистать.

Первое на что хочу обратить ваше внимание, это то, что вопросы которые задают php(?) программистам, в основной своей сути имеют довольно академический характер и в жизненных циклах проектов встречаются не часто, но тем не менее, нужно уметь решать эти задачи. Это обусловленно тем, что у работодателей нету времени и желания давать вам типичные задачи, в стиле - "Напиши класс, который будет отвечать за работу с пользователями". 99 процентов всех вопросов задаются по заготовленному листку и должны быть решены на листке бумаги. Никаких IDE, никаких гуглов, никаких ответов типа "я не помню синтаксис". Если вы настроены решительно и хотите произвести хорошее впечатление, то уделите время, что бы потренироваться и чувствовать себя уверенно.

Все вопросы можно разделить на три категории: PHP, MySQL(?), все остальное.

Любой из этих пунктов, так же делится на две части: теория и практика. Начну пожалуй с PHP. С теоретическими вопросами, в целом, не сложно. Они почти везде одинаковые: Отличия между PHP 5.2 и 5.3, основные приципы ООП. Не частый, но вопрос с подвохом - "В каких случаях использование ООП, является убыточным?". Дальнейшие вопросы на теорию, в основном, зависят от ваших ответов, и несут цель узнать на сколько хорошо вы разбираетесь в материале о котором говорили выше.

Практические вопросы, это чаще всего просьба написать некую ф-цию, которая делает какую либо хрень. Почти на каждом собеседование меня просили написать функцию которая переворачивает строку, без использования дополнительных буферов, можно попробовать схитрить и ответить что-то в стиле

  function revert( $string ){ return strrev( $string ); } ?>

Но это не cамый лучший вариант ответа. Выучите алгоритм с обращением к символом строки как к объекту массива.
Очень частые задачи, на написание рекурсивных функций или на понимание работы операторов кода.

 $a = 10;
echo ++$a + $a++ - ++$a + $a ;
?>

На днях пока решал задачи, попалось интересное задание, у меня такое ни разу не спрашивали, но думаю что к такому надо быть готовым:

 var_dump( 0123 == 123 ); ?>

Думаю, что на счет PHP я достаточно ясно изложил типовые вопросы, если что-то осталось не понятно, то спрашивайте в комментариях.
Теоретические вопросы про MySQL или любую другую СУБД почти всегда касаются индексов и насколько вы понимаете как их использовать, в каких случаях и на что их ставить и в каких случаях индексы могут быть вредны. Обязательно спросят про различия между версиями. Поинтересуются насколько глубоко вы знаете тонкости работы СУБД и вкурсе ли вы про то, что такое тригеры, хранимые процердуры, представления.

Практические задачи - это просьба нарисовать две таблицы с различными данными и просьба написать запрос, который покажет умеете ли вы использовать операторы HAVING, GROUP BY, ... etc. Обязательно знать разницу между JOIN запросами.

Еще часто спрашивают про верстку, про css, про javascript. Но расписывать это все не вижу смысла.

Тестируем верстку Adobe BrowserLab

Rpsl — Mon, 14 Jun 2010 11:28:57 +0000

Компания Adobe представила свой новый продукт, онлайн приложение, для тестирования верстки в различных браузерах.

Данное онлайн приложение позволяет протестировать качество верстки в различных web браузерах, на данный момент поддерживаются:

Chrome 3.0 - Windows
Firefox 2.0 - OS X
Firefox 3.0 - OS X
Firefox 3.6 - OS X
Firefox 2.0 - Windows
Firefox 3.0 - Windows
Firefox 3.6 - Windows
Internet Explorer 6.0 - Windows
Internet Explorer 7.0 - Windows
Internet Explorer 8.0 - Windows
Safari 3.0 - OS X
Safari 4.0 - OS X

Все что вам необходимо, это зарегистрироваться. После этого, стоит сразу собрать набор актуальных браузеров, что бы все представления делались для них автоматически. Далее указываем ссылку на документ, который нужно тестировать и смотрим результаты.

Очень удобно, что можно переключиться в Split Mode и смотреть, как один и тот же кусок страницы отображается в разных программах.

https://browserlab.adobe.com/en-us/index.html

Ну вот и обновились

Rpsl — Thu, 10 Jun 2010 20:11:57 +0000

Мелочей еще конечно много, но буду править и постараюсь снова начать писать.

jQuery + label tag

Rpsl — Thu, 02 Jul 2009 09:54:07 +0000

Очередной, очень маленький, но ужасно удобный trick. Суть очень простая, он автоматически делает одинаковый width для всех элементов . Изначально форма выглядит примерно вот так: Добавляем стиль:

label, input[type="text"]{
    float:left;
    display:block;
}
label{
    margin-right: 5px;
}
.field{
    width:100%;
    overflow:auto;
    margin:5px 0px;
}

Добавляем javascript:

$(document).ready(function() {
    var max = 0;
    $("label").each(function(){
        if ($(this).width() > max)
            max = $(this).width();
    });
    $("label").width(max);
});

И вуаля:

Клеви навигация.

Rpsl — Sun, 28 Jun 2009 17:47:34 +0000

Забыл? Бросил? Нет, я всё ещё тут, просто в последнее время многое поменялось и на посты время не оставалось. Ведь мой блог это не очередной "манимэйкерский" высер, а так, для себя в первую очередь. В общем, что бы разбавить пустоту, которая была в последнее время, решил выложить листинг красивого футера. Началось всё с того, что некоторое время назад, я прикрутил к блогу hotkey (hotkeys для wordpress), но какой в них смысл, если об этом никто не знает. Вот мне и захотелось вынести их на передний план. Для этого, я чуть - чуть поиграл с css стилями, и теперь .footer выглядит следующим образом:

#container_foot {
    border-top:thin dashed;
    bottom:0;
    height:32px;
    left:0;
    padding-bottom:0;
    padding-top:5px;
    position:fixed;
    width:100%;
    z-index:1000;
}

Это то, что касается расположения. Стиль он и так унаследует от вашей темы.

Loc Dog - Ты хочешь видеть мою истинную душу?