Форум

aleha · #1 (**permalink**) 09.08.2011, 13:14

Имеется порядка 90 изображений расположенных inline, т.е. одна за другой, чтобы по достижении границы контейнера перескакивали на новую строку. Имеется механизм фильтрации, на jQuery и аналогичный на javaScript, который по определенным условиям проставляет некоторым картинкам dispaly:none а другим соответственно display:inline. В лисе всё отображается как и ожидается. В IE большая часть display:none прячется, но при этом остается несколько дырок, как будто был применен метод visibility:hidden.
В чем может быть загвоздка?

devote · #2 (**permalink**) 09.08.2011, 13:19

у картинок имеется margin, padding, border или размеры у картинок не идентичны... что бы переносилось на другую строку, нужно что бы высота у картинок была одинаковая.

aleha · #3 (**permalink**) 09.08.2011, 14:09

Сообщение от devote

у картинок имеется margin, padding, border или размеры у картинок не идентичны... что бы переносилось на другую строку, нужно что бы высота у картинок была одинаковая.

Картинки нормально переносятся на другую строку. Просто по середине ряда например образуется пустое место.
у картинок есть css класс, в котором им прописано, чтобы у всех была одинаковая высота.
при простановке 0 нулевых margin и padding ничего не меняется

ksa · #4 (**permalink**) 09.08.2011, 16:48

Сообщение от aleha

В чем может быть загвоздка?

Пример чёле какой сделай...

aleha · #5 (**permalink**) 09.08.2011, 17:13

Сообщение от ksa

Пример чёле какой сделай...

выдергиваю разметку из рабочей версии.
Так выглядит кусок где расположены картинки. Одна за другой.

...
<td style="text-align:center;padding:0 20 0 20;" id="image_list">
    <img class="imgStyle "alt="costType3 cigType0" src="images/Prestige_KS/Competitors/DAVIDOFF_REGULAR_(2).png" onclick="nav('Prestige_KS')"/>
    <img class="imgStyle" alt="costType3 cigType0" src="images/Prestige_KS/Competitors/KENT_REGULAR.png" onclick="nav('Prestige_KS')"/>
    <img class="imgStyle" alt= "costType3 cigType0" src="images/Prestige_KS/Competitors/KENT_SURROUND.png" onclick="nav('Prestige_KS')"/>
    <img class="imgStyle" alt="costType3 cigType0" src="images/Prestige_KS/Competitors/MARLBORO_PLUS.png" onclick="nav('Prestige_KS')"/>
    <img class="imgStyle" alt= "costType3 cigType0" src="images/Prestige_KS/Competitors/PARLIAMENT_REGULAR.png" onclick="nav('Prestige_KS')"/>
...

Так выглядит кусок логики фильтрации:

var imgListTD = document.getElementById("image_list");
        var images = imgListTD.getElementsByTagName("img");

        for (var i = 0; i < images.length; i++) {

             var altText = images[i].getAttribute('alt');
             if (globalCost != undefined & globalCigType == undefined) {
                  if (altText.indexOf(globalCost) != -1) {
                      images[i].style.display = 'inline';
                      totalVisible++;
                  }
                  else {
                      images[i].style.display = 'none';
                  }
             }
        }

Вот результат который получается в ИЕ

Вот как в лисе

devote · #6 (**permalink**) 09.08.2011, 18:27

хех, интересно получается)
может так попробовать:

var imgListTD = document.getElementById("image_list");
        var images = imgListTD.getElementsByTagName("img");

        for (var i = 0; i < images.length; i++) {

             var altText = images[i].getAttribute('alt');
             if (globalCost != undefined & globalCigType == undefined) {
                  if (altText.indexOf(globalCost) != -1) {
                      images[i].style.display = 'block';
                      images[i].style.float = 'left';
                      totalVisible++;
                  }
                  else {
                      images[i].style.display = 'none';
                  }
             }
        }

ну и в css у всех имагесов прописать:

.imgStyle {
....
display: block;
float: left;
....
}

aleha · #7 (**permalink**) 09.08.2011, 18:59

да так они все встали без разрывов, но при этом произошло выравнивание по левому краю, что не очень приятно. Теперь как их выровнять по центру?

ksa · #8 (**permalink**) 10.08.2011, 09:52

Сообщение от aleha

выдергиваю разметку из рабочей версии.

Пример нужно сделать такой, чтобы мы могли его запустить у себя. Огрызки мало что дадут...

aleha · #9 (**permalink**) 10.08.2011, 11:57

не проблема.
Вот пример. Открывать соответственно в IE. Взять какую-нибудь картинку, можно и без неё. Кликая на кнопочки фильтруется, но остаются дырки. Если делать display:block и float:left то образуется выравнивание по левому краю, что не годится к сожалению, так как нужно чтобы было по центру.

<html>
<head>
<style type="text/css">
.imgStyle
{
height:60px;

}
</style>

<script type="text/javascript">
function filter(costType) {
var globalCost = costType;
var imgListTD = document.getElementById("image_list");
var images = imgListTD.getElementsByTagName("img");

for (var i = 0; i < images.length; i++) {

var altText = images[i].getAttribute('alt');
if (globalCost != undefined) {
if (altText.indexOf(globalCost) != -1) {
images[i].style.display = 'inline';

totalVisible++;
}
else {
images[i].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<table style="width:500px;" border="1">
<tr>
<td id="image_list" style="text-align:center">
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />

<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />

<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />

<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />

</td>
</tr>
</table>
<input type="button" value="costType0" onClick="filter('costType0')"/>
<input type="button" value="costType1" onClick="filter('costType1')"/>
<input type="button" value="costType2" onClick="filter('costType2')"/>
<input type="button" value="costType3" onClick="filter('costType3')"/>

</body>

</html>

ksa · #10 (**permalink**) 10.08.2011, 13:26

aleha, это всё пробелы виноваты...

Вот вообще без дырок

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
img {
	border: 0;
}
.imgStyle {
	height:60px;
}
</style>

<script type="text/javascript">
function filter(costType) {
var globalCost = costType;
var imgListTD = document.getElementById("image_list");
var images = imgListTD.getElementsByTagName("img");

for (var i = 0; i < images.length; i++) {

var altText = images[i].getAttribute('alt');
if (globalCost != undefined) {
if (altText.indexOf(globalCost) != -1) {
images[i].style.display = 'inline';

totalVisible++;
}
else {
images[i].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
 <table style="width:500px;" border="1">
 <tr>
 <td id="image_list" style="text-align:center">
 <img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" />
 </td>
 </tr>
 </table>
 <input type="button" value="costType0" onClick="filter('costType0')"/>
 <input type="button" value="costType1" onClick="filter('costType1')"/>
 <input type="button" value="costType2" onClick="filter('costType2')"/>
 <input type="button" value="costType3" onClick="filter('costType3')"/>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript