Как сменить класс другого div-a
Доброго времени суток. Делаю ограничение на длинну картинок, если длиннее заданной высоты, то внизу появляется кнопка, по нажатию которой он (кнопка) исчезает, а соседний блок, в котором картинка получает новый стиль с высотой 100%.
Сделал див с двумя классами, один - ненажатый, другой нажатый. Вот так работает. Код:
<div class="lom" onMouseUp="this.className='lomclicked';"><img src="iphone.jpg" /></div>Код:
<div id="lom"><img src="iphone.jpg" /></div>И ещё бы скрипт простенький, с условием, если див с id="lom" высотой 200px (к примеру) то див с class="butt" display="none", в остальных случаях показывать. Чтобы кнопка появлялась, только когда картинка достигнет предельной заданной высоты. Что-то типо Код:
<script type="text/javascript"> |
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, все работает...уберите alert()-ы из кода
|
Цитата:
max-height: 100%;} Теперь работает. А со скриптом не поможете? |
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;
}
}
|
Второй вариант сделал, он проще. В первом по нажатию на кнопку раскрывались все блоки, наверное какой числовой идентификатор нужно ставить, а я ничего не нашел.
Во втором варианте вместо кнопки сделал полоску поверх картинки, которая будет внизу, да и плюс - раскрываться елемент будет по нажатию на весь блок, а не только на маленькую полоску. Но тут последняя проблемка, не хочет убираться эта полоска, по условиям скрипта, который вы написали. Я правда его продублировал, с условием больше двухсот. Или может я снова где-то косячу. 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 |
noid, во-первых элемента с id="lom" у вас на странице нет...
во-вторых Цитата:
Цитата:
дублировать скрипты никогда не нужно...
<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>
|
Вообщем, сижу уже несколько часов, понимаю, что ничего не понимаю.
Если я вас ещё окончательно не достал, то лучше, думаю, будет мне описать конечный результат. А то я чувствую, что не туда меня понесло. Все это для новостного сайта, на шаблон просмотра кратких новостей в категориях и на главной. Вместо стандартных тумбов, пытаюсь сделать обрезку по нижнему краю. Подсмотрел на джойреакторе. Пытался капнуть, как у них сделано, да там черт ногу сломит. Ваш вариант работает хорошо http://memkey.net/blockheight/v.html, но я с самого начала не все рассказал, вот и получил. Надо, чтобы часть картинки (да и все содержимое блока), превышающее, допустим 200px в высоту, пряталось под кнопкой-полоской, и открывалось по нажатию. А когда не превышает 200px, кнопка не выводится. Если вы уже задолбались со мной возиться, то хоть напишите, что искать, куда копать. Ну и вот архив, на всякий случай - архив |
Как вариант предложили, но что-то не открываются блоки. 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>
И зараза в хроме при обновлении пропадают кнопки. Если ввод в адресной строке, то все нормально. В мазилле и опере такого нет. |
| Часовой пояс GMT +3, время: 15:32. |