Форум

noid · #1 (**permalink**) 16.09.2012, 16:16

Доброго времени суток. Делаю ограничение на длинну картинок, если длиннее заданной высоты, то внизу появляется кнопка, по нажатию которой он (кнопка) исчезает, а соседний блок, в котором картинка получает новый стиль с высотой 100%.

Сделал див с двумя классами, один - ненажатый, другой нажатый. Вот так работает.

Код:

<div class="lom" onMouseUp="this.className='lomclicked';"><img src="iphone.jpg" /></div>

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

Код:

<div id="lom"><img src="iphone.jpg" /></div>
<div class="butt" onMouseUp="javascript:document.getElementById('lom').className='lomclicked'; this.className='buttclicked';"></div>

Пример: http://memkey.net/blockheight/a.html

И ещё бы скрипт простенький, с условием, если див с id="lom" высотой 200px (к примеру) то див с class="butt" display="none", в остальных случаях показывать. Чтобы кнопка появлялась, только когда картинка достигнет предельной заданной высоты. Что-то типо

Код:

<script type="text/javascript">
function {

   if(lom.style.height=='200')
   {
   butt.display=='block'
   }
   else
   {
   butt.display=='none'
   }

}
</script>

Я понимаю, что бред, и не правильно написано, но я совсем темный в js

lord2kim · #2 (**permalink**) 16.09.2012, 16:56

noid,

<div id="lom"><img src="iphone.jpg" /></div>
<div class="butt" onMouseUp="alert(document.getElementById('lom').className); document.getElementById('lom').className='lomclicked'; this.className='buttclicked'; alert(document.getElementById('lom').className);">asdasd</div>

noid · #3 (**permalink**) 16.09.2012, 17:07

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

noid,

<div id="lom"><img src="iphone.jpg" /></div>
<div class="butt" onMouseUp="alert(document.getElementById('lom').className); document.getElementById('lom').className='lomclicked'; this.className='buttclicked'; alert(document.getElementById('lom').className);">asdasd</div>

Не получается, только окна с оповещениями вылазят http://memkey.net/blockheight/a.html by lord2kim

lord2kim · #4 (**permalink**) 16.09.2012, 17:09

noid, все работает...уберите alert()-ы из кода

noid · #5 (**permalink**) 16.09.2012, 17:24

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

noid, все работает...уберите alert()-ы из кода

Все, вроде разобрался, спасибо. Просто дописал ещё свойство #lom.lomclicked, тоже что и .lomclicked {height: 100%;
max-height: 100%;} Теперь работает.

А со скриптом не поможете?

lord2kim · #6 (**permalink**) 16.09.2012, 18:14

noid,

if (document.getElementById('lom').offsetHeight >= 200) {
    document.getElementByClassName("but")[N].style.display = "none";
}
else {
    document.getElementByClassName("but")[N].style.display = "block";    
}

N - № элемента на странице с классом but начиная с 0
вызывайте функцию при нужном изменении контента в div-е
реализация getElementsByClassName() для IE

// getElementsByClassName for IE
if (typeof document.getElementsByClassName == 'undefined') {
	document.getElementsByClassName = function(classname) {
		var all = document.all,
		elements = [],
		regexpr = new RegExp('\\b'+classname+'\\b','ig');
		for(var x=0; x<all.length; x++) if (all[x].className)
		if (all[x].className.search(regexpr)!=-1) elements[elements.length] = all[x];
		return elements;
	}
}

noid · #7 (**permalink**) 16.09.2012, 21:15

Второй вариант сделал, он проще. В первом по нажатию на кнопку раскрывались все блоки, наверное какой числовой идентификатор нужно ставить, а я ничего не нашел.

Во втором варианте вместо кнопки сделал полоску поверх картинки, которая будет внизу, да и плюс - раскрываться елемент будет по нажатию на весь блок, а не только на маленькую полоску.

Но тут последняя проблемка, не хочет убираться эта полоска, по условиям скрипта, который вы написали. Я правда его продублировал, с условием больше двухсот. Или может я снова где-то косячу. http://memkey.net/blockheight/b.html

<html>
<head>
<title>11</title>
<style>

.shell {
background:#CCCCCC;
width:700px;
}

.middle {
float:left;
position:relative;
margin:0 auto;
background-position:center}

#lom, .lom {
float:left;
max-height: 200px;
overflow:hidden;
position:relative;
}

.lom {
cursor:pointer;
}

.lom:hover {
max-height: 200px;
overflow:hidden;
position:relative;
}

#lom.lomclicked, .lomclicked {
float:left;
height: 100%;
max-height: 100%;
overflow:hidden;
position:relative;
}

.shortbutt {
float:left;
position:absolute;
margin-top:180px;
background:#000000;
color:#FFFFFF;
width:100%;
height:20px;
}

.shortbuttclicked {
display:none;
}

.clear {
  clear: both!important;
}

</style>
<script type="text/javascript">
if (document.getElementById('lom').offsetHeight >= 200) {
    document.getElementByClassName("shortbutt")[N].style.display = "none";
}
else {
    document.getElementByClassName("shortbutt").style.display = "block";   
}

</script>
<script type="text/javascript">
if (document.getElementById('lom').offsetHeight <= 200) {
    document.getElementByClassName("shortbutt")[N].style.display = "none";
}
else {
    document.getElementByClassName("shortbutt").style.display = "block";   
}

</script>
</head>
<body>
<div class="shell">
    <center>
        <div class="middle">
            <div class="lom" onMouseUp="this.className='lomclicked';">
                <div class="shortbutt">показать полностью</div>
                <img src="iphone.jpg" />
            </div>
        </div>
    </center>
</div><div class="clear"></div><br /><br />
---------------------------------Картинка менее 200px------------------------------------------------
<div class="shell">
    <center>
        <div class="middle">
            <div class="lom" onMouseUp="this.className='lomclicked';" style="position:relative;">
                <div class="shortbutt">показать полностью</div>
                <img src="iphone_small.jpg" />
            </div>
        </div>
    </center>
</div><div class="clear"></div><br /><br />



</body> 
</html>

вот архив, если что http://memkey.net/blockheight/blockheight.zip

lord2kim · #8 (**permalink**) 16.09.2012, 22:05

noid, во-первых элемента с id="lom" у вас на странице нет...
во-вторых

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

В первом по нажатию на кнопку раскрывались все блоки, наверное какой числовой идентификатор нужно ставить, а я ничего не нашел.

я же вам написал

Цитата:

N - № элемента на странице с классом but начиная с 0

данный метод возвращает все элементы с заданным class-ом на странице в виде списка (массива).

дублировать скрипты никогда не нужно...

<head>
<title>11</title>
<style>

.shell {
background:#CCCCCC;
width:700px;
}

.middle {
float:left;
position:relative;
margin:0 auto;
background-position:center}

#lom, .lom {
float:left;
max-height: 200px;
overflow:hidden;
position:relative;
}

.lom {
cursor:pointer;
}

.lom:hover {
max-height: 200px;
overflow:hidden;
position:relative;
}

#lom.lomclicked, .lomclicked {
float:left;
height: 100%;
max-height: 100%;
overflow:hidden;
position:relative;
}

.shortbutt {
float:left;
position:absolute;
margin-top:180px;
background:#000000;
color:#FFFFFF;
width:100%;
height:20px;
display:block;
}

.shortbuttclicked {
display:none;
}

.clear {
  clear: both!important;
}

</style>
<script type="text/javascript">
function func() {
if (document.getElementById('lom').offsetHeight >= 200) {
    document.getElementsByClassName("shortbutt")[0].style.display = "none";
}
else {
    document.getElementsByClassName("shortbutt")[0].style.display = "block";   
}
}

window.onload = func();
</script>
</head>
<body>
<div class="shell">
    <center>
        <div class="middle">
            <div id="lom" onMouseUp="this.className='lomclicked'; func()">
                <div class="shortbutt">показать полностью</div>
                <img src="http://memkey.net/blockheight/iphone.jpg" />
            </div>
        </div>
    </center>
</div><div class="clear"></div><br /><br />
</body> 
</html>

noid · #9 (**permalink**) 17.09.2012, 00:23

Вообщем, сижу уже несколько часов, понимаю, что ничего не понимаю.
Если я вас ещё окончательно не достал, то лучше, думаю, будет мне описать конечный результат. А то я чувствую, что не туда меня понесло.

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

Ваш вариант работает хорошо http://memkey.net/blockheight/v.html, но я с самого начала не все рассказал, вот и получил. Надо, чтобы часть картинки (да и все содержимое блока), превышающее, допустим 200px в высоту, пряталось под кнопкой-полоской, и открывалось по нажатию. А когда не превышает 200px, кнопка не выводится.

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

noid · #10 (**permalink**) 17.09.2012, 00:40

Как вариант предложили, но что-то не открываются блоки. http://memkey.net/blockheight/d.html

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<title>11</title>
</head>
<style>
.item {max-height: 200px; overflow: hidden;}
</style>
<body>

<script type="text/javascript">
$(document).ready(function(){
	$('.item .holder').each(function(){
		var holder = $(this);
		var parent = $(this).parent('.item');
		if(holder.height() > parent.height()) {
			parent.after($('<button>Открыть</button>').on('click',function(){
				parent.height(holder.height());
				return false;
			}));
		}
	});
});
</script>

<div class="item">
	<div class="holder">
		<img src="img1.jpg" /><br />
		<img src="img2.jpg" /><br />
		<img src="img3.jpg" />
	</div>
</div>

<div class="item">
	<div class="holder">
		<img src="img3.jpg" /><br />
		<img src="img3.jpg" /><br />
		<img src="img3.jpg" /><br />
		<img src="img3.jpg" /><br />
		<img src="img3.jpg" />
	</div>
</div>

<div class="item">
	<div class="holder">
		<img src="img3.jpg" />
	</div>
</div>

</body> 
</html>

И зараза в хроме при обновлении пропадают кнопки. Если ввод в адресной строке, то все нормально. В мазилле и опере такого нет.

Форум

Справочник

Discord чат

Курсы javascript