[solved] Same Color to multiple divs in one class

exgaudt · by **exgaudt** on Thu Feb 04, 2010 11:26 pm

Hello everybody! I Have really confusing problem... I want to change color simultaneously in multiple different div blocks and i want them to have one color!

Here is my not working code:

Line number On/Off | Expand/Contract | Select all

 
<html>
<head>
</head>
<body>
<script type="text/javascript" src="mootools2.js"></script>
<script type="text/javascript">
    
       window.addEvent('domready', function(){
 
  function rgb() {
 
    var r = $random(0, 220);
    var g = $random(0, 220);
       var b = $random(0, 220);
 
    var rgb = [r,g,b].rgbToHex();
 
       return rgb;
  }
 
 
   $("#colarray .barcode").addEvents({
    'mouseover': function(){
 
         this.morph({
                 'background-color': rgb()
         });
    },
    'mouseleave': function(){
         this.morph({
                 'background-color': rgb()
         });
    }
  });
     }); 
</script>
 
<style>
#colarray {
width: 200px;
height: 200px;
border: 1px;
}
.barcode {
background-color: #251151;
}
 
 
</style>
 
<div id="colarray">
test 
<div class="barcode">test2</div><br>
<div class="barcode">test222</div><br>
<div class="barcode">test2222</div><br>
 
</div>
</body>
</html>
 
 

But if i use this $('barcode') instead of $("#colarray .barcode")
And one div block will have id="barcode" (this id will be determined in style) So, this block wil change the color... So is there any possibility to make it work as i want?

fiote · by **fiote** on Fri Feb 05, 2010 2:42 am

First, you're using one dollar. When you use $, mootools search for ONE element with the ID passed.

Fix it adding one more dollar =). Now it will search for any elements within the parameters (using ids and classes, just like you did).

Line number On/Off | Expand/Contract | Select all

$("#colarray .barcode") // one dollar, wrong
$$("#colarray .barcode") // two dollars, right

Ok, now its working.

But, by your post i GUESS that you want all them to morph to the same color when you move-over one of them. If its right, try this:

Line number On/Off | Expand/Contract | Select all

window.addEvent('domready', function(){
 
    function rgb() { // your function
        var r = $random(0, 220);
        var g = $random(0, 220);
        var b = $random(0, 220);
        var rgb = [r,g,b].rgbToHex();
        return rgb;
    }
 
    var allBars = $$("#colarray .barcode"); // getting all barcodes
    
    allBars.addEvents({ // adding the events 
        'mouseover' : function(){ allBars.morph({'background-color': rgb()}); }, // morphin ALL them
        'mouseleave': function(){ allBars.morph({'background-color': rgb()}); }  // to the new color
    });
    
});

exgaudt · by **exgaudt** on Fri Feb 05, 2010 11:26 pm

Thank you very much! Your solution worked perfectly for me! Last thing left - to correct and to make fixed ranges of color

[solved] Same Color to multiple divs in one class

[solved] Same Color to multiple divs in one class

Re: Same Color to multiple divs in one class

Re: Same Color to multiple divs in one class

Who is online