vb.org Archive
Page 1 of 3 1 23
Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)
-   -   Forum Home Enhancements - Facebook-like tooltip for forum descriptions (https://vborg.vbsupport.ru/showthread.php?t=266608)

Jeff Ledger 07-10-2011 10:00 PM
Facebook-like tooltip for forum descriptions
 
1 Attachment(s)
Hello guys,

Someone asked me to write this small mod for him and I decided to release it free for everybody here at vb.org.
  • If you are running a big board with a lot of forums. Especially someone who are using 2 column for display box in forumhome, you must meet the problems with display forum descriptions. Your layout will be look cleaner and nicer if all the box looks equal together.
  • This mod remove the default descriptions and only dislay it on mouse-over (similiar to xenforo).

I only use very small jquery and css to display it, then it won't do any effect to your site load.

Installation:

I. Add the following css in your additional.css

Code:
.tip {
    background: none repeat scroll 0 0 #1D1D1D;
    color: #FFFFFF;
    display: none;
    font-size: 11px;
    font-weight: normal;
    margin-left: 10px;
    padding: 3px 7px;
    position: absolute;
    width: 300px;
    z-index: 1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  opacity: 0.8;
}
II. Add the following code at the bottom of your headinclude template

Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    //Tooltips
    $(".tip_trigger").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip
    }).mousemove(function(e) {
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
    });
});
</script>
I'm using google api for jquery but of course, you can download it and reupload it to your site.

III. Open template forumhome_forumbit_level2_post


Find the following code

Code:
<h2 class="forumtitle"><a href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></h2>
Change to

Code:
<h2 class="forumtitle"><a title="" class="tip_trigger" style="" href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}<span class="tip"><vb:if condition="$show['forumdescription']"><p class="forumdescription">{vb:raw forum.description}</p></vb:if></span></a></h2>
Find the following code

Code:
<vb:if condition="$show['forumdescription']"><p class="forumdescription">{vb:raw forum.description}</p></vb:if>
Remove it

Pretty simple huh ?

If you using it on your site, please mark as installed to show your support.

More will come, I promised.

Regards,
Jeff Ledger

nacaruncr 07-11-2011 04:03 AM
awesome men, thanks. I'll put it in my web, looks awesome :D thankyou :)

xuanhuy238 07-11-2011 05:29 AM
I've done the installation but it's not exactly in you demo, I got a green underline in tooltips.

How to remove it?

Jeff Ledger 07-11-2011 08:16 AM
Stylevers / linkhover_linkDecoration

text-underline set to no

Phil K?vin 07-11-2011 08:07 PM
Cool!!

Dr.osamA 07-11-2011 10:41 PM
installed thank you bro

5 stars

Alfa1 07-11-2011 11:25 PM
I guess that with a few small changes this can be used for vb3.8.6?

FReeSTER 07-12-2011 04:50 AM
wow mate, Im loving this

Jeff Ledger 07-12-2011 09:57 AM
Quote:
Originally Posted by FReeSTER (Post 2219534)
wow mate, Im loving this
You are welcome!

Quote:
Originally Posted by Dr.osamA (Post 2219467)
installed thank you bro

5 stars
Thank you so much

Quote:
Originally Posted by pнιl ĸ?vιn (Post 2219428)
Cool!!
Thanks

Quote:
Originally Posted by Alfa1 (Post 2219475)
I guess that with a few small changes this can be used for vb3.8.6?
Yup, it can be done in any version of vbulletin, but sadly, I don't have any running 3.8.x board on my PC.

Jeff

Wayne Luke 07-12-2011 04:49 PM
As of 4.1.0 (maybe earlier), jquery is included in the vBulletin download in clientscript/jquery.


All times are GMT. The time now is 12:38 AM.
Page 1 of 3 1 23
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01052 seconds
  • Memory Usage 1,748KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (5)bbcode_code_printable
  • (4)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete