Random Quote Generator (Like in Minecraft)

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

Random Quote Generator (Like in Minecraft)

Postby Da Bag Man » June 1st, 2012, 1:26 pm

Ever said to yourself, I wish I had random quotes floating around on my page like in minecraft. Well you're in luck, not only will I give what you'll need I'll also tell you how it works in complete idiot speech!

Below is the code without the template so if you decide to use this all you'll get is floating quotes.
Code: Select all
<html>
<head>
<title> Quote Test </title>

<style type="text/css">
   #Quote {
      color: red;
      font-family: 'Comic Sans MS';
      text-align: center;
      -webkit-transform: rotate(10deg);
      -moz-transform: rotate(10deg);   
      font-size: 1.2em;
         display: inline;
         position: absolute;
         top: 50px;
         right: 200px;
   }
</style>
</head>
<body>
<div id="Quote"></div>

<script type="text/javascript">
var quotes = [
"Quote 1",
"Quote 2",
"Quote 3",
"Quote 4",
"Quote 5",
"Quote 6",
"Quote 7"
];

function rndQuote() {
var whichQuote=Math.floor(Math.random()*(quotes.length));
document.getElementById('Quote').innerHTML = quotes[whichQuote];
}

window.onload = function() { rndQuote(); }
</script>
</body>
</html>

Try copy and pasting this in notepad, saving it as test.html, and opening it in a web browser. It should be slightly rotated and it should give you a random quote (quote 1-7) every time you refresh. Now let's see how it works...

Code: Select all
<style type="text/css">
   #Quote {
      color: red;
      font-family: 'Comic Sans MS';
      text-align: center;
      -webkit-transform: rotate(10deg);
      -moz-transform: rotate(10deg);   
      font-size: 1.2em;
                        display: inline;
         position: absolute;
         top: 50px;
         right: 200px;
   }
</style>

This is what makes it red and slightly rotated, the CSS. You can change the color, font, size, degrees of rotation whenever you want by changing this. Read how it works to figure out how.

How it works.
I'll come back to why Quote has a pound sign in front of it in a little bit. (If you're bored all ready just skip to the bottom where I tell you how to put it in your template) These things { } tell the browser style for #Quote! Then it reads all the rules to the browser. I want the quote to be red, in comic sans font, rotated 10 degrees, and a font size of .2em. You can put font size in pixels (px) if you want but Internet Explorer doesn't support px, (That's why you never use Internet Explorer) Think of em as a fraction 1.5em means 1 and a half of the default text size. 2em means twice the default text size. The color is simple just type in a color, but beware browsers don't take all colors (Research hex codes if you want to know how to use any color on the color wheel). Just don't mess with the font family, it's hard to get a good one that works in all browsers unless you're using Google fonts, plus comic sans is a good neutral font. The -webkit-transform and -moz-transform are complicated to explain why we use them all you really want to know is that it's incredibly annoying when you have to input style changes twice. If you want to change rotation all you have to do is change both numbers, it works using 360 degrees, so if you said 180 degrees the text would be upside down. You can change text-align to right or left but it won't change anything. Hopefully you know what text-align is and if not I advise you learn. And the last four lines, they're pretty important, they tell the browser where to put the random quote, say display fixed to tell the browser you're going to be moving the element around, top: 50px; means put it 50 pixels from the top, right: 200px; means put it 200pixels to the right, and display: inline means that the element takes up only as much width as it needs, and does not force new lines (< from http://www.webdesignfromscratch.com/html-css/css-block-and-inline/)

This is the HTML
Code: Select all
<div id="Quote"></div>

Yup that's it. In CSS id is the same as #, so when we want to give a style to a div (division) with an id of Quote in the HTML we go to the CSS and say
#Quote {
*insert rules here*
}
So how on earth are we supposed to get a random quote in there you ask? With java script I anwser.

Code: Select all
<script type="text/javascript">
var quotes = [
"Quote 1",
"Quote 2",
"Quote 3",
"Quote 4",
"Quote 5",
"Quote 6",
"Quote 7"
];

function rndQuote() {
var whichQuote=Math.floor(Math.random()*(quotes.length));
document.getElementById('Quote').innerHTML = quotes[whichQuote];
}

window.onload = function() { rndQuote(); }
</script>

How it works.
So this is really complicated and it's a little hard to explain so yeah, here goes. Var (variable) quotes equals all the quotes you could possibly get, function rndQuote() starts a function, functions are basically actions, you program inside of them what action you want them to do. The ( ) is there to symbolize an argument, an argument is a heated debate, no just kidding an argument is... is... I used to know, but I forgot, look up java script argument and Google will tell you. So var whichQuote is a random number between 1 and however many quotes there are, in this case 7. (quotes.length can also be a number) Then it says go to the document, or the page, and it says getElementById('Quote') so all elements, in this case a div, with an id of quote (remember <div id="Quote"></div>). .innerHTML means place whatever's next in the HTML in this case in our div (So it isn't empty!) and what's next is whichQuote, which is a number, and then that number picks what quote to use. You then close your function, it's action is complete it has generated a random quote, BUT, the function hasn't been executed yet, it's just been created. So now we have the last line
window.onload = function() { rndQuote(); }
All it says is that when the page loads execute this function, not that complicated.

Now for the moment you've undoubtedly been waiting for! how to actually use this!
Just go to overall layout find where it says <body> and paste this
Code: Select all
<style>
#Quote {
      color: red;
      font-family: 'Comic Sans MS';
      text-align: center;
      -webkit-transform: rotate(10deg);
      -moz-transform: rotate(10deg);   
      font-size: 1.2em;
         display: inline;
         position: absolute;
         top: 50px;
         right: 200px;
   }
</style>

<div id="Quote"></div>

<script type="text/javascript">
var quotes = [
"Quote1",
"Quote2",
"Quote3",
"Quote4",
"Quote5",
"Quote6",
"Quote7"
];

function rndQuote() {
var whichQuote=Math.floor(Math.random()*(quotes.length));
document.getElementById('Quote').innerHTML = quotes[whichQuote];
}

window.onload = function() { rndQuote(); }
</script>

Change the quotes, play around with the CSS (If you're using default template make top: 85px; and right: 50px; the rest of you will have to play around with it) If you want to add a new quote just throw in a comma after quote7 and add a "Quote8" (remember the last one dosen't have a comma the others do.)

Finally check out my site for an example. (Not really I want you to fav it) Post in comments or PM me if you want me to try and do something else really cool, like making you able to customize comments.
Image
User avatar
Da Bag Man
 
Posts: 7
Joined: May 31st, 2011, 11:43 am

Re: Random Quote Generator (Like in Minecraft)

Postby Ddraigeneth » June 1st, 2012, 6:47 pm

Thanks for posting this, it can be tricky to find comprehensive instructions for nifty little effects.
User avatar
Ddraigeneth
 
Posts: 5475
Joined: June 26th, 2010, 12:06 pm
Location: 6 inches to the right

Re: Random Quote Generator (Like in Minecraft)

Postby Da Bag Man » June 11th, 2012, 8:40 am

Ddraigeneth wrote:Thanks for posting this, it can be tricky to find comprehensive instructions for nifty little effects.


No problem. I enjoyed writing this.
Image
User avatar
Da Bag Man
 
Posts: 7
Joined: May 31st, 2011, 11:43 am


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 5 guests