CODEWITHSUNDEEP
javascriptcssgetelement
KittenCodings
KittenCodings

Reputation: 585

How to change the CSS for all elements with a common identifier using Javascript?

I'm relatively new to javascript, but I searched trough google and stackoverflow for the past several hours and I still can't get this to work, it looks like it's something that should be simple but I'm not sure what I'm overlooking....

I'm trying to make a checkbox to disable my website's onhover tooltips by moving them all away when the checkbox is ticked (since I couldn't apply visibility:hidden; on hover with js), but I can't seem to make the checkbox affect more than a single tooltip.

I'm using GetElementById() which seems to only make use of one element by that id, but I couldn't get GetElementsByClassName() nor GetElementsByName() to work for some reason, even though as far as I can tell from w3schools I should be able to just replace my GetElementById() with the latter two, why does this happen and what should I do instead?

Here's my code: http://jsfiddle.net/wwX3k/1/

    function optioninfovisibilitytoggle() {
    if (optioninfovisibility.checked) { document.getElementById('optioninfo').style.left='9001%'
    } else { document.getElementById('optioninfo').style.left='12%' }
} optioninfovisibilitytoggle();

I need all the tooltips to move aside, by inline id or class or name or whatever, as long as all of them move aside rather than just the top one

Thanks in advance for any help

Upvotes: 2

Views: 71

Answers (3)

Pevara
Pevara

Reputation: 14310

Allow me to add a few words to the correct answers that have already been given:

  • If hiding the tooltips is al you are going to do, I would not advise you to use jQuery as already suggested. It is a very useful toolkit that is definitely worth exploring, but adding +90k to your page for such a trivial task would be serious overkill.
  • You are right when you say that js is not able to access the :hover css, but there are several mouse events that you can use to overwrite this styling. Have a look at mouseover for example.
  • I'm a big fan of only using js when things can't be done with pure css, and in this case I believe that is possible. It does require you to move the checkbox up the DOM so it comes before al your tooltips, but you could still position it anywhere on your page by making it absolute. If you then combine :checked with ~ you can hide your tooltips without a single line of javascript. Have a look at your updated fiddle to see what I mean.

Upvotes: 1

user888734
user888734

Reputation: 3897

document.getElementsByClassName is going to return an array of elements, so to apply your style, you'll have to iterate through the array and set each one:

http://jsfiddle.net/nGTN5/3/

When performing DOM manipulation like this, you'll save yourself a ton of bother by using jQuery - http://jquery.com/

Then it would be as simple as:

$('.optioninfo').css('left', '9001%')

And that will do them all.

Upvotes: 2

dube
dube

Reputation: 5019

You gave multiple elements the same IDs. This is not allowed, IDs are unique. Your browser works around your faulty HTML by giving the first element the id and ignoring the following ID definitions.

You can give them an specific class (which you already did) to identify all objects you want to perform your operation on.

I recommend using jQuery, which would reduce the work to a minimum:

$(".optioninfo").toggle();

or instead of getElementById(), you use getElementsByTagName(), which returns an array of matching elements. You probably need to check if those "span" tags are those you want by checking their css class.

function optioninfovisibilitytoggle() {
    var allelems =document.getElementsByTagName('span');
    if (optioninfovisibility.checked) {
        for(i=0; i< allelems.length;i++){
               if((' ' + allelems[i].className + ' ').indexOf(' optioninfo ') > -1) {
              allelems[i].style.left='9001%'
            }
        }
    } else { 
            for(i=0; i< allelems.length;i++){
                  if((' ' + allelems[i].className + ' ').indexOf(' optioninfo ') > -1) {
                      allelems[i].style.left='12%' 
                  }
            }
    }
}

Upvotes: 1

Related Questions