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>

As an Amazon Associate we earn from qualifying purchases.

This thread ...

Follow-Ups:

Follow On AppleNews
Return to Archive home page | Return to MIDRANGE.COM home page

This mailing list archive is Copyright 1997-2022 by midrange.com and David Gibbs as a compilation work. Use of the archive is restricted to research of a business or technical nature. Any other uses are prohibited. Full details are available on our policy page. If you have questions about this, please contact [javascript protected email address].

Operating expenses for this site are earned using the Amazon Associate program and Google Adsense.