1 (edited by CodeXP 2005-06-05 17:19)

Topic: [Style mod] Dynamic TR Hover Effect

##
##
##        Mod title:  TR hover effect
##
##      Mod version:  1.0
##   Works on PunBB:  1.2.x
##     Release date:  2005-06-05
##           Author:  CodeXP (codexp@tasarinan.com)
##
##      Description:  Add a hover effect to the forum and topic list (changes the background).
##
##   Affected files:  index.php
##                    header.php
##                    viewforum.php
##
##       Affects DB:  No
##
##            Notes:  With a fully CSS2 compatible browser, you could just have
##                    used "tr:hover { background-color: <whatever> }" but that
##                    effect will not work in Internet Explorer.
##                    This simple hack will add the same effect, just using
##                    Javascript instead.
##                    The hack will look for a .php file in your template folder,
##                    prefixed with your CSS of choice (will only add the hover
##                    effect if the file exist.
##                    If you want the effect added for the Oxygen style, create
##                    and upload a .php file named 'Oxygen_hcolor.php' to your
##                    'include/template/' folder. 
##                    If you want to add the effect to the Mercury style, just
##                    name the .php file 'Mercury_hcolor.php'
##                    The same naming scheme applies to any style.
##                    See included example file for more details.
##
##       DISCLAIMER:  Please note that "mods" are not officially supported by
##                    PunBB. Installation of this modification is done at your
##                    own risk. Backup your forum database and any and all
##                    applicable files before proceeding.
##
##


#
#---------[ 1. UPLOAD ]-------------------------------------------------------
#

Oxygen_hcolor.php to include/template/


#
#---------[ 2. OPEN ]---------------------------------------------------------
#

header.php

#
#---------[ 3. FIND (line: 37) ]---------------------------------------------
#

// Load the template

#
#---------[ 4. BEFORE, ADD ]-------------------------------------------------
#

// TR hover hack 
if (file_exists(PUN_ROOT.'include/template/'.$pun_user['style'].'_hcolor.php'))
        @include (PUN_ROOT.'include/template/'.$pun_user['style'].'_hcolor.php');
    else
        $hcolor = '';
// End TR hover hack


#
#---------[ 5. OPEN ]---------------------------------------------------------
#

index.php

#
#---------[ 6. FIND (line: 127) ]---------------------------------------------
#

                 <tr<?php if ($item_status != '') echo ' class="'.$item_status.'"'; ?>>

#
#---------[ 7. REPLACE WITH ]-------------------------------------------------
#

                 <tr<?php if ($item_status != '') echo ' class="'.$item_status.'"'; ?> onmouseover="this.style.backgroundColor='<?php echo $hcolor; ?>'" onmouseout="this.style.backgroundColor=''">

#
#---------[ 8. OPEN ]---------------------------------------------------------
#

viewforum.php


#
#---------[ 9. FIND (line: 208) ]---------------------------------------------
#

                <tr<?php if ($item_status != '') echo ' class="'.trim($item_status).'"'; ?>>


#
#---------[ 10. REPLACE WITH ]---------------------------------------------------
#

                <tr<?php if ($item_status != '') echo ' class="'.trim($item_status).'"'; ?> onmouseover="this.style.backgroundColor='<?php echo $hcolor; ?>'" onmouseout="this.style.backgroundColor=''">

#
#---------[ 11. SAVE/UPLOAD ]-------------------------------------------------
#

This is just a simple hack I needed for a style I'm working on. Just thought that perhaps someone else would like it to smile I first thought of hard-coding the effect into the regular php files, but that kinda messed things up with my other styles. The solution? This little hack.

[DEMO]

[Download]

Re: [Style mod] Dynamic TR Hover Effect

Beautiful!
Was wondering when something like this would come out for punBB.

The only way this would be complete is if you could click on the 'hover-state' background and be taken to the correct place, as if the entire cell was a link.

Re: [Style mod] Dynamic TR Hover Effect

perhaps a neater fix would be http://www.vladdy.net/Demos/IEPseudoClassesFix.html that way the colour could be kept in the stylesheets?

Re: [Style mod] Dynamic TR Hover Effect

Connorhd wrote:

perhaps a neater fix would be http://www.vladdy.net/Demos/IEPseudoClassesFix.html that way the colour could be kept in the stylesheets?

True, but I never really liked that method.. besides, it's a little "overkill" to do that, when all I wanted was a hover effect for the table rows smile

Re: [Style mod] Dynamic TR Hover Effect

its probably less overkill though, since the htc is only loaded once, and only on IE whereas your js is on every tr on every browser

Re: [Style mod] Dynamic TR Hover Effect

erissiva wrote:

Beautiful!
Was wondering when something like this would come out for punBB.

The only way this would be complete is if you could click on the 'hover-state' background and be taken to the correct place, as if the entire cell was a link.

That's actually simple to add. Here's a new version of the mod with linking table cells like you wanted smile

##
##
##        Mod title:  TR hover effect with "linking table cells!"
##
##      Mod version:  1.0.1
##   Works on PunBB:  1.2.x
##     Release date:  2005-06-05
##           Author:  CodeXP (codexp@tasarinan.com)
##
##      Description:  Add a hover effect to the forum and topic list (changes the background).
##
##   Affected files:  index.php
##                    header.php
##                    viewforum.php
##
##       Affects DB:  No
##
##            Notes:  With a fully CSS2 compatible browser, you could just have
##                    used "tr:hover { background-color: <whatever> }" but that
##                    effect will not work in Internet Explorer.
##                    This simple hack will add the same effect, just using
##                    Javascript instead.
##                    The hack will look for a .php file in your template folder,
##                    prefixed with your CSS of choice (will only add the hover
##                    effect if the file exist.
##                    If you want the effect added for the Oxygen style, create
##                    and upload a .php file named 'Oxygen_hcolor.php' to your
##                    'include/template/' folder. 
##                    If you want to add the effect to the Mercury style, just
##                    name the .php file 'Mercury_hcolor.php'
##                    The same naming scheme applies to any style.
##                    See included example file for more details.
##                    
##                    This updated version also makes the table cells act as links!
##
##       DISCLAIMER:  Please note that "mods" are not officially supported by
##                    PunBB. Installation of this modification is done at your
##                    own risk. Backup your forum database and any and all
##                    applicable files before proceeding.
##
##


#
#---------[ 1. UPLOAD ]-------------------------------------------------------
#

Oxygen_hcolor.php to include/template/


#
#---------[ 2. OPEN ]---------------------------------------------------------
#

header.php

#
#---------[ 3. FIND (line: 37) ]---------------------------------------------
#

// Load the template

#
#---------[ 4. BEFORE, ADD ]-------------------------------------------------
#

// TR hover hack 
if (file_exists(PUN_ROOT.'include/template/'.$pun_user['style'].'_hcolor.php'))
        @include (PUN_ROOT.'include/template/'.$pun_user['style'].'_hcolor.php');
    else
        $hcolor = '';
// End TR hover hack


#
#---------[ 5. OPEN ]---------------------------------------------------------
#

index.php

#
#---------[ 6. FIND (line: 127) ]---------------------------------------------
#

                 <tr<?php if ($item_status != '') echo ' class="'.$item_status.'"'; ?>>

#
#---------[ 7. REPLACE WITH ]-------------------------------------------------
#

                 <tr<?php if ($item_status != '') echo ' class="'.$item_status.'"'; ?> onmouseover="this.style.backgroundColor='<?php echo $hcolor; ?>'" onmouseout="this.style.backgroundColor=''" onclick="window.location.href='viewforum.php?id=<?php echo $cur_forum['fid']; ?>'">

#
#---------[ 8. OPEN ]---------------------------------------------------------
#

viewforum.php


#
#---------[ 9. FIND (line: 208) ]---------------------------------------------
#

                <tr<?php if ($item_status != '') echo ' class="'.trim($item_status).'"'; ?>>


#
#---------[ 10. REPLACE WITH ]---------------------------------------------------
#

                <tr<?php if ($item_status != '') echo ' class="'.trim($item_status).'"'; ?> onmouseover="this.style.backgroundColor='<?php echo $hcolor; ?>'" onmouseout="this.style.backgroundColor=''" onclick="window.location.href='viewtopic.php?id=<?php echo $cur_topic['id']; ?>'">

#
#---------[ 11. SAVE/UPLOAD ]-------------------------------------------------
#

Enjoy!

Re: [Style mod] Dynamic TR Hover Effect

Connorhd wrote:

its probably less overkill though, since the htc is only loaded once, and only on IE whereas your js is on every tr on every browser

Perhaps... but in any case, it's not like the tiny JS would slow things down.

The thing I don't like about that method you linked to is, what happens when a new version of IE is released? How do I know that the htc would break anything?

Re: [Style mod] Dynamic TR Hover Effect

i would think it would work fine in IE7 its not like its gonna be much different t IE6

Re: [Style mod] Dynamic TR Hover Effect

you can you do the same thing with css, its very versatile. this works the same

tr:hover td.tcl,tr:hover td.tc2,tr:hover td.tc3,tr:hover td.tcr{background-color: #DEDFDF}

10

Re: [Style mod] Dynamic TR Hover Effect

Gizzmo wrote:

you can you do the same thing with css, its very versatile. this works the same

tr:hover td.tcl,tr:hover td.tc2,tr:hover td.tc3,tr:hover td.tcr{background-color: #DEDFDF}

Yes you can, but that won't work in Internet Explorer...at all.

Re: [Style mod] Dynamic TR Hover Effect

it will if you do the little fix i said wink

12

Re: [Style mod] Dynamic TR Hover Effect

Connorhd wrote:

it will if you do the little fix i said wink

pfft, you're not going to convince me to like it tongue wink

Re: [Style mod] Dynamic TR Hover Effect

whats the disadvantage of my way? or the advantage of your way?

14 (edited by CodeXP 2005-06-05 21:15)

Re: [Style mod] Dynamic TR Hover Effect

Connorhd wrote:

whats the disadvantage of my way? or the advantage of your way?

For the use I had in mind, none of the tricks have any real advantages compared to each other (aside from one of them being a hack, which I don't really like) as far as I'm conserned...but of course, it you were to apply hover effects to a lot of different elements, the HTC method would possibly be a bit easier to implement (less code).

That said, I don't like to use hacks for only specific browsers. In this case, the HTC will most likely work just fine with IE7, but by using the little javascript instead, I know for sure that everything will work no matter what browser upgrades you do smile

Re: [Style mod] Dynamic TR Hover Effect

bah i give up tongue (but i don't give in my way is still better wink)

16

Re: [Style mod] Dynamic TR Hover Effect

Connorhd wrote:

bah i give up tongue (but i don't give in my way is still better wink)

Hehe wink

I guess it doesn't really matter what method one prefers to use, as long as it does what you want.. Let's just hope that IE7 will be a better, so that none of the methods will be needed smile

Re: [Style mod] Dynamic TR Hover Effect

it probably won't afaik theres no plans to add pseudo class support to all tags, they are just fixing a few of the most annoying bugs + png support + tabs so far i think

anyway you can't really not support IE6 until IE8 is out wink

18

Re: [Style mod] Dynamic TR Hover Effect

Connorhd wrote:

it probably won't afaik theres no plans to add pseudo class support to all tags, they are just fixing a few of the most annoying bugs + png support + tabs so far i think

anyway you can't really not support IE6 until IE8 is out wink

Well, I guess proper PNG support is a start. I'm rather sick of the outdated gif format wink If only the majority of users would switch to a good browser, then perhaps they (MS) would start to really improve their outdated pos product..

Re: [Style mod] Dynamic TR Hover Effect

Nice. I think this is something a lot of people like. Personally, I don't like it though. I always click around on pages, selecting text and whatnot.

"Programming is like sex: one mistake and you have to support it for the rest of your life."