SCANU - Forum description on title mouseover [as Xenforo]

[Scanu]

Description

This modification show an elegant forum description when moving mouse over the forum title. Look at the screenshots for more! This is mod is temporary template modification of the future product that i'm working on. I've just released this "beta" for who wants to use this now.

Installation
Go in "Adimncp/Styles and Templates/Your style - Edit Templates/Forum Home Templates/forumhome_forumbit_level2_post/" and replace this code

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

With this

<vb:comment><h2 class="forumtitle"><a href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></h2></vb:comment>
<h2 class="forumtitle"><div id="scanudesc">
<a <vb:if condition="$show['forumdescription']">
title='<div id="container"><div id="scanu">{vb:raw forum.description}</div><span class="arrow"></span></div>'</vb:if> href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></div></h2>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>
<script>
$("#scanudesc a[title]").tooltip({
position: "bottom right",
effect: "slide"
});
</script>
<style>
/*styling and positioning of the arrow*/
.arrow {
border-right: 5px solid black;
border-top: 5px solid transparent;
border-left: 1px none black;
border-bottom: 5px solid transparent;
position: absolute;
top: 7px;
line-height: 0px;
width: 0px;
height: 0px;
left: -5px;
filter:alpha(opacity=68);
-moz-opacity:.68;
opacity:.68;
_display: none;
}
#scanu {
/*styling of the box */
background:black;
color:white;
padding: 5px 10px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
filter:alpha(opacity=68);
-moz-opacity:.68;
opacity:.68;
}
#container {
/*positioning of the arrow and the box*/
position: relative;
top: -10px;
left: 10px;
max-width: 440px;
}
</style>

Then replace this code

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

with this

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


Enjoy and wait for the product with many features and options! :D

PLEASE VOTE THIS MOD FOR MOTM: CLICK HERE, AND CLICK MARK AS INSTALLED (https://vborg.vbsupport.ru/showthread.php?p=2251846)

To get support:
Mark this mod as Installed
Copy/Pasted errors or screenshots
URL/link to site


Many thanks to haincha (https://vborg.vbsupport.ru/member.php?u=416709) for the idea.

If you like italian G-funk/rap please try out this music (www.youtube.com/watch?v=agPuN80vgaE) or this music (http://www.youtube.com/watch?v=bf6kP1lMdJc)
If you like italian rap try out this music (http://www.youtube.com/watch?v=b2i3ml7wlJo)

[Scanu]

Version History
- 1.0
- First release on Vbulletin.org

- 2.0
- Added the arrow <
- Better positioned respect the forum title
- Adapted to long description
- The arrow < is not an image but a css code
- Added the indent to the CSS code

- 2.1
- I'm looking for new feature request you can request your feature responding to this thread

[Scanu]

Reserved

[Scanu]

3rd post reeserved

[Lazorbeam]

3th post reeserved

3rd ;).

If I were to remove the forum description, is the mouseover info still readable by search engines?

[Scanu]

3rd ;).

If I were to remove the forum description, is the mouseover info still readable by search engines?
Whhoops :D
Yes, it would be. the description is in the title attribute: "In contrast, you can use the TITLE attribute for just about any page element, but it isn't required for any page element. Use it to describe links, tables, individual table rows, and other structural HTML elements. They're more versatile than the ALT attribute and many search engine ranking algorithms read the text in TITLE attributes as regular page content."
For more see this: http://www.netmechanic.com/news/vol6/html_no1.htm

[Lazorbeam]

Whhoops :D
Yes, it would be. the description is in the title attribute: "In contrast, you can use the TITLE attribute for just about any page element, but it isn't required for any page element. Use it to describe links, tables, individual table rows, and other structural HTML elements. They're more versatile than the ALT attribute and many search engine ranking algorithms read the text in TITLE attributes as regular page content."
For more see this: http://www.netmechanic.com/news/vol6/html_no1.htm

That's awesome.

I think I can see where you're going with this product... seems very very promising. Care to give us a sneak peak?

[Arcade Fire]

Tagged, thanks. i'll try to install it in my vb 3.8 forum :)

[Scanu]

That's awesome.

I think I can see where you're going with this product... seems very very promising.
Thanks :)

Care to give us a sneak peak?


Sorry what do you mean? What are you reffering to?

[Scanu]

Tagged, thanks. i'll try to install it in my vb 3.8 forum :)

That would be works, i've never got vbulletin 3 but i think that you have to change the <vb:if> in <if>

[CharlieDelta]

I like this! Can't wait till it gets released as a plugin. :)

[thecore762]

I like this! Can't wait till it gets released as a plugin. :)

Same here, I'd like to see a plugin version of this mod :)

[v123shine]

Can you make for vb 3.8
Please..!!

[Scanu]

well, i will try to :) Give me some time

[Filgga]

It's not applying for 'forum description' only; includes last poster, thread title etc... Pls modify the code.

[Scanu]

I'm not sure to understand you can you post a screen "Before" and "after"

[OldSchoolDSL]

Advise....

Rather than remove or replace

With the 1st code wrap it around with

<vb:comment> </vb:comment>

So when done it will look like

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

Then proceed to add your code below it

Next do the same thing you did for the 1st one. So when done it will look like

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

This will help you during an upgrade and not have to completely revert everything.

[Scanu]

Mmh yes this is the same but it's better, thanks tommorow i will change the code :)

[HHelp1]

I just installed the Rocket Dock HERE (https://vborg.vbsupport.ru/showthread.php?t=261618) b4 AND i install this mod too but my rocket dock not working ... Any help ?

[Scanu]

Sorry i don't know what's the problem.. the template is another one, this is probably a jquery problem can't help you :( Choose one mod :(

[sadiq6210]

It is not working when you use a description with color .. like:

<font color="#000000">forum description</font>

[OldSchoolDSL]

There is a small undesired effect from this modification. It's not so much of an issue, but I would call it undesirable.

It works without issue on the forum description as it was meant to (see screen shot 1), but if you move your mouse on a topic, toward the right, outside the forum, it's basically unreadable because the text is black and the background is clear (see screen shot #2)

Any solution?

[Scanu]

Ok perfect i've seen the problems,
I can fix many of those errors, but i can't help "HHelp1" sorry for many errors this is a beta version

[Scanu]

Advise....

Rather than remove or replace

With the 1st code wrap it around with

<vb:comment> </vb:comment>

So when done it will look like

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

Then proceed to add your code below it

Next do the same thing you did for the 1st one. So when done it will look like

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

This will help you during an upgrade and not have to completely revert everything.

thanks i did it :)

[Scanu]

It's not applying for 'forum description' only; includes last poster, thread title etc... Pls modify the code.

There is a small undesired effect from this modification. It's not so much of an issue, but I would call it undesirable.

It works without issue on the forum description as it was meant to (see screen shot 1), but if you move your mouse on a topic, toward the right, outside the forum, it's basically unreadable because the text is black and the background is clear (see screen shot #2)

Any solution?

Now this problem would be solved but i can't try please let me know if it works! :)

[Scanu]

It is not working when you use a description with color .. like:

<font color="#000000">forum description</font>

If i understand what u mean, you can change the color of the description searching in the code this

color:white;

and replacing with the color that you want, for example

color:#000000;

[OldSchoolDSL]

Now this problem would be solved but i can't try please let me know if it works! :)

Your new code basically trashed the forum. So I re-applied the old code.


<h2 class="forumtitle"><a <vb:if condition="$show['forumdescription']">title="<scanu>{vb:raw forum.description}</scanu>"</vb:if> href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></h2>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>
<script>
$(" a[title]").tooltip({
position: 'center right',
effect: 'slide'
});
</script>
<style>
scanu {
background:black;
color:white;
padding: 5px 10px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
filter:alpha(opacity=68);
-moz-opacity:.68;
opacity:.68;
}
</style>

[Scanu]

Can you try again with the new code? :)

[sadiq6210]

If i understand what u mean, you can change the color of the description searching in the code this

color:white;

and replacing with the color that you want, for example

color:#000000;


After update the code, now there is two errors!

1) Color description:
I have many forums, I changed the description color for some forums.
How to reproduce this bug:
- Add new forum
- write any title i.e (test forum)
- In description paste this:
<font color="#00ffff">Test forum with blue color</font>

So you will have this result before install your mod.
https://vborg.vbsupport.ru/attachment.php?attachmentid=135149&stc=1&d=1324188888

After modified the template and add your code:
https://vborg.vbsupport.ru/attachment.php?attachmentid=135150&stc=1&d=1324188888



2) After update:
After update the old code with new update, It is not working with me !
see the last screenshot.

This is my (forumhome_forumbit_level2_post)

<li id="forum{vb:raw forum.forumid}" class="forumbit_post {vb:raw forum.statusicon} L2">
<div class="forumrow table">
<div class="foruminfo td">
<img src="{vb:stylevar imgdir_statusicon}/{vb:raw forum.imageprefix}forum_{vb:raw forum.statusicon}-48.png" class="forumicon" id="forum_statusicon_{vb:raw forum.forumid}" alt="" />
<div class="forumdata">
<div class="datacontainer">
<div class="titleline">
<vb:comment>
<h2 class="forumtitle"><a href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></h2>
</vb:comment>
<h2 class="forumtitle"><div id="scanutitle"><a <vb:if condition="$show['forumdescription']">title="<scanu>{vb:raw forum.description}</scanu>"</vb:if> href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></h2></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>
<script>
$("#scanutitle a[title]").tooltip({
position: 'center right',
effect: 'slide'
});
</script>
<style>
scanu {
background:black;
color:white;
padding: 5px 10px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
filter:alpha(opacity=68);
-moz-opacity:.68;
opacity:.68;
}
</style>
<vb:if condition="$show['browsers']"><span class="viewing">({vb:raw forum.browsers} {vb:rawphrase viewing})</span></vb:if>
</div>
<vb:comment><vb:if condition="$show['forumdescription']"><p class="forumdescription">{vb:raw forum.description}</p></vb:if></vb:comment>
<vb:if condition="$vboptions['showmoderatorcolumn'] AND $forum['moderators']">
<div class="moderators">
<h4>{vb:rawphrase moderators}:</h4>
<ol class="commalist">
<vb:each from="forum['moderators']" value="row">
<li><a class="username" href="{vb:link member, {vb:raw row}}">{vb:raw row.musername}</a>{vb:raw row.comma}</li>
</vb:each>
</ol>
</div>
</vb:if>

<vb:if condition="$show['subforums']">
{vb:raw forum.subforums}
</vb:if>

<vb:if condition="$show['forumsubscription']">
<p class="unsubscribe">
<a href="{vb:raw vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}subscription.php?{vb:raw session.sessionurl}do=removesubscription&amp;f={vb:raw forum.forumid}" rel="nofollow">{vb:rawphrase unsubscribe_from_this_forum}</a>
</p>
</vb:if>
</div>
</div>
</div>
<vb:if condition="$forum['statusicon'] != 'link'">
<h4 class="nocss_label">{vb:rawphrase forum_actions}:</h4>
<vb:if condition="$vboptions['externalrss'] OR $show['member']">
<ul class="forumactionlinks td">
<vb:if condition="$forum['allowposting']"><vb:if condition="$vboptions['externalrss']"><li class="forumactionlink rsslink"><a href="external.php?{vb:raw session.sessionurl}type=RSS2&amp;forumids={vb:raw forum.forumid}" title="{vb:rawphrase view_forum_rss_feed}">{vb:rawphrase view_forum_rss_feed}</a></li></vb:if>
<vb:if condition="$show['member']"><vb:if condition="$show['forumsubscription']"><li class="forumactionlink unsubslink"> <a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}subscription.php?{vb:raw session.sessionurl}do=removesubscription&amp;f={vb:raw forum.forumid}" title="{vb:rawphrase unsubscribe_from_this_forum}">{vb:rawphrase unsubscribe_from_this_forum}</a></li><vb:else /><li class="forumactionlink subslink"> <a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}subscription.php?{vb:raw session.sessionurl}do=addsubscription&amp;f={vb:raw forum.forumid}" title="{vb:rawphrase subscribe_to_this_forum}">{vb:rawphrase subscribe_to_this_forum}</a></li></vb:if></vb:if></vb:if>
</ul>
<vb:else />
<div class="forumactionlinks"></div>
</vb:if>
<h4 class="nocss_label">{vb:rawphrase forum_statistics}:</h4>
<ul class="forumstats td">
<li>{vb:rawphrase threads}: {vb:raw forum.threadcount}</li>
<li>{vb:rawphrase posts}: {vb:raw forum.replycount}</li>
</ul>
<div class="forumlastpost td">
<h4 class="lastpostlabel">{vb:rawphrase last_post}:</h4>
<div>
{vb:raw forum.lastpostinfo}
</div>
</div>
</vb:if>
</div>
<vb:if condition="$childforumbits">
<ul class="childsubforum">
{vb:raw childforumbits}

</ul>
</vb:if>
</li>

[sadiq6210]

Your new code basically trashed the forum. So I re-applied the old code.


<h2 class="forumtitle"><a <vb:if condition="$show['forumdescription']">title="<scanu>{vb:raw forum.description}</scanu>"</vb:if> href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></h2>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>
<script>
$(" a[title]").tooltip({
position: 'center right',
effect: 'slide'
});
</script>
<style>
scanu {
background:black;
color:white;
padding: 5px 10px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
filter:alpha(opacity=68);
-moz-opacity:.68;
opacity:.68;
}
</style>


Same
+1

[OldSchoolDSL]

Same
+1

Aren't you happy I kept a copy of the original code? LOL



Thanks for confirming.

[sadiq6210]

Aren't you happy I kept a copy of the original code? LOL



Thanks for confirming.

Absolutely :D hah

[Scanu]

ok so nothing to do I can't re-code the mod without testing board please wait for a fix for those problems. I revert the original code in the mod

[Kiran-E-Sehar]

i edited templaye as u said /....

but nothing happened :-s

[Scanu]

Are you sure to edit the right template?
forumhome_forumbit_level2_post

[OldSchoolDSL]

We have a winner.

Thank you Scanu :)

This one will work


<h2 class="forumtitle"><div id="test"><a <vb:if condition="$show['forumdescription']">title="<scanu>{vb:raw forum.description}</scanu>"</vb:if> href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></div></h2>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>
<script>
$("#test a[title]").tooltip({
position: 'center right',
effect: 'slide'
});
</script>
<style>
scanu {
background:black;
color:white;
padding: 5px 10px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
filter:alpha(opacity=68);
-moz-opacity:.68;
opacity:.68;
}
</style>

Be sure to include that large space in the 1st line when you copy & paste. ;)

You don't need to space after the end of the code. For some reason vBulletin.org adds it. Just copy all the way until you hit </style> at the end.

Installed and working

4.1.9

[Scanu]

Thanks everybody now i've updated the code in the first topic

[Scanu]

sadiq6210, regarding your error i'm working to solve it but i think that is impossible. I know the reason of that error so i think i can't help you :S

[OldSchoolDSL]

sadiq6210, regarding your error i'm working to solve it but i think that is impossible. I know the reason of that error so i think i can't help you :S

I had his / hers spacing error originally. So I think this code should resolve it.

But I suspect the colored description in his / her forum maybe the cause.

[Scanu]

Lol what am i saying try with the new code i fix this error too

[Scanu]

I had his / hers spacing error originally. So I think this code should resolve it.

But I suspect the colored description in his / her forum maybe the cause.

Sorry i was talking about the colored description error

[sadiq6210]

You are the best :D

Now it is perfect

https://vborg.vbsupport.ru/attachment.php?attachmentid=135184&stc=1&d=1324304164

Thanks :up:

[Arcade Fire]

Scanu, it works well, but takes a long time to load the page. You can see OldSchoolDSL forum:

http://www.sociallyuncensored.eu/forums/forum.php

Perhaps this is not the ideal script, I have seen this idea work in other forums, but once loaded the page. See:

http://www.hispasonic.com/foros/musica-debate/f47 (Thread preview)

??

[Scanu]

I'm using the same jquery plugin as Xenforo, and in my forum without plugins and with the default style "it don't takes server load" (right words?) so i don't think that is my mod

[OldSchoolDSL]

Scanu, it works well, but takes a long time to load the page. You can see OldSchoolDSL forum:

http://www.sociallyuncensored.eu/forums/forum.php

Perhaps this is not the ideal script, I have seen this idea work in other forums, but once loaded the page. See:

http://www.hispasonic.com/foros/musica-debate/f47 (Thread preview)

??

My site makes for a poor example as I have A LOT of other things loaded onto my site.

And my site loads fine in doing my own test .... I would suggest you find another example to compare.

Scanu has done a good job with this script :)

[Arcade Fire]

@OldSchoolDSL I have made your forum as an example, it is exactly what happened in mine, the forums were loaded one by one. Tested with Firefox and no other script on my page.

I agree that is a big job, but that is not working does not end quickly. I will install in localhost for test it in a new instalation.

[Scanu]

Well i can do the script same as the site you linked but there is no "cool" effect and it isn't like Xenforo, let me know for the test because in my site it's all normal

[haincha]

Wow, thanks! Even more so for mentioning me. I really appreciate this, will definitely get put to use!

Anyway to get it better lined up with the forum title? Right now it just sort of floats a bit above the forum title. Not a deal breaker, just trying to see minor tweaks. Also something like a < to the right of the box. Make it look like a caption bubble type.

[Scanu]

Yes of course! For this I'm waiting my brother clear ( he is a designer) :)

[haincha]

Yea, I think the < will fix the other issue I am trying to fix. It hovers over almost right over the end of the forum title.

I was trying to edit the code a bit, but I am pretty awful at jquery.

[Scanu]

I think the is a css problem because the configuration of the jquery plugin is limited

[haincha]

Is it just the source you used? I found two jQuery tooltips that look really nice.

TipTip (http://code.drewwilson.com/entry/tiptip-jquery-plugin)
Tipped (http://projects.nickstakenburg.com/tipped/documentation)

[Scanu]

Really i want to use the same jquery plugin that uses Xenforo,
I don't like TipTip and when you go in the description it disappears, regard to Tipped i like it so much it's perfect but as I said i want to leave the original plugin :)

[haincha]

That is fine, I have no problems with what you have. I just want the tip "<" on the left top side. I couldn't figure out how to make it show up.

[Scanu]

My brother is working on that. however it's a image positioned beside the box with css

[haincha]

Also needs some styling, I have a forum with a longer description. It kind of keeps going towards the end of the screen. Any way to have it after x amount of characters to start a new line?

[Scanu]

Oh i'm sorry my brother is working on this, for now you can try max-width: value;
choose the value as you want

[haincha]

<style>
scanu {
background:black;
color:white;
padding: 5px 10px;
max-width: 20;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
filter:alpha(opacity=68);
-moz-opacity:.68;
opacity:.68;
}
</style>

Unless I am doing it wrong, this is just a test number for value. But, it did not change anything.

[Scanu]

sorry the value must be expressed in pixel so try 20px

[haincha]

Still no luck. Even refreshed my browser and tried another. Not working in Firefox or Safari on Mac.

[Scanu]

I'll ask to my brother. Try width: 100px;

[OldSchoolDSL]

Working

4.1.10

Notice: You'll need to re-apply this, but it does work.

[Scanu]

What do you mean with "re-apply"?

[ProFifaLeagues]

Thanks great idea and working fine on 4.1.3

[OldSchoolDSL]

What do you mean with "re-apply"?

4.1.10 requires A LOT of things to be reverted. Even if you don't have much or any custom edits. So you may have to apply this again.

Nothing to worry about. Just means having to install it again. Simple copy and paste, done.

[thecore762]

Can this modification be made into a plugin?

[Scanu]

for now i've stopped the work sorry

[Scanu]

Product mod is now OUT! Check it here: https://vborg.vbsupport.ru/showthread.php?t=276419

[OldSchoolDSL]

Product mod is now OUT! Check it here: https://vborg.vbsupport.ru/showthread.php?t=276419

uninstalled and replaced with the above upgrade.

( Thank you )

Tagged for future use, should plug in conflict (ever)

[Scanu]

Update now with the arrow

[thecore762]

uninstalled and replaced with the above upgrade.

( Thank you )

Tagged for future use, should plug in conflict (ever)

You should check out the plugin thread.

Fixed my issues.

Here are the useful posts:
https://vborg.vbsupport.ru/showpost.php?p=2284959&postcount=46
https://vborg.vbsupport.ru/showpost.php?p=2284971&postcount=49

[prandah]

problem with vBSEO :D

[Toorak Times]

problem with vBSEO :D

Cheers, will deleta nd load plug in thanks for this mate

[saihat]

<div align="left">Does it work 3.xx
</div>

[Scanu]

You would have to convert the vbcode

[ibrahimkoky]

hello
I tried the MOD but it changed the forum links mouse hover color? and also I have the Forum Category Icons (Advanced) (https://vborg.vbsupport.ru/showthread.php?t=244351) installed on my forum. After the the changes i made to forumbit_level2_post template the Forum Category Item disappeared. i changed everything back in the template and still the forum icon wont show and the forum link mouse hover color did change back??


why is that??
---------------------------
Edit
i reverted the template and I go the forum icons to show up again.

thanks

[tanzeelniazi]

working perfect in VB 4.2.0

[thang28101993]

No things change for me after added those codes!
Vbb 4.2.1

[Salvo]

In vB 4.2.1 it doesn't work, it breaks the page layout.