-3

I'm wondering if there's a way to create an array of dom elements where all elements can have a particular css, and have the option for one element at a time to not have this class?

For instance I have 2 divs and each has one css class called outer-div and the class I want a single instance to be able to not have is minimized that can be applied in addition to outer-div.

Right Now, I have this javascript:

function oneWindow(){
    var windowList = document.getElementsByClassName('outer-div');
    console.log(windowList);
    var openList = new Array();
    if(windowList.length>0){
        for(var i = 0; i<windowList.length; i++){
            if(windowList[i].className.indexOf('minimize')==-1){
                openList.push(windowList[i]);
            }
        }
    }
    if(openList.length>1){
        for(var j=1; j<openList.length; j++){
            openList[j].className += ' minimize';
        }
    }
    else if(openList.length<1){
        for(var t=0; t<windowList.length; t++){
            //not sure what to put here but should allow one element to not have minimize
        }
    }
}

So in short, I want to allow one Element in the windowList to not have minimize but allow all elements to be able to have minimize and all have the ability to become the single element without minimize.

By The Way, I have to use pure javascript and not jquery.

Christian Grabowski
  • 2,782
  • 3
  • 32
  • 57
  • 1
    If your gonna down vote, can you at least say why? – Christian Grabowski Jul 11 '14 at 19:18
  • 1
    Your question is really unclear. Can you create a [fiddle](http://jsfiddle.net/) with your code plus the HTML so it's clearly what you are trying to do? I think you are saying that your have a bunch of `outer-div` and *one* of them should not have the `minimize` class (or maybe the opposite). "single instance" of a css class just doesn't make sense. – Matt Burland Jul 11 '14 at 19:22
  • Yes that's exactly what I want. Unfortunately, I'm not allowed to post all my code, and there is no actual html, the outer-div is created with a `document.createElement('div');` – Christian Grabowski Jul 11 '14 at 19:24
  • So the question is: [what is the solution to remove/add a class in pure javascript?](http://stackoverflow.com/questions/6787383/what-is-the-solution-to-remove-add-a-class-in-pure-javascript)? – Matt Burland Jul 11 '14 at 19:27
  • Well yeah of course there technically is html, I'm saying there's no hard coded html, and the reason I'm not posting any is because the html can be literally anything, it's irrelevant. And not exact @MattBurland, I've got that part, I'm asking how to be able to remove minimize so long as there's not another element that doesn't have it within `windowList`. I don't know how else to word it. – Christian Grabowski Jul 11 '14 at 19:37
  • @ChristianGrabowski: But haven't you already done that? If `openList` is empty, then all of your `outer-div` have the class `minimize`. So pick one (that's a business logic decision) and remove the `minimize` class. – Matt Burland Jul 11 '14 at 19:41
  • I don't want any one element in particular, I want to have the option of one to remove `minimize`. – Christian Grabowski Jul 11 '14 at 19:43

1 Answers1

1

I think the downvotes are a bit harsh. But anyway, depending on your actual use case javascript may be the way to go. But I'm pretty sure the effect you're looking for can be done using the checkbox hack.

Instead of a checkbox, you can make use of the exclusive behavior of the radiobutton instead. Note that you want to set a default radiobutton as active.

<input type="radio" id="id1" name="radio" checked>
<label for="id1"></label>    
<input type="radio" id="id2" name="radio">
<label for="id2"></label>
<input type="radio" id="id3" name="radio">
<label for="id3"></label>

Using a sibling selector, you can style the element that's not "minimized" (checked). If you use a CSS preprocessor this should be easily be made less repetive.

input#id1:checked + label,
input#id2:checked + label,
input#id3:checked + label {
    height: 100px;
    background-color: skyblue;
}

Finally, there's no way to toggle class names by CSS alone. But there's ways to abuse pseudo-states to emulate some tradtionally javascript driven behavior (like the checkbox hack, which I just learned about myself).

You can see it in action in this fiddle: http://jsfiddle.net/32w8a/

Community
  • 1
  • 1
Svend
  • 7,916
  • 3
  • 30
  • 45