Add-On Releases - jQt jQuery Suite for vB4

Completely Re-designed modular system, virtually all the code re-written.

Description:
This mod will add jQuery enhancements to various areas of your vBulletin board using the renown jQuery Tools Library.

jQuery Overlays:

• Separate Log-In and Registration Dialogues, Including Human Verify and D.O.B. but NOT required fields.
• OR Log-In / Register Slide-Down
• Log Out Dialogue
• Mark Forums Read Dialogue
• Mini-Stats
• Display Chat/Shout box in slide-down

Tooltips:

• vBAdvanced Recent Threads, including threadstarters avatar.
• Forum Display (threadbits), including threadstarters avatar.(upgraded)
• Postbit / Postbit_legacy, including avatar and post/activity details.
• Forum Home Description
• Search Results page (search_threadbit)

I now use and HIGHLY RECOMMEND TMS (Template Modification System) as it automates the template edits for the default theme and simplifies the edits for custom themes.


This is the first release of this re-designed mod. I have re-written these scripts to be far more compatible with other add-ons, using the <noconflict> method throughout.
I have used a 'modular' environment, meaning that you can select specifically the individual components you want to use. All of the modules are fully configurable from the AdminCP, and many of the style attributes are editable from the templates stylevar dialogue.

UPGRADE: from any previous version to this, v4.0 there is NO UPGRADE PATH, you need to fully remove earlier versions, then follow the instructions for installation. I am very sorry for this inconvenience, but so much has been changed that incorporating upgrading became untenable.

INSTALLATION:
1, Upload all the files/folders in the UPLOAD folder to your forum root.

2, Install the product 'product-jqt_suite-CORE.xml'. This is the only component that is COMPULSORY. This has to be installed for any of the others modules to work!

3, Install any of the other module(s) from the AdminCP, as you would any other product;
jQt Suite Log-In-Register Module
jQt Suite Log-In-Register Slider Module
(you can only use ONE of the above, the first is the overlay)
jQt Suite MarkForumsRead Module
jQt Suite MiniStats Module
jQt Suite Tooltips Module

4, If you have TMS (Template Modification System) installed the template edits have already been done for you.
If not, then manually apply the template edits from the template edit pages found in the Docs folder of the archive.
You only need to apply the template edits for the module(s) that you install.

5, Pop into your AdminCP and configure the product(s)

6, To enable the 'VSa Visitors in Last X Hours' block in the mini-stats you need to have that mod already installed (use the link) then edit the 'VSa - Visitors In Last X Hours' Product thus:
Go to AdminCP/Plugins & Products/Plugin Manager/
and disable the Plugin 'VSa - VILXH - MN'. This transfers the results from the forum home page to the mini-stats block.

TWEAKING TOOLTIP POSITION
For those of you that would like to tweak the position of the tooltips, here is a quote directly from the original jQuery Tools Tooltip documentation describing what the numbers mean.
Edit these positions by opening
/jqt_suite/jqt_suite_black_css.js
/jqt_suite/jqt_suite_minimal_black_css.js
or
/jqt_suite/jqt_suite_white_css.js
and finding the line(s) 'offset: [-44, 90],'

The offset property fine tunes the tooltip position specified with the position property. For example, the value [10, -20] moves the tooltip position 10px downwards and 20px to the left. The first value modifies the vertical positioning from the top edge of the tooltip and the second value modifies the horizontal positioning from the left edge of the tooltip. Positive values move the tooltip downward and to the right, while negative values move the tooltip upward and to the left.

For those that use vBSEO and have some trouble with guests viewing the tooltips, you can turn OFF the vBSEO option "Remove Thread Preview Text For Guest Visitors" to fix it.

All updates/future releases and support are now only available at jqt-suite.co.uk

[Winter Sonata]

Any chance this will work on 402 ?

Looks promising, thanks alot!

Demo ?

[Gemma]

Thanks gothicuser, works great

[gothicuser]

Originally Posted by Winter Sonata

Any chance this will work on 402 ?

Yep

Looks promising, thanks alot!

Demo ?

I would normally have it installed on my site, but I started an upgrade 2 weeks ago, and Murphy's law kicked in...... I haven't had a day off work since then.
When I finally finish this marathon of work (damn soon I hope) I will complete the upgrade in re-install the demo(s).

[smirkley]

gothicuser,.. firstly, thanks, this really dresses up the functionality of my forums.

I am in the process of fine tuning this for my layout, so if I post a question or a bug report, they are just me trying to finish it up.

Hey, I use the add-on you gave for the search results, and I like the positioning of the popup.

But I wish to move the other thread list popups to position more to the right also. I would just like to position the popup to the right of the mouse pointer instead of above the pointer as it is currently.

Where do I tweak the settings to move it over a bit.

Thanks again.

[gothicuser]

Originally Posted by smirkley

But I wish to move the other thread list popups to position more to the right also. I would just like to position the popup to the right of the mouse pointer instead of above the pointer as it is currently.

Where do I tweak the settings to move it over a bit.

Thanks again.

To edit the position of the tooltip you need to open one of the css.js files (depending on which theme you use, either the 'jqt_suite_black_css.js' or 'jqt_suite_white_css.js')
The positioning is controlled where you see the line

PHP Code:

offset: [14, -20], 


x coordinate fist, then y
They are fiddly to get right. You just need to experiment.
The block you need to find will be the

PHP Code:

    // Tooltip for threadbits
$("td.jqt_threadbit_tooltip_trigger[title]").tooltip({
   tipClass:'jqt_threadbit_tooltip_white',
   offset: [14, -20],
   effect: 'slide',
   predelay: '500',
   slideInSpeed: 500,
   slideOutSpeed: 400,
   slideOffset: 20
}).dynamic({ bottom: { direction: 'down', bounce: true } }); 


or

PHP Code:

    // Tooltip for threadbits number 2 (vB4)
$("div.jqt_threadbit_tooltip_trigger2[title]").tooltip({
   tipClass:'jqt_threadbit_tooltip_white',
   offset: [14, -20],
   effect: 'slide',
   predelay: '500',
   slideInSpeed: 500,
   slideOutSpeed: 400,
   slideOffset: 20
}).dynamic({ bottom: { direction: 'down', bounce: true } }); 


You'll have to experiment.

[qpurser]

I just installed your mod and really like professional look of it. Great job!!

However I have a couple issues:
The thread tooltip shows up fine but it still shows also the "standard" popup from vBulletin when hovering over a thread. How can I turn the "standard" popup off?

Did the modifications also for the postbit as instructed but my postbit looks like this now as shown in the attachment

Thanks for any help
Michael

[gothicuser]

Originally Posted by qpurser

However I have a couple issues:
The thread tooltip shows up fine but it still shows also the "standard" popup from vBulletin when hovering over a thread. How can I turn the "standard" popup off?

That shouldn't happen, doing the template edit the original 'title=""':

PHP Code:

<div class="threadinfo" title="{vb:raw thread.preview}"> 


is replaced by the edit:

PHP Code:

<div class="threadinfo"> 


so hiding the original tip.

Did the modifications also for the postbit as instructed but my postbit looks like this now as shown in the attachment

Looked at your postbit piccy, but the only time I saw that was when another mod was clashing with mine. Do you have any other add-ons that use script (jquery or mootools)?

[qpurser]

Originally Posted by gothicuser

That shouldn't happen, doing the template edit the original 'title=""':

PHP Code:

<div class="threadinfo" title="{vb:raw thread.preview}"> 


is replaced by the edit:

PHP Code:

<div class="threadinfo"> 


so hiding the original tip.

Nope..That is not the issue. I commented out the original Title as you can see

Here is the code I have now in my "threadbit"

<!-- <div class="threadinfo" title="{vb:raw thread.preview}"> -->
<vb:if condition="$vboptions['jqt_threadbits_tooltip_on']">
    <div class="threadinfo">
        <div class="jqt_threadbit_tooltip_trigger2" title="&lt;table class=&quot;threadbit_tooltip&quot;&gt;
&lt;tr&gt;
&lt;td class=&quot;avatar_blok&quot;&gt;
  &lt;img src=&quot;{vb:raw thread.avatarurl}&quot; border=&quot;0&quot;style=&quot;max-width:80px;min-width:60px; max-height:90px;&quot; /&gt;
&lt;/td&gt;
&lt;td class=&quot;user_detail&quot;&gt;
&lt;p class=&quot;borderbottom&quot;&gt;&lt;i&gt;Preview&lt;/i&gt;&lt;/p&gt;
&lt;p class=&quot;details2&quot;&gt;{vb:raw thread.preview}&lt;/p&gt;
&lt;h5&gt;Started by: {vb:raw thread.postusername}, {vb:raw thread.lastpostdate} {vb:raw thread.lastposttime}&lt;/h5&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;">
<vb:else />
            <div class="threadinfo" title="{vb:raw thread.preview}">
</vb:if>

[smirkley]

Originally Posted by qpurser

Did the modifications also for the postbit as instructed but my postbit looks like this now as shown in the attachment

This looks like the same problem with mine, except for mine only does this with banned and awaiting confirmation members with posts.

[smirkley]

Originally Posted by gothicuser

To edit the position of the tooltip you need to open one of the css.js files (depending on which theme you use, either the 'jqt_suite_black_css.js' or 'jqt_suite_white_css.js')
The positioning is controlled where you see the line

PHP Code:

offset: [14, -20], 


x coordinate fist, then y
They are fiddly to get right. You just need to experiment.
The block you need to find will be the

PHP Code:

    // Tooltip for threadbits
$("td.jqt_threadbit_tooltip_trigger[title]").tooltip({
   tipClass:'jqt_threadbit_tooltip_white',
   offset: [14, -20],
   effect: 'slide',
   predelay: '500',
   slideInSpeed: 500,
   slideOutSpeed: 400,
   slideOffset: 20
}).dynamic({ bottom: { direction: 'down', bounce: true } }); 


or

PHP Code:

    // Tooltip for threadbits number 2 (vB4)
$("div.jqt_threadbit_tooltip_trigger2[title]").tooltip({
   tipClass:'jqt_threadbit_tooltip_white',
   offset: [14, -20],
   effect: 'slide',
   predelay: '500',
   slideInSpeed: 500,
   slideOutSpeed: 400,
   slideOffset: 20
}).dynamic({ bottom: { direction: 'down', bounce: true } }); 


You'll have to experiment.

Thank you !!

I played with it awhile, and got ther threadlist tooltip to position properly where I wanted it.

Sweet!

But I did notice that the search_threadbit tooltip is positioned even further the distance to the right now. Like it was in the middle for some reason oem, and when I moved the position offset for threadlist, it moved the offset even further the same distance to the right.

A note, I used your search_threadbit that you posted.