Button on website that appears at random

Ok, this might be a weird question.

I was tasked with creating a button on our company website that randomly appears. My boss came to me pointing out CNN as an e开发者_Go百科xample. He said there is a feedback button that is not always on the site and that it randomly appears. My guess is, it's not random, that the element is set to display based on a condition being met.

I have gone to CNN and I can't find the feedback button, but he assures me he has seen it a couple of times (as he visits the site regularly). But he can't offer any insight as to what might make it appear.

Anyone ever do something like this? I've never done something like this, so not sure what condition to set this to.

Any help would be greatly appreciated. Thanks a lot.

Create an array of elements where you want to attach a button and then randomly grab one and add your button.

var arr = ['#navigation', '#help', '#etc'];

function showButton() {

    var random = Math.random() * arr.length;

    $(arr[random]).append("<button id='someId'>My Button Text</button>");

}

This has not been tested, but should work. If it doesn't check the Math.random() * arr.length code. You may need to add 1 to it so it will get to all 3 items, but I don't think so.

var randFactor = 0.5;
if (Math.random() < randFactor) {
    // show button
}

If you're going to do it in javascript just use Math.random() to generate a random number between 0 and 1.

Then your condition can just use that:

if(Math.random() < .1) ...

(Adjusting the .1 to fit how often you would like the button to show)

You could do:

 if (Math.random() > 0.5){
    $('#button').hide();//hide the button
 }

There are quite a few jQuery feedback plugins out there to do just what you described. Some of the more popular plugins are Feedback Badge and UI.ImFeedback. These plugins usually sit to the right or left of the page in a fixed position that allows the user a non-obtrusive way to submit feedback.

You can customize these plugins to display or hide based on any number of pre-defined conditions, but usually the reason you would ask the user for feedback would fall into the following categories:

1. The page is in alpha or beta testing
2. The content the user is viewing is controversial or new
3. The user regularly returns to the specific page

I created a jsFiddle on how to implement a feedback button via html/css here. The layout simply adds a small div to sit in a fixed position on the page, using a bit of css:

<div id="feedback">
     <a href="#">
         <img src="http://mediaformations.com/examples/images/feedback.png" />
     </a>
 </div>

And the css:

#feedback a{ display:block; position:fixed; top:200px; right:-1px; background:green; padding:7px 5px;
 border:1px solid #030;
 border-left-color:#060;
 border-top-color:#090;
 }
 #feedback a:hover{background:#030;border:1px solid #030;}

I added some simple javascript logic to hide the feedback when needed. You could add some logic to your site to hide/display the #feedback div when needed. The functions look like this:

$("#hide").click(function() {
  $("#feedback").hide('slow', function() {
    alert('Feeback toggled.');
  });
});

$("#display").click(function() 
  $("#feedback").show('slow', function() {
    alert('Feeback toggled.');
  });
});

You can simply call these when some of the conditions above (or otherwise) are met on your page.

There's also a good article on implementing feedback buttons here