Start learning with our library of video tutorials taught by experts. Get started
Take a look at the finished web site here.
Hi! This is Chris Converse and this is the course on creating an interactive map for your website. I want to start by showing the final project inside of the exercise files that you can download as part of the course. So inside of the Final Project folder I am going to open up the html file. So what we are going be creating is this interactive map. We are going to have a drop-down menu in the lower left-hand area. Selecting different items in the drop- down menu will change the dots that are plotted across the map. So if I come over here and select Europe for example, any dot that is not on Europe will fade away and only the dots that are assigned Europe will show up.
Now one of the advantages of a framework like jQuery is that the code that we develop for one platform will work across the other platform and devices as well. So here we are looking at the exact same user experience over in Windows 7 on IE 9, and I can come in here and click on the individual dots, change the form menu, and get exactly the same user experience we were just looking at over on the Mac platform in Safari. In addition to computer screens we can also take a look at this across mobile devices. So I want to bring up the Android simulator here showing us a handheld device.
I can come in here and tap the individual dots on an Android phone and see the same exact user experience, or even come in to a tablet simulator, and take a look at the same user experience running on an iPad simulator as well. I am going to hit Command+ Right Arrow to rotate this. Hold the Option to pinch up. Tap and move around. Tap on the individual dots and see the content change here as well. So I hope this sounds interesting to you and if so let's get started with the first movie.
There are currently no FAQs about Create an Interactive Map with jQuery.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.