Visualizando informações de sub fóruns em modo hover

Este
tutorial permite que visualize as informações de tópicos e estatísticas
dos sub fóruns de seu fórum, no qual permite mostrar todas as
informações possíveis aos usuários, de quantas mensagens e tópicos
possui cada sub fórum.

--> Tutoriais, dicas e astúcias <--
Visualizando informações de sub fóruns em modo hover

1º - Aplicação do tutorial:
Aceda à:
Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.

Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.

Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

2º - Aplicação dos códigos JavaScript:
É
Importante que crie três páginas JavaScript para cada código, caso
utilize apenas uma unica página JavaScript para os três códigos, os
mesmos iram dar conflitos entre si.
Abaixo temos nossos três códigos JavaScript, que iram criar uma página para cada código:
Código JavaScript 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);

Iremos criar um nova página JavaScript novamente, com o mesmo processo utilizando o código abaixo:

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"})})});

Novamente, iremos criar um nova página JavaScript novamente, com o mesmo processo utilizando o código abaixo:

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'});
          });
        });

3º - Código CSS a ser utilizado:

Código:

        .tipsy {
        padding: 5px;
        font-size: 11px;
        position: absolute;
        text-shadow: none;
        z-index: 999;
        }

        .tipsy-inner {
        padding: 8px 8px 8px 8px;
        background-color: black;
        color: white;
        max-width: 200px;
        text-align: center;
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
        -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
        background: black url(http://cuul.tk/img/gradient.png) repeat-x 0 -150px;
        }

        .tipsy-inner {
        border-radius: 3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        }

        .tipsy-arrow {
        position: absolute;
        background: url('http://cuul.tk/img/tipsy.gif') no-repeat top left;
        width: 9px;
        height: 5px;
        }

        .tipsy-n .tipsy-arrow {
        top: 0;
        left: 50%;
        margin-left: -4px;
        }

        .tipsy-nw .tipsy-arrow {
        top: 0;
        left: 10px;
        }

        .tipsy-ne .tipsy-arrow {
        top: 0;
        right: 10px;
        }

        .tipsy-s .tipsy-arrow {
        bottom: 0;
        left: 50%;
        margin-left: -4px;
        background-position: bottom left;
        }

        .tipsy-sw .tipsy-arrow {
        bottom: 0;
        left: 10px;
        background-position: bottom left;
        }

        .tipsy-se .tipsy-arrow {
        bottom: 0;
        right: 10px;
        background-position: bottom left;
        }

        .tipsy-e .tipsy-arrow {
        top: 50%;
        margin-top: -4px;
        right: 0;
        width: 5px;
        height: 9px;
        background-position: top right;
        }
        .tipsy-w .tipsy-arrow {
        top: 50%;
        margin-top: -4px;
        left: 0;
        width: 5px;
        height: 9px;
        }

4º - Aplicando o código CSS:
Agora deverá seguir um esquema de onde o código deverá ser adicionado:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS




4º - Resultado: