[jQuery] rozwijana zawartosc w przewijanym div, za pomocą suwaka Opcje

[janek9]

Witam!

Jako że jest to mój pierwszy post w tym dziale proszę o wyrozumiałość:). Otóż mam pewien problem, z którym nie mogę sobie dać rady. Problem jest następujący: posiadam diva, którego przewijam paskiem za pomocą suwaka i w tym divie są różne paragrafy które zwijają się i rozwijają. Gdy rozwiniemy jakiś paragraf z zawartością wszystko jest ok i zawartość się wydłuża, natomiast gdy go zwiniemy, suwak wraca na pozycję do góry, ale widok ucieka..

Tak wygląda kod:

CODE

<?php if(count($news) > 0): ?>
<div id="news_content" class="content-wrapper">

<div class="content">
<table>
<?php foreach($news as $index => $new): ?>
<tr>
<td>
<div id="<?php echo $index ?>" class="news_container">
<h4 id="news_header" class="news"><?php echo $new->getIpnoticContent()->getTitle() ?></h4>
<p id="news_<?php echo $index ?>" class="news">
<?php echo $new->getIpnoticContent()->getDescription(ESC_RAW) ?>
</p>
<a href="#" id="<?php echo $index ?>" class="more">Więcej</a>
</div></td><td>
<div class="news_thumb">
<img src="/uploads/pix/<?php echo $new->getIpnoticMedia()->getImage() ?>" alt="<?php echo $new->getIpnoticContent()->getTitle() ?>" width="200" height="150"/>
</div>
</td>
</tr>
<?php endforeach; ?>

</table>
</div>


</div>
<div class="scroll-wrapper">
<div class="scroll-bar ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all">
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="bottom: 100%;"></a>
</div>
</div>
<?php endif; ?>

<script type="text/javascript">
$(function() {
var content = $('.content'),
contentWrapper = content.parent(),
contentHeight, contentWrapperHeight, pixelPerPercent;
var scrollbar = $('.scroll-bar').slider({
slide: function (event, ui) {
var amt = contentHeight-(ui.value*pixelPerPercent);
content.css('margin-top','-'+amt+'px');
},
orientation: 'vertical',
value: 100
});
function updateScrollSize(){
contentWrapperHeight = contentWrapper.height();
contentHeight = content.height()- contentWrapperHeight;
pixelPerPercent = contentHeight/100;
}
updateScrollSize();


$('#news_0').hide();
$('#news_1').hide();

$(".more").click(function()
{
var link_id = $(this).attr('id');
var pos = $('#news_'+link_id).height();

if($('#news_'+link_id).is(':visible'))
{
$("#news_"+link_id).hide("slow");
$('.scroll-bar').slider({
slide: function (event, ui) {
var amt = contentHeight-(ui.value*pixelPerPercent);
content.css('margin-top','-'+amt+'px');
},
orientation: 'vertical',
value: 100,
animate: true
});
}
else
{
$("#news_"+link_id).show("slow");
$('.scroll-bar').slider({
slide: function (event, ui) {
var amt = contentHeight-(ui.value*pixelPerPercent);
content.css('margin-top','-'+amt+'px');
},
orientation: 'vertical',
value: 100,
animate: true
});
}


});

});


</script>

[kamil4u]

Nie znam jQuery, ale proponuję zastosować zwykłe kotwice(funkcja zwiń po wywołaniu zmieniałaby adres odpowiadającej danej kotwicy) - a jak chcesz płynnie to , z tego co pamiętam, możesz użyć jakieś biblioteki jQuery.