Добрый вечер. Имеем: код html
<div class="videoContainer">
<div class="previewImg">
<img src="mov/preview/gp.jpg" alt="Garry_Potter" />
</div>
<div class="wigetVideo">
<div class="titleView">
Гарри Поттер и Дары смерти (часть 1)
</div>
<div class="timeView">
1:42:00
</div>
<div class="videoButton">
<div class="descriptionButton descriptionColor">
<img src="img/comment.png" alt="comment_button" width="30px" class="commentPic" />
</div>
<div class="playButton playColor">
<img src="img/play.png" alt="play_button" width="30px" />
</div>
<div class="profileButton profileColor">
<img src="img/profile.png" alt="profile_button" width="30px" />
</div>
</div>
</div>
<div class="descriptionView">
<p>Гарри, Рон и Гермиона отправляются в рискованное путешествие,
ведь им предстоит выполнить важную миссию:
найти и уничтожить тайные источники бессмертия и могущества Волан-де-Морта — Крестражи.
</p>
</div>
</div>
Таких блоков будет много, в них будут меняться следующие блоки:
<div class="previewImg"> , <div class="titleView">, <div class="timeView">, <div class="descriptionView"> Блоки выстраиваются по float. Как сделать, чтобы по щелчку на блоке
<div class="descriptionButton"> выводилось только нужное описание
<div class="descriptionView">, а не все сразу? Пример jQuery кода с подсчетом координат, чтобы всплывающая подсказка выводилась в видимой области экрана (еще не дописан):
$(document).ready(function () {
$('.descriptionView').hide();
$('.descriptionButton').click(function() {
var ttLeft,
ttTop,
$this=$('.wigetVideo'),
$tip=$('.descriptionView'),
triggerPos = $this.offset(),
triggerH = $this.outerHeight(),
triggerW = $this.outerWidth(),
tipW = $tip.outerWidth(),
tipH = $tip.outerHeight(),
screenW = $(window).width(),
screenH = $(window).height(),
scrollTop = $(document).scrollTop();
if (screenH - triggerPos.top - tipH - triggerH - scrollTop > 0 ) {
ttTop = triggerPos.top + triggerH;
ttLeft = triggerPos.left-10;
} else {
ttTop = triggerPos.top-10;
ttLeft = triggerPos.left + triggerW;
}
$tip
.css({
left : ttLeft ,
top : ttTop,
position:"absolute"
}).fadeIn(100);
});// end click
$('.descriptionButton').mouseout(function() {
$('.descriptionView').fadeOut(100);
});
});//end ready
Я полагаю нужен массив. При ответе, представьте, что мне три года =)
Все просто!
