| noid | 24.09.2012 02:07 |
Вот я крот слепой, сижу жду ответов пару дней, как вдруг на тебе - заметил вторую страницу... позор мне.
Спасибо за ответы мужики, сейчас буду разбираться
Спасибо за ответы мужики, сейчас буду разбираться
Как сменить класс другого 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>
И зараза в хроме при обновлении пропадают кнопки. Если ввод в адресной строке, то все нормально. В мазилле и опере такого нет. |
Приветствую.
Есть вот такая функция: function change_visibility (block_4_close, block_4_open) { document.getElementById(block_4_close).style.displ ay='none'; document.getElementById(block_4_open).style.displa y=''; } И есть вот такие дивы: <div id="r0" style="display:none"> <span onclick="change_visibility ('r0')">0 канал</span> </div> <div id="r1"> <span onclick="change_visibility ('r1')">1 канал</span> </div> <div id="r2"> <span onclick="change_visibility ('r2')">2 канал</span> </div> <div id="r3"> <span onclick="change_visibility ('r3')">3 канал</span> </div> Как правильно прописать цикл в функции,чтобы он перебирал эти дивы. Нужно,чтоб по клику на одном он естественно скрывался, а тот который в это время скрыт - появлялся. |
Вобщем отчасти я решил задачку, но еще надо обточить чуток... :)
Спешу поделиться (уже подправил и обтачивать нечего.. :) если только break добавить...: function change_visibility (Nak) { var divs = new Array(); var i = 0; while(document.getElementById('r' + i)) { divs[i] = document.getElementById('r' + i); if(divs[i].style.display=='none') { divs[i].style.display=''; alert(i); } i++; } document.getElementById(Nak).style.display='none'; } Тут можно и без массива обойтись,но оставил пока так. |
Цитата:
|
devote, мб...у меня везде работает...
|
Вот я крот слепой, сижу жду ответов пару дней, как вдруг на тебе - заметил вторую страницу... позор мне.
Спасибо за ответы мужики, сейчас буду разбираться |
И все-таки самый простой и рабочий вариант (я по-крайней мере его хоть понимаю) вот - http://memkey.net/blockheight/d.html
Только прошу вас самый простой скрипт смены стиля блока в зависимости от его высоты. При чем без всяких идентификаторов, просто, чтобы все блоки id="lom" меньше 200px становились display = "none"; Я пробовал вариант от lord2kimа адаптировать:
<script type="text/javascript">
function func() {
if (document.getElementById('lom').offsetHeight >= 200) {
document.getElementsByClassName("item").style.display = "none";
}
else {
document.getElementsByClassName("item").style.display = "block";
}
}
window.onload = func();
</script>
но ничего не получается. Знаний мне не хватает. Как та собака, понимаю, что жрать хочу, а как написать хз. p.s. Не критично, но если можно, скажите как правильно тут написать онклик, чтобы кнопка по нажатию пропадала:
<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 id="butts">Открыть</button>').on('click',function(){
parent.height(holder.height());
return false;
}));
}
});
});
</script>
|
С высотой решил при помощи jquery - http://memkey.net/blockheight/d.html совсем убрал высоту из css и указал скриптом:
$(document).ready(function()
{
$("div.item").each(function(){
if($(this).height() > 200){
$(this).css({height: '200px'}); // или $(this).css({height: '100%'});
}
});
});
Так даже лучше - если скрипты не работают то блок полностью загружается. Только теперь осталось кнопку убрать при нажатии... Помогайте пжлст. |
РЕШЕНИЕ НАЙДЕНО
Всем спасибо, все решилось вот так:
$(window).load(function()
{
$("div.item").each(function(){
if($(this).height() > 200){
$(this).css({height: '200px'});
}
});
});
$(window).load(function(){
$('.item .holder').each(function(){
var holder = $(this);
var parent = $(this).parent('.item');
if(holder.height() > parent.height()) {
parent.after($('<center><button class="butts">Открыть</button></center>').click(function(){
parent.height(holder.height());
$(this).hide();
return false;
}));
}
});
});
|
| Часовой пояс GMT +3, время: 18:58. |