2

I have set of 6 divs, and when I click on each of them, a certain div changes its innerHTML, like some kind of menu. When user hovers over those "buttons" (actually divs), they highlight with CSS's property :hover. There's also :active, when a user is clicking on a "button".

Since the "information" div changes when clicked, I'd like to have the current selected div constantly highlighted, in a whole different color than when on hover. So I used javascript for this. I call a function that changes background color of all of the "buttons" (so I don't have to "remember" which one was clicked), and then changes this div's backgroundColor to appropriate color.

However, now I lost my :hover and :active styles. How to handle this?

Here are code snippets as requested:

function ofarbajSveU999() {
document.getElementById("menubutton1").style.backgroundColor = "#999";
...
document.getElementById("menubutton6").style.backgroundColor = "#999";
}

function showMeaning() {
document.getElementById("information").innerHTML = meaning;
ofarbajSveU999();
document.getElementById("menubutton1").style.backgroundColor = "#ccc";
}

meaning is a string, menubuttonX are 6 div's that act like buttons.

#kotd .menubutton {
float: left;
background-color: #999;
width: 120px;
padding: 2px 0px;
cursor: pointer;
}

#kotd .menubutton:hover {
background-color: #aaa;
}

#kotd .menubutton:active {
background-color: #bbb;
}
Lazar Ljubenović
  • 18,976
  • 10
  • 56
  • 91
  • can you post your codes? this is to make things easier for us to understand and gives solution. – Ron Jul 02 '13 at 11:24
  • I call a function that changes background color... Copy paste the function pls... I like I would say I made an airplane. Why it does not fly? – zozo Jul 02 '13 at 11:26

2 Answers2

5

instead of changing the color with javascript, use javascript to add and remove a class (for example .current) to the active "button" and then style the .current class accordingly in CSS. jQuery would be the most elegant solution to do that using the addClass(),removeClass() or toggleClass() functions.

To explain the idea a bit further:

When you click on a button, you add a class to its class attribute instead of adding inline style properties. This allows to style them via your CSS stylesheet.

In jQuery it is really easy. You can do something like this:

$(".menubutton").click(function () {
    $(".menubutton").removeClass("current");
    $(this).addClass("current");
});

Step-by-step:

you first look for all DOM elements with class menubutton by calling $(".menubutton"). Then by using .click() you trigger an event if one of the menubutton elements gets clicked. The function(){} includes the functions that get executed on click. First

$(".menubutton").removeClass("current");

again gets all objects with class menubutton and removes the class current from any of them that have it. Second

$(this).addClass("current");

adds class current ti "this" ... meaning the clicked object.

This will make the clicked object in the DOM look something like this:

<div class="menubutton current">

In your CSS you can now style the objects that has the additional current class:

.currnet {
    background-color:blue;
    color:white;
}

DEMO

In pure JavaScript this will be a bit more tricky. Maybe this thread can give you some more insight into that:

How to add/remove a class in JavaScript?

Community
  • 1
  • 1
Martin Turjak
  • 20,896
  • 5
  • 56
  • 76
  • Can't use jQuery since... Well, never studied it. Jsut started with HTML, CSS and JS three days ago, so I want to see how these stuff work first. Could you elaborate your solution since I don't understand it? – Lazar Ljubenović Jul 02 '13 at 11:29
  • The `classList` api is *almost* as nice (albeit not fully cross-browser, sadly). – David Thomas Jul 02 '13 at 11:30
  • Thanks in advance. You don't have to create whole jsfiddle though, just a line where I change/toggle style of a div with JS would be nice, with brief explanation how does it work. – Lazar Ljubenović Jul 02 '13 at 11:31
  • @Lazar `document.getElementById(elementId).setAttribute("class", yourClass);` an approach to addClass to your element. This will add the respective css style to the element. – Praveen Jul 02 '13 at 11:32
  • @MartinTurjak I think I'll need jsfiddle example after all, if possible. – Lazar Ljubenović Jul 02 '13 at 11:56
  • I added a jsfiddle showing my jQuery suggestion, and I added a step-by-step explanation of what it does to my answer above. I also included a link to another SO question where you can see some ideas on pure JavaScript solutions. But I encourage you to look into [**jQuery**](http://api.jquery.com/) - it makes life so much easier ^_^ – Martin Turjak Jul 02 '13 at 12:22
  • @MartinTurjak Yeah, I understand your solution, but as I said I never used jQuery before, so... Where exactly do I put jQuery? In a function in `.js`? Or separately? – Lazar Ljubenović Jul 02 '13 at 12:30
  • 1
    **jQuery is just a library of many useful JS functions** ... so first you have to include the jQuery itself somewhere in the head of your html ... so that you can make use of its functions ... you have to include it before you call the functions. Then you can write jQuery functions in a `.js` file or script block, just as you would do with other JS scripts. You can of course combine jQuery functions with any native JS. – Martin Turjak Jul 02 '13 at 12:44
  • 1
    [**You could start maybe with this tutorial**](http://learn.jquery.com/about-jquery/how-jquery-works/) and see how to integrate it into your page [**here**](http://stackoverflow.com/questions/1458349/installing-jquery/1458356#1458356). And you can find an extensive documentation on all the functions on the [**jQuery homepage**](http://api.jquery.com/) and loads of tutorials. Hope this helps ^_^ – Martin Turjak Jul 02 '13 at 12:45
1

You should be using jquery's .hover() function extensively.

Check out http://api.jquery.com/hover/ & http://api.jquery.com/click/

The samples and you can easily do this.

To be exact, you should be using the following two built-in functions :

$(selector).hover(handlerIn, handlerOut);

$(selector).click(event);

Cheers

Roy M J
  • 6,926
  • 7
  • 51
  • 78