Javascript table red if negative

"How do I make a table show red in a cell if negative?"

There are likely a few things to watch out for (a minus in a text name or something like that.)

        //quick cheat red if negative.
        var table = document.getElementById("my_table");
        for (var j=0, row; row=table.rows[j]; j++) {
                for (var i=0, cell; cell= row.cells[i]; i++) {
                        if (cell.innerText.indexOf("-")>-1) {
                                cell.style.color="red";
                        }
                }
        }

Check All Check None Javascript

A checkall/check none javascript implementation that doesn't care about ASP.

You ready?

• Check all
• Check me!
• Check me, too!
• Check this third box.

<script type="text/javascript">
function checkall(id,value) {
   var form = document.getElementById(id);
   for (var n=0; n< form.length; n++)
     if (form.elements[n].type == 'checkbox')
        form.elements[n].checked = value;
  return false;
}
</script>
<form id="myForm">
<ul>
<li><input type="checkbox" onclick="checkall('myForm', this.checked)">Check all</li>
<li><input type="checkbox">Check me!</li>
<li><input type="checkbox">Check me, too!</li>
<li><input type="checkbox">Check this third box.</li>
</ul>
</form>

Code markup via quickhighlighter.com

Pass a previous value in a select box

Renamed: Set a default select option when normal default is blank.
Let's say you want to do an event on a select onclick ... maybe something like a select with a blank as default, but if it's clicked, you want to change it to some other default (today's month?) ... but you also want that original blank to be selectable to "erase" the entry. This does not require jQuery or ASP. No need for a library to do this. Use it how you want.

skip me choose me

    <script type="text/javascript">
        function setDefault(el) {
            if (el.previousValue != "") {
                return;
            }
            if (el.value) {
                return;
            }
            if (el.value == "") {
                el.value = "choose me"
            }
        }
    </script>
    <select onclick="setDefault(this)" onfocus="this.previousValue=this.value">
        <option value=""></option>
        <option value="skip me">skip me</option>
        <option value="choose me">choose me</option>
    </select>

Code marked up with quickhighlighter.com

Javascript update a total field

Let's say you have a field a and a field b...
and you're using some sort of index thing because you want to keep adding additional fields ...

function updateSubtotal(e) {
 var evn = e.name
 var evv = e.value
 var indx = evn.substr(evn.length -1);
 
 var st=document.getElementsByName("subtotal"+indx)[0];
 var qt=document.getElementsByName("fielda"+indx)[0].value;
 var ct=document.getElementsByName("fieldb"+indx)[0].value;
 st.value=qt*ct
}

so if you have a field1 and field2 you can multiply it together... and it will apply for the current index level that is applied to the named field.

so ... fielda100 will multiply to fieldb100 and update subtotal100
then you'd put onBlur=updateSubtotal(this) in fielda and fieldb

From a picture, choose a color scheme.

The idea: Based upon a picture, get colors for your site.

This much has been done: http://www.degraeve.com/color-palette/

Augment: Make it automatically change your css Style.
Start with:

Hey Developers:
Want to automate color palette queries? Try out the new color palette generator web service BETA. Get an XML response to requests sent to:
http://www.degraeve.org/cgi-bin/color-palette.cgi?url=http://url.to.your.image

Which converts to .XML as (example)...

<colorpalette>

<imageurl>http://www.degraeve.com/images/beach.jpg</imageurl>

<status>success</status>

<message>color palette created successfully</message>

<dullcolors>

<color>304035</color>
<color>6B9FA3</color>
<color>90AEAD</color>
<color>B1C5CB</color>
<color
>43729C</color>

</dullcolors>

<vibrantcolors>


<color>285135</color>
<color>40C2CC</color>
<color>8EDAD6</color>
<color>BEEEFE</color>
<color>005AC3</color>
</vibrantcolors>

</colorpalette>

Augment: Choose some colors that will be working for text (Contrast-Wise). Hey, I get it that you shouldn’t force colors on your visitors. OTOH, this is a really cool effect.

Hmm... searching ... http://snook.ca/technical/colour_contrast/colour.html has an interactive Contrast checker. The nitty gritty:

function updateColours(){
 var brightnessThreshold = 125;
 var colorThreshold = 500;

 var bY=((br.getValue() * 299) + (bg.getValue() * 587) + (bb.getValue() * 114)) / 1000;
 var fY=((fr.getValue() * 299) + (fg.getValue() * 587) + (fb.getValue() * 114)) / 1000;
 var brightnessDifference = Math.abs(bY-fY);

    var colorDifference = (Math.max (fr.getValue(), br.getValue()) - Math.min (fr.getValue(), br.getValue())) +
                          (Math.max (fg.getValue(), bg.getValue()) - Math.min (fg.getValue(), bg.getValue())) +
                          (Math.max (fb.getValue(), bb.getValue()) - Math.min (fb.getValue(), bb.getValue()));

 document.getElementById("bDiff").value = brightnessDifference;
 document.getElementById("cDiff").value = colorDifference;

 if ((brightnessDifference >= brightnessThreshold) && (colorDifference >= colorThreshold)) {
     document.getElementById("cResult").value = "YES!"; // compliant
 }else if ((brightnessDifference >= brightnessThreshold) || (colorDifference >= colorThreshold)){
  document.getElementById("cResult").value = "sort of..."; // sort of compliant
 }else{
  document.getElementById("cResult").value = "NO!"; // not compliant "Poor visibility between text and background colors."
 }
}

Juicy Studio has code to check on the fly. http://juicystudio.com/article/javascript-contrast-class.php

Augment: Mash it all together based upon one picture... from a gallery or based upon an image for a review for a blog/CMS.

I shall come back to this. Essentially, I’d want, based upon the main picture on a page, to be able to change the look for the page based upon that picture, and yet the text be still readable. I’m sure there’s a reason *not* to do this, but until that time, just think of it as a way to change your CMS design on a whim. You don’t even have to show the picture that the color scheme is based upon. All you’d need is an idea... "OOH, I like that picture’s scheme. Will it look good on my site?

I should probably point myself to http://xmljs.sourceforge.net/index.html to parse the xml if I come back to this.