Optimizing display of various famous quotes

Question

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);
};

Answer 1

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 jquery client requests a quote, the server side serializes a QuoteViewModel into a json 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 css 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 html & css 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.