Hi all
I am working on a site, where I have a header, a menu below that, the
content below that, and a footer. The idea is for each option on the
menu to point to a page that has only the contents of the content <div>
- using AJAX to retrieve that content, then set the html property of the
div to that content. The javascript and basic structure are listed at
the bottom. Assume this is called index.html
The menu items have their click events set to use $("#menu
a").click(function() function - my problem is, anchors in the content
pointed to by each anchor do not get their click event handler
registered. You can see where I tried using a class of sitelink to
identify these anchors. That event is bound only when the contents of
home.html have the link, and only when the page is first loaded -
because when the <div> is loaded, the "document ready" function of
JQuery is not called - document is already loaded.
So how do I get the links embedded in content to have their anchor event
bound as I want?
There is another issue - the backspace (previous page) key does not
work, since there is not "previous" page until there is an external
link. And when you do go to an external link, it doesn't go back to the
"page" it was on, it goes back to index.html. This might be a reason for
me to put everything on every page - header, menu, footer, in addition
to content. This'd make the pages a little bigger, but less than they
were - am modifying an old design that did not use CSS and used tables
like crazy for presentation.
Thanks for your thoughts
Vern
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>This is set by bound click function - see below</title>
<meta name="Author" content="TE/VMH">
<meta name="keywords" content="Inver Hills Community Band, Inver
Grove Heights, community band">
<meta name="description" content="Inver Hills Community Band Web
Site">
<meta name="publisher" content="Inver Hills Community Band --
Inver Grove Heights, MN 55076 -- USA">
<meta name="copyright" content="Copyright 2003-2007, Inver Hills
Community Band">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/css/main.css">
<link rel="stylesheet" type="text/css" href="/css/superfish.css">
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript"
src="/js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="/js/superfish.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').superfish({
animation: {height:'show',opacity:'show'}, //
slide-down effect with fade-in
delay: 1000 // 1.0 second delay on
mouseout
});
});
</script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
document.title = "Main document title";
$.ajax({
url: "home.html",
cache: false,
success: function(html){
$("#content").html(html);
$(".sitelink").click(function(){
document.title = $(this).attr("title");
alert(document.title);
$.ajax({
url: $(this).attr("href"),
cache: false,
success: function(html){
$("#content").html(html);
}
});
return false;
});
}
});
$("#menu a").click(function(){
document.title = $(this).attr("title");
$.ajax({
url: $(this).attr("href"),
cache: false,
success: function(html){
$("#content").html(html);
}
});
return false;
});
});
/* ]]> */
</script>
</head>
<body>
<div id="header">
<!-- some header stuff -->
</div>
<div id="menu">
<!-- Unordered list menu formatted with superfish -->
</div>
<!-- begin page content -->
<div id="content">
<!-- This will be filled from content ASP pages using click
binding and AJAX -->
</div>
<!-- end page content -->
<div id="footer">
<!-- Some footer stuff -->
</div>
</body>
</html>
midrange.com
