Category Archives: JavaScript Code

How to color rows based on values in Google Spreadsheets

Well, if it isn't completely obvious – I haven't written a post on my blog in a very long time. Call it writer's cramp, call it being too busy, whatever, I guess I've just been too lazy!

Anyhow, it is my goal to get back to writing regularly. I'll be posting:

  1. more coding tips
  2. Internet Marketing tips
  3. games to play
  4. random stuff (like food, ok?)

So, without further delay, here's my first new programming tip. It's for Google Spreadsheets, the incredibly powerful online spreadsheet application. Not only is it extremely powerful, collaborative and free, it also allows you to make it even more powerful by using scripts. This is entirely based on JavaScript.

We needed a script that would change the font color in each row based on the value in the last column of the row. You could use this for grading, scoring, anything – it just gives you a quick way to visually differentiate which entries score higher/lower. So, here's the code to put into your Code Editor:

Share

JavaScript Title Case

I recently had a project where I needed to quickly convert long strings of uppercase or lowercase text to Title Casing. Normally I would create a PHP script to do this, but they were all on different pages, so it had to be done manually. Rather than manually retype each, I wanted to create a JavaScript function to manage it.

Share

Build an image slideshow with PHP & JavaScript

There are numerous scripts out there that use PHP to scan the contents of a particular directory, and create a "gallery" of sorts from all of the images in the folder. There are also JavaScripts out there that allow you to rotate between images in a gallery without refreshing the page – thus creating a slideshow on the page. Well, without having to know too much PHP or JavaScript, you can now have both of those capabilities in one easy to configure PHP class!

Share

How to rotate an image or text with JavaScript & DHTML

So I need to rotate an image every few seconds on a homepage of a site I'm building. I looked around for some pre-built code that I could do this with, and I found a few functions. I picked the one I like the best, and I've modified it to my needs. This JavaScript code lets you define an array of HTML items (so you could use images, text, links, you name it!), and loop through the array. I added the variable for you to define how many seconds between rotation. Here's the JavaScript function, it will run automatically on the page load event. Place it in between your <head></head> tags.


<script language="JavaScript1.2">

var howOften = 2; //number often in seconds to rotate
var current = 0; //start the counter at 0
var ns6 = document.getElementById&&!document.all; //detect netscape 6

// place your images, text, etc in the array elements here
var items = new Array();
    items[0]="<img src='monkey.gif' border='0'>"; //an image
    items[1]="<a href='#'><img src='monkey.gif' border='0'></a>"; //a linked image
    items[2]="Text without a link";
    items[3]="<a href='#'>Text with a link</a>";
    items[4]="<a href='#'><img src='monkey.gif' border='0'> Text and image with a link</a>";

function rotater() {
    if(document.layers) {
        document.placeholderlayer.document.write(items[current]);
        document.placeholderlayer.document.close();
    }
    if(ns6)document.getElementById("placeholderdiv").innerHTML=items[current] 
        if(document.all)
            placeholderdiv.innerHTML=items[current];

    current = (current==items.length) ? 0 : current + 1; //increment or reset
    setTimeout("rotater()",howOften*1000);
}
window.onload=rotater;
//-->
</script>

Alternately, if you like simpler code, and you don't care about the .017% of users still using Netscape 6, you can use this JavaScript function for rotater:


function rotater() {
    document.getElementById("placeholder").innerHTML = items[current];
    current = (current==items.length-1) ? 0 : current + 1;
    setTimeout("rotater()",howOften*1000);
}

And here's the placeholder layers that you need to add to your HTML page to rotate the content in:


<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
Share

Edit MySQL database tables with PHP and AJAX

Every week I look at the PHP Classes newsletter to see if there are any cool new submissions. This one is perhaps the most exciting and promising that I've seen in a while!

Share