Ошибки и неувязки

[seemax]

Прошу посмотреть страничку http://pomidor.com.ua/seemax/ImageneerA/HTML/ImageneerA.html

Подскажите плз:

1) Футер прибивал к низу через его отрицат маржу сверху + 100%высоту вышележащего блока.

Футер не хочет быть внизу.

2) "Sample text one" должен открывать доступ к ссылке и описанию продука по событию hover. Скрытый блок открывается конечно при этом событии, но входит в колебания открылся-закрылся. Предположил что открывшийся АР блок перекрывает собой вызывающий событие блок. Для удержания открывшегося блока открытым добавил код, который идет вторым из 2х приведенных ниже. Результат тот же.

$(document).ready(function(){
        $('.blockOne'). hover(
            function() { $('.ProdOne'). show('slow'); },
			 function() { $('.ProdOne'). hide('slow');});
    });


$(document).ready(function(){
        $('.ProdOne'). hover(
            function() { $('.ProdOne'). show(); },
			 function() { $('.ProdOne'). hide();});
    });

[gift]

2) "Sample text one" должен открывать доступ к ссылке и описанию продука по событию hover. Скрытый блок открывается конечно при этом событии, но входит в колебания открылся-закрылся. Предположил что открывшийся АР блок перекрывает собой вызывающий событие блок. Для удержания открывшегося блока открытым добавил код, который идет вторым из 2х приведенных ниже. Результат тот же.

Вот этот код неидеален, но работает:

$('.blockOne').bind('hover', function() { 
	$('.ProdOne').toggle();
});

Я затрудняюсь с точностью утверждать, почему ваш код работает неправильно.

Правильней было бы вложить скрытый блок в тот, для которого срабатывает наведение мышки: в таком случае можно обойтись одним CSS

.ProdOne { display:none; }
.blockOne:hover .ProdOne { display:block; }

,

а также гарантированно правильно будут срабатывать события, т.к. в джаваскрипте они всплывают от породившего элемента (.ProdOne, например) к его родителям (.blockHover). Короче говоря, при такой структуре элементов обработка события будет правильной.

1) Футер прибивал к низу через его отрицат маржу сверху + 100%высоту вышележащего блока.

Футер не хочет быть внизу.

Тут у вас куча неточностей.

Во-первых, для html и body надо задать высоту = 100%, а не минимальную высоту, чтобы действительно растянуть их на высоту вьюпорта.

html, body { height:100%; }

Во-вторых, минимальная высота нужна для элемента, лежащего на одном уровне с футером в DOM. В вашем случае это .container:

.container { min-height:100%; }

Высота и отрицательное верхнее поле у футера задано верно, но чтобы футер не наезжал на контент, нужно задать такой же отступ снизу вложенному в контейнер элементу, т.е. вашему .wrapper:

.wrapper { padding-bottom:30px; }

.

Самое главное: проследите за элементами cufon с ненулевой высотой, которыенаходятся между footer и .container и в конце wrapper. Между этими двумя элементами не должно быть ничего, что добавило бы высоты сверх 100%.

[seemax]

Вот этот код неидеален, но работает:

$('.blockOne').bind('hover', function() {

$('.ProdOne').toggle();

});

Я попробовал этот код

$(document).ready(function(){
		$('.blockOne').bind('hover', function() { 
        $('.ProdOne').toggle();});
});

Результата нет, к сожалению..

Правильней было бы вложить скрытый блок в тот, для которого срабатывает наведение мышки: в таком случае можно обойтись одним CSS

.ProdOne { display:none; }

.blockOne:hover .ProdOne { display:block; }

Меня такая идея посещала. Не знаю как реализовать, ведь вложенный блок будет деформировать содержимое родительского блока. Как этого избежать?

Я не придумал ничего лучше, чем АР элемент поверх скрываемого проявляемым элементом.

[Yazon_Nile]

1 http://jsfiddle.net/Mj8Vg/6/ - ховер на соседа

2 http://jsfiddle.net/Mj8Vg/7/ - ховер на родителя

3 (с JS) http://jsfiddle.net/Mj8Vg/11/ - пофик какой ховер, пофик на какой елемент + еффект)

Edited July 4, 2012 by Yazon_Nile

[gift]

Я попробовал этот код

$(document).ready(function(){
		$('.blockOne').bind('hover', function() { 
        $('.ProdOne').toggle();});
});

Результата нет, к сожалению..

У меня он работает на вашей разметке, я специально проверял.

Правда, я заранее удалил все обработчики события hover:

$('.blockOne').unbind('hover');

Если после этого код у вас не заработает, то это какая-то аномалия

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

Чтобы не допустить растягивания блока-родителя, нужно «вырвать» блок-потомок из нормального потока. Вспомните, что обычно делают с флоатами?

Их «клирят» именно потому, что они вырываются из потока. Но флоаты в данном случае подойдут не лучшим образом. Лучше использовать абсолютное позиционирование относительно родителя, задав ему заранее position:relative.

[seemax]

Спасибо всем кто проявил участие. Задача с "всплывающими блоками" решена http://pomidor.com.ua/seemax/ImageneerA/HTML/ImageneerA.html#

Осталась проблема "неприбитого" футера. Неужели Cufon может внести искажения к проверенному способу: height:100% для вышележащего блока + отрицательная маржа на высоту футера?

А сталкивался кто нить с аномалией: малого веса фон картинка во всплывающем блоке нормально выводится локально и очень медленно выводится с FTP, когда основная картинка весом в 4 раза больше загружается практически мгновенно?