StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here are a few suggestions.</p> <p>First, when you're developing this kind of code, separate the PHP and JavaScript completely. Don't try to even think about them at the same time. The two languages don't know anything about each other. Your JavaScript code can only "see" what is available to it in the browser, and that isn't PHP.</p> <p>Do a View Source of your test page and you will see that there is no PHP in it. What <em>is</em> there is what your PHP code <em>generates</em>. And that's what you should be looking at and thinking about when you're writing and debugging you JavaScript code—the actual web page that's downloaded to the browser, not the PHP code that generates it.</p> <p>Next, if you're new to JavaScript, you may want to consider starting by trying out some existing code to format times in the past like you want. A couple of time formatting libraries I would start with are <a href="http://momentjs.com/" rel="nofollow">moment.js</a> and the <a href="http://timeago.yarp.com/" rel="nofollow">timeago</a> jQuery plugin. Study the source code for both of these for useful tips, and if neither one does exactly what you want, see which is closer and try modifying it to your needs. (There are probably other similar libraries worth looking at too; these are just a couple that I'm familiar with.)</p> <p>Of course there's nothing wrong with writing this code yourself either, but it can really help to see how other people have tackled a similar problem.</p> <p>BTW, if you display times in the past in the "time ago" format down to the second, then you had better add some code to your page to <em>update</em> those times every second. Without updating, you can get away with saying "4 hours ago" and probably with saying "3 hours and 45 minutes ago", but if you say "2 hours, 30 minutes, and 17 seconds ago" you had better be updating that in real time or it won't look right to people. (I'm not talking about whether it's formatted like 2:30:17 or the longer form I used here—I used the longer form for emphasis. When you display seconds you greatly increase the expectation that this is a realtime display.)</p> <p>Now a few tips on your JavaScript code.</p> <ul> <li>You need to put <code>var</code> in front every place that you create a variable. For example, the <code>s = ...</code> at the beginning of your <code>calcage()</code> function should be <code>var s = ...</code>. Otherwise your variable <code>s</code> is a <em>global</em> variable, and you don't want that.</li> <li>The convention in JavaScript is to use an initial capital letter only on constructors (functions intended for use with the <code>new</code> keyword). Variable names and ordinary function names use <code>namesLikeThis</code>, not <code>NamesLikeThis</code>. This is only a convention, not a rule, but you would do well to follow it.</li> <li><code>typeof</code> is an operator, not a function, and the modern convention is to leave out the parentheses in expressions like <code>typeof(BackColor)=="undefined"</code>. Instead, add some whitespace around the <code>==</code> operator: <code>typeof backColor == "undefined"</code>.</li> <li>Please, clean up your indentation. It is all over the place right now and makes the code much harder to follow than it could be. There are numerous JavaScript code beautifiers you could use, or just get in the habit of doing it properly as you go along. It isn't difficult at all, especially if you use a code editor with good support for indenting and similar features. What editor are you using now?</li> <li>Your <code>putspan()</code> function uses <code>document.write()</code>, and the place where this function is called is buried in the middle of some other setup code. There is probably a better way to do this. For example, what if you want <em>two</em> of these time-in-the-past displays in your page, not just one?</li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload