Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.03.2012, 17:37
Аватар для nightkon
Аспирант
Отправить личное сообщение для nightkon Посмотреть профиль Найти все сообщения от nightkon
 
Регистрация: 05.07.2011
Сообщений: 44

Нужно поправить скрипт - ToolTip
Есть функция, которая при нажатии на ссылку "#download", выводит под ссылку блок ".downloadBox" (точнее блок всплывает).

HTML-код:
<a href="#" id="download">Отобразить инфо</a>
<div class="downloadBox">
    <p>Название файла - 100 МБ <span>(Скачано - 313раз(а), загружено - 31.01.2012)</span></p>
    <p class="bitrate">
        <span>Аудио - параметры аудио</span>
        <span>Видео - параметры видео</span>
    </p>
    <p><a href="/files/archive-002.zip">Скачать</a></p>
</div>

Код JQuery:
$(function() {
    $('.links').each(function () {
        var distance = 0;
        var time = 400;
        var hideDelay = 200;

        var hideDelayTimer = null;

        var beingShown = false;
        var shown = false;
        var trigger = $('#download', this);
        var info = $('.downloadBox', this).css('opacity', 0);

        $([trigger.get(0), info.get(0)]).toggle(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            if (beingShown || shown) {
                // don't trigger the animation again
                return;
            } else {
                // reset position of info box
                beingShown = true;

                info.css({ 
                    top: -5,
                    left: 0,
                    display: 'block'
                }).animate({
                    top: 25,
                    opacity: 1
                }, time, 'swing', function() {
                    beingShown = false;
                    shown = true;
                });
            }
            return false;
        }, function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            hideDelayTimer = setTimeout(function () {
                hideDelayTimer = null;
                info.animate({
                    top: -5,
                    opacity: 0
                }, time, 'swing', function () {
                    shown = false;
                    info.css('display', 'none');
                });

            }, hideDelay);

            return false;
        });
    });
});


Скрипт работает прекрасно, только есть один минус.

Этот минус заключается в том, что при нажатии любую область блока ".downloadBox" (который, всплывает после клика по ссылке "#download"), этот блок (".downloadBox") исчезает.
Проблема в том, что в этом блоке, есть ещё одна ссылка, с названием "Скачать" (можете посмотреть в коде, который представлен выше), и эта ссылка "Скачать" не работает... Кликаешь по ней, а она не функционирует, напротив блок (".downloadBox), исчезает.

Как поправить код, чтобы при нажатии на блок ".downloadBox" или при нажатии на элементы, которые находятся в нем, не исчезал блок ".downloadBox"?
То есть нужно, чтобы ссылка "Скачать", в блоке ".downloadBox", функционировала, и при этом не исчезал основной блок.

Что нужно убрать или добавить или изменить в коде JQuery?

Последний раз редактировалось nightkon, 18.03.2012 в 18:04.
Ответить с цитированием
  #2 (permalink)  
Старый 18.03.2012, 18:55
Аспирант
Отправить личное сообщение для atlantis Посмотреть профиль Найти все сообщения от atlantis
 
Регистрация: 18.03.2012
Сообщений: 95

Ну как то так:
$(function() {
    $('.links').each(function () {
        var distance = 0;
        var time = 400;
        var hideDelay = 200;

        var hideDelayTimer = null;

        var beingShown = false;
        var shown = false;
        var trigger = $('#download', this);
        var info = $('.downloadBox', this).css('opacity', 0);

        $([trigger.get(0), info.get(0)]).show(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            if (beingShown || shown) {
                // don't trigger the animation again
                return;
            } else {
                // reset position of info box
                beingShown = true;

                info.css({ 
                    top: -5,
                    left: 0,
                    display: 'block'
                }).animate({
                    top: 25,
                    opacity: 1
                }, time, 'swing', function() {
                    beingShown = false;
                    shown = true;
                });
            }
            return false;
        });
		$('#close').hide(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            hideDelayTimer = setTimeout(function () {
                hideDelayTimer = null;
                info.animate({
                    top: -5,
                    opacity: 0
                }, time, 'swing', function () {
                    shown = false;
                    info.css('display', 'none');
                });

            }, hideDelay);

            return false;
        });
    });
});

Поставь кнопку в блоке (например) "Закрыть" с id #close.
Должно работать. Не проверял!

Последний раз редактировалось atlantis, 18.03.2012 в 18:59. Причина: опечатка ))
Ответить с цитированием
  #3 (permalink)  
Старый 20.03.2012, 04:03
Аватар для nightkon
Аспирант
Отправить личное сообщение для nightkon Посмотреть профиль Найти все сообщения от nightkon
 
Регистрация: 05.07.2011
Сообщений: 44

atlantis,
Спасибо, за то, что ответили. Но ваш код не работает, даже блок не всплывает.
Ответить с цитированием
  #4 (permalink)  
Старый 20.03.2012, 10:26
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Поменяйте этот код
$([trigger.get(0), info.get(0)])

на этот
$(trigger)

Это заставит реагировать на клики (показывать\скрывать) только надпись "Отобразить инфо"
Ответить с цитированием
  #5 (permalink)  
Старый 20.03.2012, 23:15
Аватар для nightkon
Аспирант
Отправить личное сообщение для nightkon Посмотреть профиль Найти все сообщения от nightkon
 
Регистрация: 05.07.2011
Сообщений: 44

melky,
УРААА!!! Спасибо большое! Целых 3 дня мучился!
Ответить с цитированием
  #6 (permalink)  
Старый 23.03.2012, 01:21
Аватар для nightkon
Аспирант
Отправить личное сообщение для nightkon Посмотреть профиль Найти все сообщения от nightkon
 
Регистрация: 05.07.2011
Сообщений: 44

Возникла новая проблема, помогите пожалуйста.
Суть в том, что у меня появилась ещё одна кнопка типа "#download" это "#torrent". При нажатии на "#torrent" нужно, чтобы всплывал блок ".torrentBox". И ещё проверочку не плохо были бы сделать, если при нажатии на ссылку "#torrent", проверялся открыт ли ".downloadBox", если да, то закрыть и открыть ".torrentBox".

Помогите пожалуйста, изменил код таким образом, обе ссылки не функционируют:
var trigger = $('#download', '#torrent', this);
var info = $('.downloadBox', '.torrentBox', this).css('opacity', 0);

Последний раз редактировалось nightkon, 23.03.2012 в 21:46.
Ответить с цитированием
  #7 (permalink)  
Старый 23.03.2012, 21:47
Аватар для nightkon
Аспирант
Отправить личное сообщение для nightkon Посмотреть профиль Найти все сообщения от nightkon
 
Регистрация: 05.07.2011
Сообщений: 44

Может кто помочь???? Что нужно, описал в сообщении выше

Последний раз редактировалось nightkon, 27.03.2012 в 14:34.
Ответить с цитированием
  #8 (permalink)  
Старый 23.03.2012, 23:07
Аспирант
Отправить личное сообщение для atlantis Посмотреть профиль Найти все сообщения от atlantis
 
Регистрация: 18.03.2012
Сообщений: 95

Попробуй так:
var trigger = $('#download,#torrent', this);
var info = $('.downloadBox,.torrentBox', this).css('opacity', 0);

Хотя на врятли...
Ответить с цитированием
  #9 (permalink)  
Старый 23.03.2012, 23:25
Аватар для nightkon
Аспирант
Отправить личное сообщение для nightkon Посмотреть профиль Найти все сообщения от nightkon
 
Регистрация: 05.07.2011
Сообщений: 44

atlantis,
пробовал, тоже не вышло.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает скрипт с setTimeout (гляньте опытным глазом) пжл. Benos Firefox/Mozilla 4 24.03.2012 20:18
Поправить скрипт torquemada Работа 9 18.02.2012 14:13
Изменить скрипт Изучаю_JS Общие вопросы Javascript 0 12.02.2012 22:05
Нужно написать скрипт для чата DNEPR Работа 14 25.02.2011 12:42
нужно написать скрипт редиректа ngprog Работа 1 20.01.2011 08:15