# Optimizing display of various famous quotes

If it is possible, I'd like to be able to mash all of my arrays into one array, but still have the same functionality within my function (pick quote, pick creator, set padding).

Pastebin

var quotes = [
/*48px*/"The true sign of intelligence is not knowledge but imagination.",
/*48px*/"A people without the knowledge of their past history, origin and culture is like a tree without roots.",
/*48px*/"Real knowledge is to know the extent of one's ignorance.",
/*48px*/"Ignorance is the curse of God; knowledge is the wing wherewith we fly to heaven.",
/*48px*/"Human behavior flows from three main sources: desire, emotion, and knowledge.",
/*80px*/"If money is your hope for independence you will never have it. The only real security that a man will have in this world is a reserve of knowledge, experience, and ability.",
/*80px*/"Knowledge is power. Information is liberating. Education is the premise of progress, in every society, in every family.",
/*48px*/"Knowledge has to be improved, challenged, and increased constantly, or it vanishes.",
/*112px*/"I'm hungry for knowledge. The whole thing is to learn every day, to get brighter and brighter. That's what this world is about. You look at someone like Gandhi, and he glowed. Martin Luther King glowed. Muhammad Ali glows. I think that's from being bright all the time, and trying to be brighter.",
/*112px*/"Wisdom is the right use of knowledge. To know is not to be wise. Many men know a great deal, and are all the greater fools for it. There is no fool so great a fool as a knowing fool. But to know how to use knowledge is to have wisdom.",
/*48px*/"To know, is to know that you know nothing. That is the meaning of true knowledge.",
/*48px*/"The best advice I ever got was that knowledge is power and to keep reading.",
/*48px*/"He who knows nothing is closer to the truth than he whose mind is filled with falsehoods and errors.",
/*48px*/"To know what you know and what you do not know, that is true knowledge.",
/*80px*/"I was bold in the pursuit of knowledge, never fearing to follow truth and reason to whatever results they led, and bearding every authority which stood in their way."
];
var creators = [
"Albert Einstein",
"Marcus Garvey",
"Confucius",
"William Shakespeare",
"Plato",
"Henry Ford",
"Kofi Annan",
"Peter Drucker",
"Jay-Z",
"Charles Spurgeon",
"Socrates",
"David Bailey",
"Thomas Jefferson",
"Confucius",
"Thomas Jefferson"
];
var margins = [
"48",
"48",
"48",
"48",
"48",
"80",
"80",
"48",
"112",
"112",
"48",
"48",
"48",
"48",
"80"
];
function quote() {
var rand = Math.floor(Math.random() * quotes.length);
$("p.quote").fadeOut(300).delay(1000).fadeIn(300);$("p.creator").fadeOut(300).delay(1000).fadeIn(300);
$("p.quote").text(quotes[rand]);$("p.creator").text(creators[rand]);
var marginTop = ($(".quotes .quotes-container").height() - margins[rand]) / 2 + "px";$(".quotes .quotes-container .content").attr("style","padding-top:" + marginTop);
};

-
Exact margins allow .content to recenterize itself depending on what quote is picked. – SaiyanToaster Jul 20 '14 at 1:19
@VotetoClose - Updated the thread with HTML and CSS. – SaiyanToaster Jul 20 '14 at 1:25

It seems to me like quotes, creators and margins all belong to the same object; your intuition is correct, merging them into one is the right thing to do.

I don't do much web development, so I'm not going to post example code, but I would have the quotes on the server side, and have the script request them through AJAX.

The server-side would probably define an object such as this:

public class QuoteViewModel
{
public string QuoteText { get; set; }
public string Author { get; set; }
public int Margin { get; set; }
}


The data could come from a database, a web service, an xml file on the server, whatever. When the client requests a quote, the server side serializes a QuoteViewModel into a string and sends it to the client.

This way all you need to change when you want to modify the quotes displayed, is the data itself.

I don't think Margin belongs on that type though. I'm pretty sure there's a way to use so that you can only request the QuoteText and Author from the server (in a Json string), and achieve the same result.

Consequently, the first thing I'd do would be to delete the margins array and see what needs to change in order to do without; I warmly recommend you to include the & into your question, I'm sure there's something wrong with your markup for you to think you need to recentrize .content depending on what quote is picked.

-
Do you think you could look into the first option from: stackoverflow.com/a/6933242/3856902 ~ Maybe you could work something out from there? – SaiyanToaster Jul 20 '14 at 2:12
No, that still hard-codes the data on the client, just in a somewhat prettier way: it's lipstick on a pig - data simply doesn't belong in the code. Take a look at this jQuery+PHP/MySQL example, where the quotes are stored in a database. I'd start with something like that. What's on your server side? – Mat's Mug Jul 20 '14 at 2:31
Nothing, yet for this site is within an SQL database/PHP. But Everything other than the Quotes (such as posts) I will store within a database, I'm more of a PHP/SQL guy myself ^^ – SaiyanToaster Jul 20 '14 at 2:41
Why send all the quotes to the client, when you're only going to display one? (are you?) – Mat's Mug Jul 20 '14 at 2:44
Yeah, its true that I will only be showing one at once, but then I need to learn AJAX to be able to "reload" the randomizor when using a jquery function? :o – SaiyanToaster Jul 20 '14 at 3:49