Сом — Часть 1

Если бы вы посещали сайт вообще за последние 2 месяца, вы, скорее всего, заметили бы наши новые рекламные баннеры Catfish, время от времени охватывающие нижнюю часть страницы. С момента их запуска мы получали около 3-4 комментариев / электронных писем в неделю с вопросом, как это делается. Поэтому вместо того, чтобы отвечать на каждое электронное письмо по отдельности, мы подумали, что это может быть хорошим местом для ознакомления с тонкостями — для тех, кто заинтересован.

Конечно, код всегда был в открытом доступе, но если вы когда-нибудь пробежались по нему, вы будете знать, что SitePoint имеет много глубоко переплетенных CSS и скриптов, поэтому мы собираемся выпустить упрощенную версию Сом в удерживающий резервуар.

Во-первых, некоторые основы. Да, Catfish — «ничто иное, как« DIV-разнообразие »DIV с небольшим количеством CSS и небольшим количеством JavaScript, чтобы сделать его шимми — без сумасшедших технологий не требуется.

Первое «доказательство концепции» было взломано без анимации и чистого CSS . На этом этапе идея состояла в том, чтобы просто получить представление о том, как она выглядит на странице, поэтому мы быстро настроили ее, используя CSS-свойство position: fixed и небольшой JavaScript-код, чтобы он исчез, когда его спросят.

DIV был вставлен в конце, непосредственно перед закрывающим тегом BODY. Мы также добавили нижнюю часть HTML-элемента, чтобы сомнение никогда не скрывало нижний колонтитул.

catfish.css

#catfish { position:fixed; bottom:0; background:transparent url(images/catfish-tile.gif) repeat-x left bottom; padding:0; height: 79px; /* includes transparent part */ cursor: pointer; margin: 0; width:100%; } html { padding:0 0 58px 0; /* 58px = height of the opaque part of the Catfish */ } 

Содержание «DIV # сом» полностью зависит от вас. Вы можете использовать его для навигации, объявлений на сайте, панелей входа или множества других вещей. Пространство явно ограничено, поэтому рекомендуется сохранять относительно простоту.

После демонстрации этого с некоторыми из парней здесь, мы все согласились, что у идеи были некоторые ноги. В этот момент основной проблемой стало то, что в Internet Explorer это вообще не работало. Если вы просматриваете демо в IE, вы увидите, что DIV ведет себя точно так же, как если бы это было « position: static » (по умолчанию). Наша большая задача состояла в том, чтобы сделать IE похожим на игру — и на этом я сконцентрируюсь.

Над «исправленной» проблемой уже было проделано много хорошей работы (среди прочих) со Стю Николсом , Саймоном Джесси и Петром «Пикси» Станичеком . Хотя каждый из них отличался мелким шрифтом, они, как правило, соглашались с некоторыми основными принципами — расположите ‘wannabe fixed DIV’, используя ‘position: absolute’, а затем оберните все остальное в ‘position: относительный’ DIV, чтобы разделить их. Звучит как хорошее место для начала.

Мы также приняли другое решение на данный момент. Поскольку FireFox, Opera и Safari отлично работают со стандартом W3C «позиция: исправлена», зачем добавлять к ним дополнительную разметку? — только IE будет получать дополнительную разметку.

В этой версии «песочницы» я собираюсь присоединить наши специфичные для IE стили и скрипты, используя «условные комментарии», хотя мы на самом деле используем «сниффинг объекта» для нацеливания IE на живую версию. Я думаю, что условные комментарии являются отличным способом, поскольку они вызывают целевую функцию внутри IE, а не полагаются на исправляемые и вероятные временные ошибки браузера. С IE7 на горизонте, полагаться на ошибки — более опасное занятие, чем когда-либо прежде.

Условные комментарии

 <!--[if IE]> <link rel="stylesheet" href="IEhack.css" type="text/css" /> <![endif]--> 

Приведенная выше разметка позволит нам предоставлять различные стили только для IE. Другие браузеры будут читать его как «стандартный болотный» HTML-комментарий, что означает, что HTML-валидаторы также найдут его полезным и удовлетворительным. Если IE7 поддерживает «position: fixed», будет тривиально изменить комментарий так, чтобы он был нацелен только на IE6 и старше (например, « <!--[if lt IE 7]> ... », если он меньше, чем IE7).

Итак, какой дополнительный CSS мы должны отправить IE?

Не очень много. Нам нужно изменить позиционирование Catfish на « absolute », установить его z-index на « 100 », чтобы оно оставалось впереди, и установить его переполнение на « hidden ».

 #catfish { position: absolute; z-index: 100; overflow: hidden; } 

 html, body { height:100%; overflow: hidden; width:auto; } 

 <body> <div id="zip"> <div id="masthead... ...</div>...<!-- close zip --> <div id="catfish">... ...</div><!-- close catfish--> </body> 

 div#zip { width: 100%; padding:0; margin:0; height: 100%; overflow: auto; position: relative; } 

 function wrapFish() { var catfish = document.getElementById('catfish'); // pick the catfish out of the tree var subelements = []; for (var i = 0; i < document.body.childNodes.length; i++) { subelements[i] = document.body.childNodes[i]; } // write everything else to an array var zip = document.createElement('div'); // Create the outer-most div (zip) zip.id = 'zip'; // give it an ID of 'zip' for (var i = 0; i < subelements.length; i++) { zip.appendChild(subelements[i]); // pop everything else inside the new DIV } document.body.appendChild(zip); // add the major div back to the doc document.body.appendChild(catfish); // add the Catfish after the div#zip } window.onload = wrapFish; // run that function! 

 <!--[if IE]> <link rel="stylesheet" href="IEhack.css" type="text/css" /> <script type="text/javascript" src="catfish.js"> <![endif]-->