Tuesday, December 21, 2010

An HTML select that allows user created options

I was thinking the other day that it would be useful to have a select option that people could also put their own options into on the fly.  Obviously you wouldn't do this if you wanted completely normalization, but many times I have made selects with an "other" option, and then below put a text field "If you have selected "other" please tell us what your preference is.

This is meant to address that.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<!--

A simple way to have a dropdown that also allows user input.  If the user choses "other" from the dropdown, he/she will
be shown a text field into which he/she can put a new option.  When the user clicks save, the option will be added to
the select and made as the selected item.  There is a place in the code where you can call the onchange after a new value is added, or comment out that if desired.

// Daniel Fishman
// 2010-12-21
// Released to the public domain.


-->
<html>
<head>
<style type="text/css">
.hidden{
    display:none;
}

.show{
    display:block;
}
</style>

<script type="text/javascript">
    function localOnchange(lid,allowOther){
        var mySelect=document.getElementById(lid);
        var postKey=mySelect.name;
        var postData=mySelect.options[mySelect.selectedIndex].value;
        if(postData == "other" && allowOther == "true"){
            document.getElementById(lid+'_select_div').className = "hidden";
            document.getElementById(lid+'_input_div').className = "show";
            document.getElementById(lid+'_input_div').style.backgroundColor='yellow';
        }
        else{
            alert('perform regular onchange with '+postData)
        }
    }

    function updateSelect(lid){
        var newVal=document.getElementById(lid+"_text").value;
        if(newVal == "")return;
        var mySelect=document.getElementById(lid);
        //insert the new value in alphgabetical order.  If this select is not in alphabetical order, tough
        for (var x = 0;x <mySelect.length; x++) {
          var postData=mySelect.options[x].value;
          if (newVal < postData || mySelect.options[x].value == 'other') {
              var elOptNew = document.createElement('option');
              elOptNew.text = newVal;
              elOptNew.value = newVal;
              try {
                mySelect.add(elOptNew, mySelect.options[x]); // standards compliant; doesn't work in IE
              }
              catch(ex) {
                mySelect.add(elOptNew, x); // IE only
              }
              mySelect.selectedIndex=x;
              //uncomment below line for onchange behavior
              alert('perform regular onchange with '+newVal);
              document.getElementById(lid+'_select_div').className = "show";
              document.getElementById(lid+'_input_div').className = "hidden";
              //reset the div color
              document.getElementById(lid+'_select_div').style.backgroundColor='transparent';
              break;
          }
        }

    }

    function cancel(lid){
        document.getElementById(lid+'_select_div').className = "show";
        document.getElementById(lid+'_input_div').className = "hidden";
        document.getElementById(lid+'_select_div').style.backgroundColor='transparent';        
    }    
</script>
</head>
<body>
<div class="show" id="sid_select_div">

<!--you could call localOnchange with('sid','false'), and then it will do the normal onchange behavior-->

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <select onchange="localOnchange('sid','true')" id="sid" name="objectName">
        <option value="Dog">Dog</option>
        <option value="Cat">Cat</option>
        <option value="Bird">Bird</option>
        <option value="Person">Person</option>
        <option value="Snake">Snake</option>
        <option value="Bear">Bear</option>
        <option value="other">other</option>

</select>
</div>

<div class="hidden" id="sid_input_div">

    Enter the new value:&nbsp;<input type="text" value="" id="sid_text">
<a href="javascript:updateSelect('sid')">save</a>
<a href="javascript:cancel('sid')">cancel</a>

</div>
</body>
</html>

Monday, December 13, 2010

A modification of Lifehacker's Invisibility Cloak

Need to curtail your surfing during certain time periods?  I've tweaked Gina Trapiani's original code to make it a little more tolerant. 

Put a few numbers into the "surfHours" array and you'll be able to access your "blocked" sites for one hour after each hour listed.  As an example, if surfHours = [9,13,17] you can access facebook (or any other site) from 9-10am, 1-2pm and 5-6pm.

You can install the script directly from userScript and the source code is below.  If you don't know how to install a grease monkey script, check out the instructions at http://userscripts.org/scripts/show/92640

// Invisibility Cloak
// version 0.1
// Gina Trapani
// 2006-01-03
// Released to the public domain.
//
// ==UserScript==
// @name          Modified Invisibility Cloak
// @description   Turns time-wasting web pages invisible until a specified time of day.
// @include       http://flickr.com/*
// @include       http://*.flickr.com/*
// @include       http://metafilter.com/*
// @include       http://*.metafilter.com/*
// @include   http://*.facebook.com/*
// @include   http://*.twitter.com/*

// ==/UserScript==
//
// ==RevisionHistory==
// Version 0.1:
// Released: 2006-01-03.
// Initial release.
//
// Version 0.2
// Released 2010-12-13
// by Dan Fishman
// allows surfing on "invisible" sights for one hour after each number in the 
// surfHours array 
// ==/RevisionHistory==



(function () {
// EDIT THE NEXT LINE TO SET THE HOUR AFTER WHICH SITES SHOULD APPEAR
// HOURS IN MILITARY TIME, SO 15 = 3PM
 
     var surfHours=[9,13,17];
     var tstamp = new Date();
     var hours=tstamp.getHours();
     var okToView=false;
 
     for(var x=0;x<surfHours.length;x++){
        //alert("hours=="+hours+" sh="+surfHours[x]);
    if(hours-surfHours[x]==0){
            okToView=true;
        }
     }
     if (!okToView){
 var b = (document.getElementsByTagName("body")[0]);
 b.setAttribute('style', 'display:none!important');
 //The alert gets irritating on sites that link back to facebook 5 times.
        //alert("You can surf from 9-10, 1-2 and after 5");
 }

})();

Friday, December 03, 2010

Making your facebook group safe for the enter key

I've been very frustrated recently with the fact that in facebook groups, if you press enter while typing a post, it submits the post.  If you just want to make a line break you have to hit shift-enter.

Fortunately we don't have to live that way any more.  I've made a greasemonkey script for people who use firefox.  You can either install it directly or install it from the UserScripts.org site

To be perfectly clear:

You must be running firefox http://www.getfirefox.com 

AND

You must have GreaseMonkey installed:  https://addons.mozilla.org/en-US/firefox/addon/748/

BEFORE you can install my script.


After you have installed my script when you are on a group page, press the alt-z to turn on safe typing. Now you will be able to press the enter key all you want to make line breaks. Then when you are ready to save, you can press the alt-q to turn OFF safe typing and THEN press enter (sequentially, not simultaneously), and your post will save.  You'll need to press the alt-z AGAIN to re-enable safe typing.

Comments welcome.