Animate div on click, Load Content into div

Question

I'm using the following jQuery to try and fade out a div, load an HTML page, then fade back in. The fades are working, but it doesn't seem to be loading the HTML, and I'm not quite sure what I'm missing. The first function is an attempt to load my first page into the div on initially visiting the site.

jQuery

$(document).ready(function() {

    $("#Content").load("Landing.html");

});

$(document).ready(function() {

    $("a").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("#Content").fadeOut(500);  
        $("#Content").load("linkLocation"); 
        $("#Content").fadeIn(500); 
    });

});

Basic idea of the HTML

<ul>
        <li>
          <a href="Contact.html">contact</a>
       </li>  

       <li>
          <a href="Portfolio.html">portfolio</a>
       </li>

        <li>
          <a href="Services.html">services</a> 
        </li> 

       <li>
          <a href="About.html">about</a>
       </li>

       <li>
          <a href="Landing.html">home</a>
       </li>      
     </ul>

<div id="Content"></div>

Thanks for any help!

EDIT

Thanks for all the suggestions. I've tried out each of them, and still no luck. I must be missing something really simple, but I just can't see it ATM.

Did you check the path to the files, filenames (case etc.). As a sidenote you only need one document ready function. — adeneo, Jun 19 '13 at 03:14
Hi adeneo, thanks for the suggestion! I keep checking that over and over, but still no luck. Also, FWIW, if I remove the preventDefault, it takes me to the correct pages. — stupendousman, Jun 19 '13 at 10:59

score 0 · Answer 1 · answered Jun 19 '13 at 03:16

0

linkLocation location is a variable not a string, so should not be enclosed in ""

$(document).ready(function() {

    $("a").click(function(event){
        event.preventDefault();
        var linkLocation = this.href;
        $("#Content").fadeOut(500);  
        $("#Content").load(linkLocation ); 
        $("#Content").fadeIn(500); 
    });

});

answered Jun 19 '13 at 03:16

Arun P Johny

384,651
66
527
531

Shouldn't `this.href` be `this.attr('href')`? And the whole thing can be wrapped in a single doc ready function. – rogMaHall Jun 19 '13 at 03:29
@rogMaHall both will work, `this.href` will read the `href` property of the `this` dom element. try http://jsfiddle.net/arunpjohny/J4E4c/1/ – Arun P Johny Jun 19 '13 at 03:34
1

Your right, however `this.href` will retrieve the full destination url, while `this.attr('href')` will only bring back what's written in the markup. Here's a good SO thread on it - [this.href vs $(this).attr('href')](http://stackoverflow.com/questions/6977049/this-href-vs-this-attrhref). Not sure if OP has a preference, but good to know :) – rogMaHall Jun 19 '13 at 03:48
Thanks! Still no luck. Must be something stupid I'm missing in my expanded code. – stupendousman Jun 19 '13 at 11:12
are you sure the click handler is getting called – Arun P Johny Jun 19 '13 at 11:14
I'm pretty sure it is. The fade out and fade in happen appropriately on the selected div, there's just no content being loaded into it. – stupendousman Jun 19 '13 at 12:08
check the browser developer tools network tab to see whether there is any error – Arun P Johny Jun 19 '13 at 12:20
Ah! Thanks! Didn't think about that. Looks like a Chrome issue. [link](http://stackoverflow.com/questions/8456538/origin-null-is-not-allowed-by-access-control-allow-origin) Opened it up in Safari, works like a charm! Thanks! – stupendousman Jun 19 '13 at 18:11

score 0 · Answer 2 · answered Jun 19 '13 at 03:52

0

for best results you should chain the calls to make sure one is complete before the other one fires :

  $("#Content").fadeOut(500, function () {
        $("#Content").load(linkLocation, function () {
            $("#Content").fadeIn(500)
        });
    });

and yeah, fix the link attr problem as advised above.

answered Jun 19 '13 at 03:52

codetantrik

315
2
9

Good point on chaining the calls. I'll keep that in mind for this. I tried it out, but still no luck. Also tried the link attr suggestion, and no luck. – stupendousman Jun 19 '13 at 11:10

Animate div on click, Load Content into div

2 Answers2