Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 13 Feb 2016, 04:10
Aros12 Aros12 is offline
 
Join Date: Jan 2016
Forum Row Highlight Mouseover Effect

I added a highlight feature to my forum so when your mouse scrolls down the various rows within the forum categories it changes color. I like it, but it's merely either an "on" or "off" state.

This is the code:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

You can see it in action at http://www.hobbysquawk.com/

What I am looking for is a gradual process where the onmouseover color appears to fade in quickly, and then fade out when your mouse is no longer within the row. You can see the effect I am looking for at http://www.seahawks.net/

I'm trying to find the CSS code to add to the additional that will allow this subtle effect, versus a simple "on/off" state. Thanks in advance!
Reply With Quote
  #2  
Old 13 Feb 2016, 04:32
Max Taxable's Avatar
Max Taxable Max Taxable is offline
 
Join Date: Feb 2011
It's phpBB3 and they're doing that using javascript.

In this .js file:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Reply With Quote
  #3  
Old 13 Feb 2016, 06:15
Aros12 Aros12 is offline
 
Join Date: Jan 2016
Ah, okay I am not a coder by any stretch...Where would I put that code? Which .js file? Is that even a compatible part of vB5.2? Thanks for the info!
Reply With Quote
  #4  
Old 13 Feb 2016, 07:37
shimei shimei is offline
 
Join Date: Feb 2015
What about subforum lists? This only highlights main categories.
Reply With Quote
  #5  
Old 13 Feb 2016, 14:40
IggyP IggyP is offline
 
Join Date: May 2012
kinda nice...i think i like it but i just wondered maybe it could be better if you could click the hover color to go to the forum.

would that be difficult?
Reply With Quote
  #6  
Old 13 Feb 2016, 15:36
Replicant's Avatar
Replicant Replicant is offline
 
Join Date: Sep 2014
Real name: Mel
Originally Posted by Max Taxable View Post
It's phpBB3 and they're doing that using javascript.
Actually, they're not using javascript for that effect. It's all css and here's the code chunk that does it. Change the ms from 350 to a higher number to make it fade longer.



Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

--------------- Added 13 Feb 2016 at 15:54 ---------------

Originally Posted by IggyP View Post
kinda nice...i think i like it but i just wondered maybe it could be better if you could click the hover color to go to the forum.

would that be difficult?
You can do it with jquery. I have a similar function on my site where I use css to create buttons for the subforums in responsive mode and use jquery to make the button clickable. Here's that code. You can adapt it for clicking the forums.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

__________________
VB5 mods - RepliClock VB4 mods - Member Online Status
Reply With Quote
  #7  
Old 13 Feb 2016, 17:00
Aros12 Aros12 is offline
 
Join Date: Jan 2016
Replicant strikes again! Thank you so much!!

I couldn't get the jquery code to work in additional but that's okay. My main goal was the ease-in/out element.

--------------- Added 13 Feb 2016 at 17:01 ---------------

Originally Posted by shimei View Post
What about subforum lists? This only highlights main categories.

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

That will allow the effect in the subforum lists. Note my original code at the top of this thread. You need both for it to operate in the main page category list as well as the sub forums.
Reply With Quote
  #8  
Old 13 Feb 2016, 19:41
Replicant's Avatar
Replicant Replicant is offline
 
Join Date: Sep 2014
Real name: Mel
Originally Posted by Aros12 View Post
I couldn't get the jquery code to work in additional but that's okay. My main goal was the ease-in/out element.
The jquery code needs to be applied at template hook location footer_before_body_end to work properly and also because jquery is loaded at this point. The jquery code is also only a sample and not targeted towards the actual forum lists. It has to be modified to work for that. Since I am currently pretty busy, I don't have the time to look at it right now. Remind me in March and I'll look at getting it working and making it into an installable product.
__________________
VB5 mods - RepliClock VB4 mods - Member Online Status

Last edited by Replicant; 14 Feb 2016 at 12:55.
Reply With Quote
  #9  
Old 14 Feb 2016, 23:54
Aros12 Aros12 is offline
 
Join Date: Jan 2016
Awesome, thanks!
Reply With Quote
  #10  
Old 16 Feb 2016, 03:05
IggyP IggyP is offline
 
Join Date: May 2012
definatly been having some fun playing with this one...

.subforum-list(hover and regular) is whats needed for that subforum part...this part looks really nice using a texture image btw

.subforum-item lights up the part just around the subforums titles which i combined in for a bit of added effect.....so the subforum list has an image backround, then a color on hover, then when u go to the names, its hover yet another color...pretty nice

it is pretty confusing tho without the click function because it looks like you are selecting a forum when you arent...its nice for now anyway im not sure i can figure that code part out but its no trouble to wait, thanks everyone for infos
Reply With Quote
  #11  
Old 16 Feb 2016, 06:18
shimei shimei is offline
 
Join Date: Feb 2015
Originally Posted by IggyP View Post
definatly been having some fun playing with this one...

.subforum-list(hover and regular) is whats needed for that subforum part...this part looks really nice using a texture image btw

.subforum-item lights up the part just around the subforums titles which i combined in for a bit of added effect.....so the subforum list has an image backround, then a color on hover, then when u go to the names, its hover yet another color...pretty nice

it is pretty confusing tho without the click function because it looks like you are selecting a forum when you arent...its nice for now anyway im not sure i can figure that code part out but its no trouble to wait, thanks everyone for infos
I added a background image and hover over color with opacity. Check it out: https://www.christforums.org


I wouldn't personally use the click function because of all the subforums. It would confuse people, I think, by taking them to the main subforum category listing.
Reply With Quote
  #12  
Old 16 Feb 2016, 06:26
IggyP IggyP is offline
 
Join Date: May 2012
ya i would probly want to disallow click function for subforum-list and subforum-item is practically just the link anyway but could help some...would be nice for the new activity widget, main forums, and topics tho imho..

opacity is a cool idea too thanks for sharing

Last edited by IggyP; 16 Feb 2016 at 06:53.
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 14:03.

Layout Options | Width: Wide Color: