ThatGuyCharlie | Charlie Mathews Blog & Portfolio » Javascript

How to Display Dymanicly Timed Content using Javascript

Charlie — Sat, 12 Dec 2009 23:11:34 +0000

I’ve spent many a long hour playing with this javascript to make it work seamlessly. You can see the results, daily, on my website.

If you want to change your website background depending on the time of day you will need this specific code. Otherwise, make sure to read till the bottom so you understand and don’t come back to me asking why it isn’t working for you.

Nighttime on ThatGuyCharlie

Daytime on ThatGuyCharlie

Copy this text into your webpage before the tag.

Ok now, if you didnt understand that, here’s what’s happening.

now = new Date

Here we obtain the date from the user’s computer

if (now.getHours() < 4) {
document.write(“

“)
}

This bit of code says that if the hour of the day is before four o’clock AM, then print the css background style for night-time.

else if (now.getHours() < 10) {
document.write(“

“)
}

Again, this does the same, but checks to see if it is before 10 o’clock.

else if (now.getHours() < 24)

Remember to have this last part of your code so the script knows what to do up till midnight. The first code which defines “< 4" will only display the specified content from zero o'clock until 4 o'clock so to display content till midnight, you must have "< 24".

You can use this code and copy in different content to display at any time of the day by changing the hours. If you didn’t understand any of that, don’t worry! Test out the code at the top on your web-page and see if you can make it work. If not, comment below and I will try to help you out.

If you want to display symbols like apostrophes ” and backward slashes \ make sure to put a “\” before each one so that java-script recognizes it and dosen’t mess up your code.

Example of the WRONG way:

document.write(“hi! my friend said “I am going to the store ““);

Example of the RIGHT way:

document.write(“hi! my friend said \”I am going to the store\”“);

How To: JS Bookmark Script

Charlie — Wed, 11 Nov 2009 20:25:09 +0000

This easy to implement Javascript bookmark script takes advantages of JS technology to provide functionality in most popular browsers like Internet Explorer and Firefox.

Put this between the tags of your webpage.

Put this anywhere between the tags.

Firefox Plugins You Just can't Live Without

Charlie — Tue, 10 Nov 2009 21:44:47 +0000

After, using Internet Explorer for years, the speed and amazing customization abilities of Firefox astounded me. I finally understood why people went on and on about “Firefox, the best browser ever”. Even so, it took me a while to find customizations (plugins) which could really tap into the full power of this new browser. Here are the top choices I use as a web developer and full time internet surfer.

1) Download Status Bar
No Kidding, If it were not for this smart plug-in, I would become a raving maniac a long time ago. The number of small file downloads I make on a regular basis causes the constant download box pop-ups to turn into a big pain. The Download Status Bar packs all the information you want to see such as download name, speed, and amount completed into a status bar which appears at the bottom of your browser for easy and uninterrupted browsing.

2) Firebug

This plug-in is the ultimate tool for any web developer using HTML, CSS, and Javascript. It allows you to edit your web page and view the changes in real time. You can hover over elements in your code and see exactly how your div’s are being positioned and displayed with a highlight tool. Over all it’s other features, my favorite is the ability to edit HTML and CSS for any element in an instant.

3) Xmarks (FoxMarks)

Over the years, I have often lost computers to fatal errors and blue screens. In doing so, I lost all my bookmarks which are essential to my daily work online. This nifty service saves you from ever having that problem. It backs up your bookmarks every time you exit the browser and they are then made available to you online or restore-able to a new computer.

4) DownloadHelper

Ever seen media players in a web-page with no download option? This easy to use plugin tracks actively streaming videos and mp3′s and makes it possible for you to download videos from most popular sharing sites.

5) DownThemAll!

For easy file downloads, this download manager is the first of it’s kind available in Firefox. It makes the job of downloading split files a whole bunch easier without installing extra, spyware ridden software.