DHTML Thread Preview with Per-User Option

What Is This?

This hack will alter the way your users view the thread previews. Instead of using vB default "title", which can be annoying, we're using a DHTML tooltip to display it. You can even customize the look of the tooltips. And remember that Mozilla bug where linebreaks show up as black squares? No more! You can actually preserve the line breaks now! And now we've moved the tooltip to a thread's post icon for easy activation, so no more annoying accidental preview popups. On top of all that, your users can just disable the whole thing if they don't like it!


Hack Overview

• vB Version: 3.0.1
• overLIB Version: 4.00
• New files: overLIB library
• New Profile Fields: 1
• Files to modify: 1
• Templates to modify: 2

What You Need

All you need is the overLIB. You can download it from this page. To get more functionality and customization, you can read the online manual.


Downloads / Thing to look at
- The package that contains the instructions.
- A screenshot (uploading images doesn't want to work for me...)
- Live example (hover over the post icons)

[Chroder]

Originally Posted by msimplay

just realised that the dhtml tooltips missing for when u search posts
could we add it to that ?

ps how do i remove the preview altip from thread title on forum display

also i wasn't sure wether to ask here or in the vbadvanced forum
but i'd also like to intergrate this with last posts block for Vbadvanced somehow

excellent hack idea by the way
the thread previews get annoying when they don't have html stripped in the thread preview alt tip

Oh yeah, forgot to specify to take out the title on the cell

In threadbit temlpate, find:

<td class="alt1Active" id="t$thread[threadid]" title="$thread[preview]">

Replace:

<td class="alt1Active" id="t$thread[threadid]">

(Thus deleting the title part .

I'll update the main package later, and I'll try and find out how to put it into the search as well.

[msimplay]

Originally Posted by Chroder

Oh yeah, forgot to specify to take out the title on the cell

In threadbit temlpate, find:

<td class="alt1Active" id="t$thread[threadid]" title="$thread[preview]">

Replace:

<td class="alt1Active" id="t$thread[threadid]">

(Thus deleting the title part .

I'll update the main package later, and I'll try and find out how to put it into the search as well.

thanks

[djohn]

There is a similar hack for IPB, exept for the hover thingie is only displayed when your mouse is over the topic name. It prooved to be very practical, and the users liked it. How can i do the same with this hack?

[Chroder]

Most of the complaints about the topic preview is about how it's annoying, so that's why I moved it away from the topic title. If you want it on the topic title then you might as well just enable the default topic preview.

My users like it on the icon because if they want a preview, then they just hover over it. No delays, no "sticky" tooltips etc.

[msimplay]

Originally Posted by Chroder

Most of the complaints about the topic preview is about how it's annoying, so that's why I moved it away from the topic title. If you want it on the topic title then you might as well just enable the default topic preview.

My users like it on the icon because if they want a preview, then they just hover over it. No delays, no "sticky" tooltips etc.

yeh i was thinking about moving it onto the thread title but looking at the nature of the dhtml being instant once its loaded
would become very annoying when mousing over titles so i actually prefer it on the post icons aswell now

[Chroder]

You could use a delay, but that kinda defeats the purpose IMO.

[msimplay]

any news on adding this to search posts ?

[msimplay]

**bump** same as the last time

[msimplay]

Originally Posted by msimplay

**bump** same as the last time

ok found the answer

FIND in search_results :

$headinclude

ADD AFTER in search_results :

<if condition="$bbuserinfo[field5] != 'No'">
    <script language="javascript" src="clientscript/overlib/overlib.js"></script>
    <script language="javascript">
    function doPreview(txt)
    {
        return overlib(txt, FGCOLOR, '#F3F6FA', BGCOLOR, '#000000', TEXTSIZE, '8pt', TEXTCOLOR, '#000000');
    }
    </script>
</if>

FIND in search_results :

</body>
</html>

BEFORE ADD in search_results :

<if condition="$bbuserinfo[field5] != 'No'"><div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div></if>

This will give the same ability in search results
none of that was my code i just copied and pasted in the right templates

hope thats useful to others

[zurih]

anyone knows how can I change the preview from the icon to the other icon in the left? (new post, old post, etc icon)

thanks