solved Site Builder Menu Editor OnClick JavaScript Text Color Code

DFN
DFN
@dfn
8 years ago
35 posts
What is the correct OnClick JavaScript code to use with the menu editor to change the text to a #99CC00 color?

Thanks!
onclick.jpg
onclick.jpg  •  152KB


updated by @dfn: 06/06/16 09:59:09PM
michael
@michael
8 years ago
7,697 posts
onclick is an action that takes place when the link is clicked:
http://www.w3schools.com/jsref/event_onclick.asp

Its got nothing to do with styling. For styling alter the CSS. you can add extra classes to the elements if the default ones are not enough via the menu.tpl file in sitebuilder.
DFN
DFN
@dfn
8 years ago
35 posts
Thanks for your response @michael

I had found one example from the w3 schools link you provided using JavaScript with an onclick event to change a text color.

I thought it might be a possible to use an onclick event in the menu editor to change the "active_color" of the menu text link to a value="#99CC00".
michael
@michael
8 years ago
7,697 posts
its not the right way go go about it. The onclick event happens when you click the link.

If you have these links:
aaa | bbb | ccc | ddd | eee

and you are on page aaa and click the link to go to page bbb then when you click the link even if that changed the color of bbb the page would refresh and the color would be gone when the page loaded.

One use for onclick could be to open a different site in a separate window, ie:
window.open('https://www.jamroom.net/the-jamroom-network/forum/new_posts');return false;
would, when clicked, open this forum in a new window instead of going to the target URL. If for whatever reason that is something you wanted to do.

What you're after is a class on the LI that contains the menu. You can add one like this to the menu.tpl of site builder
<li {if $_post.module_url == $_l0.menu_url}class="active"{/if}>

thats line 2 of
/modules/jrSiteBuilder/templates/menu.tpl

so the whole thing looks like this:
{foreach $_list as $_l0}
<li {if $_post.module_url == $_l0.menu_url}class="active"{/if}>
    <a href="{if $_l0.menu_url|substr:0:4 === 'http'}{$_l0.menu_url}{else}{$jamroom_url}/{$_l0.menu_url}{/if}" onclick="{$_l0.menu_onclick}" class="menu_0_link" data-topic="{$_l0.menu_url}">{$_l0.menu_title}<span class="notifications none">0</span></a>
    {if is_array($_l0._children)}
    <ul>
        {foreach $_l0._children as $_l1}
        <li>
            <a href="{if $_l1.menu_url|substr:0:4 === 'http'}{$_l1.menu_url}{else}{$jamroom_url}/{$_l1.menu_url}{/if}" onclick="{$_l1.menu_onclick}" >{$_l1.menu_title}</a>
            {if is_array($_l1._children)}
            <ul>
            {foreach $_l1._children as $_l2}
                <li><a href="{if $_l2.menu_url|substr:0:4 === 'http'}{$_l2.menu_url}{else}{$jamroom_url}/{$_l2.menu_url}{/if}" onclick="{$_l2.menu_onclick}" >{$_l2.menu_title}</a></li>
            {/foreach}
            </ul>
            {/if}
        </li>
        {/foreach}
    </ul>
    {/if}
</li>
{/foreach}

Then you will have a .active class and you can apply CSS to that class.

I'll get this added in to the Site Builder module too, because its a good idea.
DFN
DFN
@dfn
8 years ago
35 posts
Fantastic - thank you so much for your detailed explanation with code!

This is another example of the great support from the Jamroom Team :)