vb.org Archive - [RC3] Hovering changes CSS class

Page 1 of 2

Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.0 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=134)

- - [RC3] Hovering changes CSS class (https://vborg.vbsupport.ru/showthread.php?t=88270)

Natch

02-02-2004 10:00 PM

[RC3] Hovering changes CSS class

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 and partly to see if I could :) :ninja:

Tested on IE6, Mozilla Firebird and Opera 7 ... demo @ 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

02-04-2004 07:23 PM

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

02-04-2004 09:26 PM

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

02-06-2004 08:54 PM

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

[high]* Natch is a Firebird junkie[/high]

Frank

02-06-2004 11:15 PM

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

AN-net

02-07-2004 12:15 AM

cool mod, thanks;)

idwf	02-07-2004 12:45 AM

yeah...liking it. :)

Tony G

02-07-2004 01:17 AM

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

Natch

02-07-2004 03:29 AM

Quote:

Originally Posted by Tony

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

02-07-2004 03:32 AM

Quote:

Originally Posted by Natch

i think he wanks you make a text file of this

Tony G

02-07-2004 07:31 AM

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

02-07-2004 09:05 AM

Updated the first post to include attached instuctions.txt.

Stussi

02-07-2004 10:13 AM

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

02-24-2004 09:44 AM

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

02-24-2004 09:53 AM

nice mod :)

Natch

02-24-2004 09:55 AM

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 says

Code:

onmouseover="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}:

Code:

.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

03-10-2004 01:33 AM

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

Natch

03-10-2004 05:16 AM

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

Make sure you are carefully following the instructions ...

imported_Michael

03-10-2004 10:47 AM

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

ryancooper

03-10-2004 10:54 AM

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

Hoffi

03-10-2004 07:26 PM

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

Natch

03-11-2004 05:06 AM

Quote:

Originally Posted by Hoffi

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

04-11-2004 04:24 AM

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

04-11-2004 05:40 AM

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

Code:

onclick="window.location.href='showthread.php?$session[sessionurl]t=$thread[threadid]'"

in each part of the mod.

MLBCenter

04-11-2004 11:35 AM

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

04-14-2004 09:44 PM

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

04-14-2004 10:32 PM

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

Natch

04-14-2004 10:59 PM

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

MLBCenter

04-19-2004 08:51 PM

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

04-19-2004 09:42 PM

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	04-20-2004 12:43 PM

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

04-20-2004 07:36 PM

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	04-20-2004 07:46 PM

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/cl...in_chgclass.js
Line: 3

from vbulletin_chgclass.js:

HTML Code:

<!--

function changeSty(classpassed,elementid){

        document.getElementById(""+elementid+"").className=""+classpassed+"";

}

//-->

my entire headinclude template:(just in case something is getting in the way)

HTML Code:

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

HTML Code:

<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(grayscale=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

04-20-2004 07:55 PM

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

Code:

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

Should be

Code:

<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	04-20-2004 07:57 PM

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

04-20-2004 08:02 PM

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	04-20-2004 08:06 PM

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

04-20-2004 08:08 PM

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

04-21-2004 03:19 AM

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

HTML Code:

<!--

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	04-21-2004 01:56 PM

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!

All times are GMT. The time now is 09:17 AM.

Page 1 of 2

Show 40 post(s) from this thread on one page

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.02155 seconds Memory Usage 1,838KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (5)bbcode_code_printable (4)bbcode_html_printable (3)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: