konto usunięte

Temat: powiększanie diva

Witam. Mam taka sytuację:

mam diva którego rozmiary ograniczam. Tak aby tekst który się w nim znajduje pokazany był tylko w 3 pierwszych linijkach.

chciałbym aby p kliknieciu linka pokaz wiecej powiekszyl sie w sposob plynny do rozmiaru height: auto. czyli do takiej wysokosc w ktorej bedzie widoczny caly tekst.

probowałem tak:


<!DOCTYPE html>
<html>
<head>
<style>
#block1 {
background-color:#bca;
width:200px;
height:1.1em;
text-align:center;
border:2px solid green;
margin:3px;
font-size:14px;
overflow: hidden
}

#parent {
height: 200px;
}


button {
font-size:14px;
}
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<button id="go1">» Animate Block1</button>



<div id="block1">Block1 jenr kjngtekjr ngkejrn enrdk gnerkgn ekrgn ekrgn keng kerngk erngk erngk erngkenrkgenrkgenrk genrkgnerdkg nerkgn ekrgn ekrgn ekrng kerng kerngkerngk enrgkenrgk enrgkenrgkenrk genkg nekrgn erkg nrek ngke ngken gkregnkerngkn kegn kern kernkreng ker</div>

<script>

$( "#go1" ).click(function(){
$( "#block1" ).animate( { height: "auto" }, { queue: false, duration: 1000 });

});



</script>

</body>
</html>


Nie działa to na height: "auto". Reaguje tylko na konkretne liczby. np: 300px

konto usunięte

Temat: powiększanie diva

Witam serdecznie :)

Rozwiązaniem jest wrzucenie do #block1 jeszcze jednego np div'a, tak aby kod wyglądał następująco:


<div id="block1"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et arcu et tellus vestibulum imperdiet ut sit amet lacus. Pellentesque ut suscipit felis. In ac lectus non lectus sagittis euismod. Integer a augue eget massa vehicula feugiat faucibus vel urna. Vivamus velit leo, ultrices id faucibus nec, eleifend quis felis. Nullam id lectus ligula, quis porta velit. Aenean feugiat tellus nunc, sit amet congue nibh. Suspendisse at mauris eu magna pulvinar auctor sagittis et quam. Suspendisse a viverra nisl. Aliquam vitae sapien turpis, id fermentum orci. Curabitur in neque sed erat lacinia cursus in vel lorem. Aenean massa mi, tincidunt at mollis vel, egestas ac enim.</div></div>


Wtedy możemy pobrać wysokość tego wewnętrznego diva, gdyż nie jest ona zdefiniowana w stylach i powiększyć tego zewnętrznego o jego wysokość:


var $block = $('#block1'),
$inner = $block.children('div'),
height = $inner.height();
$('#go1').click(function () {
$block.animate({'height': height}, {queue: false, duration: 1000});
return false;
});


Powinno zadziałać,
powodzonka :)

konto usunięte

Temat: powiększanie diva

działa :), super wielkie dzieki.

konto usunięte

Temat: powiększanie diva

A jak mniej wiecej zrobic aby przycisk do rozwijania diva pokazywal sie tylko wtedy jezeli wysokosc tego diva wewnetrznego jest wieksza od zewnetrznego?

konto usunięte

Temat: powiększanie diva

Poprawiony kod wyglądałby tak:

var $block = $('#block1'),
$inner = $block.children('div'),
$btn = $('#go1'),
height = $inner.height();

// tu sprawdzamy i ukrywamy przycisk
if ($block.height() >= height) {
$btn.css('display', 'none');
}

$btn.click(function () {
$block.animate({'height': height}, {queue: false, duration: 1000});
return false;
});

konto usunięte

Temat: powiększanie diva

super :) wielkie dzieki!
Mirosław Ratman

Mirosław Ratman Manager IT,
Architekt systemów
@Avast, Founder
@aSyncro ...

Temat: powiększanie diva

można też cuś w tym stylu - bez javascriptu ale ma to małe ograniczenia (i chyba nie działa w starszych browserach)


<style>
.test {display:block; width:300px; height:100px; overflow:hidden; cursor:pointer; border:0}
.test:focus {height:300px}
</style>
<textarea class="test">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</textarea>

Następna dyskusja:

Dodatkowy aktywny element d...




Wyślij zaproszenie do