Having trouble with .load() from a div.
I am trying to create a two column page where content content from links in the left column are loaded into the right column, all with a fancy sliding animation. With some (a lot) of help I have managed to get most of this working. However, I'm struggling on loading the external content based on which link was clicked.
Basically, if I specify the url to be loaded in the jQuery everything works perfectly. However if I change this to #left so that it'll load whatever the href url is, something weird happens. Instead of loading the href it loads the entire left div into the right div.
I have posted the important bits of code below, but if you'd like to see the complete source or see it working I am hosting it here:
I'm sure it's just something silly I'm missing, but I've been pulling my hair out over this for a while now. Thank you in advance to anyone who is able to help.
<div id="left">
<a href="target1.html" class="panel">Target 1</a><br/>
<a href="target2.html" class="panel">Target 2</a><br/>
<a href="target3.html" class="panel">Target 3</a><br/>
</div>
<div id="right">
<div class="panel" id="target1" style="background:green">Target 1 Failed</div>
<div class="panel" id="target2" style="background:red">Target 2 Failed</div>
<div class="panel" id="target3" style="background:yellow">Target 3 Failed</div>
</div>
- <script type='text/javascript'>//<![CDATA[
- $(window).load(function(){
- jQuery(function($) {
- $('a.panel').click(function(e) {
- var $target = $("#"+$(this).attr('href').replace(".html","")),
- $other = $target.siblings('.active'),
- animIn = function () {
- $target.load('target1.html', {delay:0.5,html:"It's Working! "+$target.text()}, function() {
- $target.addClass('active').show().css({
- left: -($target.width())
- }).animate({
- left: 0
- }, 500);
- });
- };
- if (!$target.hasClass('active') && $other.length > 0) {
- $other.each(function(index, self) {
- var $this = $(this);
- $this.removeClass('active').animate({
- left: -$this.width()
- }, 500, animIn);
- });
- } else if (!$target.hasClass('active')) {
- animIn();
- }
- return false;
- });
- });
- });//]]>
- </script>