More efficient way to change styles using Javascript?

Question

I have an about section, where I've split it up into multiple sections loaded by JavaScript for easier reading. I'd like the side navigation for this to have a different background color if it is both hovered over and if it is the one selected, and ALSO to have a border right with a unique color for each option. I have it working with no problems, but I'm just wondering if there is a more efficient way to do this than the way I currently am.

In a nutshell, the HTML:

<nav>   
            <p id="bout" onclick="bout()">About Us</p>
            <p id="mish" onclick="mish()">Our Mission</p>
            <p id="team" onclick="team()">The Team</p>
            <p id="how" onclick="how()">How It Works</p>
            <p id="poli" onclick="poli()">Policies</p>
        </nav>

        <div class="actual">

            <div id="about">
            <h2>About Us</h2>
            <p>We are a conglomerate of hoodlums.</p>
            </div>

        </div><!-- end actual -->

And the JS:

function bout() {
    document.getElementById("about").innerHTML= '<h2>About Us</h2><p>We are a conglomerate of hoodlums.</p>';
    document.getElementById("bout").style.borderRight='3px solid red';
    document.getElementById("mish").style.borderRight='none';
    document.getElementById("team").style.borderRight='none';
    document.getElementById("how").style.borderRight='none';
    document.getElementById("poli").style.borderRight='none';

    document.getElementById("bout").style.backgroundColor='ghostwhite';
    document.getElementById("mish").style.backgroundColor='bisque';
    document.getElementById("team").style.backgroundColor='bisque';
    document.getElementById("how").style.backgroundColor='bisque';
    document.getElementById("poli").style.backgroundColor='bisque';

}

function mish() {
    document.getElementById("about").innerHTML = '<h2>Mission</h2><p>Our mission is to rid the world of dust bunnies.</p>';
    document.getElementById("bout").style.borderRight='none';
    document.getElementById("mish").style.borderRight='3px solid orange';
    document.getElementById("team").style.borderRight='none';
    document.getElementById("how").style.borderRight='none';
    document.getElementById("poli").style.borderRight='none';

    document.getElementById("bout").style.backgroundColor='bisque';
    document.getElementById("mish").style.backgroundColor='ghostwhite';
    document.getElementById("team").style.backgroundColor='bisque';
    document.getElementById("how").style.backgroundColor='bisque';
    document.getElementById("poli").style.backgroundColor='bisque';
}

As you can see, it's quite cumbersome to have to explicitly turn off an on each style when clicked. The main key though is to have each border-right be a different color.

Here is a jsfiddle with the whole thing, but for some reason it's not actually acknowledging the JS: http://jsfiddle.net/4CrhD/

Additional random question: Is it possible to link to this page with a different piece of content loaded than about, for example, can I link to this page with "mish()" loaded instead of whats in the HTML?

You had the code run on ready not in the head: Updated fiddle: jsfiddle.net/4CrhD/1 — epascarello
– epascarello, Commented Jul 18, 2013 at 15:17

epascarello · Accepted Answer · 2013-07-18 15:14:22Z

1

The best way would be to use CSS. Add remove a class on a parent element and have the CSS apply the right rules.

body.mish #bout{
   border-right : 3px solid red,
}

body.bout #bout{
   border-right : 3px solid blue,
}

answered Jul 18, 2013 at 15:14

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

damon Over a year ago

I think I know what you're saying, but I'm a bit confused. Couldn't I just make the classes with unique border-rights, and then addClass and removeClass on click? What is the purpose of having "body.mish #bout"?

Paul Over a year ago

@user1925805 If you add the class to the body or some other parent element, you don't need to add it to any of the other elements. Just that one change. If you don't have other classes on your body tag that you want to keep it could be as simple as: function mish(){ document.body.className = 'mish'; }. Then when you call mish(), all your CSS rules that start with body.ish will apply, so in the CSS you could have body.mish #bout{ ... }, body.mish #mish{ ... }, body,mish #team { ...}, etc

epascarello Over a year ago

You can just simplify it to have a class on the element instead of using the exact ids. It is up to you how you write the CSS. You do not have to use the body, you can use an element that contains all of the elements. You just need something that triggers the CSS to adjust and you are not setting tons of things in your JavaScript code.

cr0 · Accepted Answer · 2013-07-18 16:14:44Z

1

~~Yes. You need to divide between html and styling. Use CSS!~~

Then you can change styles e.g. with jQuery.css():

$('#mish').css({
   'border-right':    '3px solid orange',
   'background-color':'ghostwhite'
});

Of course you can define styles in a class. A class describes the styling definition for all elements using a class.

nav > p {
    border-right: none;
    background-color: bisque;
}

.active {
    border-right: 3px solid red;
    background-color: ghostwhite;
}

If a button is clicked you can dynamically add and remove a classes with:

$('nav > p').click(function() {
   $('nav > p').removeClass('active');
   $(this).addClass('active')
});

Because code duplication is bad (and I don't like to set the full innerHTML), you can create a dynamic page like:

pages = {
   'bout': {
       'id':       'about',
       'headline': 'About Us',
       'body':     'We are a conglomerate of hoodlums.'
    }
}

Extend the above code to

$('nav > p').click(function() {
   $('nav > p').removeClass('active');
   $(this).addClass('active')

   if (pages[$(this).attr('id')]) {
       var page = pages[$(this).attr('id')];
       $('.actual').first().empty();
       var container = $('<div>', { 'id': page.id });
       container.append($('<h2>', { 'html': page.headline })); 
       container.append($('<p>', { 'html': page.body })); 
       $('.actual').first().append(container);
   }
});

Have look at this jsfiddle for a working example

Addressing your "random" question

Additional random question: Is it possible to link to this page with a different piece of content loaded than about, for example, can I link to this page with "mish()" loaded instead of whats in the HTML?

If you want to have links pointing to this page you can parse the window.location.hash object and link with links like page.html#mish.

To set default a "page" we extend our pages object to provide such a information: http://jsfiddle.net/Eu36g/6/

edited Jul 18, 2013 at 16:14

answered Jul 18, 2013 at 15:16

cr0

6175 silver badges17 bronze badges

4 Comments

Fabian Barney Over a year ago

OP is already styling with CSS. He's just setting it through JavaScript (like jQuery does it, too). Nevertheless recommending jQuery is a valid option here - imho.

cr0 Over a year ago

Yip, I got this too late. So I edited my answer to provide at least some additional value ;)

epascarello Over a year ago

Where is the jQuery tag on this post?

cr0 Over a year ago

You can pedal a bike or let 100+ hp do the job... Pointing the user to a more comfortable way to reach his goal can't be bad.

user · Accepted Answer · 2013-07-18 15:14:25Z

0

Define your classes in the CSS : bout, mish, about, poli ... For each one put the CSS you want. After that, in the javascript, you just have to change the class of the element (add class or change class, or whatever) and the new CSS will apply

example

document.getElementById("bout").className = "otherclass"

answered Jul 18, 2013 at 15:14

user

5451 gold badge11 silver badges32 bronze badges

Collectives™ on Stack Overflow

More efficient way to change styles using Javascript?

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related