How can I select random element with an array using jQuery

Question

I am re-making the google I'm feeling lucky animation and I'm just wondering how I can display one of these events on my button but make it so it randomly chooses its height. They way it works is that I have a button with a max height and I hid the overflow. The html and css are fine, I just want the jQuery to randomly select one of those elements.

$('.mainbutton:nth-child(2)').hover(function() { //jQuery
  var list = $(".mainbutton ul").toArray();
  var elemlength = list.length;
  var randomnum = Math.floor(Math.random()*elemlength);
  var randomitem = list[randomnum];

  $('.'+ randomitem ).css('bottom', '-170px');
  $('.'+ randomitem ).css('bottom', '-130px');
  $('.'+ randomitem ).css('bottom', '-100px');
  $('.'+ randomitem ).css('bottom', '-70px');
  $('.'+ randomitem ).css('bottom', '-40px');
  $('.'+ randomitem ).css('bottom', '-10px');
  $('.'+ randomitem ).css('bottom', '-180px');
  $('.'+ randomitem ).css('bottom', '-220px');
  $('.'+ randomitem ).css('bottom', '-250px');
  $('.'+ randomitem ).css('bottom', '-170px');
  $('.'+ randomitem ).css('bottom', '-170px');
});


    .mainbutton {         /*css*/
        padding: 0px 0px;
        background: #f2f2f2;
        border-width: 0px;
        border-style: solid;
        border-radius: 2px;
        font-weight: bold;
        font-size: 12px;
        margin: 29 6px;
        color: #757575;
        overflow: hidden;
        position: relative;
        height: 34px;
        width: 144px;
        box-sizing: inherit;
    }
    .mainbutton:nth-child(1) {
        bottom: 13px;
    }
    .mainbutton ul li {
        list-style-type: none;
        padding: 8px 10px;
        text-align: left;
    }
    .mainbutton ul {
        padding-left: 10%;
        position: absolute;
        bottom: -160px;
        width: 144px;
    }
    .one {



<div id="search-buttons" align="center">    <!-- html -->
        <button class="mainbutton">Google Search</button>
        <button class="mainbutton">
          <ul>
            <li>I'm Feeling Stellar</li>
            <li>I'm Feeling Artistic</li>
            <li>I'm Feeling Wonderful</li>
            <li>I'm Feeling Curious</li>
            <li>I'm Feeling Hungry</li>
            <li>I'm Feeling Lucky</li>
            <li>I'm Feeling Doodley</li>
            <li>I'm Feeling Generous</li>
            <li>I'm Feeling Trendy</li>
            <li>I'm Feeling Puzzled</li>
            <li>I'm Feeling Playful</li>
          </ul>
        </button>

When you say "doesn't work," what do you mean? Please be specific — Kai, Aug 11 '17 at 20:36
Would say this is more an unclear question than a dupe. Are you trying to get a random `ul` element and set `bottom` css on that `ul`, or something else? i don't understand what the repeated `.css()` calls are meant to be doing. — Rhumborl, Aug 11 '17 at 20:38
Basically, when I hover over I want it to go to one of those events at random but when I do with that specific code nothing happens and all I get from google dev tools is a syntax error. — Hey, Aug 11 '17 at 20:41
I'm re making the google "I'm Feeling Lucky" button animation if that helps clear anything up. — Hey, Aug 11 '17 at 20:45

mplungjan · Answer 1 · 2017-08-12T13:29:55.163

There are several things.

cache the selection
use animate and chain them

var pos = {
  "Playful": -10,
  "Puzzled": -40,
  "Trendy": -70,
  "Generous": -100,
  "Doodley": -130,
  "Lucky": -160,
  "Hungry": -190,
  "Curious": -220,
  "Wonderful": -250,
  "Artistic": -280,
  "Stellar": -310
}

$(function() {
  $('.mainbutton:nth-child(2)').hover(
    function() {
      var $ul = $(".mainbutton ul"),
        $lis = $ul.children(),
        $li = $lis.eq(Math.floor(Math.random() * $lis.length)),
        name = $li.text().replace(/I'm Feeling /, "");

      $ul.css("bottom", pos[name] + "px"); // using name 
      $ul.animate({'bottom': '-170px'})
        .animate({'bottom': '-130px'})
        .animate({'bottom': '-100px'})
        .animate({'bottom': '-70px'})
        .animate({'bottom': '-40px'})
        .animate({'bottom': '-10px'})
        .animate({'bottom': '-180px'})
        .animate({'bottom': '-220px'})
        .animate({'bottom': '-250px'})
        .animate({'bottom': '-170px'})
        .animate({'bottom': '-170px'});
    },
    function() {
      $(".mainbutton ul").stop().animate({
        'bottom': pos["Lucky"] + "px"
      });
    }

  );
});

  .mainbutton {
  /*css*/
  padding: 0px 0px;
  background: #f2f2f2;
  border-width: 0px;
  border-style: solid;
  border-radius: 2px;
  font-weight: bold;
  font-size: 12px;
  margin: 29 6px;
  color: #757575;
  overflow: hidden;
  position: relative;
  height: 34px;
  width: 190px;
  box-sizing: inherit;
}

.mainbutton:nth-child(1) {
  bottom: 13px;
}

.mainbutton ul li {
  list-style-type: none;
  padding: 8px 10px;
  text-align: left;
}

.mainbutton ul {
  padding-left: 10%;
  position: absolute;
  bottom: -160px;
  width: 190px;
}

.one {

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="search-buttons" align="center">
  <!-- html -->
  <button class="mainbutton">Google Search</button>
  <button class="mainbutton">
    <ul>
      <li>I'm Feeling Stellar</li>
      <li>I'm Feeling Artistic</li>
      <li>I'm Feeling Wonderful</li>
      <li>I'm Feeling Curious</li>
      <li>I'm Feeling Hungry</li>
      <li>I'm Feeling Lucky</li>
      <li>I'm Feeling Doodley</li>
      <li>I'm Feeling Generous</li>
      <li>I'm Feeling Trendy</li>
      <li>I'm Feeling Puzzled</li>
      <li>I'm Feeling Playful</li>
    </ul>
  </button>

Is there a way to make the button start at "I''m feeling lucky" then go to ONLY ONE of the elements randomly then go back to the I'm feeling lucky button on Mouse leave Instead of making it go through all of them at once. The same way google has it. — Hey, Aug 12 '17 at 08:03
Probably... I have not had time to investigate. Just wanted to post something that runs — mplungjan, Aug 12 '17 at 08:06
If you have time to that would be awesome, if not that's okay. Thanks :) — Hey, Aug 12 '17 at 08:09

Kishor Malakar · Answer 2 · 2017-08-12T09:33:50.520

0

Adding to the answer by @mplungjan

Store the margin in an array

var margin= ['-170px', '-130px', '-100px', '-70px', '-40px', '-10px', '-180px', '-220px', '-250px', '-170px', '-170px'];

Select random index of the margin

var margin_index= Math.round(Math.random() * 10);

Set random margin

$ul.animate({'bottom': margin[margin_index]});

edited Aug 12 '17 at 09:33

answered Aug 12 '17 at 09:26

Kishor Malakar

81
1
6

That is not what he wants to do. He wants the button to look like a slot machine – mplungjan Aug 12 '17 at 12:34

How can I select random element with an array using jQuery

2 Answers2