Menu
Hi there,
I’m reading book “Applied jQuery” by Jay Blanchard. Example 1-1 is strange. The code is as below. Becasue there is no inc folder in the specified place, so no jquery-1.5.min.js is there. But when “New Content” is clicked, the page is replaced by 1-2.html entirely, not just #rightContent (BTW, Firebug can not expand this Script). When a right path is provided to 1-1.html, the button is not worked: when clicks, nothing is happened (this time Firebug can expand the Script). What’s the problem here?
[CODE]
<?xml version=”1.0″ encoding=”ISO-8859-1″ ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<title>Progressive Enhancement Example 1-1</title>
<script type=”text/javascript” src=”../inc/jquery/jquery-1.5.min.js”></script>
<style type=”text/css”>
html, body {
height: 100%;
}
body {
min-height: 100%;
margin: 0px;
text-align: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #FFFFFF;
}
#header {
background-color: #0000FF;
color: #FFFFFF;
padding: 5px 5px 5px 10px;
}
#leftContent {
width: 20%;
min-height: 100%;
bottom: 0px;
background-color: #FFFF00;
color: #FFFFFF;
vertical-align: top;
padding: 10px 0px 0px 20px;
float: left;
}
#rightContent {
width: 75%;
margin-left: 20px;
padding-top: 10px;
background-color: #FFFFFF;
vertical-align: top;
float: left;
}
#clear {
clear: both;
float: none;
height: 0px;
}
</style>
<script type=”text/javascript”>
$(document).ready(function() {
$(“#anchor”).click(function(event) {
$(“#rightContent”).load(“1-2.html #rightContent > p”);
event.preventDefault();
});
$(function() {
$(‘a[rel*=”external”]’).click( function(e) {
window.open(this.href);
e.preventDefault();
});
});
});
</script>
</head>
<body>
<div id=”header”><h2>Progressive Enhancement Example</h2></div>
<div id=”clear”></div>
<div id=”leftContent”>
<a href=”1-2.html” id=”anchor” >New Content</a><br />
<a href=”http://www.google.com” rel=”external”>Google</a>
</div>
<div id=”rightContent”></div>
</body>
</html>
Thanks,