Home/ Questions/Q 8812281
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T03:34:12+00:00

I have a jsfiddle here to illustrate my question http://jsfiddle.net/ttmt/DgnLd/1/ It’s just a simple

  • 0

I have a jsfiddle here to illustrate my question

http://jsfiddle.net/ttmt/DgnLd/1/

It’s just a simple button with a hidden div. The button slide toggles the hidden div.

I would like to have div filled with a random color each time it opens.

At the moment it’s picking two random colors – when the div is opening and when the finished opening.

How can I stop the second color and just have one.

    <!DOCTYPE html>
    <html>
      <head>
      <title>Title of the document</title>

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

      <style type="text/css">
        •{
          margin:0;
          padding:0;
        }
        #wrap{
            margin:20px;
        }
        #btn{
            width:100px;
            height:50px;
            background:red;
            color:white; 
            padding:10px; 
            margin:0 0 50px 0;        
        }
        #infoDiv{
            width:500px;
            height:300px;
            display:none;
        }
      </style>

      </head>

    <body>

      <div id="wrap">

          <a href="#" id="btn">CLICK</a>

          <div id="infoDiv">

          </div>                    

      </div>

      <script>

        $(document).ready(function(){

            alert('here');

            var color_arr = ['#6faab6','#80c3d1','#888888','#d8e420','#21b4e4','#e4b115','#33ace4'];

            $('#infoDiv').hide();

            $('#btn').bind('click', function(){
                $('#infoDiv').slideToggle('slow', function(){
                    var ranNum = Math.floor(Math.random()*color_arr.length);
                    var col = color_arr[ranNum];
                    $('#infoDiv').css({'background': col});
                });
            });    

        });

      </script>

    </body>

    </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    $(document).ready(function(){

var color_arr = ['#6faab6','#80c3d1','#888888','#d8e420','#21b4e4','#e4b115','#33ace4'];

$('#infoDiv').hide();

$('#btn').bind('click', function(){
    var ranNum = Math.floor(Math.random()*color_arr.length);
        var col = color_arr[ranNum];
    $('#infoDiv:hidden').css({'background': col});
    $('#infoDiv').slideToggle('slow');
});

    });​

    Try that — I’ve moved your Random color picker out of the SlideToggle callback as that will only run once the slide was finished which from your question I assumed you didn’t want.

    It also only changes the color of the info div if it’s hidden by checking the visible selector, you can read more about that here

    Let me know if that works for you

    • 0