Random Snippets

How to hide or show content based on links or urls via JavaScript/jQuery

Allen Liu — Mon, 10 Oct 2011 01:56:33 +0000

I have been receiving many requests for a tutorial that shows how to hide or show content based on links or options that a user picks and reflected on a different page so here it is =)

You can see the working demo here.

Here is the plain HTML:

If you had to choose a drink, what would you choose:

	Coke
	Bubble Tea
	Milk

It is a simple list of options for a user to select and the key is in the linking url. There is an option parameter where we are passing over the user’s selected option. The option values (coke, bubble-tea, and milk) will map to their respective div ids on the following page that we will dynamically hide or show.

Here is the JavaScript/jQuery code that executes on the linking page:


<script type="text/javascript">
$(document).ready(function() {
	var option = 'coke';
	var url = window.location.href;
	option = url.match(/option=(.*)/)[1];
	showDiv(option);
});
function showDiv(option) {
	$('.boxes').hide();
	$('#' + option).show();
}
script>

Line 1 imports the jQuery library from Google’s content distribution network (CDN). There are a couple of reasons why you should use CDNs including decreased latency and increased parallelism. If you are interested in reading the details, here is a nice post.

Line 4 assigns the default div id that will be shown which in this case is coke.

Lines 5-6 parses the option value from the url information.

Line 7 calls the showDiv() function and passes the option value as an argument.

In line 10 of the showDiv() function, we hide all the divs in case there are any that are opened. We do this using the jQuery class selector where we select all the elements with the boxes class.

Line 11 will use the id (e.g. #) jQuery selector using the option parameter that was passed over and show the element via the jQuery .show() method.

Here is the HTML code for the second page with our dynamic displayed content:

Coke is awesome!

Bubble tea is da bomb!

Milk is healthy!

I change my mind:

Back to main page

We begin with the divs, each with their respective ids (coke, bubble-tea, milk). We then re-list our options on this page as well. The links here do not link to another page though. Instead, they call the showDiv() function and pass over the selected option.

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers! OR…you can sign up for a free Dropbox account using my referral link =) If you are not aware of what Dropbox is, it is the most awesomest online backup application there and so much more…all for free.

How to dynamically remove elements from the DOM via jQuery

Allen Liu — Mon, 22 Aug 2011 02:47:01 +0000

jQuery is an awesome JavaScript library that can do some very heavy lifting in very small amounts of code. Take the example below where we are simply removing a div element from the DOM.

Demo

Remove me by clicking the button below.

Here is the HTML code:

1 2	Remove me by clicking the button below.

Line 1 defines the div element with id=removeMe that we are planning to vanquish from the DOM. There is some inline CSS thrown in for aesthetics and I apologize for that. It just makes the div easier to visualize.

Line 2 is our button where the onclick event calls the removeDiv JavaScript function. In addition, the id of the div is passed over as an argument to the function.

Simple enough. Now to the more exciting stuff.

Here is the JavaScript code:

1
2
3

function removeDiv(divId) {
   $("#"+divId).remove();
}

That’s it and that is why I <3 jQuery =)

Let's break down line 2 because there is actually quite a bit that is going on here with 22 characters.

$(“#”+divId) is jQuery syntax which uses the ID selector to help us select our div. The divId parameter is appended to the ID selector so that the function is dynamic and can handle any div or element in the DOM. When a user clicks the button, the removeMe argument is passed over so the selector becomes $("#removeMe") after the variable is interpolated.

Ok, so now we have selected our div element, we want to remove it from the DOM. This is where the .remove() jQuery function comes in handy. Simply append this function to the selected element and the rest is history.

Oh but the fun does not stop here. With the use of the all-mighty jQuery selector, we can easily remove multiple elements at once. Looky here.

Demo

Blue box #1

Blue box #2

Blue box #3

Red box #1

Red box #2

Red box #3

Here is the HTML and CSS code:


Blue box #1
Blue box #2
Blue box #3
Red box #1
Red box #2
Red box #3

The CSS is nicely separated from our code which is best practice (and easier to maintain). The HTML code defines 3 blue boxes with the class attribute blueBox and 3 red boxes with the class attribute redBox. We also have one button to remove the blue boxes by calling the removeByClass function and passing over the blueBox class name. Then we have another button that calls the same function but passes the redBox class name.

Now for the JavaScript code:

1
2
3

function removeByClass(className) {
   $("."+className).remove();
}

That's right. It's almost identical as our original function except we now use . instead of # which is the jQuery class selector. Did I mention how much I love jQuery?

This time, we simply plug in the class name to our class selector which selects ALL elements with that particular class name. Then we append the .remove() function as before and all elements that are selected will be removed. Pretty sweet eh? =)

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!

JavaScript Date Ranges/Calculations with Datejs

Allen Liu — Sat, 30 Jul 2011 09:18:36 +0000

If there is anything I hate more than the smell of durian, it is having to deal with date range calculations in JavaScript. Luckily though, we have the Datejs JavaScript Date Library to prevent us from having to pull our hair out.

Mission

I was recently faced with having to implement a date range drop-down menu very similar to of the one that is beautifully implemented in Google Adwords:

The select input element had to return 3 pieces of information: The name of the option, start date, and end date of the selected option.

Here are the specific options that I had to implement for the date ranges:

This month to date
This quarter to date
Last 7 days
Last 30 days
Last 365 days
Last week (Mon to Sun)
Last full month
Last full quarter
Last full year

The Plan

The tricky thing about select input elements is that they only return one value but this mission required me to return the option name, a start date, and an end date. The solution I chose to go with was a JSON string with the following name/value pairs for each option:

'[display name of the option]':'{start:[start date],end:[end date]}'

It looks messy but it really is one name/value pair depicted in different colors. The value itself, though, is a JSON array that contains 2 name/value pairs: The start and end dates.

The actual value string for one of the options would look something like this:

'Last week (Mon to Sun)':'{"start":"07/18/2011","end":"07/24/2011"}'

Once all of the select values are calculated using Datejs, the plan is to populate a select input element with all the options via jQuery. This allows for more of a separation between the HTML and the JavaScript code which is easier to maintain and a bit more organized.

The Code

Let’s start easy and begin with the HTML code for the select input:

1
2

That was pretty painless. We’ve prepared the select input element and gave it an id and a name but we have yet to populate it with the options. This will be taken care of later with the help of JavaScript.

The next part of the plan is to do the actual date range calculations. This was done relatively easily with the help of Datejs. Here is the JavaScript code for that:

// Import Datejs JavaScript Library

 
// Calculate date ranges for date pull down menu
<script type="text/javascript">
var today = Date.parse('today').toString('yyyy-MM-dd');
var firstDayOfMonth = Date.today().moveToFirstDayOfMonth().toString('yyyy-MM-dd');
var month = Date.parse('today').toString('MM');
var year = Date.parse('today').toString('yyyy');
var quarterMonth = (Math.floor(month/3)*3)+1;
var quarter = (Math.floor(month/3))+1;
var lastQuarter = (quarter > 1) ? quarter - 1 : lastQuarter = 4;
var quarterStartDate = (quarterMonth < 10) ? year+'-0'+quarterMonth+'-01' : year+'-'+quarterMonth+'-01';
var lastSevenDaysStart = Date.today().add(-6).days().toString('yyyy-MM-dd');
var lastThirtyDaysStart = Date.today().add(-29).days().toString('yyyy-MM-dd');
var lastYearDayStart = Date.today().add(-364).days().toString('yyyy-MM-dd');
var lastFullWeekStart = Date.today().add(-7).days().last().monday().toString('yyyy-MM-dd');
var lastFullWeekEnd = Date.today().add(-7).days().last().monday().add(6).days().toString('yyyy-MM-dd');
var lastFullMonthStart = Date.today().add(-1).months().moveToFirstDayOfMonth().toString('yyyy-MM-dd');
var lastFullMonthEnd = Date.today().add(-1).months().moveToLastDayOfMonth().toString('yyyy-MM-dd');
var lastFullQuarterStart = ((((lastQuarter-1)*3)+1) < 10) ? year+'-0'+(((lastQuarter-1)*3)+1)+'-01' : year+'-'+(((lastQuarter-1)*3)+1)+'-01';
var lastFullQuarterEnd = Date.parse(lastFullQuarterStart).add(2).months().moveToLastDayOfMonth().toString('yyyy-MM-dd');
var lastFullYearStart = Date.today().add(-1).years().toString('yyyy') + '-01-01';
var lastFullYearEnd = Date.today().add(-1).years().toString('yyyy') + '-12-31';
 
// Prepare JavaScript array with the JSON 
var selectOptions = {
    'This month to date':'{"start":"'+firstDayOfMonth+'","end":"'+today+'"}',
    'This quarter to date':'{"start":"'+quarterStartDate+'","end":"'+today+'"}',
    'Last 7 days':'{"start":"'+lastSevenDaysStart+'","end":"'+today+'"}',
    'Last 30 days':'{"start":"'+lastThirtyDaysStart+'","end":"'+today+'"}',
    'Last 365 days':'{"start":"'+lastYearDayStart+'","end":"'+today+'"}',
    'Last week (Mon to Sun)':'{"start":"'+lastFullWeekStart+'","end":"'+lastFullWeekEnd+'"}',
    'Last full month':'{"start":"'+lastFullMonthStart+'","end":"'+lastFullMonthEnd+'"}',
    'Last full quarter':'{"start":"'+lastFullQuarterStart+'","end":"'+lastFullQuarterEnd+'"}',
    'Last full year':'{"start":"'+lastFullYearStart+'","end":"'+lastFullYearEnd+'"}'
};
script>

Line 2 imports the Datejs library. You will have to download it and install via these instructions. Lines 5-23 calculates each of the date elements that I will need to piece together the final product. All the variables are pretty much self explanatory so I will not do the play-by-play for each line.

The excitement happens in lines 26-36 where everything is pieced together to form our JSON strings and put into an array called selectOptions.

Ok, now we have our empty select input and a JavaScript array with all our options. Next, we enlist the help of jQuery to help populate the select input element.

// Load jQuery library hosted by Google - Note: If you already have jQuery imported DELETE the next line.

 
<script type="text/javascript">
$(document).ready(function() {
    $.each(selectOptions, function(key, value) {      
        if (key == 'Last 30 days') {
            $('#date_range').
                append($("").
                attr("value", value).
                attr("selected", "selected").
                text(key));           
        }
        else {
            $('#date_range').
                append($("").
                attr("value", value).
                text(key)); 
        }
    });
});
script>

Line 2 imports the jQuery library which Google so nicely hosted for us =) Please remove or comment out this line if you already have jQuery working on your site. Line 5 contains the jQuery ready() function which is executed when the DOM is fully loaded. This is important for us because we need to have the select input element in place first before we can load the options. That makes sense. You need to watch The Empire Strikes Back before you watch Return of the Jedi.

Line 6 is the jQuery foreach function which will loop through each of our options in the selectOptions array by using the key => value pair (shown earlier in the Christmas colors). Lines 7-13 tests to see if the current key is equal to “Last 30 days” and if so, it will make it the default selected option. It does so by:

Dynamically creating the option element and appending it to our select input that is accessed by the jQuery selector using the “date_range” id. [lines 8-9]
Dynamically setting the value attribute of the option to the value from the name/value pair (this contains our start and end dates). [line 10]
Dynamically setting the selected attribute to true which will make this option the default selected option. [line 11]
Dynamically setting the displayed text of the option to the key which holds the display name for the option (e.g. “Last 30 days”). [line 12]

Lines 14-19 processes all the other elements in the same manner except that it does not set the selected attribute to true.

Here is the final product in all its glory:

Note: I noticed that the default selected option is NOT working correctly. I know this codes works in the original implementation and I have tried debugging it here but it is 2:12AM and I need sleep! I will come back to this at a later time…I promise.

To make this easier for you to implement, here is all the JavaScript code put together:

// Load jQuery library hosted by Google - Note: If you already have jQuery imported DELETE the next line.

 
// Import Datejs JavaScript Library

 
<script type="text/javascript">
$(document).ready(function() {
    $.each(selectOptions, function(key, value) {      
        if (key == 'Last 30 days') {
            $('#date_range').
                append($("").
                attr("value", value).
                attr("selected", "selected").
                text(key));           
        }
        else {
            $('#date_range').
                append($("").
                attr("value", value).
                text(key)); 
        }
    });
});
 
// Calculate date ranges for date pull down menu
var today = Date.parse('today').toString('yyyy-MM-dd');
var firstDayOfMonth = Date.today().moveToFirstDayOfMonth().toString('yyyy-MM-dd');
var month = Date.parse('today').toString('MM');
var year = Date.parse('today').toString('yyyy');
var quarterMonth = (Math.floor(month/3)*3)+1;
var quarter = (Math.floor(month/3))+1;
var lastQuarter = (quarter > 1) ? quarter - 1 : lastQuarter = 4;
var quarterStartDate = (quarterMonth < 10) ? year+'-0'+quarterMonth+'-01' : year+'-'+quarterMonth+'-01';
var lastSevenDaysStart = Date.today().add(-6).days().toString('yyyy-MM-dd');
var lastThirtyDaysStart = Date.today().add(-29).days().toString('yyyy-MM-dd');
var lastYearDayStart = Date.today().add(-364).days().toString('yyyy-MM-dd');
var lastFullWeekStart = Date.today().add(-7).days().last().monday().toString('yyyy-MM-dd');
var lastFullWeekEnd = Date.today().add(-7).days().last().monday().add(6).days().toString('yyyy-MM-dd');
var lastFullMonthStart = Date.today().add(-1).months().moveToFirstDayOfMonth().toString('yyyy-MM-dd');
var lastFullMonthEnd = Date.today().add(-1).months().moveToLastDayOfMonth().toString('yyyy-MM-dd');
var lastFullQuarterStart = ((((lastQuarter-1)*3)+1) < 10) ? year+'-0'+(((lastQuarter-1)*3)+1)+'-01' : year+'-'+(((lastQuarter-1)*3)+1)+'-01';
var lastFullQuarterEnd = Date.parse(lastFullQuarterStart).add(2).months().moveToLastDayOfMonth().toString('yyyy-MM-dd');
var lastFullYearStart = Date.today().add(-1).years().toString('yyyy') + '-01-01';
var lastFullYearEnd = Date.today().add(-1).years().toString('yyyy') + '-12-31';
 
// Prepare JavaScript array with the JSON 
var selectOptions = {
    'This month to date':'{"start":"'+firstDayOfMonth+'","end":"'+today+'"}',
    'This quarter to date':'{"start":"'+quarterStartDate+'","end":"'+today+'"}',
    'Last 7 days':'{"start":"'+lastSevenDaysStart+'","end":"'+today+'"}',
    'Last 30 days':'{"start":"'+lastThirtyDaysStart+'","end":"'+today+'"}',
    'Last 365 days':'{"start":"'+lastYearDayStart+'","end":"'+today+'"}',
    'Last week (Mon to Sun)':'{"start":"'+lastFullWeekStart+'","end":"'+lastFullWeekEnd+'"}',
    'Last full month':'{"start":"'+lastFullMonthStart+'","end":"'+lastFullMonthEnd+'"}',
    'Last full quarter':'{"start":"'+lastFullQuarterStart+'","end":"'+lastFullQuarterEnd+'"}',
    'Last full year':'{"start":"'+lastFullYearStart+'","end":"'+lastFullYearEnd+'"}'
};
script>

And there you have it! I hope this helps someone out there in the ether =)

How to hide, show, or toggle your div with jQuery

Allen Liu — Mon, 11 Apr 2011 04:58:21 +0000

Hiding and showing content is MUCH easier with the magic of jQuery. Here is a simple demo of the jQuery .toggle() function.

Demo

Toggle Button

The content in this div will hide and show (toggle) when the toggle is pressed.

Here is the JavaScript needed to run this demo:


<script type="text/javascript">
function toggleDiv(divId) {
   $("#"+divId).toggle();
}
script>

Line 1 simply loads the minimized jQuery v1.4.4 library. Once that is done, the rest is cake =) Line 3 defines the toggleDiv JavaScript function which takes one parameter: the id of the div to be toggled. Line 4 is where all the action takes place. The $("#"+divId) part is the powerful jQuery selector which selects the div that was passed to the function. I cannot say how easy jQuery makes it to select elements whether it is by id, class, or even by element types. Once our div is selected, we simply append jQuery’s toggle() function which automatically detects whether or not the content hidden and toggles it. On the HTML code level, the function toggles the display attribute between none and block.

Here is the raw HTML code for the demo:

Toggle Button

The content in this div will hide and show (toggle) when the toggle is pressed.

The a tag is styled to look like a button and the onclick event uses our toggleDiv which passes the ‘myContent’ div ID as the argument. The rest of the HTML basically codes for our ‘myContent’ div whose content will be toggled by a click of the a tag.

That is it! There is no more need to reinvent the wheel my friends.

Here is a new demo in response to a request where only one div is displayed at any one time.

Demo

show this one only

Div #1

show this one only

Here is the HTML code:


   
      
         
            show this one only
         
         Div #1
      
      
         
            show this one only
         
         Div #2
      
      
         
            show this one only
         
         Div #3

The HTML code contains 3 divs to start off with: 2 hidden and 1 displayed. Each link will launch the showonlyone JavaScript function and pass over the corresponding div ID.

function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}

Line 2 contains some very cool uses of jQuery. Here we are looping through all divs with the class = "newboxes" which represents all 3 divs.

Line 3 checks to see if the div id in the current loop is equal to thechosenone which is the argument that was passed to the function.

If the id matches up, we use the .show() jQuery function to display the div. The argument 200 used in the .show() function will animate the display for a duration of 200 milliseconds. How cool is that =) If you leave it blank, the div will appear suddenly.

If the id does not match up, we simply use the .hide() jQuery function to hide the div. The argument 600 used in the .hide() function will animate the div so that it looks like it is sliding away. I used a higher number here so that you can see the difference in speed of the animations. Again, you can simply leave it blank if you want to make the div suddenly disappear.

That’s it!

If you would like all the divs to be hidden from the get go, simply use CSS to hide them all like so:

.newboxes {
    display: none;
}

Here is another quick example using the jQuery .slideDown() and .slideUp() functions.

Demo

slide this one only

Div #1

slide this one only

Everything is the same here except we are calling the .slideDown() and .slideUp() functions instead of the .show() and .hide() functions respectively. Even the animation duration is kept the same if you pass an argument to the function calls.

Here is the JavaScript code:

function slideonlyone(thechosenone) {
     $('.newboxes2').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).slideDown(200);
          }
          else {
               $(this).slideUp(600);
          }
     });
}

Not much explanation needed here. Same idea, different functions used.

Here is the HTML code:


   
      
         
            slide this one only
         
         Div #1
      
      
         
            slide this one only
         
         Div #2
      
      
         
            slide this one only
         
         Div #3

Same thing here except we are calling the new slideonlyone() function that we just defined.

If you want all your div content to be hidden from the get go, simple use CSS to hide them like so:

.newboxes {
    display: none;
}

Here is a demo for changing text in the link according to the display status of the div:

Demo – Toggle link text and toggling div

Expanded text mode ▼

Div content that will be shown or hidden.

Here is the HTML code:


   Expanded text mode ▼


   Content that will be shown or hidden.

Here we have an a tag that has the text that we want to toggle as well as the div content. Whenever the link text is clicked, it fires off the toggleAndChangeText() JavaScript function.

Here is the JavaScript code for the toggleAndChangeText() function:

function toggleAndChangeText() {
     $('#divToToggle').toggle();
     if ($('#divToToggle').css('display') == 'none') {
          $('#aTag').html('Collapsed text mode ►');
     }
     else {
          $('#aTag').html('Expanded text mode ▼');
     }
}

Whenever the toggleAndChangeText() is fired off, it will first toggle the div with our nice jQuery toggle() function in line 2. Then it will test if the div content is hidden (or if the display attribute is set to none) in line 3. If so, it will change the link to “Collapsed text mode ►″. Otherwise, the link text will be changed to “Expanded text mode ▼″ in line 7.

To reverse the effect and start with the content hidden, all we have to do is the following:


   Collapsed text mode ►


   Content that will be shown or hidden.

The inline CSS is the key to making this work. We start with the content hidden which our JavaScript will detect so it will toggle to make the content visible once the link is clicked.

Next up is a pretty cool demo where we use the .animate() jQuery function to help toggle just about any element. In this case, we’ll use an image of yours truly :)

Demo

Click here to toggle me in and out =)

Here is the HTML code:


  Click here to toggle me in and out =)

I have to apologize for all the inline CSS. This is the easiest way for me to get these demos across without having to separate the styling (which is usually best practice). I am trying to do good here so I hope the HTML Gods will spare me this one time.

Anyway, the HTML is quite simple. It is just a div with some text inside and a silly image. Notice there is no JavaScript event attached to our div just yet. This is where our jQuery code comes in and saves the day!

$(document).ready(function() {
     $('#clickme').click(function() {
          $('#me').animate({
               height: 'toggle'
               }, 2000
          );
     });
});

In line 1, we tell jQuery to wait until the DOM (Document Object Model) is fully loaded or when our page is fully rendered. We do this because we want to add functionality to our “click me” div. If the “click me” div has not yet loaded and this JavaScript executes, there is no element to work on. Game over.

Instead, we tell jQuery to wait until our “click me” div is in place, and then add a click event to it (line 2).

Lines 3-6 defines our click event by animating the $('#me') element which in this case is the image. If you are not used to jQuery syntax, $('#me') uses jQuery’s all-powerful selector to help us select the element with id = me.

Once we have our element selected, we apply the animate function to add animation to this element’s CSS properties. We first begin with line 4 which toggles the height of the element and preserves the height:width ratio which gives it a shrinking effect. We use toggle here so that you can keep pressing the button to toggle in and out. You can of course use show or hide just like in the previous demos.

Line 5 just indicates how long the duration of our animation will last in milliseconds. In this demo, it is 2000 milliseconds which translates to 2 seconds (I was in AP math in high school).

Here is a demo that toggles multiples elements by the class attribute.

Demo

Here is the HTML code along with the CSS:

Lines 1-11 covers the styling of the divs so they are presentable.

Lines 12-13 codes for 2 buttons that toggles the odd number divs and even number divs respectively by calling the toggleByClass function and passing the respective class names.

Here is the JavaScript code:

1
2
3

function toggleByClass(className) {
     $("."+className).toggle();
}

Simple and sweet but a lot is going on here. Let’s dissect line 2 and cover each component separately.

$("."+className) uses the jQuery class selector with the className variable representing the class of the element(s) you want to select. In our demo, we use the oddNumber and evenNumber class names to select for their respective divs.

Once the divs are selected, we tack on the .toggle() jQuery function to hide and show the elements.

Here is a tutorial that shows how to hide or show content based on links on different pages.

That is it for yet another demo =)

If there any other demos/tutorials that you would like to see on this subject, please feel free to comment below and I will try my best to implement it.

Note: If you have an issue with your code, please give me a URL to work with. It’s extremely difficult for me to help if I cannot actually see the code.

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!

Parsing XML data from hostip.info API service with PHP

Allen Liu — Thu, 03 Feb 2011 08:35:04 +0000

If you ended up here, then you most likely experienced what I did in trying to figure out how to parse the XML data from the hostip.info web API service.

Basically, it is down to the namespaces that are not accessible by normal means.

Here is the basic XML response from a typical hostip.info call such as http://api.hostip.info/?ip=[IP-ADDRESS]

 version="1.0" encoding="ISO-8859-1" ?>
 version="1.0.1" xmlns:gml="http://www.opengis.net/gml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.hostip.info/api/hostip-1.0.1.xsd">
   >This is the Hostip Lookup Service>
   >hostip>
   >
      >inapplicable>
   >
   >
      >
         >12.215.42.19>
         >Sugar Grove, IL>
         >UNITED STATES>
         >US>
         
         >
            >
                srsName="http://www.opengis.net/gml/srs/epsg.xml#4326">
                  >-88.4588,41.7696>
               >
            >
         >
      >
   >
>

Here is a nice PHP function that will return all the important pieces for you:

function get_location($ip) {
	$content = @file_get_contents('http://api.hostip.info/?ip='.$ip);
	if ($content != FALSE) {
		$xml = new SimpleXmlElement($content);
		$coordinates = $xml->children('gml', TRUE)->featureMember->children('', TRUE)->Hostip->ipLocation->children('gml', TRUE)->pointProperty->Point->coordinates;
		$longlat = explode(',', $coordinates);
		$location['longitude'] = $longlat[0];
		$location['latitude'] = $longlat[1];		
                $location['citystate'] = '==>'.$xml->children('gml', TRUE)->featureMember->children('', TRUE)->Hostip->children('gml', TRUE)->name;
		$location['country'] =  '==>'.$xml->children('gml', TRUE)->featureMember->children('', TRUE)->Hostip->countryName;
		return $location;
	}
	else return false;
}

Here is the usage:

1
2
3

$ip = '12.215.42.19';
$location_info = get_location($ip);
var_dump($location_info);

The dump would look something like this:

array(4) {
  ["longitude"]=>
  string(8) "-74.9072"
  ["latitude"]=>
  string(7) "39.9499"
  ["citystate"]=>
  object(SimpleXMLElement)#5 (1) {
    [0]=>
    string(16) "Mount Laurel, NJ"
  }
  ["country"]=>
  object(SimpleXMLElement)#2 (1) {
    [0]=>
    string(13) "UNITED STATES"
  }
}

To access the longitude:
$location_info['longitude'];

To access the latitude:
$location_info['latitude'];

To access the city/state string:
$location_info['citystate'];

To access the country string:
$location_info['country'];

I did not bother to parse the city/state string because I’m not sure if this format is consistent for international addresses.

Anyway, I hope this code helps someone out there =)

Groupon – Commission Junction (CJ) WordPress Widget Plugin that Displays Local Deals

Allen Liu — Sat, 15 Jan 2011 17:33:38 +0000

I have developed a Groupon -Commission Junction (CJ) WordPress Widget Plugin that automatically displays the local deals for the visitor. It allows you to plugin your Commission Junction (CJ) PID account number and display the local links according to the visitor IP address. The demo of this widget is currently running on this site in the upper right-hand corner.

Here is the backend admin view:

The parameters that you can edit in the backend include:

CJ PID – This is your Commission Junction (CJ) PID number which allows the widget to display Groupon links connected to your CJ affiliate account.
Title – This is the title of the widget which will be shown above the Groupon links list. In the example given on this site, it is simply “Local Deals.”
Max number of links displayed – This parameter allows you to set the maximum number of local deals or Groupon links you would like to display for your visitors. Please note that it is not guaranteed that the maximum number of local deals will be listed every day. That will depend on the availability of Groupon deals in the given area.
Text to display if there are no deals found – Depending on where your visitor may be visiting from, there may be no local Groupon deals available or even setup in that location. In these cases, this is the text that will be displayed.
Loading text – This is the text that will be shown will the widget goes out and searched for your visitor’s local Groupon deals. It is basically a busy indicator.

There is a disclosure that I need to make here and that is regarding the IP address of your visitor. It is not guaranteed that the visitor will actually be seeing local deals if their IP address is not local to their physical location. In the example where a user uses a proxy server based in a different state (or even country), they will actually be seeing deals in the area of the proxy IP address. This does not happen often but it does happen.

With that said, I plan to sell this fully supported plugin for $19. If you are interested in purchasing it, please use the PayPal button below. After the order is placed through, an email will be sent to you with the contents of the widget and further instructions for installation (which is very simple). It has been tested for WordPress versions 2.8 and above.

If you have any questions, please either comment below or write me directly at allen dot liu at randomsnippets dot com. I am also open to any customization requests for this widget. Thanks!

Sorting 2D associative arrays in PHP

Allen Liu — Tue, 14 Jul 2009 06:18:52 +0000

Surprisingly, it took me a long time to find this solution so I decided to post it for anyone who had a situation similar to mine.

Let’s say you have the following 2D associative array in PHP of fruits and their corresponding prices and you want to have them sorted by price:

$fruits = array
(
    [0] => array
        (
            ['product'] => 'banana',
            ['price']     => 2.99
        ),
    [1] => array
        (
            ['product'] => 'apple',
            ['price']     => 1.99
        ),
    [2] => array
        (
            ['product'] => 'durian',  //these smell by the way - i do not know how people can like them =)
            ['price']     => 19.99
        ),
    [3] => array
        (
            ['product'] => 'starfruit', //not too stinky but still stinky nonetheless
            ['price']     => 5.99
        )
);

The answer to this one involves the use of the PHP function, usort, which allows users to define their own comparison function for sorting arrays of all shapes and sizes.

For this example, our function would need to be defined as the following if we wanted to have the prices descending:

function sortDescending ($a, $b)
{
    if ($a['price'] == $b['price']) {
        return 0;
    }
    return ($a['price'] > $b['price']) ? -1 : 1;
}

Here is the slightly different version of the function for an ascending sort:

function sortAscending ($a, $b)
{
    if ($a['price'] == $b['price']) {
        return 0;
    }
    return ($a['price'] < $b['price']) ? -1 : 1;
}

To put it all together in a descending sort, we have the following:

function sortDescending ($a, $b)
{
    if ($a['price'] == $b['price']) {
        return 0;
    }
    return ($a['price'] > $b['price']) ? -1 : 1;
}
usort($fruits, "sortDescending");
 
foreach ($fruits as $fruit) {
    echo $fruit['product'] . ": " . $fruit['price'] . "\n";
}

This would give us the following output:
durian: 19.99 starfruit: 5.99 banana: 2.99 apple: 1.99

Dynamic or on-the-fly percentage calculations with JavaScript

Allen Liu — Sun, 12 Jul 2009 21:34:37 +0000

Here is a simple JavaScript function that does dynamic or on-the-fly percentage calculations.

Demo

MSRP (in dollars)

Sale Price (in dollars)

You have saved 50 %

The savings percentage will change dynamically according to the values placed into the MSRP and sales price inputs. The initial 50% percent value was hardcoded in this case to save time but the value will change accordingly.

Here is the plain HTML:

MSRP


Sale Price


You have saved 50 %

Lines 1 and 3 is where all the action is. The JavaScript function, calculatePercentage, is executed everytime the onkeyup even listener fires and passes the MSRP and Sale Price arguments. As you probably know already, the onkeyup event occurs everytime a keyboard key is released. That is how we are constantly calculating and updating the percent savings.

Here is the JavaScript code for calculatePercentage:

function calculatePercentage (oldval, newval) {
    percentsavings = ((oldval - newval) / oldval) * 100;
    document.getElementById("results").innerHTML = Math.round(percentsavings*100)/100;
}

This is a very simple percentage calculation function that places the results, that have been rounded to 2 decimal places, into the results div. For the sake of brevity, there is no validation for the user input but the function will return NaN (Not a Number) if it is not able to calculate a percentage.

The dangers of embedding the notorious “void(0)” JavaScript code in the href attribute of the “a” tag

Allen Liu — Thu, 09 Apr 2009 04:50:27 +0000

I recent ran into an interesting IE bug involving the following bit of html code:

click me

I honestly did not write this one but I will leave names out of this to protect the innocent =)

The void(0) JavaScript code is usually used to prevent loading or reloading of the page when the user clicks the link.

What we were trying to do here was have the dosomething JavaScript function execute when a user clicks on the link. This works fine in FireFox, Chrome, Safari but not IE. When a user clicks on the link in IE, nothing happens: i.e. (no pun intended) the JavaScript does not execute.

It took us a good amount of time to realize what the issue was with IE. It turns out that the void(0) function was preventing the onclick event to fire.

Although it may not be pretty, this is what we ended up doing and it appears to be cross-browser friendly:

click me

Update: Here is an updated version of the code that accounts for users with JavaScript disabled:

click me

Thanks Ulrich for the suggestion! In this version, if a user has JavaScript disabled, a click on this link will take them to the [alternative link]. If JavaScript is enabled, then dosomething() will execute and the return false will prevent the browser from going to the [alternative link].

Anyway, I hope this helps someone out there in the universe.

How to randomly order or select rows in a MySQL query

Allen Liu — Wed, 29 Oct 2008 06:04:46 +0000

I was looking for a way to order the rows randomly in a MySQL query and the solution was not easy for me to come by. I am posting the solution here in hopes of helping others.

1
2
3

SELECT * 
FROM my_table
ORDER BY RAND()

RAND() returns a random floating-point value but functions to randomly order the selection of rows in the above usage.

If you combine the query with LIMIT, you will end up with a random selection of rows from your table.

SELECT * 
FROM my_table
ORDER BY RAND()
LIMIT 3

Assuming you have more than 3 rows in your table, you will always get 3 random rows from the query.

How to convert MySQL timestamp to PHP date type

Allen Liu — Mon, 06 Oct 2008 05:01:52 +0000

Let’s say you have the following PHP code that extracts the date from the times table in your MySQL database. The date is of timestamp type which has the following format: ‘YYYY-MM-DD HH:MM:SS’ or ’2008-10-05 21:34:02.’

$res = mysql_query("SELECT date FROM times;");
while ( $row = mysql_fetch_array($res) ) {
   echo $row['date'] . "
";
}

This date format that is in the output is in the timestamp format, 2008-10-05 21:34:02, which is not surprising, but you want something that is more “user-friendly” or “readable” as in “9:34 pm October 5, 2008.”

Let’s go back to the drawing board and try again:

$res = mysql_query("SELECT date FROM times;");
while ( $row = mysql_fetch_array($res) ) {
   echo date("g:i a F j, Y ", strtotime($row["date"])) . "
";
}

A sample output from this PHP code would be 9:34 pm October 5, 2008 which is much more user-friendly.

The PHP strtotime function parses the MySQL timestamp into a Unix timestamp which can be utilized for further parsing or formatting in the PHP date function.

Here are some other sample date output formats that may be of practical use:

echo date("F j, Y g:i a", strtotime($row["date"]));                  // October 5, 2008 9:34 pm
echo date("m.d.y", strtotime($row["date"]));                         // 10.05.08
echo date("j, n, Y", strtotime($row["date"]));                       // 5, 10, 2008
echo date("Ymd", strtotime($row["date"]));                           // 20081005
echo date('\i\t \i\s \t\h\e jS \d\a\y.', strtotime($row["date"]));   // It is the 5th day.
echo date("D M j G:i:s T Y", strtotime($row["date"]));               // Sun Oct 5 21:34:02 PST 2008

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!

How to count values with MySQL queries

Allen Liu — Mon, 06 Oct 2008 03:40:35 +0000

Let’s say you have the following table called votes that keeps track of how people voted and you want a query to count the number of votes for you instead of having to loop through all the rows with a counter in PHP.

person	vote
obama	yes
mccain	no
obama	yes
obama	no
mccain	yes
obama	yes
obama	yes
obama	no
mccain	no

Here is the MySQL query that would do just the job.
SELECT person, SUM(IF(vote = "yes", 1,0)) AS `yes_votes`, SUM(IF(vote = "no", 1,0)) AS `no_votes`, COUNT(vote) AS `total` FROM votes GROUP BY person ORDER BY yes_votes DESC

The following would be the result of the query:

person	yes_votes	no_votes	total
obama	4	2	6
mccain	1	2	3

The beauty of the query all lies in the SUM IF statements. For example, in order to count the yes votes, the IF statement will check to see if vote = “yes” as it loops through all the rows. If so, the yes_votes column alias is incremented by 1. The same procedure goes for counting the no votes. The COUNT statements keeps a tally on the total number of votes. The GROUP BY person statement allows the vote counters to calculate the numbers by person instead of the total number of yes and no votes.

Now, you do not have to loop through your MySQL results to count column values =)

How to confirm or prompt user for input via JavaScript

Allen Liu — Fri, 27 Jun 2008 06:59:11 +0000

JavaScript has a built-in function called confirm which takes a string argument that poses the question to the user and gives them the option to click the OK or Cancel buttons and returns true if the user clicks OK.

Demo

green box

yellow box

Here is the HTML code:


    green box
    
        yellow box

The magic is in line 7 where we use confirm to ask a user if he or she really wants to delete our yellow box and retrieves the returned value and saves it in the answer variable. We then test if the answer variable is true and, if so, execute the removeYellowBox function.

In addition to the confirm function, JavaScript also has another built-in function called prompt which prompts the user for input.

Demo

Here is the HTML:

The prompt function will take 2 arguments: the string text for the user to see in the dialog box and the default value for the input. It also returns the user’s input which we have nicely saved into our answer variable.

How to find and access parent nodes via JavaScript

Allen Liu — Fri, 27 Jun 2008 06:15:53 +0000

Have you ever had to access a parent node from a given child node? In this example, we are going to traverse up the DOM tree starting from the button to look for the parent node with the name attribute itsMe.

Demo

My name is notMe

My name is itsMe

My name is notMeEither

My name is tryAgain

My name is sorryNotMe

My name is nopeSorry

Here is the HTML code. It’s just a series of embedded div elements with different names and the input button where we start to traverse up the DOM tree accessing each parent node and asking for it’s name attribute value. The onClick event of the button triggers the findParentNode and passes the name of the element we are looking for and the object itself which, in this case, is the button. This is the starting point where we will begin traversing up the DOM tree by accessing the parent nodes of each element and seeing if the name attribute matches what we are looking for.


My name is notMe
    
    My name is itsMe
        
        My name is notMeEither
            
            My name is tryAgain
                
                My name is sorryNotMe
                    
                    My name is nopeSorry

Here is the findParentNode JavaScript code:

function findParentNode(parentName, childObj) {
    var testObj = childObj.parentNode;
    var count = 1;
    while(testObj.getAttribute('name') != parentName) {
        alert('My name is ' + testObj.getAttribute('name') + '. Let\'s try moving up one level to see what we get.');
        testObj = testObj.parentNode;
        count++;
    }
    // now you have the object you are looking for - do something with it
    alert('Finally found ' + testObj.getAttribute('name') + ' after going up ' + count + ' level(s) through the DOM tree');
}

In line 2, we access the parent node of the child element via the parentNode method which is the first div above the button named nopeSorry. We then begin a count of the number of times we traversed up the DOM tree and set it to 1 because we have already accessed the parent node once. The while loop will test if the name of the current node will match the name that we are looking for. If not, it moves up the DOM tree by accessing the next parent node and continues to look for the right name while increasing the count by 1 each time. Once it finds the right node, the function exits the while loop and alerts the node name along with the number of times it traversed up the DOM tree.

If you do not know the name of the parent element you are looking for you can also search using the tagName method. The tagName will return the value of the tag name of the given node such as A or DIV.

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!

How to loop through checkboxes or radio button groups via JavaScript

Allen Liu — Fri, 16 May 2008 05:00:18 +0000

Do you have a form with checkboxes or radio buttons that you would like to loop through via JavaScript? This JavaScript function will do just that!

Demo

Here is the plain HTML:

As usual, there is not too much action going on here. It is just a plain form with some checkboxes and 2 radio button groups called candy and drink. Radio buttons with the same name will be grouped and allows the users to only select one option out of the entire group. The submit button will launch the loopForm JavaScript function and the myForm DOM object is passed over as an argument. There are also 2 divs in lines 23-24 where are checkbox and radio button results will be posted. Now, on to more exciting things.

Here is the JavaScript code:

function loopForm(form) {
    var cbResults = 'Checkboxes: ';
    var radioResults = 'Radio buttons: ';
    for (var i = 0; i < form.elements.length; i++ ) {
        if (form.elements[i].type == 'checkbox') {
            if (form.elements[i].checked == true) {
                cbResults += form.elements[i].value + ' ';
            }
        }
        if (form.elements[i].type == 'radio') {
            if (form.elements[i].checked == true) {
                radioResults += form.elements[i].value + ' ';
            }
        }
    }
    document.getElementById("cbResults").innerHTML = cbResults;
    document.getElementById("radioResults").innerHTML = radioResults;
}

This function loops through all the elements in the form that was passed over to the function.

If the element is of checkbox type and it is checked, the value of this element will be appended to our cbResults variable which is keeping track of our checkbox results.

If the element is of radio type and it is checked, the value of this element will be appended to our radioResults variable which is keeping track of our radio button results.

After all the looping is finished, the results are cbResults and radioResults are inserted into the cbResults div and radioResults div respectively.

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!

How to create your own customized calculator via JavaScript

Allen Liu — Sun, 27 Apr 2008 01:01:51 +0000

This is a simple example of implementing a calculator with JavaScript and HTML. This calculator will only have the division, multiplication, addition, and subtraction operators but you can easily tack on more functions if needed.

Demo

Here is the html code including the CSS stuff:



Demo

Most of the HTML is coding for all the input buttons and their associated onclick event handlers. All the buttons, except for the = button, will call the pushButton JavaScript when clicked and passes it’s associated value. The = button calls the calculate JavaScript function and passes the value that is in the text input which represents the string of numbers and operators that were pushed. The rest of the HTML is just icing on the cake so that it actually looks like a calculator.

Here is the JavaScript code for the 2 functions:

function pushButton(buttonValue) {
     if (buttonValue == 'C') {
          document.getElementById('screen').value = '';
     }
     else {
          document.getElementById('screen').value += buttonValue;
     }
}
function calculate(equation) {
     var answer = eval(equation);
     document.getElementById('screen').value = answer;
}

The pushButton function does 2 things for us. If the user clicks on the C button or the clear button, it accesses the text input object, which represents our calculator screen, via the DOM . Once it is accessed, the value inside the text input is set to ” (2 single quotes) which is an empty string. This will basically remove whatever string is already inside the text input. If the user clicks on any other button, the function will access the text input object and append the value that was passed over to whatever is already in our text input. This allows us to build our string with numbers and operators.

The calculate function does exactly what it’s name suggests. It takes our string of numbers and operators and evaluates it in line 10. The eval() function treats the string as if it were JavaScript code and executes it and returns the results. The function will then access the text input object and replace whatever the current value is with the answer from the eval() function.

That’s it!

How to dynamically add content to a div and store the content to a cookie via JavaScript

Allen Liu — Tue, 15 Apr 2008 06:45:17 +0000

This is an example of adding dynamic content via JavaScript by allowing the user type in the actual content.

Demo

Your content will be added dynamically below:

Here is the plain HTML for the demo:


Content to be added:
Type here...<h1>tags work as well</h1><u>woohoo</u>





Your content will be added dynamically below:

There are 3 important parts to the HTML code:

textarea – This is the content that the user enters. HTML tags are naturally supported.
Add content button – This buttons calls our addContent() function which passes the div id of where the content is to be entered and the actual content itself from the textarea.
myDiv – This is the id of blank div where the content will be inserted.

Here is the JavaScript code for the addContent() function:

1
2
3

function addContent(divName, content) {
     document.getElementById(divName).innerHTML = content;
}

That’s it! All it does it retrieve the DOM element, which in this case, is just an empty div and sets the innerHTML attribute to the content that is passed over to this function from the form.

This demo is in response to a request that saves the content that the user has entered.

Demo

Your name will be saved below:

Here is the HTML code:


Enter your name below and click the button.  Your name will be saved to a cookie that expires in 7 days.  When you refresh the page or come back to visit you will see a heartwarming message welcoming you back.









Your name will be saved below:

The onClick event listener will launch 2 scripts this time:

addContent – This will do exactly what it did before in the first demo and just insert the input text value inside the div.
setCookie – This will save a cookie with the name content and assign whatever is inside the input text as the value. In addition, the cookie is set to expire in 7 days.

To avoid reinventing the wheel, I have borrowed the JavaScript get and set cookie functions from W3 Schools and edited it slightly for the needs of this demo.

Here are the new JavaScript functions for cookie management:

function setCookie(c_name,value,expiredays) {
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
function getCookie(c_name) {
    if (document.cookie.length>0) {
        c_start=document.cookie.indexOf(c_name + "=");
        if (c_start!=-1) { 
            c_start=c_start + c_name.length+1; 
            c_end=document.cookie.indexOf(";",c_start);
            if (c_end==-1) c_end=document.cookie.length;
            var cookieContent = "Welcome back " + unescape(document.cookie.substring(c_start,c_end));
            document.getElementById('myDiv2').innerHTML = cookieContent;
        } 
    }
}
getCookie('content');

Please refer to W3 Schools for a detailed description of these JavaScript functions. The only edit I have made is with the getCookie function in lines 13-14 where it retrieves the cookie value and inserts the content into a div. Also, line 18 is very important as it calls the getCookie function and looks for the content cookie. If the cookie exists, the content will be displayed in the myDiv2 div.

When using these JavaScripts, make sure you load them after all your HTML is loaded. Otherwise, the function would have no place to insert the cookie content.

Although using cookies is a great way to store information, there are a couple of caveats:

Size limitation – This depends on the browser but keeping your cookies to a maximum size of 4000 bytes will keep you in the safe zone.
Cookie limit per domain – This also depends on the browser but the general rule is 20 cookies per domain.

How to validate email format via JavaScript

Allen Liu — Wed, 02 Apr 2008 05:30:08 +0000

This JavaScript demo verifies that an email address is in the correct format and that the user has typed in the same address in both fields to prevent mistyping of the address. I have borrowed the regex for verifying the correct email format from a different site.

Demo

Here is the plain HTML of the form. Please note that I have removed the action attribute because this is only a demo and we are only concerned with the client-side verification of the JavaScript function.


Email: 

Please type in your email again:

Nothing exciting here except in line 6 where the onClick event is triggered when the user clicks on the button. This event will launch the verifyEmail() JavaScript function which will check the user input of the email address.

Here is the code for the verifyEmail() function:

function verifyEmail(){
var status = false;     
var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
     if (document.myform.email1.value.search(emailRegEx) == -1) {
          alert("Please enter a valid email address.");
     }
     else if (document.myform.email1.value != document.myform.email2.value) {
          alert("Email addresses do not match.  Please retype them to make sure they are the same.");
     }
     else {
          alert("Woohoo!  The email address is in the correct format and they are the same.");
          status = true;
     }
     return status;
}

This function will return a false value if the user does not type in an email address in the correct format or if the user fails to type in the same email address in both fields. If the email addresses passes both these tests, then the function will return a true value.

The regex for validating the correct email format in line 2 has been borrowed and edited slightly by adding the i flag so that the regex is case-insensitive.

The if block in lines 3-6 checks to see if the email address in the first field passes the regex check by invoking the search() method on our email string value. This method accepts regex expressions as arguments to check the string and returns the position of the specified value in the string or a -1 if no match was found. If the search() method returns a -1, then an alert would tell the user that an invalid email address has been entered and returns a false value.

Lines 7-10 checks to see if the user has entered the same string in both email fields. This is done by a simple equality check on the string values. If the strings are different, an alert warns the user that the email addresses are not the same and returns a false value.

If we have passed the two tests, then else block in lines 11-14 gets executed. An alert tells the user that he or she has done a good job and the function returns a true value so that you can continue with the form submission.

Ideally, you would have this function run during the onSubmit attribute for the form tag. This way, the form will get submitted when the checkEmail() function returns a true value. Here is an example of how your form would look like:


Email: 

Please type in your email again:

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!

How to dynamically remove/delete elements via JavaScript

Allen Liu — Thu, 27 Mar 2008 05:57:53 +0000

This post is in response to one of the comments on have received regarding the removal of elements via JavaScript. I have taken the original function posted and edited it a little bit for the demo.

Demo

I am the parent div.

I am a child div within the parent div.

Here is the plain HTML code:

I am the parent div.

I am a child div within the parent div.

The important thing to note here is that the child div is within the parent div. Once the Remove Element button is clicked, the onClick event listener is triggered and launches the removeElement JavaScript function. This functions accepts two arguments:

parent – This is just the div id of the parent div.
child – This is the div id of the child div.

Here is the code for the removeElement JavaScript function:

function removeElement(parentDiv, childDiv){
     if (childDiv == parentDiv) {
          alert("The parent div cannot be removed.");
     }
     else if (document.getElementById(childDiv)) {     
          var child = document.getElementById(childDiv);
          var parent = document.getElementById(parentDiv);
          parent.removeChild(child);
     }
     else {
          alert("Child div has already been removed or does not exist.");
          return false;
     }
}

The if block in lines 2-6 attempts to obtain the child element if it exists. This is just in case the user has already removed the child div and is reattempting to it. In this case, a JavaScript error would normally pop up because the child div does not exist.

If the child element does exist, the first thing that we do is obtain the child element in line 3 using the child div id. Next, we do the same thing with the parent element by using the parent div id Lastly, we invoke the removeChild method from the parent element and pass the child element as the argument. That’s it!

If the child div has already been removed, the else block in lines 7-10 gets executed. In this case, an alert would tell the user that the child div has already been removed and the function would return a false value.

Here is another demo of this JavaScript function where you can type in the name of the child element to be removed and just click on the Remove Element button OR you can just click the button that corresponds to each given child div to remove it.

Demo

My name is parentDiv. I cannot be removed.

My name is child1.

My name is child2.

My name is child3.

Name of child element to be removed:

For those who are lazy in typing in the actual names, we have these handy-dandy buttons:

We are using the same JavaScript function as above. Here is the plain HTML for the demo:

My name is parentDiv. I cannot be removed.

My name is child1.

My name is child2.

My name is child3.

Name of child element to be removed:

For those who are lazy in typing in the actual names, we have these handy-dandy buttons:

Here is a demo that removes child elements from the parent using checkboxes that a user would select. This demo uses the same removeElement JavaScript function.

Demo

My name is parentDivElement. I cannot be removed.

My name is childOne.

My name is childTwo.

My name is childThree.

Remove childOne
Remove childTwo
Remove childThree

My name is parentDivElement. I cannot be removed.

My name is childOne.

My name is childTwo.

My name is childThree.

Remove childOne Remove childTwo Remove childThree

The concept is the same as the previous demos where we attach the removeElement function to an event handler, which in this case is the onClick event handler of the checkbox. Once the checkbox is checked (or even unchecked), it fires off the onClick event handler and executes the removeElement JavaScript function and passes off the name of the parent div and the value of the checkbox.

If you are interested in hiding content via JavaScript and not necessarily deleting or removing them from the DOM, see my post on How to Hide and Show Your Div.

Update: Since my initial writing of this blog post, some great JavaScript libraries have been implemented which makes removing elements much easier! One of these JavaScript libraries is jQuery and I have done a similar post on removing elements from the DOM: How to dynamically remove elements from the DOM via jQuery.

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!

How to find and replace text dynamically via JavaScript

Allen Liu — Fri, 07 Mar 2008 07:18:20 +0000

This is a neat little script that demonstrates two things:

1) Find – If only the Find box is filled in, then the findMyText() JavaScript function will just perform a find for the div that is given. If there is a match, the text will be highlighted and marked in bold.

2) Find and Replace – If both the Find and Replace boxes are filled in, then the findMyText() JavaScript function will do just that.

Demo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Find
Replacment

Here is the plain HTML:


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




Find 
Replacment

Please excuse the use of the table for the text inputs and labels. WordPress does some automatic formatting which is annoying sometimes but it is still a great application =) The only thing of importance here is on line 9 where the onClick event executes the findMyText() function and passes 2 arguments:

Needle – This is the text that we are trying to find in the haystack of text.
Replacement – This is our replacement text for any needle that we find.

Here is our JavaScript function:

var haystackText = "";
function findMyText(needle, replacement) {
     if (haystackText.length == 0) {
          haystackText = document.getElementById("haystack").innerHTML;
     }
     var match = new RegExp(needle, "ig");     
     var replaced = "";
     if (replacement.length > 0) {
          replaced = haystackText.replace(match, replacement);
     }
     else {
          var boldText = "\"background-color: yellow; display: inline; font-weight: bold;\">" + needle + "
";
          replaced = haystackText.replace(match, boldText);
     }
     document.getElementById("haystack").innerHTML = replaced;
}

Like many of the scripts that you see here, using the JavaScript DOM objects is the key to doing the find and replace dynamically for our website.

The script asks for two parameters: the needle which we are looking for in our text and the text we want to replace it with. Please note that the replacement text is totally optional. If no replacement text is given, then the behavior of the function changes a bit.

The haystackText variable is outside of the function in line 1 because we want to store the original text and always base our searches on the original text. In lines 3-5 is where we store the original text in our haystack div if it is not already set.

Line 6 creates a regular expression object where we place our needle variable along with two flags:

i – This flag causes the regular expression match to be case-insensitive.
g – This flag causes the regular expression match to be global so it matches every occurrence instead of just the first one.

Lines 8-10 checks to see if the replacement text was set. If so, we will use the replace method on our haystackText string object and feed it our match and replacement texts. The resulting string will be saved in the replaced variable.

If the replacement text was not set, the else block in lines 11-14 will be executed. We first prepare a variable of our needle that has a bit of extra styling such as a yellow background and bold text so it stands out better. Next, we just use the replace method on our haystackText string object and pass the match and replacement texts. The resulting string will be saved in the replaced variable.

Lastly, the replaced variable which contains our results is used to substitute what was originally in our haystack div.

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!

Simulate a button click via JavaScript

Allen Liu — Wed, 05 Mar 2008 07:09:21 +0000

There is a rare need for this type of functionality but I have found myself in a couple of situations where I needed it. Here is a quick demo of a button click that is simulated from another event handler. In this case, the button click is invoked by checking a checkbox.

Demo

Check the box to simulate a button click

Here is the HTML code including the JavaScript:

1
2
3

<input type="checkbox" onClick="document.getElementById('theSubmitButton').click();">Check the box to simulate a button click
<br>
<input type="button" name="theSubmitButton" id="theSubmitButton" value="Button" onClick="alert('The button was clicked.');">

If the button is clicked directly, a JavaScript alert will pop up with the following message:

The button was clicked.

The onClick event handler for the checkbox will access the HTML DOM button object and invoke the click() method. This simulates the button click and invokes the alert.

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!

JavaScript to select all or none of the checkboxes in a form

Allen Liu — Thu, 28 Feb 2008 07:24:09 +0000

Here is a quick demo of the select all or none JavaScript function that automatically toggles all of your checkboxes in a given form.

Demo

This is the plain HTML of the form:


My favorite programming/scripting language is:
Select All | None

JavaScript

Perl

PHP

C++

There is nothing exciting about the HTML code except for line 3 where all the magic happens. There are 2 links in this line of code:

All - When the user clicks on this link, it will execute the selectToggle() JavaScript function and passes over 2 arguments: the value to set the checkboxes (true in this case) and the name of the form.
None - This link executes the selectToggle() JavaScript function and passes over the false value to uncheck the checkboxes and the name of the form.

Here is a peek at the selectToggle() JavaScript function:

function selectToggle(toggle, form) {
     var myForm = document.forms[form];
     for( var i=0; i < myForm.length; i++ ) { 
          if(toggle) {
               myForm.elements[i].checked = "checked";
          } 
          else {
               myForm.elements[i].checked = "";
          }
     }
}

This function basically loops through all of the inputs in the given form name that is passed over as an argument. Depending on the value of the toggle parameter, which can be true or false, each form element will checked or unchecked respectively.

Form verification via JavaScript

Allen Liu — Wed, 27 Feb 2008 07:27:12 +0000

Are you looking for a simple way to verify a form that you have? The example below demonstrates some of the common techniques used in verifying a form. Test out the form by leaving at least one of the fields blank before you submit the form.

Demo

Here is the plain HTML for the form:


UsernamePlease fill in your username.


EmailPlease fill in your email.

Notice that the error warnings such as the Please fill in your username. or Please fill in your email. have already been preloaded but hidden from the viewer by setting the display attribute to none. If the user submits the form with one or more of the fields blank, 4 things will happen to notify the user (Note: I tried to squeeze in as many warning events as possible just for demonstration purposes so I apologize if it is a bit over the top):

the background of the missing input field will turn yellow
a red border will appear around the missing input field
the hidden error message will become visible
an alert will pop up notifying the user that 1 or more fields are missing

When the user clicks on the Submit button, the onSubmit event gets triggered and executes the verifyForm() JavaScript function. If the onSubmit event returns a false value, the form does not get submitted. This value is determined by the verifyForm() function, which returns true if all fields are filled in and returns false if one or more fields are missing.

Here is a peek at the JavaScript verifyForm() function:

function verifyForm(form) {
    var userName = form.name.value;
    var userEmail = form.email.value;
    var success = 1;
    if (!userName) {
        document.getElementById("usernameMsg").style.display = "block";
        form.name.style.backgroundColor = "yellow";
        form.name.style.border = "3px red solid";
        success = 0;
    }
    else {
        form.name.style.backgroundColor = "";
        form.name.style.border = "";
        document.getElementById("usernameMsg").style.display = "none";
    }
    if (!userEmail) {
        document.getElementById("emailMsg").style.display = "block";
        form.email.style.backgroundColor = "yellow";
        form.email.style.border = "3px red solid";
        success = 0;
    }
    else {
        form.email.style.backgroundColor = "";
        form.email.style.border = "";
        document.getElementById("emailMsg").style.display = "none";
    }
    if(!success) {
        alert("The form is incomplete.  Please read the error message(s).");
        return false;
    }
    else {
        alert("The form was submitted succesfully!");
        return true;
    }
}

Lines 5-15 checks to see if the username field is blank or not. If the field is blank, it uses the DOM to access the div that is holding our warning message to the user and sets the display attribute to block (line 6). This makes the message visible to the user.

Next, it accesses the input text field and dynamically changes the backgroundColor attribute to yellow (line 7).

Then, it accesses the input text field again and dynamically changes the border attribute to 3px red solid (line 8). Here is a quick breakdown of the attribute we just used:

3px – the width of the border
red – the color of the border
solid – the style of the border

Finally, it sets the success variable to 0 which is equivalent to a false value (line 9). We will use this variable later on to decide if the form is ready to be submitted or not.

The else statement in lines 11-14 just resets all the styling back to the default values. This is for the case where a user is resubmitting the form so we want to remove all the warnings just in case they were activated from any previous submissions.

Lines 16-26 does the same exact thing except it is for the email text input field. Remember, all we are doing in this example is checking to see if the field is empty or not. This is to keep the code simple.

Line 27 checks the success variable to see if it had been set to false. If so, an alert is executed telling the user that one or more fields were missing and to check the error messages (line 28). Then it returns a false value to prevent the form from being submitted (line 29).

If the form has been filled-in completely, the else block gets executed in lines 31-34. In this case, an alert is executed saying that the form was submitted successfully. As a resutl, the function returns the value true which then submits the form.

Dynamically edit font styling of HTML content via JavaScript

Allen Liu — Mon, 25 Feb 2008 05:12:38 +0000

The Document Object Model (DOM) allows for dynamic styling because it makes all HTML elements and attributes readily accessible using JavaScript. Here is a simple demo of how powerful this technology can be:

Demo

Hello world!

Here is the JavaScript code that makes all this possible:

<div id="dynamicContent">Hello world!div>
<input type="button" onClick="document.getElementById('dynamicContent').style.fontWeight = 'bolder';" value="Bold">
<input type="button" onClick="document.getElementById('dynamicContent').style.fontWeight = 'lighter';" value="Lighter">
<input type="button" onClick="document.getElementById('dynamicContent').style.fontStyle = 'normal';" value="Normal">
<input type="button" onClick="document.getElementById('dynamicContent').style.fontStyle = 'italic';" value="Italic">
<input type="button" onClick="document.getElementById('dynamicContent').style.fontFamily = 'courier';" value="Courier">
<input type="button" onClick="document.getElementById('dynamicContent').style.fontFamily = 'roman';" value="Times Roman">

In this example, we use the JavaScript onClick event handler to dynamically change the content styling of the text within the div tags. To access the div object, we use the getElementById() function and pass over the div id which is, dynamicContent in this case, as the argument. Once we have access to the div element, we have access to all the styles that are associated with it.

There are a myriad of things that you can change such as font size, font weight, font face, font color, background color, borders and much much more.

How to dynamically add form elements via JavaScript

Allen Liu — Thu, 21 Feb 2008 08:00:43 +0000

Not all forms are meant to be static. Sometimes, you want to allow the users to add certain parts of the form as they need them. Here is a nice example of dynamically adding inputs to your form as users need them. In addition, an input limit has been implemented in the script and it is set to 3.

Demo

Here is the plain HTML for the form:



     
          Entry 1

When the user clicks on the Add another text input button, the addInput JavaScript function is executed and given the dynamicInput argument which is the name of the div that contains all our text inputs. Here is what our JavaScript function looks like:

var counter = 1;
var limit = 3;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry " + (counter + 1) + " 
";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

There are a couple of global variables:

counter – Tracks the number inputs being added.
limit – The maximum number inputs allowed for the user to add. In this case, we are limiting the user to a maximum of 3 input texts that they can submit with the form.

The addInput JavaScript function expects a parameter, which in this case is the id of the div, to add the dynamic text inputs. Once executed, the function will first check to see if the maximum number of input texts have already been used. If so, an alert will be given stating that the limit has been reached.

If the limit has not been reached, then the else block of the code is executed. A new div element is created and the inner HTML is set with 2 things:

Entry # – The global variable, counter, keeps track of the current number of text inputs that are in the form.
The input text element – The name of these text inputs,myInputs[], is followed by square brackets to indicate that it is an array. This will be more important later on when the form is submitted using the POST method.

If the form gets submitted to a PHP file, you can easily access each input value for your myInputs array. Here is the PHP code for doing just that:

$myInputs = $_POST["myInputs"];
foreach ($myInputs as $eachInput) {
     echo $eachInput . "
";
}

This is just a sample code to echo all the text input values that were sent from the form. An array variable, $myInputsPHP, is initialized with the myInputs from the form. Then, the foreach loop will go through each value and print them out.

Here is another version of this script that adds different types of inputs such as text fields, radio buttons, checkboxes, and textareas. To simplify things, the limit functionality has been removed.

Demo

Here is the plain JavaScript code for the addAllInputs function. It accepts 2 arguments:

div id – This is the div id where all the dynamic inputs will be added to.
input type – This is the type of input that we want to add.

var counterText = 0;
var counterRadioButton = 0;
var counterCheckBox = 0;
var counterTextArea = 0;
function addAllInputs(divName, inputType){
     var newdiv = document.createElement('div');
     switch(inputType) {
          case 'text':
               newdiv.innerHTML = "Entry " + (counterText + 1) + " 
";
               counterText++;
               break;
          case 'radio':
               newdiv.innerHTML = "Entry " + (counterRadioButton + 1) + " 
";
               counterRadioButton++;
               break;
          case 'checkbox':
               newdiv.innerHTML = "Entry " + (counterCheckBox + 1) + " 
";
               counterCheckBox++;
               break;
          case 'textarea':
	       newdiv.innerHTML = "Entry " + (counterTextArea + 1) + " 
type here...";
               counterTextArea++;
               break;
          }
     document.getElementById(divName).appendChild(newdiv);
}

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!

How to hide, show, or toggle your div

Allen Liu — Wed, 13 Feb 2008 06:45:00 +0000

Are you trying to find a way to hide and show your content? The demo below shows a simple yet elegant way of toggling your content and toggling the control text via Javascript and styling.

Demo

Let's use images! click image to expand/collapse==>

This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript. This content will toggle.

We will cover how to implement this example later on in the tutorial but first let's start with a simple example.

Demo

show <== click here

Here is the sample HTML and Javascript code:

<script language="javascript"> 
function toggle() {
	var ele = document.getElementById("toggleText");
	var text = document.getElementById("displayText");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "show";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "hide";
	}
} 
script>
 
show <== click Here
peek-a-boo

By default, the peek-a-boo text is loaded when the page loads but the display attribute for the div that the content resides in is set to none so it is not visible to the visitor. When the link is clicked, the toggle() JavaScript functions executes and checks the value of the display style for the div that contains the content that we want to toggle.

If the display style is none, the function will:

Set the display style to block - This is executed in the else block of the function. The inner HTML content of a DOM element with a block display setting will be visible unless it is furthered controlled by CSS styling.
Change the link text to hide - The inner HTML of the link text, which in this case is just show, is replaced with the hide text.

If the display style is block, the function will:

Set the display style to none - This is executed in the if block of the function. The inner HTML content of a DOM element with the none display setting will not be visible for the viewer.
Change the link text to show - The inner HTML of the link text, which in this case is just hide, is replaced with the show text.

Here is a more reusable and flexible toggle function that takes 2 parameters: one for the div to hide/show and a second parameter for the div that contains the link text to be switched.

<script language="javascript"> 
function toggle(showHideDiv, switchTextDiv) {
	var ele = document.getElementById(showHideDiv);
	var text = document.getElementById(switchTextDiv);
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "show";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "hide";
	}
} 
script>

If you spice up this demo with some extra CSS styling, this can look like a nice little dialog box.

Demo

Hide/Show Div Demo - Click here ==>

collapse

This example demonstrates how CSS styling can make this look like a window that you can collapse and restore. How cool is that?!

Here is what the CSS styling looks like:

#headerDiv, #contentDiv { float: left; width: 510px; } #titleText { float: left; font-size: 1.1em; font-weight: bold; margin: 5px; } #myHeader { font-size: 1.1em; font-weight: bold; margin: 5px; } #headerDiv { background-color: #0037DB; color: #9EB6FF; } #contentDiv { background-color: #FFE694; } #myContent { margin: 5px 10px; } #headerDiv a { float: right; margin: 10px 10px 5px 5px; } #headerDiv a:hover { color: #FFFFFF; }

Here is the HTML code:


     Hide/Show Div Demo - Click here ==>
collapse



     This is the content that is dynamically being collapsed.

That's all there is to it! =)

Here is the toogle2 JavaScript function:

function toggle2(showHideDiv, switchTextDiv) {
	var ele = document.getElementById(showHideDiv);
	var text = document.getElementById(switchTextDiv);
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "restore";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "collapse";
	}
}

As requested, here is an example of a JavaScript function that toggles multiple elements simultaneously. You can either toggle each DIV individually or use the button to toggle all 3 regardless of which toggle mode they are in.

Demo

collapse

Div #1

collapse

Div #2

collapse

Div #3

This demo uses the toggle2 function as previously demonstrated and a new function called toggle3. I apologize for not being very creative on the function names. Anyway, here is the JavaScript code for toggle3:

function toggle3(contentDiv, controlDiv) {
        if (contentDiv.constructor == Array) {
                for(i=0; i < contentDiv.length; i++) {
                     toggle2(contentDiv[i], controlDiv[i]);
                }
        }
        else {
               toggle2(contentDiv, controlDiv);
        }
}

Line 2 of the function checks to see if the first argument is an array or not. If it is an array, it will also assume that the second argument is an array as well. If it is an array, the script will loop through each element and execute toggle2 with each pair of elements in the arrays. Please note that this function also assumes that both arrays are in the same order such that contentDiv[3] and controlDiv[3] are a pair that refer to the same toggle element.

If the first argument is not an array, we will just pass the arguments as is to toggle2.

Here is the HTML code for the demo:

All the excitement is jammed into line 23 where we call the toggle3 function and pass over 2 arrays: one array containing all the content div ids and another array containing the header div ids. The rest is history =)

This demo was written in response to a request. We start off with some hidden divs and each click of the button will reveal one div at a time. When we have revealed all the divs, the button will disappear.

Demo

Here is the HTML code:


   
      
         First
      
      
         Second
      
         Third

The HTML code contains 3 hidden divs to start off with. The button will launch the toggle4 JavaScript function and pass over the prefix of the div IDs. Each div id is named with the prefix box and a number following the name. For example, box1, box2, and box3. This is important for our JavaScript function. In addition, it increments the counter by 1 each time. This variable is initialized in our function.

Here is the JavaScript code:

var counter = 0;
var numBoxes = 3;
function toggle4(showHideDiv) {
       var ele = document.getElementById(showHideDiv + counter);
       if(ele.style.display == "block") {
              ele.style.display = "none";
       }
       else {
              ele.style.display = "block";
       }
       if(counter == numBoxes) {
                document.getElementById("toggleButton").style.display = "none";
       }
}

Lines 1 and 2 will initialize two very important variables for us:

counter - This variable will help us determine which box we will need to toggle.
numBoxes - This variable represents the total number of boxes. This is important for us to know when we should hide the button.

Line 4 accesses the div we will need to toggle based on the name that is passed over as the argument and the counter. When these 2 values are concatenated, we get the name of the div we will need to toggle.

Lines 5-10 tells the same old story as before for toggling the content.

Lines 11-13 tests to see if we have reached our maximum number of divs to toggle. If so, it will access the toggle button and set the display attribute to none.

By popular demand, here is a demo that uses images instead of the Expand/Collapse text.

Demo

Let's use images!

This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.

Here is the HTML code:


    Let's use images!
    

This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.

Everything is pretty much the same as before except the image tag is used instead of the Expand/Collapse text.

Here is the JavaScript code:

function toggle5(showHideDiv, switchImgTag) {
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
                ele.style.display = "none";
		imageEle.innerHTML = '';
        }
        else {
                ele.style.display = "block";
                imageEle.innerHTML = '';
        }
}

The toggle5 JavaScript function is pretty much the same as the rest of the toggle functions except that it switches the img tags instead of text.

Here is a new demo in response to a request where only one div is displayed at any one time.

Demo

collapse

Div #1

collapse

Here is the plain HTML code:

Clicking on the links will execute the showonlyone JavaScript function and pass on the name of the div id.

Here is the showonlyone JavaScript code:

function showonlyone(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
            for(var x=0; x<newboxes.length; x++) {
                  name = newboxes[x].getAttribute("class");
                  if (name == 'newboxes') {
                        if (newboxes[x].id == thechosenone) {
                        newboxes[x].style.display = 'block';
                  }
                  else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
}

Thanks to Justin and Ulysses for helping out with the IE6 bug that was there =)
Also, thanks to Mark for suggesting to switch from name attribute to using class attribute to be compliant with W3C standards =)

Line 2 will find all our divs with the newboxes name attribute and place them in an array. Lines 3-10 will loop through these divs and check to see if the id of the div matches the id that was passed over to the function. If there is a match, the function will set the display attribute to block which will make the div and all its contents visible. If the id does not match, the display attribute will be set to none which will make the div and all its contents hidden.

Here is a new demo in response to a request where only one div is displayed at any one time but also have the link to be able to hide the div as well (or basically toggle).

Demo

toggle

Div #1

toggle

Here is the HTML code:

Here is the JavaScript function:

function showonlyonev2(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
      for(var x=0; x<newboxes.length; x++) {
            name = newboxes[x].getAttribute("class");
            if (name == 'newboxes-2') {
                  if (newboxes[x].id == thechosenone) {
                        if (newboxes[x].style.display == 'block') {
                              newboxes[x].style.display = 'none';
                        }
                        else {
                              newboxes[x].style.display = 'block';
                        }
                  }else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
}

This is very similar to the showonlyone() function except now we are toggling the content.

Here is a tutorial that shows how to hide or show content based on links on different pages.

If there any other demos/tutorials that you would like to see on this subject, please feel free to comment below and I will try my best to implement it.

Note: If you have an issue with your code, please give me a URL to work with. It's extremely difficult for me to help if I cannot actually see the code.

UPDATE: Since this post has been pretty popular, I felt is was my duty to update it newer methods that was not available at the time of writing this blog. Nowadays, it is much easier to use jQuery to hide or show content.

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers! OR...you can sign up for a free Dropbox account using my referral link =) If you are not aware of what Dropbox is, it is the most awesomest online backup application there and so much more...all for free.

Dynamic Country State Javascript Menu Example

Allen Liu — Sat, 09 Feb 2008 07:36:02 +0000

I have found myself in a couple of situations where I needed a simple dynamic javascript menu where the user would make a selection from one select list and depending on what the user selected from the first select list a second list would offer further options. Here is a perfect example:

Demo

Country:

State/Province:

Country value:
State/Province value:

In this example, the state/province menu is disabled until the user has first selected a country. Then depending on the country that is chosen, the list of associated states or provinces would follow. For the sake of simplicity, only the state/province menus have been implemented for the United States and Canada. If any other country is chosen, the value for the state input defaults to Other.

Here is the HTML code for the example:

Country:

State/Province:

Country value:
State value:

After the user makes a country selection, the Javascript onChange event is fired and executes the printStateMenu Javascript function and passes the value of the country that was chosen as an argument. The table just displays the current values of the country and state select inputs. Please note that the script source path on line 1 will have to edited depending on where you store the JavaScript function. Here is the Javascript code for the printStateMenu function:

function printStateMenu(country) {     
	var stateSelect = '';
	if (country == 'US') {
		stateSelect = '';
	}
	else if (country == 'CA') {
		stateSelect = '';
	}
	else {
		stateSelect = '';
	}
	document.getElementById('stateSelect').innerHTML = stateSelect;
	document.getElementById('countryValue').innerHTML = document.getElementById('country').value;
	document.getElementById('stateValue').innerHTML = document.getElementById('state').value;
}

This Javascript function is pretty simple. It looks at the country value that was selected and creates the corresponding state/province menu. Then it replaces the HTML code in the stateSelect DOM element with the new select menu. The state/province select inputs for US and Canada also have an onChange event that displays the chosen value of the state input into the table. The select menu for any other country will just return a disabled select menu and default to the Other value for the state input.