Jquery’s .load command makes it possible to load content from one webpage into another webpage. [footnote] By the way, you probably will NOT be able to do this in Safari or Chrome because of restrictions unless you upload everything to a web server. For some reason Firefox seems to circumvent these restrictions. If Firefox doesn’t work either, you may have to upload to the internet in order to test your work.[/footnote] It is also possible to load only a portion of one webpage into another. With a little imagination, this capability can lead to some interesting user experiences. Let’s explore.
1. Open loadcontent.html and, while in live view, click the buttons to load pictures of a monkey and a bird. By the way, sometimes your computer’s security settings may get in the way of loading. If so, try multiple browsers; especially Firefox. That was easy but how did it happen?
2. Look at the code for the first button which starts with <button id=”monkey”>. Next, take note that the document contains a div tag with an id of “target.
Now look at the first function (shown below). The first line connects the monkey button div id to the click function while the second line instructs the browser to load a file called 1.html into a div tag named #target.
$("#monkey").click(function(){
$('#target').load('1.html');
})
3. Look at the second function which does the same thing but loads 2.html when the bird button is clicked. Open 1.html, and 2.html. Yep, they’re nothing more than simple web pages which each contain a picture.
4. Looks easy right? In that case create a new file named 3.html and add your own content. Now create a new button and a new function that work together to load it into the #target div.