jQuery random blockquote

Question

I've spent the past 2 hours looking for and testing various solutions to this problem but to little success so I'm resigned to asking for help.

I would like to build an array of quotes which each have citations and and a link, to be pulled at random. I don't need any thing more than for them to change upon page refresh.

However, I have some pretty tasty CSS to style blockquote and cite.

Here's some example HTML to illustrate how the content from the array would fit within a quote:

<blockquote>
  <p>A line of oversize watches that can offer many of the attributes of premium luxury watches at an affordable price.
  </p>
  <cite>&mdash; 
    <a href="http://www.horozima.com/2012/07/terranaut-xl-50mm.html" target="_blank">Horozima
    </a>
  </cite>
</blockquote>

The intended location for this code is a Big Cartel product (template) page with automatically generated content for each product. So, without some randomizing JS the same quote would be on every product page.

what exactly are you asking? what does CSS have to do with this? where's your code that shows what you've tried (not what the output needs to look like)? — Dan O, May 20 '13 at 19:41
Two great answers below, I'll get back later with my choice and any further comments. I chose not to include my trial JS because I thought it was better to gather (better) ideas than to correct what probably wasn't the best solution. — Dale Rollinson, May 21 '13 at 17:57

Nick Andriopoulos · Answer 1 · 2013-05-20T20:36:44.810

3

Depending on your strengths, you can do it "quick and dirty" or as a proper solution.

The proper solution would be to have server side some code that pulls a random row from a database, and renders it as above. Since your tags have nothing to do with it, I'll skip on to

the quick and dirty solution, which is to have a javascript array of quotes and links, and a random one shown:

$(document).ready(function() {
  var questions = [
      {q: 'This is question 1', l: 'http://this.is.link1', a: 'Test' },
      {q: 'This is question 2', l: 'http://this.is.link2' , a:'Another'}
  ];

  var i = Math.floor((Math.random()*questions.length));

  $('blockquote p').html(questions[i].q);
  $('blockquote a').attr('href', questions[i].l);
  $('blockquote a').html(questions[i].a);
});

You can see that live in a jsFiddle. It assumes only a single blockquote is present, but it can be easily extended. You can output a single quote in your HTML to make it look ok when JS is disabled.

edited May 20 '13 at 20:36

answered May 20 '13 at 19:53

Nick Andriopoulos

10,313
6
32
56

Bah. You beat me to the fiddle. :0) – Corion May 20 '13 at 20:00
I believe `.attr('src'` should be `.attr('href'` – Corion May 20 '13 at 20:06
@Corion: true, too used in using this type of code for images I'm afraid. Edited. – Nick Andriopoulos May 20 '13 at 20:07
Just noticed another: `questions.length` is already 1 greater than the number of quotes, so adding +1 occasionally sends you out of bounds. – Corion May 20 '13 at 20:09
Thanks for your suggestion, I'll come back once I've experimented with this. – Dale Rollinson May 21 '13 at 17:54

Corion · Accepted Answer · 2013-05-20T20:31:42.767

2

Execute JavaScript on DOMReady to use the random() function to generate a random number. If you multiply this number by a value you will get a random number between 0 and the value (but not including the value itself). If you put the quotes into a JSON array, you can use the array's .length property for the value you multiply by since the number of items in the array is one larger than the index of the last item. This will generate a random number that is one of the indexes of the array.

After this, use jQuery's text() function to replace the text of the paragraph and citation tags to display the quote you randomly selected.

Here is an example: http://jsfiddle.net/sWvGp/

HTML:

<blockquote id="randomquote">
    <p></p> <cite>&mdash; <a href="#" target="_blank"></a></cite>
</blockquote>

Javascript:

var myQuotes = [{
    quote: "To err is human; to forgive, divine.",
    cite: "Alexander Pope",
    url: "http://www.example.com"
}, {
    quote: "Reports of my death have been greatly exaggerated.",
    cite: "Mark Twain",
    url: "http://www.example.com"
}, {
    quote: "A line of oversize watches that can offer many of the attributes of premium luxury watches at an affordable price.",
    cite: "Horozima",
    url: "http://www.horozima.com/2012/07/terranaut-xl-50mm.html"
}];

var randomQuote = Math.floor(Math.random() * myQuotes.length)

$('p', '#randomquote').text(myQuotes[randomQuote].quote);
$('cite a', '#randomquote').attr('href', myQuotes[randomQuote].url).text(myQuotes[randomQuote].cite);

edited May 20 '13 at 20:31

answered May 20 '13 at 19:51

Corion

663
3
14

Thanks for your suggestion, I'll come back once I've experimented with this. I like the way you've organised the quotes. – Dale Rollinson May 21 '13 at 17:55
Both examples gained the desired result, but I liked the way you set out the array. Sadly, I don't think either is possible to use because of a conflict with these two JS sources necessary for the Big Cartel store: http://cache1.bigcartel.com/themes/sexy/javascripts/prototype.js and http://dl.dropboxusercontent.com/u/52548810/Themes/3925/script.js – Dale Rollinson May 23 '13 at 16:52
You can avoid conflicts with other libraries using [`jQuery.noConflict()`](http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/). You can alias the `$()` command to something like `$jQ()`. Hopefully this will solve your issue. – Corion May 23 '13 at 20:38
I have just tested my extensive but offline trial and that's working. Will feedback tomorrow once I update the Big Cartel site. Thanks Corion! – Dale Rollinson May 24 '13 at 23:59
Just to let you known, everything worked great once uploaded to the Big Cartel server. Thanks a lot Corion. – Dale Rollinson May 27 '13 at 19:01

jQuery random blockquote

2 Answers2

Linked