» DoYourself.org » Javascript http://www.doyourself.org Did you know ? Fri, 03 Feb 2012 23:00:02 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Adding and Removing HTML elements via JavaScript http://www.doyourself.org/javascript/545-adding-and-removing-html-elements-via-javascript/ http://www.doyourself.org/javascript/545-adding-and-removing-html-elements-via-javascript/#comments Sun, 23 Aug 2009 16:03:00 +0000 admin http://www.doyourself.org/?p=545

Sometimes while developing a web application, you need to hide or
display certain elements dynamically based on circumstance. For
instance, if you’re filling in your personal information and you in the
dropdown box you select “other” as your country, the website may be
required to display a previously hidden textbox allowing you to type in
your country name.

This post contains two links, written by the same person at two
different times. Which one you choose to use is completely up to your
skill and the scope of the project you’re working on. The first, is a
simple, easy-to-understand Javascript code snippet: http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

The second link is a reprise by the same author almost three years
later with a much cleaner implementation of the same functionality in
JavaScript. Unfortunately, it requires more knowledge about JavaScript
and events, and for a beginner in programming, the first link may be
easier to swallow. For the site, click this link: http://www.dustindiaz.com/add-remove-elements-reprise/

Pick your poison

]]> http://www.doyourself.org/javascript/545-adding-and-removing-html-elements-via-javascript/feed/ 0 JavaScript Title Case http://www.doyourself.org/javascript/147-javascript-title-case/ http://www.doyourself.org/javascript/147-javascript-title-case/#comments Fri, 24 Jul 2009 10:08:22 +0000 admin http://www.doyourself.org/?p=147

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.

I found some basic code which *mostly* worked to convert text. With some modification, I've developed a small text box with the following capabilities:

  • Converts the text inside the box to title case.
  • It leaves certain smaller words lower cased (configurable)
  • As soon as you paste text with your keys (CTRL+V or CMD+V), it does the conversion
  • It automatically selects all text in the box for you, for easy copying

    • Here's the code for you to copy:

    <input name="t" value="" type="text" size="50"
      onclick="this.select();"
      onkeyup="this.value=titleCaps(this.value);this.select();"
    />

    <script>
    function titleCaps(title) {
            var small = "(a|an|and|as|at|but|by|en|for|if|in|of|on|or|the|to|v[.]?|via|vs[.]?)";
            var punct = "([!"#$%&'()*+,./:;<=>?@[\\\]^_`{|}~-]*)";
            var parts = [], split = /[:.;?!] |(?: |^)["Ã’]/g, index = 0;
            title = lower(title);
            while (true) {
                    var m = split.exec(title);
                    parts.push( title.substring(index, m ? m.index : title.length)
                            .replace(/b([A-Za-z][a-z.'Õ]*)b/g, function(all){
                                    return /[A-Za-z].[A-Za-z]/.test(all) ? all : upper(all);
                            })
                            .replace(RegExp("    \b" + small + "\b", "ig"), lower)
                            .replace(RegExp("    ^" + punct + small + "\b", "ig"), function(all, punct, word){
                                    return punct + upper(word);
                            })
                            .replace(RegExp("    \b" + small + punct + "$", "ig"), upper));
                   
                    index = split.lastIndex;
                   
                    if ( m ) parts.push( m[0] );
                    else break;
            }
                   
            return parts.join("    ").replace(/ V(s?). /ig, " v$1. ")
                    .replace(/(['Õ])Sb/ig, "    $1s")
                    .replace(/b(AT&T|Q&A)b/ig, function(all){
                            return all.toUpperCase();
                    });
    }
       
    function lower(word){
            return word.toLowerCase();
    }
       
    function upper(word){
      return word.substr(0,1).toUpperCase() + word.substr(1);
    }
    </script>

    ]]>     http://www.doyourself.org/javascript/147-javascript-title-case/feed/ 0     How to rotate an image or text with JavaScript & DHTML http://www.doyourself.org/javascript/148-how-to-rotate-an-image-or-text-with-javascript-dhtml/ http://www.doyourself.org/javascript/148-how-to-rotate-an-image-or-text-with-javascript-dhtml/#comments Fri, 24 Jul 2009 10:08:22 +0000 admin http://www.doyourself.org/?p=148

    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>

    ]]>     http://www.doyourself.org/javascript/148-how-to-rotate-an-image-or-text-with-javascript-dhtml/feed/ 0     Create a Code Preview Box on Your Website http://www.doyourself.org/javascript/149-create-a-code-preview-box-on-your-website/ http://www.doyourself.org/javascript/149-create-a-code-preview-box-on-your-website/#comments Fri, 24 Jul 2009 10:08:22 +0000 admin http://www.doyourself.org/?p=149

    If you post any client-side code on your website, it would be nice for people to be able to work with it and test or preview it live. This code uses an iframe to enable real-time viewing of your code. You could use this simply as a DHTML code editor, or you could even extend it to create your own WYSIWYG editor for your web application!

    If you receive a JavaScript permission error when you're putting this on a test page, try closing and opening the page instead of just hitting refresh.

    Here's an example of it in use:

    Just change this text/code to whatever code you want to display. Click 'run code!' to preview the output of the code.

    Free and open web programming scripts

    <div align="center">
      <table style="width:500px; border:solid 1px #666;background:#f8f8f8">
        <tr>
          <td valign="top"><form name="form1">
              <textarea name="code" wrap="soft" onclick="focus(this.code);"
                      style="border:solid 1px #999; padding:5px; width:250px; height:264px; scroll:auto;">
                            my test code
                    </textarea>
            </form></td>
          <td valign="top">
              <iframe src="about:blank" name="preview"
                     style="border:solid 1px #999;height:275px; width:250px; background:#ffffff" frameborder="0">    </iframe>
            </td>
        </tr>
      </table>
      <input type="button" value="run code!"
       onclick="preview.document.write(document.form1.code.value); preview.document.close(); preview.focus()" />
      <input type="button" value="clear"
       onclick="document.form1.code.value=";preview.document.write(document.form1.code.value); preview.document.close(); preview.focus()" />
    </div>

    ]]>     http://www.doyourself.org/javascript/149-create-a-code-preview-box-on-your-website/feed/ 0     Dynamically Populating Select Menus Client-Side With JavaScript http://www.doyourself.org/javascript/150-dynamically-populating-select-menus-client-side-with-javascript/ http://www.doyourself.org/javascript/150-dynamically-populating-select-menus-client-side-with-javascript/#comments Fri, 24 Jul 2009 10:08:22 +0000 admin http://www.doyourself.org/?p=150

    This JavaScript function will enable your web application to populate a drop-down menu of items on the fly, based on the selection of another list, without reloading the page. I also provide the code to build the arrays by loading them from a database with ASP and PHP.

    The ASP code builds JavaScript array of all possible items that could be populated into the second menu. For each item in the array, it indicates the item in the first menu with which it is associated. So then when the user selects an item in the first list, the function takes the selected value, iterates through the array to find only those items associated with the selected value, and loads them into the second menu.

    Here's the HTML code of the form with the two drop down lists. I've hard-coded the first menu, but you can also store and load those values from a database, based on the code I'm going to provide:

    <form name="form1">
        <select name="types" onChange="fillItems(0)">
            <option value="32">Laptops</option>
            <option value="21">PDAs</option>
        </select>
        <select name="items"></select>
    </form>

    Here's the ASP code to build the array of possible menu items:

    <script language="JavaScript">
    var arItems = new Array()
    arItems = [
    <%
        strSQL = "SELECT type_id, id, description FROM items"
        objRS.Open strSQL, strConn
           arItems = objRS.GetRows()
        objRS.Close()

        for i = 0 to uBound( atItems, 2 )
            response.Write( "[" & atItems( 0, i ) & "," & atItems( 1, i ) & ",'" & atItems( 2, i ) & "']" )
            if i < uBound( atItems, 2 ) then response.Write("," & vbCrLf )
        next
    %>
    ]

    Here's the PHP code to build the array of possible menu items:

    var arItems = new Array()
    arItems = [
    <?php
    include_once("connection.php");
    $query = "SELECT type_id, id, description FROM items";
    $result = mysql_query($query);
    $num_rows = mysql_num_rows( $result );
    $i = 1;
    while ($row_result = mysql_fetch_row($result)) {
        echo "['".$row_result[0]."', '".$row_result[1]."', '".$row_result[2]."']";
        if ( $i < $num_rows )
            echo ",
            "    ;
        $i++;
    }
    ?>
    ]

    This will produce a JavaScript array that looks like this:

    arItems = [
        [ 32, 234, 'Toshiba Laptops'],
        [ 32, 156, 'Compaq Laptops'],
        [ 32, 333, 'Sony Laptops'],
        [ 21, 656, 'IBM PDAs'],
        [ 21, 467, 'Palm PDAs']
    ]

    And finally, here's the JavaScript function used to populate the second menu:

    function fillItems(intStart) {
        var fTypes = document.form1.types;
        var fItems = document.form1.items;
        var a = arItems;
        var b, c, d, intItem, intType

        if ( intStart > 0 ) {
            for ( b = 0; b < a.length; b++ ) {
                if ( a[b][1] == intStart )
                    intType = a[b][0];
            }

            for ( c = 0; c < fTypes.length; c++ ) {
                if ( fTypes.options[ c ].value == intType )
                    fTypes.selectedIndex = c;
            }
        }

        if ( intType == null )
            intType = fTypes.options[ fTypes.selectedIndex ].value;

        fItems.options.length = 0;

        for ( d = 0; d < a.length; d++ ) {
            if ( a[d][0] == intType )
                fItems.options[ fItems.options.length ] = new Option( a[d][2], a[d][1] );

            if ( a[d][1] == intStart )
                fItems.selectedIndex = fItems.options.length – 1;
        }
    }

    ]]>     http://www.doyourself.org/javascript/150-dynamically-populating-select-menus-client-side-with-javascript/feed/ 0     PHP: Build a Dynamic Picture Viewer http://www.doyourself.org/javascript/151-php-build-a-dynamic-picture-viewer/ http://www.doyourself.org/javascript/151-php-build-a-dynamic-picture-viewer/#comments Fri, 24 Jul 2009 10:08:22 +0000 admin http://www.doyourself.org/?p=151

    Display all pictures in a directory without having to keep track of or input file names. This PHP script retrieves a list of all images inside the directory and passes them in an array to be displayed. The menu to choose the image to display is also automatically generated. In IE and Firefox the images will fade in.

    Save this PHP code as getpics.php. It should be in the directory with the images, but you can configure it otherwise

    <?
    Header("content-type: application/x-javascript");
    $pathstring=pathinfo($_SERVER['PHP_SELF']);
    $locationstring="http://" . $_SERVER['HTTP_HOST'].$pathstring['dirname'] . "/";

    function returnimages($dirname=".") {
             $pattern="(.jpg$)|(.png$)|(.jpeg$)|(.gif$)";
       $files = array();
             $curimage=0;
       if($handle = opendir($dirname)) {
           while(false !== ($file = readdir($handle))){
                   if(eregi($pattern, $file)){
                         echo 'picsarray[' . $curimage .']="' . $file . '";';
                         $curimage++;
                   }
           }

           closedir($handle);
       }
       return($files);
    }

    echo 'var locationstring="' . $locationstring . '";';
    echo 'var picsarray=new Array();';
    returnimages()
    ?>

    And here's the HTML page to view the images. You can stylize it however you'd like.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Show all images</title>
    <style type="text/css">
    #picturearea{
            filter:alpha(opacity=100);
            -moz-opacity: 0;
    }
    </style>
    <script src="getpics.php" type="text/javascript"></script>
    <script type="text/javascript">
    function populateSelect(selectobj)
    {
            for (var i=0; i<picsarray.length; i++)
                    selectobj.options[selectobj.options.length]=new Option(picsarray[i], picsarray[i])
            if (selectobj.options.length>    1)
            {
                    selectobj.selectedIndex=0
                    showpicture(document.getElementById("picsform").picslist)
            }
    }
    function showpicture(selectobj)
    {
            piccontainerobj=document.getElementById("picturearea")
            resetfade(10)
            piccontainerobj.innerHTML='<img src="'+locationstring+selectobj.options[selectobj.selectedIndex].value+'">'
            fadepictoview=setInterval("gradualfade(piccontainerobj)",50)
    }
    function resetfade(degree)
    {
            if (window.fadepictoview)
                    clearInterval(fadepictoview)
            if (typeof piccontainerobj.style.MozOpacity=="string")
                    piccontainerobj.style.MozOpacity=degree/100
            else if (piccontainerobj.filters)
                    piccontainerobj.filters.alpha.opacity=degree
    }
    function gradualfade()
    {
            if (typeof piccontainerobj.style.MozOpacity=="string" && piccontainerobj.style.MozOpacity<1)
                    piccontainerobj.style.MozOpacity=Math.min(parseFloat(piccontainerobj.style.MozOpacity)+0.2, 0.99)
            else if (piccontainerobj.filters && piccontainerobj.filters.alpha.opacity<100)
                    piccontainerobj.filters.alpha.opacity+=20
            else //if not IE or Moz
                    clearInterval(fadepictoview)
    }
    window.onload=function()
    {
            populateSelect(document.getElementById("picsform").picslist)
    }
    </script>

    </head>
    <body>
    <div style="float: left; width: 200px;">
            <form id="picsform">
                    <select name="picslist" size="4" style="width: 200px" onClick="showpicture(this)"></select>
            </form>
    </div>
    <div id="picturearea" style="float: left; width: 400px; height: 300px; margin-left: 20px">
    </div>
    </body>
    </html>

    ]]>     http://www.doyourself.org/javascript/151-php-build-a-dynamic-picture-viewer/feed/ 0     Build an image slideshow with PHP & JavaScript http://www.doyourself.org/javascript/115-build-an-image-slideshow-with-php-javascript/ http://www.doyourself.org/javascript/115-build-an-image-slideshow-with-php-javascript/#comments Fri, 24 Jul 2009 10:07:08 +0000 admin http://www.doyourself.org/?p=115

    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!

    This open source PHP class is used to present images in a slide show without reloading the current page. It automatically generates the necessary HTML and Javascript to display the listing of images, on the page. Best of all, the images are scanned from a list of files in a server side directory, which means that you can just upload a new image and it will be there!

    You can also easily configure the delay time between switching the images on the page.

    ]]>     http://www.doyourself.org/javascript/115-build-an-image-slideshow-with-php-javascript/feed/ 0     A very fast way to validate a form with JavaScript http://www.doyourself.org/javascript/116-a-very-fast-way-to-validate-a-form-with-javascript/ http://www.doyourself.org/javascript/116-a-very-fast-way-to-validate-a-form-with-javascript/#comments Fri, 24 Jul 2009 10:07:08 +0000 admin http://www.doyourself.org/?p=116

    There are many universal form validation functions out there. But I created this very quick function to very easily check for input, without modifying your form fields in any way, and without have to check each field individually. The script just checks for a value, it doesn't validate the format (like an email address), because that's very easy to add, so you can do it yourself!

    All you do is put the name of each field in the array, and it quickly loops through the array, checks the field, and fails if one of the fields is empty

    function checkForm() {
            f = document.form1;
            var isGood = true;
           
            var required = new Array();
             required[0] = "email";
             required[1] = "password";
             required[2] = "first_name";
             required[2] = "last_name";
             required[3] = "country";
           
            for(i in required) {
                    if(f.elements[i].value=="") {
                            isGood = false;
                            break;
                    }
            }
           
            if(!isGood)
                    alert("Please fill in all of the required fields.");
           
            return isGood;
    }
    //–>
    </script>

    Then put this in your form code:

    <form name="form1" method="post" action="" onSubmit="return checkForm();">

    ]]>     http://www.doyourself.org/javascript/116-a-very-fast-way-to-validate-a-form-with-javascript/feed/ 0     Check IP format with Regular Expressions in JavaScript http://www.doyourself.org/javascript/117-check-ip-format-with-regular-expressions-in-javascript/ http://www.doyourself.org/javascript/117-check-ip-format-with-regular-expressions-in-javascript/#comments Fri, 24 Jul 2009 10:07:08 +0000 admin http://www.doyourself.org/?p=117

    Here's a quick JavaScript function to check that a user has entered a valid IP address. Don't ask me why, but there may be times when you need a user to input an IP address, rather than just grab theirs. And it's always easier to check first on the client side with JavaScript than having to do all the validation on the post back to the server with PHP!

    var filter = /^([1-9][0-9]{0,2})+.([1-9][0-9]{0,2})+.([1-9][0-9]{0,2})+.([1-9][0-9]{0,2})+$/;
             if (!filter.test(f.ip.value)) {
                    alert('Please enter a valid IP');
                    f.ip.focus();
                    return false
             }

    ]]>     http://www.doyourself.org/javascript/117-check-ip-format-with-regular-expressions-in-javascript/feed/ 0     Google Maps causes Internet Explorer to crash http://www.doyourself.org/javascript/118-google-maps-causes-internet-explorer-to-crash/ http://www.doyourself.org/javascript/118-google-maps-causes-internet-explorer-to-crash/#comments Fri, 24 Jul 2009 10:07:08 +0000 admin http://www.doyourself.org/?p=118

    I was working on a site the other day, and I came across the error on a page that I've never seen before. The page had an embedded Google Map, and there was a JavaScript function to display the map. The page worked in FireFox, but when I ran it in IE, I got the following JavaScript error:

    Internet Explorer could not open the internet site.
    Operation aborted.

    And not one bit of the page would display.

    I dug around online, but couldn't find anything. On a complete whim, I decided to try to move the showMap() function into the window.onload() handler. And crazily enough, it worked! So the whole error was caused by the showMap() being run before the page had fully loaded. Insane…

    ]]>     http://www.doyourself.org/javascript/118-google-maps-causes-internet-explorer-to-crash/feed/ 0