Sobre o tutorial visualizar em modo hover
5 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Sobre o tutorial visualizar em modo hover
Qual é minha questão:
Eu estava olhando a areá de tutorias e vi um tutorial
E , ele não esta funcionando no meu forum , e , meu forum não e PHPBB3 , Aguardando
Endereço do meu fórum:
http://webhacker.forumbrasil.net
Versão do fórum:
PunBB
Eu estava olhando a areá de tutorias e vi um tutorial
E , ele não esta funcionando no meu forum , e , meu forum não e PHPBB3 , Aguardando
![Piscada](/users/2612/28/77/07/smiles/426228.gif)
Endereço do meu fórum:
http://webhacker.forumbrasil.net
Versão do fórum:
PunBB
Última edição por WebHacker em 30.01.13 19:46, editado 1 vez(es)
Re: Sobre o tutorial visualizar em modo hover
Olá,
Creio que seja outro código javascript que esteja em conflito com ele tente retirar os códigos javascript e veja se resultou
Até
Creio que seja outro código javascript que esteja em conflito com ele tente retirar os códigos javascript e veja se resultou
Até
Re: Sobre o tutorial visualizar em modo hover
Meu forum não possui javascript ! apenas um que muda a tabela de cores da resposta rapida do forum.
Re: Sobre o tutorial visualizar em modo hover
Olá,
Você adicionou os códigos JavaScript dos tutoriais né então retire esses outros dois e veja se resulta
Até
Você adicionou os códigos JavaScript dos tutoriais né então retire esses outros dois e veja se resulta
Até
Re: Sobre o tutorial visualizar em modo hover
Olá!
Talvez amigão o senhor não está prestando á atenção no tutorial, peço que re-faça amigo!
Até mais!
Talvez amigão o senhor não está prestando á atenção no tutorial, peço que re-faça amigo!
Até mais!
Re: Sobre o tutorial visualizar em modo hover
Ala , Mike , está tudo no fórum já , Você podeira ir la nele e ver uque a de errado ? Eu coloquei tudo certinho os 3 codigos de js , coloquei o investimento no indice , e o css ja ta está la ! , Poderia me ajudar ?
Re: Sobre o tutorial visualizar em modo hover
Ops : Miike me desculpe pelo DOuble Post mais eu vi agora , O Modo hover ta funcionando mais quando eu passo a seta encima do Ultimo topico e não no do Titulo do Forum ! ;/ , Eu não sei pq so esta pegando la ;/
https://i.imgur.com/QfQGE.png <-- Olhe Aqui !
https://i.imgur.com/VzOJe.png <-- Olhe este tambem !
https://i.imgur.com/QfQGE.png <-- Olhe Aqui !
https://i.imgur.com/VzOJe.png <-- Olhe este tambem !
Re: Sobre o tutorial visualizar em modo hover
Olá!
Substitua todos os códigos por este.
Script 1:
Substitua todos os códigos por este.
Script 1:
- Código:
(function(jQuery) {
function fixTitle(jQueryele) {
if (jQueryele.attr('title') || typeof(jQueryele.attr('original-title')) != 'string') {
jQueryele.attr('original-title', jQueryele.attr('title') || '').removeAttr('title');
}
}
function Tipsy(element, options) {
this.jQueryelement = jQuery(element);
this.options = options;
this.enabled = true;
fixTitle(this.jQueryelement);
}
Tipsy.prototype = {
show: function() {
var title = this.getTitle();
if (title && this.enabled) {
var jQuerytip = this.tip();
jQuerytip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
jQuerytip[0].className = 'tipsy'; // reset classname in case of dynamic gravity
jQuerytip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);
var pos = jQuery.extend({}, this.jQueryelement.offset(), {
width: this.jQueryelement[0].offsetWidth,
height: this.jQueryelement[0].offsetHeight
});
var actualWidth = jQuerytip[0].offsetWidth, actualHeight = jQuerytip[0].offsetHeight;
var gravity = (typeof this.options.gravity == 'function')
? this.options.gravity.call(this.jQueryelement[0])
: this.options.gravity;
var tp;
switch (gravity.charAt(0)) {
case 'n':
tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
break;
case 's':
tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
break;
case 'e':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset};
break;
case 'w':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset};
break;
}
if (gravity.length == 2) {
if (gravity.charAt(1) == 'w') {
tp.left = pos.left + pos.width / 2 - 15;
} else {
tp.left = pos.left + pos.width / 2 - actualWidth + 15;
}
}
jQuerytip.css(tp).addClass('tipsy-' + gravity);
if (this.options.fade) {
jQuerytip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity});
} else {
jQuerytip.css({visibility: 'visible', opacity: this.options.opacity});
}
}
},
hide: function() {
if (this.options.fade) {
this.tip().stop().fadeOut(function() { jQuery(this).remove(); });
} else {
this.tip().remove();
}
},
getTitle: function() {
var title, jQuerye = this.jQueryelement, o = this.options;
fixTitle(jQuerye);
var title, o = this.options;
if (typeof o.title == 'string') {
title = jQuerye.attr(o.title == 'title' ? 'original-title' : o.title);
} else if (typeof o.title == 'function') {
title = o.title.call(jQuerye[0]);
}
title = ('' + title).replace(/(^s*|s*jQuery)/, "");
return title || o.fallback;
},
tip: function() {
if (!this.jQuerytip) {
this.jQuerytip = jQuery('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"/></div>');
}
return this.jQuerytip;
},
validate: function() {
if (!this.jQueryelement[0].parentNode) {
this.hide();
this.jQueryelement = null;
this.options = null;
}
},
enable: function() { this.enabled = true; },
disable: function() { this.enabled = false; },
toggleEnabled: function() { this.enabled = !this.enabled; }
};
jQuery.fn.tipsy = function(options) {
if (options === true) {
return this.data('tipsy');
} else if (typeof options == 'string') {
return this.data('tipsy')[options]();
}
options = jQuery.extend({}, jQuery.fn.tipsy.defaults, options);
function get(ele) {
var tipsy = jQuery.data(ele, 'tipsy');
if (!tipsy) {
tipsy = new Tipsy(ele, jQuery.fn.tipsy.elementOptions(ele, options));
jQuery.data(ele, 'tipsy', tipsy);
}
return tipsy;
}
function enter() {
var tipsy = get(this);
tipsy.hoverState = 'in';
if (options.delayIn == 0) {
tipsy.show();
} else {
setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn);
}
};
function leave() {
var tipsy = get(this);
tipsy.hoverState = 'out';
if (options.delayOut == 0) {
tipsy.hide();
} else {
setTimeout(function() { if (tipsy.hoverState == 'out') tipsy.hide(); }, options.delayOut);
}
};
if (!options.live) this.each(function() { get(this); });
if (options.trigger != 'manual') {
var binder = options.live ? 'live' : 'bind',
eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus',
eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
this[binder](eventIn, enter)[binder](eventOut, leave);
}
return this;
};
jQuery.fn.tipsy.defaults = {
delayIn: 0,
delayOut: 0,
fade: false,
fallback: '',
gravity: 'n',
html: false,
live: false,
offset: 0,
opacity: 0.8,
title: 'title',
trigger: 'hover'
};
// Overwrite this method to provide options on a per-element basis.
// For example, you could store the gravity in a 'tipsy-gravity' attribute:
// return jQuery.extend({}, options, {gravity: jQuery(ele).attr('tipsy-gravity') || 'n' });
// (remember - do not modify 'options' in place!)
jQuery.fn.tipsy.elementOptions = function(ele, options) {
return jQuery.metadata ? jQuery.extend({}, options, jQuery(ele).metadata()) : options;
};
jQuery.fn.tipsy.autoNS = function() {
return jQuery(this).offset().top > (jQuery(document).scrollTop() + jQuery(window).height() / 2) ? 's' : 'n';
};
jQuery.fn.tipsy.autoWE = function() {
return jQuery(this).offset().left > (jQuery(document).scrollLeft() + jQuery(window).width() / 2) ? 'e' : 'w';
};
})(jQuery);
- Código:
(function(jQuery){function fixTitle(jQueryele){if(jQueryele.attr('title')||typeof(jQueryele.attr('original-title'))!='string'){jQueryele.attr('original-title',jQueryele.attr('title')||'').removeAttr('title')}}function Tipsy(element,options){this.jQueryelement=jQuery(element);this.options=options;this.enabled=true;fixTitle(this.jQueryelement)}Tipsy.prototype={show:function(){var title=this.getTitle();if(title&&this.enabled){var jQuerytip=this.tip();jQuerytip.find('.tipsy-inner')[this.options.html?'html':'text'](title);jQuerytip[0].className='tipsy';jQuerytip.remove().css({top:0,left:0,visibility:'hidden',display:'block'}).appendTo(document.body);var pos=jQuery.extend({},this.jQueryelement.offset(),{width:this.jQueryelement[0].offsetWidth,height:this.jQueryelement[0].offsetHeight});var actualWidth=jQuerytip[0].offsetWidth,actualHeight=jQuerytip[0].offsetHeight;var gravity=(typeof this.options.gravity=='function')?this.options.gravity.call(this.jQueryelement[0]):this.options.gravity;var tp;switch(gravity.charAt(0)){case'n':tp={top:pos.top+pos.height+this.options.offset,left:pos.left+pos.width/2-actualWidth/ 2};break;case 's':tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width/2-actualWidth/ 2};break;case 'e':tp = {top: pos.top + pos.height/2-actualHeight/ 2, left: pos.left - actualWidth - this.options.offset};break;case 'w':tp = {top: pos.top + pos.height/2-actualHeight/ 2, left: pos.left + pos.width + this.options.offset};break}if (gravity.length == 2) {if (gravity.charAt(1) == 'w') {tp.left = pos.left + pos.width/2-15}else{tp.left=pos.left+pos.width/ 2 - actualWidth + 15}}jQuerytip.css(tp).addClass('tipsy-' + gravity);if (this.options.fade) {jQuerytip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity})} else {jQuerytip.css({visibility: 'visible', opacity: this.options.opacity})}}},hide: function() {if (this.options.fade) {this.tip().stop().fadeOut(function() { jQuery(this).remove()})} else {this.tip().remove()}},getTitle: function() {var title, jQuerye = this.jQueryelement, o = this.options;fixTitle(jQuerye);var title, o = this.options;if (typeof o.title == 'string') {title = jQuerye.attr(o.title == 'title' ? 'original-title' : o.title)} else if (typeof o.title == 'function') {title = o.title.call(jQuerye[0])}title = ('' + title).replace(/(^\s*|\s*jQuery)/,"");return title||o.fallback},tip:function(){if(!this.jQuerytip){this.jQuerytip=jQuery('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"/></div>')}return this.jQuerytip},validate:function(){if(!this.jQueryelement[0].parentNode){this.hide();this.jQueryelement=null;this.options=null}},enable:function(){this.enabled=true},disable:function(){this.enabled=false},toggleEnabled:function(){this.enabled=!this.enabled}};jQuery.fn.tipsy=function(options){if(options===true){return this.data('tipsy')}else if(typeof options=='string'){return this.data('tipsy')[options]()}options=jQuery.extend({},jQuery.fn.tipsy.defaults,options);function get(ele){var tipsy=jQuery.data(ele,'tipsy');if(!tipsy){tipsy=new Tipsy(ele,jQuery.fn.tipsy.elementOptions(ele,options));jQuery.data(ele,'tipsy',tipsy)}return tipsy}function enter(){var tipsy=get(this);tipsy.hoverState='in';if(options.delayIn==0){tipsy.show()}else{setTimeout(function(){if(tipsy.hoverState=='in')tipsy.show()},options.delayIn)}};function leave(){var tipsy=get(this);tipsy.hoverState='out';if(options.delayOut==0){tipsy.hide()}else{setTimeout(function(){if(tipsy.hoverState=='out')tipsy.hide()},options.delayOut)}};if(!options.live)this.each(function(){get(this)});if(options.trigger!='manual'){var binder=options.live?'live':'bind',eventIn=options.trigger=='hover'?'mouseenter':'focus',eventOut=options.trigger=='hover'?'mouseleave':'blur';this[binder](eventIn,enter)[binder](eventOut,leave)}return this};jQuery.fn.tipsy.defaults={delayIn:0,delayOut:0,fade:false,fallback:'',gravity:'n',html:false,live:false,offset:0,opacity:0.8,title:'title',trigger:'hover'};jQuery.fn.tipsy.elementOptions=function(ele,options){return jQuery.metadata?jQuery.extend({},options,jQuery(ele).metadata()):options};jQuery.fn.tipsy.autoNS=function(){return jQuery(this).offset().top>(jQuery(document).scrollTop()+jQuery(window).height()/2)?'s':'n'};jQuery.fn.tipsy.autoWE=function(){return jQuery(this).offset().left>(jQuery(document).scrollLeft()+jQuery(window).width()/2)?'e':'w'}})(jQuery);jQuery("document").ready(function(){jQuery(".forabg .row").mouseenter(function(){var mensajes=jQuery(this).find(".posts").text();var argumentos=jQuery(this).find(".topics").text();jQuery(this).find(".forumtitle").attr("title",mensajes+" & "+argumentos).tipsy({gravity:"w"})})});
- Código:
jQuery(document).ready(function(){
jQuery(function() {
jQuery('a').tipsy({fade: true, gravity: 's'});
jQuery('.i_icon_quote').tipsy({fade: true, gravity: 's'});
jQuery('.i_icon_edit').tipsy({fade: true, gravity: 's'});
jQuery('.i_icon_delete').tipsy({fade: true, gravity: 's'});
jQuery('.i_icon_ip').tipsy({fade: true, gravity: 's'});
jQuery('.i_icon_profile').tipsy({fade: true, gravity: 's'});
jQuery('.i_icon_pm').tipsy({fade: true, gravity: 's'});
jQuery('.topic-title').tipsy({fade: true, gravity: 's'});
jQuery('.i_post').tipsy({fade: true, gravity: 's'});
jQuery('.i_reply').tipsy({fade: true, gravity: 's'});
});
});
Re: Sobre o tutorial visualizar em modo hover
Seender ainda não foi , Continua não aparecendo os status dos foruns , ;/
Mais muito obrigado ;D
Mais muito obrigado ;D
Re: Sobre o tutorial visualizar em modo hover
Olá,
Eu consegui criar um código simples com edição de template veja o efeito dele
![Sobre o tutorial visualizar em modo hover A39Fo](https://i.imgur.com/A39Fo.png)
E quase igual caso deseja estarei ensinando como por caso queria do jeito do tutorial estarei tentando fazer o código do estilo do tutorial
Até
Eu consegui criar um código simples com edição de template veja o efeito dele
![Sobre o tutorial visualizar em modo hover A39Fo](https://i.imgur.com/A39Fo.png)
E quase igual caso deseja estarei ensinando como por caso queria do jeito do tutorial estarei tentando fazer o código do estilo do tutorial
Até
Re: Sobre o tutorial visualizar em modo hover
Tenta mudar o negocio de respostas e coloca mensagens e tenta por o hover com transparencia *-*
Re: Sobre o tutorial visualizar em modo hover
Olá,
Seu fórum é recente? Se não, no momento do lançamento do módulo, sua versão era outra? Fez a alteração de templates? Está colocando os códigos em páginas JS separadas?
Atenciosamente.
Seu fórum é recente? Se não, no momento do lançamento do módulo, sua versão era outra? Fez a alteração de templates? Está colocando os códigos em páginas JS separadas?
Atenciosamente.
Re: Sobre o tutorial visualizar em modo hover
meu forum e recente , minha versao e punbb , ja fiz alteraçoes no template sim , os js estao separados como no tutorial pede
![-](https://2img.net/i/empty.gif)
» [TUTORIAL] Visualizar tópico em modo hover
» [TUTORIAL] Visualizar o perfil em modo hover
» [TUTORIAL] Visualizar informações de sub fóruns em modo hover
» Visualizar tópico em modo hover
» [TUTORIAL] Sub-fóruns em modo hover
» [TUTORIAL] Visualizar o perfil em modo hover
» [TUTORIAL] Visualizar informações de sub fóruns em modo hover
» Visualizar tópico em modo hover
» [TUTORIAL] Sub-fóruns em modo hover
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos