Random border colours

Question

I'm in the middle of theming a tumblr site, and each image posted is contained within a ".photobox" class. Is there a piece of javascript or jQuery i can use to change the "border-color" attribute of ".photobox" in the CSS to a random color - preferably chosen from a list of pre-defined colours? I've found one or two scripts on here but they don't seem to work.

Answer 1

I'm not sure, it may be possible by this http://plugins.jquery.com/node/11985 download zip and see source code of file. It;s for table and colors are random but i think we can give fixed color code

Answer 2

Javascript can not change CSS ruleset. You will have to declare a new CSS ruleset and assign it to DIV or to each image. Like

<script type="text/javascript">
    function changeClass()
    {
        document.getElementById("MyElement").className += " MyClass";
    }
</script>
...
<button onclick="changeClass()">My Button</button>

Answer 3

Auto-changing Intervals

setInterval(function(){

  // define our colors
  var colors = ["#CCCCCC","#333333","#990099"];
  // get a reference to <div id="mybox"></div>
  var myBox  = document.getElementById("mybox");
  // get a random color from list
  var rand   = Math.floor(Math.random()*colors.length);
  // set random color as borderColor
  myBox.style.borderColor = colors[rand];

}, 500); // run twice a second

One-time Random Color

  // define our colors
  var colors = ["#CCCCCC","#333333","#990099"];
  // get a reference to <div id="mybox"></div>
  var myBox  = document.getElementById("mybox");
  // get a random color from list
  var rand   = Math.floor(Math.random()*colors.length);
  // set random color as borderColor
  myBox.style.borderColor = colors[rand];

Many Images within Single Container

  // define our colors
  var colors = ["#CCCCCC","#333333","#990099"];
  // get all of our images within a specified container element
  var images = document.getElementById("container").getElementsByTagName("img");
  // loop through each
  for (var i = 0; i < images.length; i++) {
    // get a random color from list
    var rand   = Math.floor(Math.random()*colors.length);
    // apply random color to current image
    images[i].style.borderColor = colors[rand];
  }

jQuery Solution

$(".photobox").each(function(){
  var colors = ["#CCCCCC","#333333","#990099"];
  var rand = Math.floor(Math.random()*colors.length);
  $(this).css("borderColor", colors[rand]);
});

Answer 4

There you go: http://jsbin.com/afadu

$(function(){ 
  var colors = ['#ff6','#6ff','#f6f','#f66','#66f','#6f6']; 
  $('input').click(function(){ 
      var randomcolor=Math.floor(Math.random()*colors.length); 
      //alert(randomcolor); 
      $('body').css('color',colors[randomcolor]); 
  }); 
});

Answer 5

Based on your comment you want something like this:

function getElementsByClassName ( classname, node ) {
    if ( !node ) {
        node = document.getElementsByTagName ( "body" )[0];
    }

    var a = [];
    var re = new RegExp ( '\\b' + classname + '\\b' );
    var els = node.getElementsByTagName ( "*" );
    for ( var i = 0, j = els.length; i < j; i++ ) {
        if ( re.test ( els[i].className ) ) {
            a.push ( els[i] );
        }
    }

    return a;
}

var photoboxes = getElementsByClassName ( 'photobox' );
var colors = Array ( 'red', 'blue', 'green', 'pink' );
for ( var i = 0; i < photoboxes.length; i++ ) {
    var images = photoboxes[i].getElementsByTagName ( 'img' );

    for ( var j = 0; j < images.length; j++ ) {
        images[j].style.borderColor = colors[Math.floor ( Math.random () * colors.length )];
    }
}

The getElementByClassName was copied from here.