Forum Row Highlight Mouseover Effect

[Aros12]

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:

.topic-item:hover {background-color:#f1f2f3;}

.forum-item:hover {background-color:#f1f2f3;}

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!

[Max Taxable]

It's phpBB3 and they're doing that using javascript.

In this .js file:

/** * phpBB3 forum functions */ /** * Window popup */ function popup(url, width, height, name) { if (!name) { name = '_popup'; } window.open(url.replace(/&amp;/g, '&'), name, 'height=' + height + ',resizable=yes,scrollbars=yes, width=' + width); return false; } /** * Jump to page */ function jumpto() { var page = prompt(jump_page, on_page); if (page !== null && !isNaN(page) && page == Math.floor(page) && page > 0) { if (base_url.indexOf('?') == -1) { document.location.href = base_url + '?start=' + ((page - 1) * per_page); } else { document.location.href = base_url.replace(/&amp;/g, '&') + '&start=' + ((page - 1) * per_page); } } } /** * Mark/unmark checklist * id = ID of parent container, name = name prefix, state = state [true/false] */ function marklist(id, name, state) { var parent = document.getElementById(id); if (!parent) { eval('parent = document.' + id); } if (!parent) { return; } var rb = parent.getElementsByTagName('input'); for (var r = 0; r < rb.length; r++) { if (rb[r].name.substr(0, name.length) == name) { rb[r].checked = state; } } } /** * Resize viewable area for attached image or topic review panel (possibly others to come) * e = element */ function viewableArea(e, itself) { if (!e) return; if (!itself) { e = e.parentNode; } if (!e.vaHeight) { // Store viewable area height before changing style to auto e.vaHeight = e.offsetHeight; e.vaMaxHeight = e.style.maxHeight; e.style.height = 'auto'; e.style.maxHeight = 'none'; e.style.overflow = 'visible'; } else { // Restore viewable area height to the default e.style.height = e.vaHeight + 'px'; e.style.overflow = 'auto'; e.style.maxHeight = e.vaMaxHeight; e.vaHeight = false; } } /** * Set display of page element * s[-1,0,1] = hide,toggle display,show * type = string: inline, block, inline-block or other CSS "display" type */ function dE(n, s, type) { if (!type) { type = 'block'; } var e = document.getElementById(n); if (!s) { s = (e.style.display == '' || e.style.display == type) ? -1 : 1; } e.style.display = (s == 1) ? type : 'none'; } /** * Alternate display of subPanels */ function subPanels(p) { var i, e, t; if (typeof(p) == 'string') { show_panel = p; } for (i = 0; i < panels.length; i++) { e = document.getElementById(panels[i]); t = document.getElementById(panels[i] + '-tab'); if (e) { if (panels[i] == show_panel) { e.style.display = 'block'; if (t) { t.className = 'activetab'; } } else { e.style.display = 'none'; if (t) { t.className = ''; } } } } } /** * Call print preview */ function printPage() { if (is_ie) { printPreview(); } else { window.print(); } } /** * Show/hide groups of blocks * c = CSS style name * e = checkbox element * t = toggle dispay state (used to show 'grip-show' image in the profile block when hiding the profiles) */ function displayBlocks(c, e, t) { var s = (e.checked == true) ? 1 : -1; if (t) { s *= -1; } var divs = document.getElementsByTagName("DIV"); for (var d = 0; d < divs.length; d++) { if (divs[d].className.indexOf(c) == 0) { divs[d].style.display = (s == 1) ? 'none' : 'block'; } } } function selectCode(a) { // Get ID of code block var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0]; // Not IE and IE9+ if (window.getSelection) { var s = window.getSelection(); // Safari if (s.setBaseAndExtent) { s.setBaseAndExtent(e, 0, e, e.innerText.length - 1); } // Firefox and Opera else { // workaround for bug # 42885 if (window.opera && e.innerHTML.substring(e.innerHTML.length - 4) == '<BR>') { e.innerHTML = e.innerHTML + '&nbsp;'; } var r = document.createRange(); r.selectNodeContents(e); s.removeAllRanges(); s.addRange(r); } } // Some older browsers else if (document.getSelection) { var s = document.getSelection(); var r = document.createRange(); r.selectNodeContents(e); s.removeAllRanges(); s.addRange(r); } // IE else if (document.selection) { var r = document.body.createTextRange(); r.moveToElementText(e); r.select(); } } /** * Play quicktime file by determining it's width/height * from the displayed rectangle area */ function play_qt_file(obj) { var rectangle = obj.GetRectangle(); if (rectangle) { rectangle = rectangle.split(','); var x1 = parseInt(rectangle[0]); var x2 = parseInt(rectangle[2]); var y1 = parseInt(rectangle[1]); var y2 = parseInt(rectangle[3]); var width = (x1 < 0) ? (x1 * -1) + x2 : x2 - x1; var height = (y1 < 0) ? (y1 * -1) + y2 : y2 - y1; } else { var width = 200; var height = 0; } obj.width = width; obj.height = height + 16; obj.SetControllerVisible(true); obj.Play(); } /** * Check if the nodeName of elem is name * @author jQuery */ function is_node_name(elem, name) { return elem.nodeName && elem.nodeName.toUpperCase() == name.toUpperCase(); } /** * Check if elem is in array, return position * @author jQuery */ function is_in_array(elem, array) { for (var i = 0, length = array.length; i < length; i++) // === is correct (IE) if (array[i] === elem) return i; return -1; } /** * Find Element, type and class in tree * Not used, but may come in handy for those not using JQuery * @author jQuery.find, Meik Sievertsen */ function find_in_tree(node, tag, type, class_name) { var result, element, i = 0, length = node.childNodes.length; for (element = node.childNodes[0]; i < length; element = node.childNodes[++i]) { if (!element || element.nodeType != 1) continue; if ((!tag || is_node_name(element, tag)) && (!type || element.type == type) && (!class_name || is_in_array(class_name, (element.className || element).toString().split(/\s+/)) > -1)) { return element; } if (element.childNodes.length) result = find_in_tree(element, tag, type, class_name); if (result) return result; } } var in_autocomplete = false; var last_key_entered = ''; /** * Check event key */ function phpbb_check_key(event) { // Keycode is array down or up? if (event.keyCode && (event.keyCode == 40 || event.keyCode == 38)) in_autocomplete = true; // Make sure we are not within an "autocompletion" field if (in_autocomplete) { // If return pressed and key changed we reset the autocompletion if (!last_key_entered || last_key_entered == event.which) { in_autocompletion = false; return true; } } // Keycode is not return, then return. ;) if (event.which != 13) { last_key_entered = event.which; return true; } return false; } /** * Usually used for onkeypress event, to submit a form on enter */ function submit_default_button(event, selector, class_name) { // Add which for key events if (!event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode)) event.which = event.charCode || event.keyCode; if (phpbb_check_key(event)) return true; var current = selector['parentNode']; // Search parent form element while (current && (!current.nodeName || current.nodeType != 1 || !is_node_name(current, 'form')) && current != document) current = current['parentNode']; // Find the input submit button with the class name //current = find_in_tree(current, 'input', 'submit', class_name); var input_tags = current.getElementsByTagName('input'); current = false; for (var i = 0, element = input_tags[0]; i < input_tags.length; element = input_tags[++i]) { if (element.type == 'submit' && is_in_array(class_name, (element.className || element).toString().split(/\s+/)) > -1) current = element; } if (!current) return true; // Submit form current.focus(); current.click(); return false; } /** * Apply onkeypress event for forcing default submit button on ENTER key press * The jQuery snippet used is based on http://greatwebguy.com/programming/dom/default-html-button-submit-on-enter-with-jquery/ * The non-jQuery code is a mimick of the jQuery code ;) */ function apply_onkeypress_event() { // jQuery code in case jQuery is used if (jquery_present) { jQuery('form input[type=text], form input[type=password]').live('keypress', function (e) { var default_button = jQuery(this).parents('form').find('input[type=submit].default-submit-action'); if (!default_button || default_button.length <= 0) return true; if (phpbb_check_key(e)) return true; if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { default_button.click(); return false; } return true; }); return; } var input_tags = document.getElementsByTagName('input'); for (var i = 0, element = input_tags[0]; i < input_tags.length ; element = input_tags[++i]) { if (element.type == 'text' || element.type == 'password') { // onkeydown is possible too element.onkeypress = function (evt) { submit_default_button((evt || window.event), this, 'default-submit-action'); }; } } } /** * Detect JQuery existance. We currently do not deliver it, but some styles do, so why not benefit from it. ;) */ var jquery_present = typeof jQuery == 'function';

[Aros12]

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!

[shimei]

What about subforum lists? This only highlights main categories.

[IggyP]

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?

[Replicant]

Originally Posted by Max Taxable

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.

.topic-item,.forum-item{
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
}

--------------- Added [DATE]1455378896[/DATE] at [TIME]1455378896[/TIME] ---------------

Originally Posted by IggyP

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.

$('.subforum-info').css('cursor', 'pointer');
$(".subforum-info").click(function() {
    window.location = $(this).find("a").attr("href");
    return false;
});

[Aros12]

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 [DATE]1455382906[/DATE] at [TIME]1455382906[/TIME] ---------------

Originally Posted by shimei

What about subforum lists? This only highlights main categories.

.forum-item:hover {background-color:#f1f2f3;}

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.

[Replicant]

Originally Posted by Aros12

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.

[Aros12]

Awesome, thanks!

[IggyP]

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