Недавно столкнулся с такой проблемой: встроил видео от YouTube на сайт и обнаружил, что оно перекрывает все слои и пляски с бубном в CSS с z-index ничего не дают.
Решение:

<script language="javascript">
$(document).ready(function () {
    $('iframe').each(function() {
        var url = $(this).attr('src');
        $(this).attr('src', url+'?wmode=transparent');
    });
});
</script>

Получается, что параметр «transparent» надо просто прописать как GET-параметр.

Классические примеры реализации правильной предварительной загрузки изображений. Это нужно знать и применять как с использованием спрайтов так и простым css или где это требуется с помощью javascript. По ссылке приведен даже видео-пример неприятных моментов с которыми приходится сталкиваться пользователю. Также приведен пример с использованием любимого jQuery.

Я восхищен статьей! Каждый раз, когда начинаешь верстать, думаешь что уже ничего тебя удивить не сможет. И вот очередной раз понимаю, что хороший "верстак" это профессионал, занимающийся этим каждый день.

Шикарный он-лайн ресурс подбора css-стилей для вашего сайта.

Навеяно этим топиком по теме. Можно сказать, что это более усовершенсвованный способ, так как контентом могут выступать и изображения (картинки).
Три кита: код на JavaScript, разметка HTML, стили CSS.

1. JavaScript

function slideSwitch() {
    var $active = $('#slideshow DIV.active');
    if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

    // показываем картинки по-очереди, одна за другой
    var $next =  $active.next().length ? $active.next() : $('#slideshow DIV:first');

    // если надо показывать картинки случайным образом, то можно использовать закомментированный код ниже
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );

    $active.addClass('last-active');
    $next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); });
};

$(function() {
    setInterval( "slideSwitch()", 5000 ); // задержка 5 секунд
});

2. HTML

<div id="slideshow">
    <div class="active">контент 1</div>
    <div>контент 2</div>
    ..................................
    <div>контент n</div>
</div>

3. CSS

#slideshow { position:relative; height:400px; }
#slideshow DIV { position:absolute; top:0; left:0; z-index:8; opacity:0.0; height: 400px; background-color: #FFF; }
#slideshow DIV.active { z-index:10; opacity:1.0; }
#slideshow DIV.last-active { z-index:9; }

Класс стиля class=«active» можно изначально назначать на желаемый div-контент. Параметр height:400px можно менять на собственное усмотрение. Алгоритм вывода случайным образом можно усложнить и усовершенствовать. Более того, можно изменить анимационный эффект на свой.

Три кита: код на JavaScript, разметка HTML, стили CSS.

1. JavaScript

function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // показываем картинки по-очереди, одна за другой
    var $next =  $active.next().length ? $active.next() : $('#slideshow IMG:first');

    // если надо показывать картинки случайным образом, то можно использовать закомментированный код ниже
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );

    $active.addClass('last-active');
    $next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 1000, function() {$active.removeClass('active last-active');});
};

$(function() {
    setInterval( "slideSwitch()", 5000 ); // задержка 5 секунд
});

2. HTML

<div id="slideshow">
    <img src="image_1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="image_2.jpg" alt="Slideshow Image 2" />
    ...............................................
    <img src="image_n.jpg" alt="Slideshow Image n" />
</div>

3. CSS

#slideshow { position:relative; height:350px; }
#slideshow IMG { position:absolute; top:0; left:0; z-index:8; opacity:0.0; }
#slideshow IMG.active { z-index:10; opacity:1.0; }
#slideshow IMG.last-active { z-index:9; }

Класс стиля class=«active» можно изначально назначать на желаемую картинку. Параметр height:350px можно менять на собственное усмотрение. Алгоритм вывода случайным образом можно усложнить и усовершенствовать. Более того, можно изменить анимационный эффект на свой.

Свершилось!
Цель: сверстать задуманный дизайн и натянуть его на смs Joomla.
Просмотр задуманного дизайна: здесь
Граничные условия:
— поддержка IE6
— кроссбраузерность
— валидность
— правильная семантика

Работу можно посмотреть здесь
Код выкладывать не стану — думаю исходник и firebug все знают.
Кроме этого используется 1 js.
Итого:
1 html — 16кб( вместе с тестовыми топиками)
2 css — 1+12 = 13кб
1 js — 13кб
14 jpg+png — примерно 140кб
Далее краткий разбор:


( Читать дальше )