?
Solved

Need a drill down map of all US cities

Posted on 2012-09-18
15
Medium Priority
?
589 Views
Last Modified: 2012-09-21
II am looking for a paid or free solution to accomplish the following: display a US states map, click on any state, this would open that state's page on my site with a map of all major cities, that I would then link to search results page for each city. The solution cannot be a flash map and has to load fairly quickly.

I've searched and searched and so far only found flash maps that would accomplish the above. I would consider Google, Microsoft, or Yahoo maps. It can be a joomla component/module, image maps, or an any other script.
0
Comment
Question by:greenerpastures
  • 8
  • 6
15 Comments
 
LVL 35

Expert Comment

by:gr8gonzo
ID: 38413788
That's a pretty specific request. You're probably not going to find something like that pre-made, but you can probably build it.

US Map showing States:
http://upload.wikimedia.org/wikipedia/commons/1/1e/Map_of_USA_showing_state_names.png

Coordinates and Population of the Top 1000 Major US Cities:
http://www.world-gazetteer.com/wg.php?x=&men=gcis&lng=en&des=wg&geo=-223&srt=npan&col=abcdefghinoq&msz=1500&pt=c&va=x

You could use PHP, the GD library, and a little math to programmatically place the cities onto the map when someone clicks on it. The code to actually do all this is beyond the scope of a simple question. That's several hours of work, most likely, so it's more of a project, but if you want to do it, those are the components you'd need.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38414987
Several hours for sure once it is polished up and all states and cities are in an array or external file, but here's what I came up with after an hour of work. I downloaded a complete web page that opens with an image map of the 50 states, each state clickable. I added a modal popup and used Google Maps API to load a google map of each state in the popup when you click on a state. I used a couple of sources for a list of major cities an their coordinates and added them to an array. (I used the one mentioned by @gr8gonzo but found it to be incomplete and the coordinates are sometimes shown in positive numbers when they should be negative.) I only did two states, South Dakota and Florida. That part is tedious. I use the array of information to add markers to the state map in the popup. Click on a marker and I have the page redirecting to Wikipedia for that city but it could just as easily go to a custom page of your making.

To repeat my test, go here and download usmap.zip: http://naspinski.net/post/CSS-image-map-with-rollovers--map-of-the-United-States.aspx
That zip file is a complete web page with images, markup and css.

Replace the index.htm file with this modified version.
<!--
US Map CSS Rollover Image Map
Developed by: Stan Naspinski - 2006 (mrstan@gmail.com)
Feel free to use this code, recognition would be appreciated!-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>CSS Rollover Image Map - U.S.</title>
    <link rel="stylesheet" href="StyleSheet.css" type="text/css" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript">
	  var states = [
			['South Dakota',45.44, -98.50, 'Aberdeen', 44.89, -97.12, 'Watertown',44.08,-103.23, 'Rapid City',43.55,-96.70, 'Sioux Falls'],
			['Florida', 26.64, -82.00, 'Cape Coral',26.14,-80.14,'Fort Lauderdale',25.86,-80.30,'Hialeah',26.03,-80.16,'Hollywood',30.33,-81.66,'Jacksonville',25.78,-80.21,'Miami',25.98,-80.33,'Miramar',28.50,-81.37,'Orlando',26.01,-80.34,'Pembroke Pines',27.28,-80.35,'Port Saint Lucie',27.76,-82.64,'Saint Petersburg',30.46,-84.28,'Tallahassee',27.96,-82.48,'Tampa']		
	  ] 
      $(document).ready(function(){
		  $('a').bind('click', function(){
			  $('#stateMap').css('display', 'block');
			  $('#closeButton').css('display', 'block');
			  displayState($(this).attr('title'));
		  });
		  $('#closeButton').bind('click', function(){
			  $('#stateMap').html("");
			  $('#stateMap').css('display', 'none');
			  $('#closeButton').css('display', 'none');			  
		  });
	  }); 
	  function displayState(state){
      	var myOptions = {
			zoomControl: false,
			panControl: false,
			mapTypeControl: false,
			scaleControl: false,
			scrollwheel: false, 
			navigationControl: false,
	  		mapTypeId: google.maps.MapTypeId.ROADMAP
	  	};
      	var map = new google.maps.Map(document.getElementById("stateMap"), myOptions);
      	var geocoder = new google.maps.Geocoder();

      	geocoder.geocode({'address': state}, function (results, status) {
         	var ne = results[0].geometry.viewport.getNorthEast();
         	var sw = results[0].geometry.viewport.getSouthWest();

         	map.fitBounds(results[0].geometry.viewport);               
      	});
		var marker, cityLatLng, markerArray;
		for (var i=0; i<states.length; i++){
			if (states[i][0] == state){
				markerArray = states[i];
			}
		}
		for (var j=1; j<markerArray.length; j+=3){
			cityLatLng = new google.maps.LatLng(markerArray[j], markerArray[j+1])
			marker = new google.maps.Marker({
                position: cityLatLng,
                map: map,
                animation: google.maps.Animation.DROP,
				title: markerArray[j+2]
            });
			google.maps.event.addListener(marker, "click", function () {
               window.location.href = "http://en.wikipedia.org/wiki/" + this.title.replace(' ', '_') + ',_' + state.replace(" ", "_");
            });
		}
	  }
   </script>
   <style type="text/css">
   #stateMap {
	   display:none;
	   width:500px;
	   height:500px;
	   position:absolute;
	   top:30px;
	   left:30px;
	   border:1px solid green;
	   z-index:100
   }
   #closeButton {
	   width:50px;
	   height:20px;
	   position:absolute;
	   top:5px;
	   left:500px;
	   color:#fff;
	   font-family:Arial, Helvetica, sans-serif;
	   font-size:1em;
	   cursor:pointer;
	   display:none	   
   }
   </style> 
</head>
<body>
    <div id="closeButton">X</div>
    <div id="stateMap">
    </div>
    <dl id="imap">
		<dt>
			<a id="us" href="#nogo" title="us">
				<span>United States</span>
			</a>
		</dt>
		<dd id="imgal">
			<a id="al" href="#al" title="Alabama">
				<span>
				    Alabama
				</span>
			</a>
		</dd>
		<dd id="imgak">
			<a id="ak" href="#ak" title="Alaska">
				<span>
				    Alaska
			    </span>
			</a>
		</dd>
		<dd id="imgaz">
			<a id="az" href="#az" title="Arizona">
				<span>
				    Arizona
			    </span>
			</a>
		</dd>
		<dd id="imgar">
			<a id="ar" href="#ar" title="Arkansas">
				<span>
				    Arkansas
			    </span>
			</a>
		</dd>
		<dd id="imgca">
			<a id="ca" href="#ca" title="California">
				<span>
				    California
			    </span>
			</a>
		</dd>
		<dd id="imgco">
			<a id="co" href="#co" title="Colorado">
				<span>
				    Colorado
			    </span>
			</a>
		</dd>
		<dd id="imgct">
			<a id="ct" href="#ct" title="Connecticut">
				<span>
				    Connecticut
			    </span>
			</a>
		</dd>
		<dd id="imgdc">
			<a id="dc" href="#dc" title="Washington D.C.">
				<span>
				    Washington D.C.
			    </span>
			</a>
		</dd>
		<dd id="imgde">
			<a id="de" href="#de" title="Delaware">
				<span>
				    Delaware
			    </span>
			</a>
		</dd>
		<dd id="imgfl">
			<a id="fl" href="#fl" title="Florida">
				<span>
				    Florida
			    </span>
			</a>
		</dd>
		<dd id="imgga">
			<a id="ga" href="#ga" title="Georgia">
				<span>
				    Georgia
			    </span>
			</a>
		</dd>
		<dd id="imgha">
			<a id="ha" href="#ha" title="Hawaii">
				<span>
				    Hawaii
			    </span>
			</a>
		</dd>
		<dd id="imgid">
			<a id="id" href="#id" title="Idaho">
				<span>
				    Idaho
			    </span>
			</a>
		</dd>
		<dd id="imgil">
			<a id="il" href="#il" title="Illinois">
				<span>
				    Illinois
			    </span>
			</a>
		</dd>
		<dd id="imgin">
			<a id="in" href="#in" title="Indiana">
				<span>
				    Indiana
			    </span>
			</a>
		</dd>
		<dd id="imgia">
			<a id="ia" href="#ia" title="Iowa">
				<span>
				    Iowa
			    </span>
			</a>
		</dd>
		<dd id="imgks">
			<a id="ks" href="#ks" title="Kansas">
				<span>
				    Kansas
			    </span>
			</a>
		</dd>
		<dd id="imgky">
			<a id="ky" href="#ky" title="Kentucky">
				<span>
				    Kentucky
			    </span>
			</a>
		</dd>
		<dd id="imgla">
			<a id="la" href="#la" title="Louisiana">
				<span>
				    Louisiana
			    </span>
			</a>
		</dd>
		<dd id="imgme">
			<a id="me" href="#me" title="Maine">
				<span>
				    Maine
			    </span>
			</a>
		</dd>
		<dd id="imgmd">
			<a id="md" href="#md" title="Maryland">
				<span>
				    Maryland
			    </span>
			</a>
		</dd>
		<dd id="imgma">
			<a id="ma" href="#ma" title="Massachusetts">
				<span>
				    Massachusetts
			    </span>
			</a>
		</dd>
		<dd id="imgmi">
			<a id="mi" href="#mi" title="Michigan">
				<span>
				    Michigan
			    </span>
			</a>
		</dd>
		<dd id="imgmn">
			<a id="mn" href="#mn" title="Minnesota">
				<span>
				    Minnesota
			    </span>
			</a>
		</dd>
		<dd id="imgms">
			<a id="ms" href="#ms" title="Mississippi">
				<span>
				    Mississippi
			    </span>
			</a>
		</dd>
		<dd id="imgmo">
			<a id="mo" href="#mo" title="Missouri">
				<span>
				    Missouri
			    </span>
			</a>
		</dd>
		<dd id="imgmt">
			<a id="mt" href="#mt" title="Montana">
				<span>
				    Montana
			    </span>
			</a>
		</dd>
		<dd id="imgne">
			<a id="ne" href="#ne" title="Nebraska">
				<span>
				    Nebraska
			    </span>
			</a>
		</dd>
		<dd id="imgnv">
			<a id="nv" href="#nv" title="Nevada">
				<span>
				    Nevada
			    </span>
			</a>
		</dd>
		<dd id="imgnh">
			<a id="nh" href="#nh" title="New Hampshire">
				<span>
				    New Hampshire
			    </span>
			</a>
		</dd>
		<dd id="imgnj">
			<a id="nj" href="#nj" title="New Jersey">
				<span>
				    New Jersey
			    </span>
			</a>
		</dd>
		<dd id="imgnm">
			<a id="nm" href="#nm" title="New Mexico">
				<span>
				    New Mexico
			    </span>
			</a>
		</dd>
		<dd id="imgny">
			<a id="ny" href="#ny" title="New York">
				<span>
				    New York
			    </span>
			</a>
		</dd>
		<dd id="imgnc">
			<a id="nc" href="#nc" title="North Carolina">
				<span>
				    North Carolina
			    </span>
			</a>
		</dd>
		<dd id="imgnd">
			<a id="nd" href="#nd" title="North Dakota">
				<span>
				    North Dakota
			    </span>
			</a>
		</dd>
		<dd id="imgoh">
			<a id="oh" href="#oh" title="Ohio">
				<span>
				    Ohio
			    </span>
			</a>
		</dd>
		<dd id="imgok">
			<a id="ok" href="#ok" title="Oklahoma">
				<span>
				    Oklahoma
			    </span>
			</a>
		</dd>
		<dd id="imgor">
			<a id="or" href="#or" title="Oregon">
				<span>
				    Oregon
			    </span>
			</a>
		</dd>
		<dd id="imgpa">
			<a id="pa" href="#pa" title="Pennsylvania">
				<span>
				    Pennsylvania
			    </span>
			</a>
		</dd>
		<dd id="imgri">
			<a id="ri" href="#ri" title="Rhode Island">
				<span>
				    Rhode Island
			    </span>
			</a>
		</dd>
		<dd id="imgsc">
			<a id="sc" href="#sc" title="South Carolina">
				<span>
				    South Carolina
			    </span>
			</a>
		</dd>
		<dd id="imgsd">
			<a id="sd" href="#sd" title="South Dakota">
				<span>
				    South Dakota
			    </span>
			</a>
		</dd>
		<dd id="imgtn">
			<a id="tn" href="#tn" title="Tennessee">
				<span>
				    Tennessee
			    </span>
			</a>
		</dd>
		<dd id="imgtx">
			<a id="tx" href="#tx" title="Texas">
				<span>
				    Texas
			    </span>
			</a>
		</dd>
		<dd id="imgut">
			<a id="ut" href="#ut" title="Utah">
				<span>
				    Utah
			    </span>
			</a>
		</dd>
		<dd id="imgvt">
			<a id="vt" href="#vt" title="Vermont">
				<span>
				    Vermont
			    </span>
			</a>
		</dd>
		<dd id="imgva">
			<a id="va" href="#va" title="Virginia">
				<span>
				    Virginia
			    </span>
			</a>
		</dd>
		<dd id="imgwa">
			<a id="wa" href="#wa" title="Washington">
				<span>
				    Washington
			    </span>
			</a>
		</dd>
		<dd id="imgwv">
			<a id="wv" href="#wv" title="West Virginia">
				<span>
				    West Virginia
			    </span>
			</a>
		</dd>
		<dd id="imgwi">
			<a id="wi" href="#wi" title="Wisconsin">
				<span>
				    Wisconsin
			    </span>
			</a>
		</dd>
		<dd id="imgwy">
			<a id="wy" href="#wy" title="Wyoming">
				<span>
				    Wyoming
			    </span>
			</a>
		</dd>
	</dl>
</body>
</html>

Open in new window


Have fun with it. I did.
0
 

Author Comment

by:greenerpastures
ID: 38415670
Great work!
Two questions:
1. If I want for the Google map for each state (with cities) to show on a separate page, like: my site.com/florida.htm instead of the modal window, what do I need to change in the JS code? I guess I would then place the JS file into the site.com/florida.htm page for each state and change the map links accordingly.

2. Have you found a good source to get the city coordinates from (since you mentioned gr8gonzo's source may not be accurate)? ?

Thanks so much, it looks like in a few days and a few drinks the map should be working....
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 38

Expert Comment

by:Tom Beck
ID: 38415885
To redirect from the states image map page to, for example, site.com/florida.htm, you would need only this amount of code on the initial page (plus the jquery library include of course).

<script type="text/javascript">
$(document).ready(function(){
              $('a').bind('click', function(){
                          var state = $(this).attr('title');
                          state = state.replace(' ', '');
                    window.location.href = 'http://site.com/' + state + '.htm';
              });
        });
</script>

The rest of the code would need to be repeated for each state page. In that case you would naturally want to have it in an external .js file and just include it on every page. Alternately, you could have just one state page and populate the content dynamically server side based on a query string value. So the above line in the code would be something like:

window.location.href = 'http://site.com/allStates.htm?state= + $(this).attr('title');

As for getting the coordinates of the cities, I used the world-gazetteer.com site for Florida but quickly realized it did not include all well known cities, only those with the largest populations. For example, it included Pembroke Pines, Hialeah and Miramar (never heard of them) but left out Pensacola and Palm Beach. That's no good. So for South Dakota I went to this Google site: http://gmaps-samples.googlecode.com/svn/trunk/simplewizard/makestaticmap.html. There you can type a state name in the box and click "Create Marker Here". It will put the maker in the center of the state. Then zoom out until you can see the whole state. Move the first marker to a major city. Drop additional markers on all the cities you want to include. Now scroll to the bottom and look for a long url in a grey box. Look for "markers=" in the url and it will be followed by the coordinates of all the cities you placed markers on. This is not an ideal way to create your list because the coordinates are not marked as to which city they point to, but it's how I got four cities for South Dakota. The world-gazetteer.com site only listed one city for SD. Also realize that any longitude in the US will be a negative number despite what world-gazetteer.com shows on their site. It might be worth a little more research to try and find a better way than these two sites. It's going to be tedious if you cannot find some site where the work is already done to some degree.
0
 

Author Comment

by:greenerpastures
ID: 38416036
For some reason it's not working, I am sorry I was not very clear:
On my homepage I will have the map linked to each state's page like so:

<dd id="imgal">
			<a id="al" href="/alabama.htm" title="Alabama">
				<span>
				    Alabama
				</span>
			</a>
		</dd>

Open in new window

Why would I need the jquery on this page to link the image map to each of the state pages?

Then on my Alabama state page site.com/alabama.htm I want to embed the map with all the cities without using the modal window popup.

I will not be using dynamically generated pages, only static ones.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38416048
If the alabama.htm page is in the same directory as the original map page then you can take out the "/".
<a id="al" href="alabama.htm" title="Alabama">
I'm so used to dynamic content and templates that I forget the old simple ways. Personally, I could not imagine having to manage 50 almost identical pages. If you change one thing in the markup, you have to go through all 50 and make the change.
0
 

Author Comment

by:greenerpastures
ID: 38416071
The answer is very simple: search engine optimization and usability.
I want to create each page with a very short URL, and content specific to that state with unique title, keywords, and description. I am using a CMS and there is no way to accomplish all that except to create each page. I already have over 1,000 of dynamically generated pages for each city that I know I could not have created by hand.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38416074
Using XML pages to hold the information specific to each state would be one way to eliminate all that repetition without the need for any server side processing. Jquery can read XML files. Then you could have one template html file and load its content containers (divs or html5 block elements) with the state specific data. Modern web design is all about modularization and reuse.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38416078
Oh, sorry, our posts crossed. I understand now.
0
 

Author Comment

by:greenerpastures
ID: 38417388
Still looking for a way to show cities without using the modal window popup from your example above to be on a separate state page like site.com/alabama.htm

I am not a JS expert,
thanks
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 38417712
No problem, here's a new test using South Dakota.

Using the original index.htm file from the usmap.zip archive with one small change; the link for South Dakota.
                         <a id="sd" href="sd.htm" title="South Dakota">
                        <span>
                            South Dakota
                      </span>
                  </a>

My template for a state page with state specific customizations in bold.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>South Dakota</title>       
    <link rel="stylesheet" href="stateMap.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
      <script src="scripts/mapLoader.js" type="text/javascript"></script>
    <script type="text/javascript">
        var cities = [45.44, -98.50, 'Aberdeen', 44.89, -97.12, 'Watertown',44.08,-103.23, 'Rapid City',43.55,-96.70, 'Sioux Falls'];       
   </script>
</head>
<body onload="displayState('South Dakota');">
    <div id="stateMap">
    </div>
</body>
</html>

My stateMap.css file (style as desired):

@charset "UTF-8";
#stateMap {
   width:500px;
   height:500px;
   position:absolute;
   top:30px;
   left:30px;
   border:1px solid green;
}

My mapLoader.js file:
function displayState(state){
      	var myOptions = {
			mapTypeControl: false,
			scaleControl: false,
			navigationControl: false,
	  		mapTypeId: google.maps.MapTypeId.ROADMAP
	  	};
      	var map = new google.maps.Map(document.getElementById("stateMap"), myOptions);
      	var geocoder = new google.maps.Geocoder();

      	geocoder.geocode({'address': state}, function (results, status) {
         	var ne = results[0].geometry.viewport.getNorthEast();
         	var sw = results[0].geometry.viewport.getSouthWest();

         	map.fitBounds(results[0].geometry.viewport);               
      	});
		var marker, cityLatLng, markerArray;
		for (var j=0; j<cities.length; j+=3){
			cityLatLng = new google.maps.LatLng(cities[j], cities[j+1])
			marker = new google.maps.Marker({
                position: cityLatLng,
                map: map,
                animation: google.maps.Animation.DROP,
				title: cities[j+2]
            });
			google.maps.event.addListener(marker, "click", function () {
               window.location.href = "http://en.wikipedia.org/wiki/" + this.title.replace(' ', '_') + ',_' + state.replace(" ", "_");
            });
		}
	  }

Open in new window


I'm still going to Wikipedia when you click on a city, but I'm guessing you have that covered already.
0
 

Author Comment

by:greenerpastures
ID: 38418808
Great, it's working, I am almost there..... Would you know how to adjust the Google map window size?

Because some city pages load very slow, I am using this "LOADING...." window message scrip (see below) that's triggered by the onclick="return ray.ajax() in the hyperlink. How would I trigger it from the Google Map city icons? I tried the following without a success...:


google.maps.event.addListener(marker, "click", function () {
               window.location.href = "http://site.com/search.html?city_dist_code=" + this.title.replace(' ', '+') + '%2C+' + state.replace(" ", "+") + '&city_dist_dist=30&pclass%5B%5D=1&action=searchresults' onclick="return ray.ajax()";

This code works with my normal links though:
 <!-- RAY BOX-->  
   <script type="text/javascript">
var ray={
ajax:function(st)
	{
		this.show('load');
	},
show:function(el)
	{
		this.getID(el).style.display='';
	},
getID:function(el)
	{
		return document.getElementById(el);
	}
}
</script>
<style type="text/css">
#load{
position:fixed;
z-index:1100;
border:3px solid #999;
background:#ffffff;
width:450px;
height:400px;
margin-top: -150px;
margin-left:-150px;
padding: 10px;
top:50%;
left:50%;
font-family:"Trebuchet MS", verdana, arial,tahoma;
font-size:12pt;
}
</style>
<div id="load" style="display:none;"><p style="text-align:center;">
<img src="/images/loading.gif" /><h5> Please wait!<br /></h5></p>

LOADING....

</div>

Open in new window

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38419417
You are already inside a click even handler, so the "onclick" is not appropriate. Also, it needs to be a separate statement, not appended to the window.location statement.

I have it type in here but its commented out because I wanted to suggest another way. Rather than pop up a new box, you could just simply replace the map with the loading gif and text.
google.maps.event.addListener(marker, "click", function () {
               window.location.href = "http://en.wikipedia.org/wiki/" + this.title.replace(' ', '_') + ',_' + state.replace(" ", "_");
			   //return ray.ajax('load');
			   $('#stateMap').html("<p style='text-align:center;'><img src='./images/loading.gif' /><h5> Please wait!<br /></h5></p>LOADING....</div>");
            });

Open in new window


Google map window size will be whatever you have for the css.

#stateMap {
   width:500px;
   height:500px;
   position:absolute;
   top:30px;
   left:30px;
   border:1px solid green;
}
0
 

Author Closing Comment

by:greenerpastures
ID: 38419909
Thanks for all your help! I will now lock myself in the room for the next few days and plug in all the cities.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38420234
You're welcome. It was good practice, thanks for the points.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Over time, the online landscape has altered considerably, but that’s nothing compared to the up-and-coming trends that will shape the web design industry in the coming year. Keep reading to find out which trends will shape B2B web design in 2018.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question