Реализация работы ссылок при использовании тега video в html5

[ale10ey]

Здравствуйте, , я тоже сделал, но у вас все проще оказалось, конечно сама ссылка находится внутри параграфа с классом text и надо было его и прописать в коде...

Есть еще 2 маленьких вопроса...
1. Если у меня например на странице 10 ссылок и у всех одинаковый title, то как лучше сделать чтобы его не прописывать.
Я сделал так:

Код:

$(this).hover(function(e) { $('.panel li a').attr('title','Узнать подробнее')});

или можно как-то более правильней сделать...

2. Имеется ваш код:

Код:

$("body").append('<span id="toolTip_hint">Узнать подробнее</span>');  
    $(".post-info h5>a, .panel li a").mousemove(function(e){
        var pos=$("body").offset();
    $("#toolTip_hint").stop().offset({top:e.pageY-pos.top+25,left:e.pageX-pos.left+15}).fadeIn(200); //.text($(this).attr("title"))
});
$(".post-info h5>a, .panel li a").mouseleave(function() { $("#toolTip_hint").stop().fadeOut(200); });

я его применяю для .post-info h5>a, .panel li a как видно из кода, с помощью css придаю оформление для id toolTip_hint, все работает, если я хочу применить данный код с таким же id для '<span id="toolTip_hint">Перейти по ссылке</span>', чтобы оформить другую подсказку для других селекторов, например:

Код:

$("body").append('<span id="toolTip_hint">Перейти по ссылке</span>');  
    $(".info h4 + a").mousemove(function(e){
        var pos=$("body").offset();
    $("#toolTip_hint").stop().offset({top:e.pageY-pos.top+25,left:e.pageX-pos.left+15}).fadeIn(200); //.text($(this).attr("title"))
});
$(".info h4 + a").mouseleave(function() { $("#toolTip_hint").stop().fadeOut(200); });

то показываться всегда будет одна только подсказка (оба кода в странице general.js) так как у них одинаковый id, но с разным содержимым.
В 1 случае - "Узнать подробнее", а во втором "Перейти по ссылке", а их может быть и больше...

т.е. придется менять каждый раз для кода id и добавлять его в css, для оформления. В том то и загвоздка, что оформление подсказки для всех будет одинаково, меняться только будет содержимое подсказки, вот и думал что если в css ничего не будет меняться в плане оформления подсказки, то зачем и другой id нужен, но не получается... приходится его менять, чтобы и все работало.

Думаю вы разобрались, что я хотел тут сказать, оформление у всех подсказок одинаковое, не хотелось бы в css каждый раз дописывать новый id, а содержимое подсказки я и так в коде меняю <span id="toolTip_hint">Узнать подробнее</span>' и будет ли у меня id="toolTip_hint" или id="toolTip_hidden", id="toolTip_hover" я буду их дополнять в css, хотя оформление одинаковое у всех подсказок, если мне конечно нужно другое оформление я изменю id, а тут если не меняю id с оформлением все в порядке, а вот содержимое показывается то, что выше находится в коде, когда у меня к примеру так:

Код:

$("body").append('<span id="toolTip_hint">Узнать подробнее</span>');  
    $(".post-info h5>a, .panel li a").mousemove(function(e){
        var pos=$("body").offset();
    $("#toolTip_hint").stop().offset({top:e.pageY-pos.top+25,left:e.pageX-pos.left+15}).fadeIn(200); //.text($(this).attr("title"))
});
$(".post-info h5>a, .panel li a").mouseleave(function() { $("#toolTip_hint").stop().fadeOut(200); });

$("body").append('<span id="toolTip_hint">Перейти по ссылке</span>');  
    $(".info h4 + a").mousemove(function(e){
        var pos=$("body").offset();
    $("#toolTip_hint").stop().offset({top:e.pageY-pos.top+25,left:e.pageX-pos.left+15}).fadeIn(200); //.text($(this).attr("title"))
});
$(".info h4 + a").mouseleave(function() { $("#toolTip_hint").stop().fadeOut(200); });

Надеюсь, что смогли разобрать, что я пытался донести.
Заранее благодарен.

[Admin]

1. Можно оставить и без события наведения/убирания курсора мыши:

Код:

$('.panel li a').attr('title','Узнать подробнее');

2. Мало чего понял, но в предыдущих сообщениях я выкладывал код, который считывает атрибут title в date и показывает в подсказке текст из date.

[ale10ey]

Здравствуйте, спасибо за ответ
1. С 1 пунктом все ясно, сделал также.
2. Имел ввиду, что если у меня имеется 2 кода в одном файле,

Код:

$("body").append('<span id="toolTip_hint">Узнать подробнее</span>');  
    $(".post-info h5>a, .panel li a").mousemove(function(e){
        var pos=$("body").offset();
    $("#toolTip_hint").stop().offset({top:e.pageY-pos.top+25,left:e.pageX-pos.left+15}).fadeIn(200); //.text($(this).attr("title"))
});
$(".post-info h5>a, .panel li a").mouseleave(function() { $("#toolTip_hint").stop().fadeOut(200); });

$("body").append('<span id="toolTip_hint">Перейти по ссылке</span>');  
    $(".info h4 + a").mousemove(function(e){
        var pos=$("body").offset();
    $("#toolTip_hint").stop().offset({top:e.pageY-pos.top+25,left:e.pageX-pos.left+15}).fadeIn(200); //.text($(this).attr("title"))
});
$(".info h4 + a").mouseleave(function() { $("#toolTip_hint").stop().fadeOut(200); });

то показывается всегда подсказка "Узнать подробне", хотя во 2 коде "Перейти по ссылке" для .info h4 + a, а должна показываться "Перейти по ссылке", т.е у них общий id но с разным значением, а чтобы придать стили я этот id и прописываю и хотелось бы его 1 раз прописать, а не 5 например если у меня 5 разных подсказок будет, оформление одно и тоже, только подсказка (текст) разный...

И еще у меня к вам просьба, как сделать подсказку для спойлера на jQuery, точнее код есть и подсказка (обычный title) тоже имеется, а вот сделать свою подсказку при помощи вашего кода не получается, уже по всякому пробовал не срабатывает
Собственно сам код спойлера:

Код:

// scrollTo_sp-fold clickable
(function(c){var a=c.scrollTo=function(f,e,d){c(window).scrollTo(f,e,d)};a.defaults={axis:"xy",duration:parseFloat(c.fn.jquery)>=1.3?0:1};a.window=function(d){return c(window)._scrollable()};c.fn._scrollable=function(){return this.map(function(){var e=this,d=!e.nodeName||c.inArray(e.nodeName.toLowerCase(),["iframe","#document","html","body"])!=-1;if(!d){return e}var f=(e.contentWindow||e).document||e.ownerDocument||e;return c.browser.safari||f.compatMode=="BackCompat"?f.body:f.documentElement})};c.fn.scrollTo=function(f,e,d){if(typeof e=="object"){d=e;e=0}if(typeof d=="function"){d={onAfter:d}}if(f=="max"){f=9000000000}d=c.extend({},a.defaults,d);e=e||d.speed||d.duration;d.queue=d.qu​eue&&d.axis.length>1;if(d.queue){e/=2}d.offset=b(d.offset);d.over=b(d.over);return this._scrollable().each(function(){var l=this,j=c(l),k=f,i,g={},m=j.is("html,body");switch(typeof k){case"number":case"string":if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(k)){k=b(k);break}k=c(k,this);case"object":if(k.is||k.style){i=(k=c(k)).offset()}}c.each(d.axis.split(""),function(q,r){var s=r=="x"?"Left":"Top",u=s.toLowerCase(),p="scroll"+s,o=l[p],n=a.max(l,r);if(i){g[p]=i[u]+(m?0:o-j.offset()[u]);if(d.margin){g[p]-=parseInt(k.css("margin"+s))||0;g[p]-=parseInt(k.css("border"+s+"Width"))||0}g[p]+=d.offset[u]||0;if(d.over[u]){g[p]+=k[r=="x"?"width":"height"]()*d.over[u]}}else{var t=k[u];g[p]=t.slice&&t.slice(-1)=="%"?parseFloat(t)/100*n:t}if(/^\d+$/.test(g[p])){g[p]=g[p]<=0?0:Math.min(g[p],n)}if(!q&&d.queue){if(o!=g[p]){h(d.onAfterFirst)}delete g[p]}});h(d.onAfter);function h(n){j.animate(g,e,d.easing,n&&function(){n.call(this,f,d)})}}).end()};a.max=function(j,i){var h=i=="x"?"Width":"Height",e="scroll"+h;if(!c(j).is("html,body")){return j[e]-c(j)[h.toLowerCase()]()}var g="client"+h,f=j.ownerDocument.documentElement,d=j.ownerDocument.body;return Math.max(f[e],d[e])-Math.min(f[g],d[g])};function b(d){return typeof d=="object"?d:{top:d,left:d}}})(jQuery);

// spoiler-head_sp-fold clickable
$(function(){$(window).load(function(){initPost()})});function initPost(){var a=$(document);initSpoilers(a)()}function initPostImages(f){var g=$('div.spoiler-body var.postImg',f);$('var.postImg',f).not(g).each(function(){var a=$(this);var b=a.attr('title');if($.browser.msie){c.one('load',function(){imgFit(this,d)});a.​empty().append(c);a.after('<wbr>')}else{c.one('load',function(){imgFit(this,d);a.empty().append(this)})}})}fu​nction initSpoilers(g){$('div.spoiler-body',g).each(function(){var c=$(this);var d=$.trim(this.title)||'подробная информация';this.title='';var f=$('<div class="spoiler-head folded clickable" title="Узнать подробнее"></div>').text(d).insertBefore(c).click(function(e){if(!c.hasClass('inited')){initPo​stImages(c);var a=$('<div class="sp-fold clickable" title="Свернуть">[&nbsp;свернуть&nbsp;]</div>').click(function(){$.scrollTo(f,{duration:200,axis:'y',offset:-200});f.click().animate({opacity:0.1},500).animate({opacity:1},700)});c.prepend(​'<div class="clear"></div>').append('<div class="clear"></div>').append(a).addClass('inited')}if(e.shiftKey){e.stopPropagation();e.shiftKey​=false;var b=$(this).hasClass('unfolded');$('div.spoiler-head',$(c.parents('div')[0])).filter(function(){return $(this).hasClass('unfolded')?b:!b}).click()}else{$(this).toggleClass('unfolded')​;c.slideToggle('fast')}})})}function fixPostImage(a){var b=/c/i;}

во 2 коде есть строчка, при наведении на ссылку "подробная информация", показывается title "Узнать подробнее"

Код:

var f=$('<div class="spoiler-head folded clickable" title="Узнать подробнее"></div>').text(d).insertBefore(c).click(function(e){if(!c.hasClass('inited')){initPo​stImages(c);

Код был, изменил под свои нужды, сейчас спойлер работает, хотя код конечно громоздкий для обычного по сути спойлера, на странице уже все под этот код подстроено, может подскажете как этот код уменьшить, что сам мог уже убрал, к примеру функцию init() тут не уберешь она нужна.
html разметку могу предоставить. если будет нужна, смущает то, что код "большой" и раньше были глюки со страницой, над кодом поработал сейчас проблем нет, но размер кода все равно большой.

Заранее благодарен

[ale10ey]

Здравствуйте, если будет у вас время будьте добры гляньте что можно сделать по сообщению #43, а то у меня на всех страницах подсказки будут одни, а на одной странице где имеется скрипт спойлера, подсказки обычные, т.е дизайн "страдает"...

Сам пробовал и выносить код подключая его в стороннем файле, прописывал внутри скрипта, на странице не срабатывает