Making a rule stand out from the rest of the rules when I need to

[Wisdom]

I'll be short :D

I want to know how can I make a rule stand out from the rest when I need to, like the phpBB (the official site) forum rules, by clicking a link at the end of a rule and the rule (text) changes color and also gaines a pink-ish background.

Thank you !

[bluewalrus]

It's probably a css styling. Do you have a link to where this can be seen?

[Wisdom]

I hope it's ok if I do leave a link

http://www.phpbb.com/rules/

Click the "#" at any rule you want and you'll see :)

[bluewalrus]

Oh, okay. That is being controlled by javascript. The js adds a class that is styled using css to the div.

The javascript doing it is this


<script type="text/javascript">
// <![CDATA[
/**
* Javascript highlight fragment code
* By David Lewis (Highway of Life) http://startrekguide.com (c) 2007
* Inspired by JavaScript highlight code by David Dorward; (http://dorward.me.uk/software/frag/hi.js)
* copyright 2003 by David Dorward; http://dorward.me.uk
*
* Complies with phpBB3 Coding Standards
* - Correct naming format
* - Correct bracket placement and spacing
* Access code removed to simplify script
* - Refined loops
* - Removed unused classes
*/

var target_fragment = '';

/* Highlight link target if the visitor arrives at the page with a # */
function highlight_load()
{
frag_highlight(location.hash.substring(1));
}

/* Highlight link target from an onclick event after unhighlighting the old one */
function frag_highlight(frag)
{
var fragment = document.getElementById(frag);

if (target_fragment.length > 0 && document.getElementById(target_fragment))
{
document.getElementById(target_fragment).className = '';
}

if (frag.length > 0 && fragment)
{
target_fragment = frag;
fragment.className = 'fragment';
}
}

/* Add onclick events to all <a> with hrefs that include a "#" */
function onclick_highlight()
{
if (document.getElementsByTagName)
{
var alinks = document.getElementById('rules').getElementsByTagName('a');
for (i = 0; i < alinks.length; i++)
{
if (alinks[i].getAttribute('href').indexOf('#') >= 0)
{
var fragment = alinks[i].getAttribute('href').substring(alinks[i].getAttribute('href').indexOf('#') + 1);

var e_onclick_function = "frag_highlight('" + fragment + "')";
var new_function = new Function('e', e_onclick_function);
alinks[i].onclick = new_function;
}
}
}
}

/* Load the script */
window.onload = function() {
highlight_load();
onclick_highlight();
};

// ]]>
</script>

[Wisdom]

I'll look into it when I have the time, thank you bluewalrus ;)