Создать ответ 
Реализация работы ссылок при использовании тега video в html5
Автор Сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #31
RE: Реализация работы ссылок при использовании тега video в html5
Чтобы подсказка не появлялась при наведении на видео, замените:
$(".view, .video").mousemove(function(e){
на
$(".view").mousemove(function(e){

и аналогично замените:
$(".view, .video").mouseleave(function() {
на
$(".view").mouseleave(function() {

Короче, то что внутри $(document).ready(function(){ })(jQuery); должно быть таким:
Код:
$(".view").mousemove(function(e){
    var pos=$("body").offset();
    $("#hint").stop().offset({top:e.pageY-pos.top+15,left:e.pageX-pos.left+30}).fadeIn(200);
});
$(".view").mouseleave(function() { $("#hint").stop().fadeOut(200); });
01.11.2016 23:54:09
Найти все сообщения Цитировать это сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #32
RE: Реализация работы ссылок при использовании тега video в html5
P.S.: просьба извинить за косяк Sorry, разобрался, элементарно, сейчас работает только для ссылки...

А без <span id="hint">Смотреть видеоурок</span> нельзя реализовать, или можно как-то по другому, в случае например если имеется только ссылка, и нужно тоже менять title в случае если например, используется спойлер, где есть одна ссылка "Показать", а при повторном наведении "Свернуть".

Спасибо Yes и заранее благодарен.

Проблему решил сразу, но не отписался, Pardon

В плане ссылки и видео применяя скрытый <span id="hint">Смотреть видеоурок</span> все работает нормально, хотел бы также реализовать title для спойлера, в котором имеется название ссылки, содержание ссылки и ссылка "Свернуть"
код html:
Код:
<div>
        <p class="text" style="display: none; margin: 0;">Посмотреть вы можете по ссылке
            <a href="#" class="loader title="Посмотреть">Autodesk</a> или на официальном сайте</p>
            <a style="font-size: 16px;" class="loader" href="#" title="Узнать подробнее">Autodesk</a>
    </div>


js код спойлера:
Код:
$(document).ready(function(){
    $(".loader").click(function(){
if ($(this).text()=='Autodesk') $(this).text('Свернуть').attr('title','Закрыть');

else $(this).text('Autodesk').attr('title','Узнать подробнее');        
    $(this).parent().children(".text").toggle("fast");

return false;    
    });
});

Спойлер работает, title показывается обычный, при наведении на любую из ссылок, показывает соответствующий title прописанный в html.

если код на jQuery:
<span id="hint">Autodesk</span>
Код:
<script>
    $(".loader").mousemove(function(e){
    var pos=$("body").offset();
    $("#hint").stop().offset({top:e.pageY-pos.top+15,left:e.pageX-pos.left+30}).text($(this).attr("title")).fadeIn(200);
});
$(".loader").mouseleave(function() { $("#hint").stop().fadeOut(200); });
//})(jQuery);
</script>

Так работает, а возможно обойтись без <span id="hint">Autodesk</span>, так как спойлер маленький, прописать в самом скрипте, чтобы работал title.
Как сейчас все работает, интересно как реализовать именно в данном скрипте без <span id="hint">Autodesk</span>.

Кстати заметил одну особенность, в html коде title приходится удалять, так как показываются 2, один с html а другой со скрипта, т.е тут все нормально, так и должно быть, не надо title прописывать в html если он уже есть в jQuery ?

Заранее благодарен.
(Последний раз сообщение было отредактировано 02.11.2016 в 01:46:03, отредактировал пользователь ale10ey.)
02.11.2016 01:08:05
Найти все сообщения Цитировать это сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #33
RE: Реализация работы ссылок при использовании тега video в html5
P.S.: нет, не работает, поторопился ...точнее работает, но показывает 2 title на все 3 ссылки...,т.е 1 ссылка сам спойлер, ссылка внутри содержимого и ссылка "Свернуть", что-то тут я намудрил ...Scratch
02.11.2016 02:13:20
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #34
RE: Реализация работы ссылок при использовании тега video в html5
Так как надо то? Я уже запутался. Еще и спойлер появился...

Специально же сделал всплывающую подсказку со стилем .hint, чтобы не прописывать title.

И еще в сообщении 31 я удалил .text($(this).attr("title")) из кода, а Вы - нет.
02.11.2016 17:35:57
Найти все сообщения Цитировать это сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #35
RE: Реализация работы ссылок при использовании тега video в html5
(02.11.2016 17:35:57)Admin писал(а):  Так как надо то? Я уже запутался. Еще и спойлер появился...

Специально же сделал всплывающую подсказку со стилем .hint, чтобы не прописывать title.

И еще в сообщении 31 я удалил .text($(this).attr("title")) из кода, а Вы - нет.

Здравствуйте, доброе время суток.
По порядку.

1. Насчет всплывающей подсказки со стилем .hint все нормально - все работает, в этом случае title не прописываем, тут все работает. Насчет .text($(this).attr("title")) у себя удалил, а скопировал старый код Sorry
Я спрашивал, можно ли реализовать данный момент без <span id="hint"></span>, т.е реализовать как-то по-другому, так как хотел бы данную подсказку реализовать и для небольшого спойлера, а у меня их несколько будет, вот и подумал, что можно ли там обойтись при появлении подсказки без стиля .hint

С 1 пунктом разобрался, единственный вопрос насчет реализации без <span id="hint"></span> или тут большие изменения в коде нужно будет делать...


2. Собственно сам спойлер, где я хотел бы подобную подсказку реализовать, т.е. их будет 3. Название спойлера, содержимое (имеется ссылка) и "Свернуть"

Сам код спойлера небольшой:
Код:
$(document).ready(function(){
    $(".loader").click(function(){
if ($(this).text()=='Autodesk') $(this).text('Свернуть').attr('title','Закрыть');

else $(this).text('Autodesk').attr('title','Узнать подробнее');        
    $(this).parent().children(".text").toggle("fast");

return false;    
    });
});

html код:
<div>
<p class="text" style="display: none; margin: 0;">Перейти вы можете далее по ссылке
<a href="#" class="loader" title="Посмотреть">Autodesk</a> или узнать на сайте разработчика</p>
<a class="loader" href="#" title="Узнать подробнее">Autodesk</a>
</div>

При таком раскладе все работает отлично и title обычный, вот и хотел сделать title как для видео, тут конечно подход другой нужен, но задача та же, чтобы title был как в примере с видео

Если при таком раскладе, подключаю jQuery код для появления подсказки:
Код:
$(document).ready(function(){    
    $(".loader").toolTip_text(); // класс loader
});

(function($) {

    $.fn.toolTip_text = function(options){
        
        var defaults = {    
            xOffset: 15,        
            yOffset: -15,
            toolTip_textId: "toolTip_text",
            clickRemove: false,
            content: "",
            useElement: ""
        };
            
        var options = $.extend(defaults, options);  
        var content;
                
        this.each(function() {                  
            var title = $(this).attr("title");                
            $(this).hover(function(e){                                                                           
                content = (options.content != "") ? options.content : title;
                content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
                $(this).attr("title","");                                                      
                if (content != "" && content != undefined){            
                    $("body").append("<div id='"+ options.toolTip_textId +"'>"+ content +"</div>");        
                    $("#" + options.toolTip_textId)
                        .css("position","absolute")
                        .css("top",(e.pageY - options.yOffset) + "px")
                        .css("left",(e.pageX + options.xOffset) + "px")                        
                        .css("display","none")
                        .css("width","")
                        .fadeIn("fast")
                }
            },
            function(){    
                $("#" + options.toolTip_textId).remove();
                $(this).attr("title",title);
            });    
            $(this).mousemove(function(e){
                $("#" + options.toolTip_textId)
                    .css("top",(e.pageY - options.yOffset) + "px")
                    .css("left",(e.pageX + options.xOffset) + "px")                    
            });    
            if(options.clickRemove){
                $(this).mousedown(function(e){
                    $("#" + options.toolTip_textId).remove();
                    $(this).attr("title",title);
                });                
            }
        });
      };
})(jQuery);
далее оформляем все при помощи css, все работает, за исключением ссылки "Свернуть", которая одновременно является "Autodesk" согласно js 1 js скрипта, так вот теперь при наведении на ссылку "Свернуть", все время показывается "Узнать подробнее", так как подключается 2 скрипт на jQuery для подсказки.

Скрытый класс я думаю тут не сработает или как-то проще все можно реализовать?
Надеюсь, вы более или менее разобрались, что данный момент появления подсказки я хотел бы и для спойлера сделать, вот и думаю как лучше и проще все оформить, получается как-то не очень правильно...

Заранее благодарен Yes
02.11.2016 21:52:03
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #36
RE: Реализация работы ссылок при использовании тега video в html5
Короче нужны свои собственные подсказки и убрать стандартный title у заголовка спойлера и ссылки внутри спойлера? При открытии спойлера подсказка должна изменяться и при клике по ссылке внутри спойлера тоже?

Если все так, то вот такой вариант скрипта:
Код:
<body>
<style type="text/css">
    #hint{display:none;position:absolute;}
</style>

<div>
<p class="text" style="display: none; margin: 0;">Перейти вы можете далее по ссылке
<a href="#" class="loader" title="Посмотреть">Autodesk</a> или узнать на сайте разработчика</p>
<a class="loader" href="#" title="Узнать подробнее">Autodesk</a>
</div>
</body>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body").append('<span id="hint"></span>');
$(".loader").each(function(indx){
    $(this).data('title',$(this).attr('title')).removeAttr('title');
});

$(".loader").click(function(){
    if ($(this).text()=='Autodesk') $(this).text('Свернуть').data('title','Закрыть');
    else $(this).text('Autodesk').data('title','Узнать подробнее');
    $(this).parent().children(".text").toggle("fast");
    return false;
});

$(".loader").mousemove(function(e){
    var pos=$("body").offset();
    $("#hint").stop().offset({top:e.pageY-pos.top+15,left:e.pageX-pos.left+30}).text($(this).data('title')).fadeIn(200);
    return false;
});

$(".loader").mouseleave(function() { $("#hint").stop().fadeOut(200); });
});
</script>
02.11.2016 23:17:24
Найти все сообщения Цитировать это сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #37
RE: Реализация работы ссылок при использовании тега video в html5
Цитата:Короче нужны свои собственные подсказки и убрать стандартный title у заголовка спойлера и ссылки внутри спойлера? При открытии спойлера подсказка должна изменяться и при клике по ссылке внутри спойлера тоже?

Только что проверил - не работает, даже спойлер не открывается, при клике на название спойлера перебрасывает сразу на верх страницы _http://site.ru/info-1.php#

Ваш пример протестировал, тоже самое - спойлер не работает, не открывается, где-то видимо ошибка ...Scratch
03.11.2016 00:16:12
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #38
RE: Реализация работы ссылок при использовании тега video в html5
Посмотрите у себя в коде:
Код:
$(".loader").each(function(indx){
    $(this).data('title',$(this).attr('title')).removeAttr('title');
});
в слове title затесался невидимый служебный символ. При копировании кода с сайта в редактор кода данный символ сам появляется. Shocked

Пришлось вместо одной строчки кода сделать три и данный символ сам пропал.

Но я все равно сделал новый код Big Grin :
Код:
<body>
<style type="text/css">
    #hint{display:none;position:absolute;}
</style>

<div>
<p class="text" style="display: none; margin: 0;">Перейти вы можете далее по ссылке
<a href="#" class="loader" title="Посмотреть">Autodesk</a> или узнать на сайте разработчика</p>
<a class="loader" href="#" title="Узнать подробнее">Autodesk</a>
</div>

<div>
<p class="text" style="display: none; margin: 0;">Перейти вы можете далее по ссылке
<a href="#" class="loader" title="Посмотреть_test">Autodesk</a> или узнать на сайте разработчика</p>
<a class="loader" href="#" title="Узнать подробнее_test">Autodesk</a>
</div>
</body>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body").append('<span id="hint"></span>');
$(".loader").each(function(indx){
    $(this).data('title',$(this).attr('title')).removeAttr('title');
});

$(".loader").click(function(){
    if ($(this).text()=='Autodesk') $(this).text('Свернуть');
    else $(this).text('Autodesk');
    $(this).trigger('mousemove').parent().children(".text").toggle("fast");
    return false;
});

$(".loader").mousemove(function(e){
    if ($(this).text()=='Свернуть') $("#hint").text('Закрыть');
    else $("#hint").text($(this).data('title'));
    var pos=$("body").offset();
    $("#hint").stop().offset({top:e.pageY-pos.top+15,left:e.pageX-pos.left+30}).fadeIn(200);
    return false;
});

$(".loader").mouseleave(function() { $("#hint").stop().fadeOut(200); });
});
</script>
03.11.2016 16:44:27
Найти все сообщения Цитировать это сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #39
RE: Реализация работы ссылок при использовании тега video в html5
Здравствуйте, да работает но теперь где в самом спойлере имеется текст с ссылкой Autodesk с title="Посмотреть" работает не так как надо, т.е при наведении показывается "Посмотреть", а после клика показывается "Свернуть", хотя там планируется обычная ссылка, где нужно скачать документ по адресу (я не указал, стоит просто слеш)...

<div>
<p class="text" style="display: none; margin: 0;">Перейти вы можете далее по ссылке
<a href="#" class="loader" title="Посмотреть">Autodesk</a> или узнать на сайте разработчика</p>
<a class="loader" href="#" title="Узнать подробнее">Autodesk</a>
</div>

а в предыдущем варианте вы правы, была ошибка.
03.11.2016 23:12:42
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #40
RE: Реализация работы ссылок при использовании тега video в html5
Т.е. для <a href="#" class="loader" title="Посмотреть">Autodesk</a> title и текст ссылки не должны меняться? Тогда все просто, меняем
Код:
$(".text+.loader").click(function(){
на
Код:
$(".text+.loader").click(function(){
04.11.2016 15:11:57
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru