Change CSS through web item

Kathleen Jacobs

I'm trying to create a plugin that selecting a web-item toggles some CSS.

I was able to set it up so selecting the web-item from the drop down would trigger an alert popup.

But when trying to add CSS, it doesn't seem to work. Just takes me back to the home page.

My JS file for testing:

AJS.toInit(function(){
    AJS.$('#website_link').click(function(){
        document.getElementById('jira').style.backgroundColor = "blue";
    });
});

 called by:

<web-section key="my_links_section" name="My Links Main Section" location="my_links_link" weight="10"/>

<web-item key="my_links_link" name="Link on My Links Main Section" section="system.top.navigation.bar" weight="47">
    <label>My Company</label>
    <link linkId="my_links_link"/>
</web-item>

<web-item key="website_link" name="Company Web Site" section="my_links_link/my_links_section" weight="10">
    <label>Web Site</label>
    <link linkId="website_link"/>
</web-item> 

 

Bryan Robison

You need to add a "return false;" to your click handler to prevent the default link behavior:

AJS.toInit(function(){
    AJS.$('#website_link').click(function(){
document.getElementById('jira').style.backgroundColor = "blue";
        return false;
    });
});