The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Title Hover Problem

2 posters

Go down

In progress Title Hover Problem

Post by Pizza Boi April 25th 2014, 12:53 pm

Hi Very Happy

Hmm... I've been having a problem with a specific script in my forum. If you can see here: http://tfpbl.forumtl.com/

Hovering over the titles would have a customized hover menu. I know the problem is not within the Javascript, but within the CSS but I'm so fed up in searching for the answer, lol, that's why I came to ask for help... even though I really didn't wanna, sorry =x .

I won't hand out my CSS here since it's a part of the skin I'll be uploading in 4 months so when you want to help me, please make sure you know the answer as I will private message you my CSS =x.

http://ygoda.forumtl.com/ <-- My forum that has the problem.

In my CSS, I removed this already which I first thought was the one causing the problem:

Code:
.pun a:hover {   
  color: #873232; 
  text-decoration: none;
}
.pun a:link { 
  color: #E61010; 
  text-decoration: none;
}
.pun a:visited {   
  color: #E61010;
}
.pun a:active { 
  color: #E61010;
}

But still, nothing came up >.> and I still have the problem. Please help~

Regards,
Pizza Boi
Pizza Boi
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

Back to top Go down

In progress Re: Title Hover Problem

Post by Ange Tuteur April 25th 2014, 1:03 pm

Try removing max-width:100px from .tipsy-inner. If you limit the width, then the content inside will overflow if that width is exceeded. You could also probably increase that limit and add word-wrap:break-word.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Title Hover Problem

Post by Pizza Boi April 25th 2014, 1:06 pm

Hi Very Happy

Thanks, Ange, but that's not what I meant. Compare the link from the second and first, when you check the "Recent Topic Widget" and hover on a title, a black high box appear in the test forum, right? While on the actual forum, it doesn't and that's where my problem lies in. I'll do the max-width thing, I forgot to edit that part out, lol.

Regards,
Pizza Boi
Pizza Boi
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

Back to top Go down

In progress Re: Title Hover Problem

Post by Ange Tuteur April 25th 2014, 1:12 pm

You weren't clear in your first post on what the problem was, so I looked for anything broken.  Title Hover Problem Whistle

I'd check your script as the original title is blanck :
Code:
<a href="/t24-ygoda-version-i-available-features#68" original-title=""></a>
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Title Hover Problem

Post by Pizza Boi April 25th 2014, 1:18 pm

Hi Very Happy

That's odd :/ . I'm using the same script for both sites and even tried removing the #main..title code I have :s .

Ce script:

Code:
(function($) {
   
    function fixTitle($ele) {
        if ($ele.attr('title') || typeof($ele.attr('original-title')) != 'string') {
            $ele.attr('original-title', $ele.attr('title') || '').removeAttr('title');
        }
    }
   
    function Tipsy(element, options) {
        this.$element = $(element);
        this.options = options;
        this.enabled = true;
        fixTitle(this.$element);
    }
   
    Tipsy.prototype = {
        show: function() {
            var title = this.getTitle();
            if (title && this.enabled) {
                var $tip = this.tip();
               
                $tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
                $tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity
                $tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);
               
                var pos = $.extend({}, this.$element.offset(), {
                    width: this.$element[0].offsetWidth,
                    height: this.$element[0].offsetHeight
                });
               
                var actualWidth = $tip[0].offsetWidth, actualHeight = $tip[0].offsetHeight;
                var gravity = (typeof this.options.gravity == 'function')
                                ? this.options.gravity.call(this.$element[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;
                    }
                }
               
                $tip.css(tp).addClass('tipsy-' + gravity);
               
                if (this.options.fade) {
                    $tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity});
                } else {
                    $tip.css({visibility: 'visible', opacity: this.options.opacity});
                }
            }
        },
       
        hide: function() {
            if (this.options.fade) {
                this.tip().stop().fadeOut(function() { $(this).remove(); });
            } else {
                this.tip().remove();
            }
        },
       
        getTitle: function() {
            var title, $e = this.$element, o = this.options;
            fixTitle($e);
            var title, o = this.options;
            if (typeof o.title == 'string') {
                title = $e.attr(o.title == 'title' ? 'original-title' : o.title);
            } else if (typeof o.title == 'function') {
                title = o.title.call($e[0]);
            }
            title = ('' + title).replace(/(^\s*|\s*$)/, "");
            return title || o.fallback;
        },
       
        tip: function() {
            if (!this.$tip) {
                this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"/></div>');
            }
            return this.$tip;
        },
       
        validate: function() {
            if (!this.$element[0].parentNode) {
                this.hide();
                this.$element = null;
                this.options = null;
            }
        },
       
        enable: function() { this.enabled = true; },
        disable: function() { this.enabled = false; },
        toggleEnabled: function() { this.enabled = !this.enabled; }
    };
   
    $.fn.tipsy = function(options) {
       
        if (options === true) {
            return this.data('tipsy');
        } else if (typeof options == 'string') {
            return this.data('tipsy')[options]();
        }
       
        options = $.extend({}, $.fn.tipsy.defaults, options);
       
        function get(ele) {
            var tipsy = $.data(ele, 'tipsy');
            if (!tipsy) {
                tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options));
                $.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;
       
    };
   
    $.fn.tipsy.defaults = {
        delayIn: 0,
        delayOut: 0,
        fade: true,
        fallback: '',
        gravity: 'n',
        html: true,
        live: true,
        offset: 5,
        opacity: 1.0,
        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 $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
    // (remember - do not modify 'options' in place!)
    $.fn.tipsy.elementOptions = function(ele, options) {
        return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
    };
   
    $.fn.tipsy.autoNS = function() {
        return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
    };
   
    $.fn.tipsy.autoWE = function() {
        return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
    };
   
})(jQuery);

$(document).ready(function(){
  $(function() {
    $('a').tipsy({gravity: 'se', delayIn: 100, delayOut: 300, fade: true});

 
  });
});

Regards,
Pizza Boi
Pizza Boi
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

Back to top Go down

In progress Re: Title Hover Problem

Post by Ange Tuteur April 25th 2014, 1:24 pm

If you set 'scrolling' to 'no' on the recent topics widget, it removes the title attribute. The title attribute is only present when 'scrolling' is set to 'yes'.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Title Hover Problem

Post by Pizza Boi April 25th 2014, 1:28 pm

Hi Very Happy

I don't want to have the scrolling action because it's hard to read topics, so how would you re-write this portion? :

Code:
  $.fn.tipsy.autoNS = function() {
        return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
    };
   
    $.fn.tipsy.autoWE = function() {
        return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
    };

Regards,
Pizza Boi
Pizza Boi
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

Back to top Go down

In progress Re: Title Hover Problem

Post by Ange Tuteur April 25th 2014, 2:27 pm

I don't know, what are you wanting ?

If you want to remove the scrolling and keep the title you could probably do this :
Code:
$(function() {
    var rt = document.getElementById('comments_scroll_container');
                
    var div = document.createElement('DIV');
    div.innerHTML = rt.innerHTML;
                
    rt.parentNode.insertBefore(div, rt);
    rt.parentNode.removeChild(rt);
});
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Title Hover Problem

Post by Pizza Boi April 25th 2014, 10:57 pm

Hi Very Happy

Sorry if I did not make myself clear. Anyway, the thing I want is for the script to adapt to not scrolling since in the modules, I want it to keep no scrolling Smile .

Edit: The code didn't work, forgot to mention e.e"

Regards,
Pizza Boi
Pizza Boi
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

Back to top Go down

In progress Re: Title Hover Problem

Post by Ange Tuteur April 26th 2014, 8:32 am

Well it isn't exactly the scripts fault. As I previously mentioned if scrolling is set to no it removes the title attribute from the links, because of this the script can no longer find its title content. If there is no title content there is no tooltip. Wink

For removing the scrolling for punbb, try this script :
Code:
var checkInt = setInterval('checkRecent()',500);
function checkRecent() {
    if ($('#comments_scroll_container a').length) {
        replaceRecent();
        clearInterval(checkInt);
    }
};

function replaceRecent() {
    $('#comments_scroll_div').html($('#comments_scroll_container').html());
    $('#comments_scroll_div').removeAttr('id');
};

I'm not sure if this will work though. When looking over the tipsy code it looked like it doesn't bind events for new elements.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Title Hover Problem

Post by Pizza Boi April 26th 2014, 8:40 am

Hi Very Happy

Yeah, just checked and did a couple of revision in the script yesterday and CSS. The one you gave me didn't work ^ That one above, but I guess the only way for this to work is to re-write it again from scratch, lol.

Anyway, thanks Ange, but I'd like to have this topic locked now Smile .

Regards,
Pizza Boi
Pizza Boi
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

Back to top Go down

In progress Re: Title Hover Problem

Post by Ange Tuteur April 26th 2014, 8:47 am

If you want something that actually binds a tooltip to links with a title you can work from this quick script I wrote :
Code:
$(document).on('mouseover', 'a', function(e) {
    var x = e.clientX - 15;
    var y = e.clientY - 40;
    tooltip_title = $(this).attr('title');
    if (tooltip_title == '' || tooltip_title === undefined) return;
    $(this).attr('title','');
    $('body').append('<div class="tooltip" style="position:fixed;z-index:99999;left:' + x + 'px;top:' + y + 'px;">' + tooltip_title + '</div>');
});
    
$(document).on('mouseout', 'a', function() {
    $('.tooltip').remove();
    $(this).attr('title',tooltip_title);
});

CSS :
Code:
.tooltip {
    color:#333;
    background:#FFF;
    border:1px solid #CCC;
    -webkit-border-radius:4px;
       -moz-border-radius:4px;
            border-radius:4px;
    -webkit-box-shadow:1px 2px 10px -6px #000;
       -moz-box-shadow:1px 2px 10px -6px #000;
            box-shadow:1px 2px 10px -6px #000;
    padding:3px;
}

Topic locked as requested
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum