DHTML Thread Preview with Per-User Option

[Chroder]

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 (http://www.bosrup.com/web/overlib/). You can download it from this (http://www.bosrup.com/web/overlib/?Download) page. To get more functionality and customization, you can read the online manual (http://www.bosrup.com/web/overlib/?Documentation).


Downloads / Thing to look at
- The package (https://vborg.vbsupport.ru/attachment.php?attachmentid=18419&stc=1)that contains the instructions.
- A screenshot (http://chris.devbox.net/web/screenshot.gif)(uploading images doesn't want to work for me...)
- Live example (http://www.devboxforums.com/forumdisplay.php?f=6) (hover over the post icons)

[SaN-DeeP]

nice hack :)

i like the idea.
and excellent placing of THE words.

people are really CREATIVE

Sandy...

[FleaBag]

I like this - will have to look into overLIB. Nice work. :)

[Chroder]

Thanks guys :)

[thuffner]

Used to use overLIB on my site a long time ago. I enjoyed it, and it worked well for me. Looks like you have done the same with this hack. Good job! :)

[SmartGnome]

The following error occurred when attempting to evaluate this template:

Parse error: parse error, expecting `T_STRING' or `T_VARIABLE' or `T_NUM_STRING' in /home/virtual/site1/fst/var/www/smarty/forum/includes/adminfunctions_template.php(3037) : eval()'d code on line 3

This is likely caused by a malformed conditional statement. It is highly recommended that you fix this error before continuing, but you may continue as-is if you wish.

What did I doing wrong :disappointed:

[Scrub]

Which template you editing when you get that error? :p

[floleb7]

if there isn't post icon ?

[Chroder]

if there isn't post icon ?
If you've turned them off then your SOL :p If the user didn't select one, then it automatically inserts a default one.

I couldn't think of anywhere else to put it. Maybe the post indicators are a better place.

[SmartGnome]

Which template you editing when you get that error? :p

The one mentioned in the instructions "threadbit" :ermm:

[Scrub]

Try this:


<if condition="$show['threadicons']">
<td class="alt2">
<if condition="$show['threadicon'] && $thread[preview] && !empty($thread[preview]) && $bbuserinfo[field5] != 'No'">
<img src="$thread[threadiconpath]" alt="" border="0" onmouseover="return doPreview('$thread[preview]');" onmouseout="return nd();" />
<else />
<if condition="!$show['threadicon'] && $thread[preview] && !empty($thread[preview]) && $bbuserinfo[field5] != 'No'">
<img src="images/icons/icon1.gif" alt="" onmouseover="return doPreview('$thread[preview]');" onmouseout="return nd();" />
<else />
<if condition="$show['threadicon']">
<img src="$thread[threadiconpath]" alt="alt="$thread[threadicontitle]"" border="0" />
<else />
<img src="images/icons/icon1.gif" alt="Post" />
</if>
</if>
</if>
</if>



Chroder, I belive you forgot an </if> in the threadbit edit. ;)

[Chroder]

Try this:


<if condition="$show['threadicons']">
<td class="alt2">
<if condition="$show['threadicon'] && $thread[preview] && !empty($thread[preview]) && $bbuserinfo[field5] != 'No'">
<img src="$thread[threadiconpath]" alt="" border="0" onmouseover="return doPreview('$thread[preview]');" onmouseout="return nd();" />
<else />
<if condition="!$show['threadicon'] && $thread[preview] && !empty($thread[preview]) && $bbuserinfo[field5] != 'No'">
<img src="images/icons/icon1.gif" alt="" onmouseover="return doPreview('$thread[preview]');" onmouseout="return nd();" />
<else />
<if condition="$show['threadicon']">
<img src="$thread[threadiconpath]" alt="alt="$thread[threadicontitle]"" border="0" />
<else />
<img src="images/icons/icon1.gif" alt="Post" />
</if>
</if>
</if>
</if>



Chroder, I belive you forgot an </if> in the threadbit edit. ;)
Uh oh :eek: I'll take a look

[Chroder]

See first post for updated package. Missed a </td> and </if>. Should work now :D

[SmartGnome]

@Scrub

Many TNX ....... works fine now :banana:

[Scrub]

See first post for updated package. Missed a </td> and </if>. Should work now :D
I should've caught that missing </td>. LMAO! Guess I was more interested in the error. :p

[Chroder]

Any idea's on different locations for the hovering? The post icons aren't too practical. I was thinking of a 5x5px image next to each title that had the hoving on it -- too much?

[Boofo]

Why not just do the thread title link?

[Chroder]

Because it's clumsy and annoying :p

[Boofo]

Well, you asked for a different location. Sorry it wasn't the answer you wanted.

[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 :o

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

[Chroder]

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 :o

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]

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 :D

[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]

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 :D

[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]

**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

[yoyoyoyo]

How do I add this function to the search results also? I noticed it only works in forum view mode, and not on search results. I think it would be handy to have this function work for search results as well.

[msimplay]

How do I add this function to the search results also? I noticed it only works in forum view mode, and not on search results. I think it would be handy to have this function work for search results as well.
i did this a while back now
heres my previous post that explains exactly how

https://vborg.vbsupport.ru/showpost.php?p=565066&postcount=29

[yoyoyoyo]

i did this a while back now
heres my previous post that explains exactly how

https://vborg.vbsupport.ru/showpost.php?p=565066&postcount=29Thanks, I missed that it seems :D