2011-07-25 4 views
0

Ok, cela pourrait être une question étrange.Bouton sur le site Web qui apparaît au hasard

J'ai été chargé de créer un bouton sur le site Web de notre société qui apparaît au hasard. Mon patron est venu me voir en montrant CNN comme exemple. Il a dit qu'il y a un bouton de retour qui n'est pas toujours sur le site et qu'il apparaît aléatoirement. Ma conjecture est, ce n'est pas aléatoire, que l'élément est réglé pour afficher basé sur une condition étant remplie.

Je suis allé à CNN et je ne trouve pas le bouton de retour, mais il m'assure qu'il l'a vu plusieurs fois (comme il visite régulièrement le site). Mais il ne peut donner aucune idée de ce qui pourrait le faire apparaître.

Quelqu'un a déjà fait quelque chose comme ça? Je n'ai jamais fait quelque chose comme ça, donc je ne sais pas dans quelle condition mettre cela.

Toute aide serait grandement appréciée. Merci beaucoup.

+3

«J'ai été chargé de créer un bouton sur notre site Web de l'entreprise qui apparaît au hasard » - gawd s'il vous plaît noooooo .... !! –

+1

si rnd()> 0.5 'affiche le bouton aléatoire affolant' –

+0

@Mitch Wheat sonne comme un cauchemar de l'interface utilisateur – marto

Répondre

0

Si vous allez le faire en javascript il suffit d'utiliser Math.random() pour générer un nombre aléatoire entre 0 et 1.

Ensuite, votre condition peut simplement utiliser que:

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

(Réglage de la. 1 pour s'adapter comment vous souvent comme le bouton pour afficher)

0

vous pouvez faire:

if (Math.random() > 0.5){ 
    $('#button').hide();//hide the button 
} 
1
var randFactor = 0.5; 
if (Math.random() < randFactor) { 
    // show button 
} 
2

Créez un tableau d'éléments dans lequel vous souhaitez attacher un bouton, puis saisissez-en un au hasard et ajoutez votre bouton.

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

function showButton() { 

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

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

} 

Ceci n'a pas été testé, mais devrait fonctionner. S'il ne vérifie pas le code Math.random() * arr.length. Il se peut que vous deviez ajouter 1 pour que les trois éléments soient inclus, mais je ne le pense pas.

0

Il existe un certain nombre de plugins de commentaires jQuery pour faire exactement ce que vous avez décrit. Certains des plugins les plus populaires sont Feedback Badge et UI.ImFeedback. Ces plugins se trouvent généralement à droite ou à gauche de la page, dans une position fixe, ce qui permet à l'utilisateur de soumettre un commentaire de manière non intrusive.

Vous pouvez personnaliser ces plug-ins pour afficher ou masquer basé sur un certain nombre de conditions prédéfinies, mais généralement la raison pour laquelle vous demandez à l'utilisateur des commentaires tomberait dans les catégories suivantes:

  1. La page est dans le test alpha ou bêta
  2. le contenu que l'utilisateur visualise est sujette à controverse ou une nouvelle
  3. l'utilisateur retourne régulièrement à la page spécifique

J'ai créé un jsFiddle sur la façon d'implémenter un bouton de feedback via html/css here.La mise en page ajoute simplement une petite div à asseoir dans une position fixe sur la page, en utilisant un peu de css:

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

Et le 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;} 

j'ai ajouté une certaine logique javascript simple pour cacher la commentaires en cas de besoin. Vous pourriez ajouter une certaine logique à votre site pour cacher/afficher le div #feedback en cas de besoin. Les fonctions ressemblent à ceci:

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

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

Vous pouvez simplement appeler ceux-ci lorsque certaines des conditions ci-dessus (ou autre) sont remplies sur votre page.

Il y a aussi un bon article sur la mise en œuvre des boutons de rétroaction here

Questions connexes