I'm a beginner in Javascript and I struggle with a problem for a while. I want to open a new content in an existing div from another local html document. So in main content I have a simple list of projects and when I click on one project I want it to open in same the div '#content' as my projects. For this I use code:
$(document).ready(function() {
$('a.th-link').click(function() {
var url = $(this).attr('href');
$('#content').html('<h4>Loading...</h4>').load(url+ '#mynewdiv');
$.getScript('js/jquery.js');
$.getScript('js/jquery.horizontal.scroll.js');
$.getScript('js/jquery.mousewheel.js');
$(url).remove();
return false;
});
});
The problem is when I want to go back to my main div with projects '#content', with back-button on mouse or with browser, I stuck on other div '#mynewdiv', or I get to the previous open site.
Can anybody help with the code?
I'm still dealing with this problem. I found a rough example that is similar to mine and I have transformed it, to work like I want, but still doesn't work as it should. To refresh my problem.
I want to open in certain div, a new html page and it will work back button.
I also tried benalman bbq but I can't figure out, what I'm doing wrong.
Here is what I'm doing
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEST</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.1");
</script>
<script src="jquery.address-1.1.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$("document").ready(function(){
function loadURL(url) {
console.log("loadURL: " + url);
$("#area").load(url);
}
// Event handlers
$.address.externalChange(function(event) {
console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
$("#area").load($('[rel=address:' + event.value + ']').attr('href'));
}).change(function(event) {
console.log("change");
});
$('a.test').click(function(){
loadURL($(this).attr('href'));
});
});
/*]]>*/
</script>
<style type="text/css">
#area {border-style:solid;
border-width:5px;
height:300px;
width:100%;}
</style>
</head>
<body>
<p>Test</p>
<div id="area">
<a class='test' href="test1.html" rel="address:/test1">Test 1</a> <br />
<a class='test' href="test2.html" rel="address:/test2">Test 2</a> <br /> <br /> <br />
</body>
</html>
Thanks for the answer
