Форум

AkimovNY · #1 (**permalink**) 30.04.2012, 02:51

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

В общем, например, как на ozon.ru на главной странице блок "Другие пользователи сейчас смотрят"

FINoM · #2 (**permalink**) 30.04.2012, 04:10

Вы просите готовый скрипт с нуля.

Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа".

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

AkimovNY · #3 (**permalink**) 30.04.2012, 13:49

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

maxmaster · #4 (**permalink**) 01.05.2012, 00:07

На ozone это реализовано через CSS, там даже скрипт не нужен... Не проверял, но догадываюсь что именно так

AkimovNY · #5 (**permalink**) 01.05.2012, 18:10

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

AkimovNY · #6 (**permalink**) 04.05.2012, 01:04

вот сделал, но как то немного тормозит, можно ли это оптимизировать?

$(window).resize(function() {
	    blockResize(".catalog_leader", ".catalog_item_card");
	})

function blockResize(blockName, itemName) {
	if ($(blockName).width() < 800) {					//3 товара
	    $(blockName + " " + itemName).css("width", "33.3%");
	    $(blockName + " " + itemName).slice(3,6).hide();
	}
	if ($(blockName).width() < 1000 && $(blockName).width() >= 800) {	//4 товаров
	    $(blockName + " " + itemName).css("width", "25%");
	    $(blockName + " " + itemName).slice(4,6).hide();
	    $(blockName + " " + itemName).slice(3,4).show();
	}
	if ($(blockName).width() < 1200 && $(blockName).width() >= 1000) {	//5 товаров
	    $(blockName + " " + itemName).css("width", "20%");
	    $(blockName + " " + itemName).slice(5,6).hide();
	    $(blockName + " " + itemName).slice(3,5).show();
	}
	if ($(blockName).width() >= 1200) {					//6 товаров
	    $(blockName + " " + itemName).css("width", "16.6%");
	    $(blockName + " " + itemName).slice(3,6).show();
	}
    }

bot87 · #7 (**permalink**) 04.05.2012, 11:02

Может тебе поможет мое чудовище.
Ширина пунктов меню равная .При размере браузера менее 400рх 3 блока убираются.Можно сделать постепенное скрытие по одному блоку

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
  <style type="text/css">
                * {
                        margin: 0;
                        padding: 0;
                        font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
                }
                
                ul {
                        list-style: none;
                        text-align: justify;
                        text-justify: newspaper;
                        line-height: 0;
                }
                
                li {
                       
                        display: inline-block;
                        vertical-align:top;
                        text-align: center;
                        background: red;
                }
                
                li.helper {
                        width: 100%;
                        background: none;
                }
				
        </style>
  <!--[if lte IE 7]>
                <style type="text/css">
                        ul {
                                width: 99.9%;
                                text-align-last: justify;
                        }
                        
                        li {
                                display: inline;
                        }
                        
                        li.helper {
                                display: none;
                        }
                </style>
        <![endif]-->

</head>

<body>
 <ul>
                <li>home</li>
                <li>about us</li>
                <li>contacts</li>
                  <li>home</li>
                <li>about us</li>
                <li>contacts</li>
                <li> link</li>
                <li class="helper"></li>
        </ul>
<script>

function handler(){
ul=document.getElementsByTagName('ul')[0]
if(document.body.clientWidth<400){
	ul.getElementsByTagName('li')[6].style.display='none'
	ul.getElementsByTagName('li')[5].style.display='none'
	ul.getElementsByTagName('li')[4].style.display='none'
}else{
		ul.getElementsByTagName('li')[6].style.display=''
	ul.getElementsByTagName('li')[5].style.display=''
	ul.getElementsByTagName('li')[4].style.display=''
	
}
}
if(window.addEventListener){
window.addEventListener('resize',handler,false)
}
else{
	
	window.attachEvent('onresize',handler)
	}
</script>
</body>
</html>

Работает везде даже в ишаке

Форум

Справочник

Discord чат

Курсы javascript