[RC3] Hovering changes CSS class

[Natch]

What this does:

It creates a hover effect for viewing forums and threads

What you need to do:

Download the instructions and the javascript file that does all the work from this post, and go for your life ...

NOTE:
The script is switching between the CSS classes .alt1Active and .alt2Active - if you wanna change this, u can :D e.g., you can add the cursor:hand; statement to the alt2 classes, and the cursor: default; to the alt1 classes for a handy effect :)

HTH people :) I decided to do this one in response to this request (https://vborg.vbsupport.ru/showthread.php?t=61087) and partly to see if I could :) :ninja:

Tested on IE6, Mozilla Firebird and Opera 7 ... demo @ www.mobileforces.org (http://www.mobileforces.org/)

EDIT[2004-02-07]: thanks to Boofo for pointing out the request for the whole cell linking into the thread/forum :) Props also to Boofo for the addon code :)

[Natch]

Replies would be appreciated - not impressed so far ...

Basically - if you aint at least gonna give me feedback on this (ie if you are just gonna leech and use this without acknowledgement, then I will take it down and you can work it out yourselves.

Not impressed vBT.

[stevekli]

Looks nice, I've downloaded but won't be able to install for a few days. Try not to take the lack of immediate feedback to personally. I know you put a lot of time into your mods...and we do appreciate it! Some of us just don't have the flexibility to work on our boards everyday.

[Natch]

Update to add the "onclick" effect to link into the forum/thread from the whole table cell.

The IE only effect built in does the same thing, but only for IE - so this for the other mob :)

* Natch is a Firebird junkie

[Frank]

Nice hack mate, but the effect is slightly lagged on my computer (at least on your forum that I looked at).

[AN-net]

cool mod, thanks;)

[idwf]

yeah...liking it. :)

[Tony G]

Please document your modification, and do not use the thread as the instructions. Thank you. :)

[Natch]

Please document your modification, and do not use the thread as the instructions. Thank you. :)
'scuse the ignorance, but please explain ? How much more documented do you want it ?

I was instructed to bring this hack here from vb.org as it's officially not a hack, so I did as I was told ... I'm not really sure how much more I can explain this trick - you mean you want //commenting thru the thing ? or an instructions.txt attached ?

[AN-net]

'scuse the ignorance, but please explain ? How much more documented do you want it ?

I was instructed to bring this hack here from vb.org as it's officially not a hack, so I did as I was told ... I'm not really sure how much more I can explain this trick - you mean you want //commenting thru the thing ? or an instructions.txt attached ?
i think he wanks you make a text file of this

[Tony G]

Yes, I mean a text file. I'm sorry I didn't sound clear. Document, means placing your modification into a .txt file and attaching it. This works better then putting the code into the first post.

My apologies for not sounding clear.

[Natch]

Updated the first post to include attached instuctions.txt.

[Stussi]

Hey Natch!

I've installed your hack and it works fine in the IE.

I've some problems with Opera but i'll re-install it. My Users don't have this Problem.

Good work! :)

[Wolfy.2k]

natch... i have loved all of ur hacks so far and have got this one too ty!!!

also, if there any way to change the colour it turns?

[sabret00the]

nice mod :)

[Natch]

Wolf.2k :) thanks for the props ;)

Currently it is based on your Main CSS setup for the Alt1/Al2 classes - so you can alter those elements in the bit where it saysonmouseover="changeSty('alt2Active',to match any other class in your CSS, that should do it :)

If you don't have a class defined with the colour you want, then make a new one :) At the bottom of your Main CSS page, add the following {on a new line}:.myclass { color:#rrggbb; background-color:#rrggbb; } where the #rrggbb bits match the text colour and the background colour you want the cell to change to, then put myclass in place of alt2Active in the three replacements in the instructions ...

HTH :)

[imported_Michael]

I want this badly, but Im having problems with it. Is this for any version?

[Natch]

Works on any vB3 - or should do - what problems are you having ?

Make sure you are carefully following the instructions ...

[imported_Michael]

I am, but that could be the reason. I have 2.3.2

[ryancooper]

Looks Great. I will be adding this later! :)

[Hoffi]

In RC4 you only need to decomment the Line in the Extra-CSS Field in the Style-Options. the Rest is integrated.

[Natch]

In RC4 you only need to decomment the Line in the Extra-CSS Field in the Style-Options. the Rest is integrated.
For vB2, for IE only ... this script should work across the board for vB2 and vB3 ... the templates might change, and the locations to which you need to upload may change, but if you upload the script, point the script src statement to the script and cann the function, it should work ...

[MLBCenter]

Ok I have installed your hack but can't find where in the style manager to change the color when you hover over the forums as on my site the color doesnt change...

forums.mlbcenter.com is the link.

Also is there anyway you take the clickable cell part on the forum home off? I'd rather just the user be able to click on the cell in the forumsdisplay and have to click on the link in forum home...

[Natch]

You need to have two different colours for .alt1 and .alt2 for the colours to change ...

And to remove the clickable cell bit, remove the bit that looks like this onclick="window.location.href='showthread.php?$session[sessionurl]t=$thread[threadid]'" in each part of the mod.

[MLBCenter]

I go the clickable part to where it only clicks on the cell in forumdisplay but I noticed the mouse arrow still shows up and I would like it to be the index finger/hand to show that you can click on the cell. Not sure if this is too much work but thought it might help...

Oh and where do I go to change the colors for .alt1 and .alt2?

[Natch]

I left out the changing of the mouse pointer, partly because I am sticking by the guidelines for Valid XHTML, and partly because I wanted to avoid the overheads of chaning too many styles on the fly. The reason why the other version of this mod causes so many users browsers to become laggy is due to the coder trying to change too many styles in the DOM at one time. This is simpler and is designed to look good, but not do too much.

If you want a different script to do everything any anything, let me know - it's heavier and changes more things at once, but I can share it with you if you want it (but that might be breaking the rules here cos someone else has made a similar mod ...)

To change the colours for .alt1 and .alt2, take a look in your AdminCP -> Styles and Templates -> Main CSS

[MLBCenter]

Which part do I add in the darker grey color that will hover over? There is normal links, visited links,etc.

[Natch]

Look for .alt1 and .alt2 ... remember ?

[MLBCenter]

Yeah I'm in the main css and I see .alt1 and .alt2 in the admincp but do I use "normal links" or "visited links" or "hover links" and I don't know where to put the color in. I guess I'm just confused so if you could be more specific that would be great.

[Natch]

You need to change the background colour - not the link colour or any other colour - the background colour is the one that is the key here ...

[OGT]

I'm getting a Java error in IE6 that says document.getElementById is null or not an object.

I added the code to the headinclude, and uploaded the .js file. I did not make the forumhome changes as i didn't think they would be neccessary for this to work.

Any ideas?

edit: oops, wrong thread. I get this java error when doing your blinking PM code that uses the same .js file. I am also getting a javascript error once ina while here at VBT, so it might be something wrong on my system, though I had another person test it and they got the same error.

[Natch]

only reason you would get an error with this is if you are calling the function chgStyle() without arguments (ie. chgStyle(class,id) is the appropriate function call ) - check all your file edits to confirm that you haven't left out a letter or number somewhere ...

One note for your debugging, does the error happen when you mouseover, or mouseout, or just when you load the page ?

[OGT]

I accidentally posted this to the wrong thread. I haven't editted the mouseovers in this mod, I was installing your other mod that made Gary W welcome bar flash compatible with all browsers, and instead of simply flash, yours makes it trade colors with the breadbox and pmbox.

i have quadruple checked my file edits, and looked at the site in both firefox and IE6, and both give me the same error, line 3 its getting hung up on elementid, saying it has no properties. here is copy/paste from my current install:

here is the error from firefox, its more detailed than the IE error:
Error: document.getElementById("" + elementid + "") has no properties
Source File: http://www.jade-dragon.net/forums/clientscript/vbulletin_chgclass.js
Line: 3

from vbulletin_chgclass.js:
<!--
function changeSty(classpassed,elementid){
document.getElementById(""+elementid+"").className=""+classpassed+"";
}
//-->

my entire headinclude template:(just in case something is getting in the way)
<meta http-equiv="Content-Type" content="text/html; charset=$stylevar[charset]" />
<meta name="generator" content="vBulletin $versionnumber" />
<meta name="keywords" content="$vboptions[keywords]" />
<meta name="description" content="$vboptions[description]" />

<!-- CSS Stylesheet -->
$style[css]
<if condition="is_browser('opera')">
<style type="text/css">
ul, ol { padding-left:20px; }
</style>
</if>
<!-- / CSS Stylesheet -->
<script type="text/javascript">
<!--
var SESSIONURL = "$session[sessionurl]";
var IMGDIR_MISC = "$stylevar[imgdir_misc]";
// -->
</script>

<script type="text/javascript" src="clientscript/vbulletin_global.js"></script>
<if condition="$show['popups']"><script type="text/javascript" src="clientscript/vbulletin_menu.js"></script></if>
<script type="text/javascript" src=$vboptions[bburl]/clientscript/vbulletin_chgclass.js></script>

the section of navbar effected(whole top part just in case):
<script type="text/javascript">
<!--
<if condition="$bbuserinfo['pmunread']">
setInterval("Timer()", 1000);
x=1;
function Timer()
{
set=1;
if (x==0 && set==1)
{
changeSty('alt1','pmbox');
changeSty('alt2','breadBox');
x=1;
set=0;
}
if (x==1 && set==1)
{
changeSty('alt2','pmbox');
changeSty('alt1','breadBox');
x=0;
set=0;
}
}
</if>

function log_out()
{
ht = document.getElementsByTagName("html");
ht[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grays cale=1)";
if (confirm('$vbphrase[sure_you_want_to_log_out]'))
{
return true;
}
else
{
ht[0].style.filter = "";
return false;
}
}
//-->
</script>

<br />

<!-- breadcrumb, login, pm info -->


I am running vB 3.0.1

[Natch]

Only thing I can suggest is that you Quote your javascript external call ...

<script type="text/javascript" src=$vboptions[bburl]/clientscript/vbulletin_chgclass.js></script>

Should be

<script type="text/javascript" src="$vboptions[bburl]/clientscript/vbulletin_chgclass.js"></script>

for validity purposes - might also cause a breakage somewhere as neither this nor the other script has broken on either Firefox or IE6 or Opera for that matter ...

EDIT: I've updeated the original instructions to include the quotes ... and I'll have to upgrade to 3.0.1 at some stage to see if that breaks mine ...

[OGT]

I tried that as well when tinkering, and I also removed the $vboptions[bburl] just to test as well, since none of the other scripts in that template had it included.

The only major hacks I am using are v3 Arcade and vB Advanced. would either of these possibly be causing the issue?

[Natch]

As I said, I haven't upgraded to 3.0.1 - so I don't know what that breaks.

I'll look into it and get back to ya, OK ?

[OGT]

sounds good. there was a navbar change in 3.0.1, ill try to find out too. I went to your demo site and it looks sharp though, so keep up the good work, and thanks for banging through this with me, I appreciate it.

[Natch]

Ahhhh - the NavBar would have caused this to maybe break - my NavBar is modded very heavily so I maybe wouldn't have noticed it even so (as I'm not that fussed about reverting my templates ;))

I'll look into it ;)

[Natch]

I've upgraded to vB3.0.1 and no probs ...

One more suggestion - change the javascript in vbulletin_chgclass.js to match this (it's one letter different):


<!--
function changeSty(classpassed,elementid){
document.getElementsById(""+elementid+"").className=""+classpassed+"";
}
//-->


Let me know how you go - seems to work either way for me ... the functions are translatable in Javascript 1.1 - but like I've said, I've not had problems with the original script - so the only way I can really help more is to take a look @ your board - which I will do ;)

[OGT]

I fixed the prob. I had to add id=pmbox and id=breadbox to the navbar breadcrumb and login tables. i checked some sites and they didn't have these by default either, so I think one of your previous hacks may change the code to this?

on a side note, this is technically not cross browser due tot his, because nutscrape 4.0 doesn't recognize tables as elements, but i dont get why nutscrape 4 is even in the cross browser description. anyone with even an almost up to date browser will have no problems with your code.

thanks for all the help, i didn't apply your most recent change since its working now, but if i have problems when i implement your hovering forums i'll come back and see if that resolves it.

thanks for the great hack and support!

[Natch]

Sorry about that - I didn't think that I had coded those ID's in manually ...

If it's not in by default, I'll add that to the hinstructions for the hack :)

Thanks for the debugging :)

EDIT: those edits are part of the instructions for Gary's hack - there are conditionals there to show the ID statements if the PM box has a PM in it ....

[OGT]

ah! i browsed the thread and saw that gary's wasn't working for mozilla users, so i didnt even open his txt up, and then i saw your thread and just applied that. thanks again, I hope to get the hovering forums that this thread is for up tonight!

[Natch]

Let me know how you go :) just remember you don't need to re-add the script statement :)

[wolfgang3]

very good modification, thank you very much!
Installed*

[Natch]

Glad you like it :)

[HaloImpulse]

easier way to do tis.

change like '//actv cell" to "actv cell" or something like that in the footer template

[Natch]

As stated numerous times, that is IE specific - this is cross-browser.

[Limey-YMR]

It's a nice Hack, reminds me of my first hack on a phpBB board I once ran.

on mouseover the font shrinks though, which causes a bit of unwanted "twitchiness" when moving up and down.

Do you know which font style to edit to prevent this, or is there a little more font definition code to insert into the alt2 code?
cheers.

EDIT: Sorry, this was a dumb question - I had 10px font on the second alternating color in styles, which explains the shrink - please disregard.
cheers! (taking out the shrink sped it up too!)

[Natch]

Glad to hear it - i thought it would be that :D

[Limey-YMR]

Glad to hear it - i thought it would be that :D

I had alt2 set to 10px to keep the reply Quotes nice and small - now that I removed the font size def, all quotes are now large again, (a little ugly IMHO)
is there a way that the bbcode quote can use another stay and maintain a small size, for some reason specifying type="smallfont" in bb_quote template does nothing .
it's a toss up between nice small quotes and this cool mouseover effect, but would be really nice to have the cake and eat it.
cheers

[Natch]

instead of type="smallfont", try class="smallfont"

[Limey-YMR]

instead of type="smallfont", try class="smallfont"

strangely, smallfont wasn't that small :) shrinking it threw a lot of my text out making it too small on the headers, it also had the wrong background color for quote box purposes.
I tried a number of class names but td2 seems to look best for quoting, I'm just going to live with it jumping smaller on the mouseover for now, unless you know of a simple addition to the bbcode_quote to shrink the font on a per use basis.
I use the simple one with no graphic bubbles for all styles;
<div style="margin:20px; margin-top:5px; <if condition="$show['iewidthfix']">width: 100%;</if>">
<div class="smallfont" style="margin-bottom:2px">$vbphrase[quote]:</div>
<table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%">
<tr>
<td class="alt2" style="border:1px inset">
<if condition="$show['username']">
<div><phrase 1="$username">$vbphrase[originally_posted_by_x]</phrase></div>
<div style="font-style:italic">$message</div>
<else />
$message
</if>
</td>
</tr>
</table>
</div>

[Natch]

Try:<div style="margin:20px; margin-top:5px; <if condition="$show['iewidthfix']">width: 100%;</if>">
<div class="alt2" style="margin-bottom:2px">$vbphrase[quote]:</div>
<table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%">
<tr>
<td class="smallfont" style="border:1px inset">
<if condition="$show['username']">
<div><phrase 1="$username">$vbphrase[originally_posted_by_x]</phrase></div>
<div style="font-style:italic">$message</div>
<else />
$message
</if>
</td>
</tr>
</table>
</div>

[Limey-YMR]

I already tried the smallfont alt2 switcheroo, it looks ok and almost as small, but it's not as small as I used to have alt2 (9 px) doesn't look right on forumhome if you make smallfont that small in the style and the background color is wrong on smallfont.

I might try experimenting with your code to use two different styles, other than alt1 and 2 that have similar fonts and colors in my styles, shame you can't define a whole new font definition like mouseover1 mouseover2 for ultimate customization.

Cheers for the code though.

[DES.deViant]

Thanks for the mod Natch :) works great. *clicks install*

For my installation, the Hardwired style had the same alt1 and alt2 backgrounds and changing the second one made the rest of the style look bad, so I changed all of the alt2Active classes to alt1Hover and defined this class in the Additional CSS Definitions at the bottom:
/* ***** styling for hover effect in forums ***** */
.alt1Hover {
inherit-class: alt1Active;
background-color: #647180;
cursor:pointer;
font-size: 12px;
}
The inherit-class gives the new class all the same properties as the original class, then i just change the background and cursor. "pointer" is like "hand", but works in Firefox too. And the font-size didn't inherit correctly in IE, so I had to copy the value to the new class. Hope that helps someone.

[Limey-YMR]

I believe I read that the 3.04 version of Vbulletin now has an Alt3 style, either that or they deleted alt3 as a redundant item.

[PennylessZ28]

how come this works on every page but my forumhome?