Полезное, отличный онлайн учебник JavaScript с примерами #

Полезное, отличный онлайн учебник JavaScript с примерами

Доступным и понятным языком рассказывается и даже показывается в этом учебнике о JS. Очень качественная выкладка материала, советую.
http://learn.javascript.ru/

Динамическая замена title на JavaScript и Jquery #

Динамическая замена title на JavaScript и Jquery

Единственный более менее нормальный способ менять заголовок на лету, остальные не работали в разных браузерах.
var data = $('h1').html() + '| Умный заголовок';
document.title = data.replace( /([\s\S]+)<title>/, '' ).replace(/<\/title>([\s\S]+)/, '' );

Скрипт находит в документе текст между тегом
<h1> </h1>
, после чего он помещается между тегами
<title> </title>
с добавлением текста "| Умный заголовок". Аминь.

Полный ресайз бекграунда с плавной заменой изображения #

Помните пост Полный ресайз бекграунда не зависимо от размеров окна браузера
Полный ресайз бекграунда с плавной заменой изображения

Сегодня сделаем так что бы бекграунд еще и с эффектом затухания слайдилась

function backgroundScale()
{
    var imageRatio       = 1.75;
    var windowHeight     = document.body.clientHeight;
    var windowWidth      = document.body.clientWidth;
    var windowScale      = windowWidth / windowHeight;
    var targetWidth      = windowHeight * imageRatio;
    var targetWidthFull  = windowWidth;
    var leftPos          = - (targetWidth - windowWidth) / 2;
    var leftPosFull      = 0;

    if (windowScale <= imageRatio)
    {
        $('#rotator img').attr("width", targetWidth);
        $('#rotator').css("left", leftPos);
    }
    else
    {
        $('#rotator img').attr("width", targetWidthFull);
        $('#rotator').css("left", leftPosFull);
    }
}

$(window).resize(function()
{
    var imageRatio       = 1.75;
    var windowHeight     = document.body.clientHeight;
    var windowWidth      = document.body.clientWidth;
    var windowScale      = windowWidth / windowHeight;
    var targetWidth      = windowHeight * imageRatio;
    var targetWidthFull  = windowWidth;
    var leftPos          = - (targetWidth - windowWidth) / 2;
    var leftPosFull      = 0;

    if (windowScale <= imageRatio)
    {
        $('#rotator img').attr("width", targetWidth);
        $('#rotator').css("left", leftPos);
    }
    else
    {
        $('#rotator img').attr("width", targetWidthFull);
        $('#rotator').css("left", leftPosFull);
    }
    mainBaseResize();
});

$(document).ready(function(){
    //$('body').css({background: #fff});
    backgroundScale();
    theRotator();
});


А теперь в скрипт добавляем эти функции
function theRotator() {
    $('#rotator img').css({opacity: 0.0});
    $('#rotator img:first').css({opacity: 1.0});
    setInterval('rotate()',7000);
}

function rotate() {    
    // Берем первую картинку
    var current = ($('#rotator img.show')?  $('#rotator img.show') : $('#rotator img:first'));

    // Берем следующую картинку, когда дойдем до последней начинаем с начала
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('#rotator img:first') :current.next()) : $('#rotator img:first'));    
    // Рандом
    var sibs = current.siblings();
    var rndNum = Math.floor(Math.random() * sibs.length );
    var next = $( sibs[ rndNum ] );
    // Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);

    // Прячем текущую картинку
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');
};

СМОТРЕТЬ РЕЗУЛЬТАТ (Каждые 7 секунд смена бекграунда)

БАЛУН111! #

БАЛУН111!




JS
<script type="text/javascript">
<!--
var cur_balloon = '';
var isvis = false;
function Balloon_Off(){
    if(isvis){ isvis = false; return; }
    var Balloon = cur_balloon ? document.getElementById(cur_balloon) : '';
    if (Balloon) { Balloon.style.display = 'none'; document.onclick = null; cur_balloon = '';  }
}
function Balloon_On(bid){
    Balloon_Off();
    var Balloon = document.getElementById(bid);
    if (!Balloon) return;
    cur_balloon = bid;
    Balloon.style.display = '';
    isvis = true;
    document.onclick = Balloon_Off;
    Balloon.onclick = new Function("isvis=true");
    return false;
}
//-->
</script>


CSS
<style>
a {position:absolute; top:30%; left:50%; margin-left:-100px; display:block; text-decoration:none; border-bottom:1px dashed; font-size:16px;}
a:hover {border-bottom:0px;}
#Form {width:200px; height:300px; background:#eee; border:1px solid #B7B7B5; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius: 15px; text-align:center; padding-top:40px;}
</style>


HTML
<a href="#" onclick="return Balloon_On('Form')">Жмякнуть в эту штуку</a>
<div id="Form" style="display:none; position:absolute; top:20%; left:70%; margin-left:-100px;">А здесь блок</div>

Google Maps Plugin for jQuery - gMap #

Smart корзина JavaScript jQuery #

Smart корзина JavaScript jQuery

ДЕМО /
Оф. сайт там же и скачать _http://tech-laboratory.blogspot.com/2009/10/smart-cart-javascript-jquery-pluging.html