Appending hash/subpage to URL when loading content in expanding divs

Question

I'm loading in separate .html documents inside divs with this code:

JS

 $('.thumbnail').click(function() {
 var idStr = ("project/"+$(this).attr('id')) + " #projectcontainer";


     $('#projectcontainer').animate({opacity:0});
     $('#projectcontainer').hide().load(idStr,function(){

                $(this).slideDown(500).animate({opacity:1}, function() {
                                    $.scrollTo('#gohere',800);
                    $('#close').fadeIn(500).css({'display': 'block', 'height': '25px'});

                });
    });
 });

HTML

<div class="thumbnail" id="atmotype.html">
<img src="image.whatever">
</div>

It all works as intended but I also wanna append an ID when you open a project, and also be able to link directly to said content (already expanded in the div). I've been trying around and can't come up with a solution, and that being said I'm pretty awful with JS in general.

Would really appreciate if someone could enlighten me on how this works.

possible duplicate of [How AJAX is done in github source browse?](http://stackoverflow.com/questions/9041872/how-ajax-is-done-in-github-source-browse) — Quentin, Nov 05 '12 at 15:42

doublesharp · Answer 1 · 2012-11-05T19:49:30.753

0

Right now when you click your .thumbnail element, it is firing your click() event and using $(this).attr('id') for the hash/scroll. To make this run when the page load, you should probably break it out to a separate function that takes the ID as a parameter, and then call this function from your click() event as well as a generic page load using a parameter in location.hash.

$(document).ready(function(){
    if (location.hash.length>0){
        /* this assumes the page to load is the only thing in the 
           hash, for example /page.php#project.html */
        var hash = location.hash.substring(1); // get hash and remove #
        addHashAndScroll(hash);                // call function with page name
    }
    $('.thumbnail').click(function() {
        addHashAndScroll($(this).attr('id'));  // pass ID value to function
    });
}

// this function contains most of your original script
function addHashAndScroll(id){
    var idStr = "project/"+ id + "#projectcontainer";
    // rest of your code
}

UPDATE: This is the thing about js it all makes sense when explained but executing it is a bitch. Anyways thanks alot for helping out. Based on your explanation what I get is:

$(document).ready(function() {
    if (location.hash.length > 0) {
/* this assumes the page to load is the only thing in the 
           hash, for example /page.php#project.html */
        var hash = location.hash.substring(1); // get hash and remove #
        addHashAndScroll(hash); // call function with page name
    }
    $('.thumbnail').click(function() {
        addHashAndScroll($(this).attr('id')); // pass ID value to function
    });
}


// this function contains most of your original script

function addHashAndScroll(id) {
    var idStr = "project/" + id + "#projectcontainer";
    $('#projectcontainer').animate({
        opacity: 0
    });
    $('#projectcontainer').hide().load(idStr, function() {

        $(this).slideDown(500).animate({
            opacity: 1
        }, function() {
            $.scrollTo('#gohere', 800);
            $('#close').fadeIn(500).css({
                'display': 'block',
                'height': '25px'
            });

        });
    });
    }

I've tried to fiddle around with the closures and whatever minimal experience i have in bug testing js but i keep getting errors originating from this line: function addHashAndScroll(id) {

edited Nov 05 '12 at 19:49

answered Nov 05 '12 at 15:36

doublesharp

26,888
6
52
73

You are referencing `$(this)` in the `addHashAndScroll` function which isn't availably anymore... you will need to pass in the element to use instead of `this` it's available, which it won't be without a `click()`. In that case, you can test to see if it is defined before doing the `slideDown()` or choose the proper element in some other way. – doublesharp Nov 05 '12 at 17:19
Sorry, I'm totally lost in the terminology here. From your example to my implementation where did it go wrong? – Richard Hedberg Nov 05 '12 at 17:34
In the `addHashAndScroll()` function, you have `$(this).slideDown(500)...` for the scrolling animation, but `this` previously referred to the element that was `click()`ed. Since nothing is being clicked when the page loads, there is no `this`. You need to use another selector to get it, like `('#divID')`. Because you have a `.` in your ID, it's a bit more complicated, but you can probably use `$('#'+id.replace('.', '\\'))` since you need to escape the `.` or jQuery will think it's the start of a class name. – doublesharp Nov 05 '12 at 18:13
Okay, now I'm with you again. Aside from that it seems like there is some kind of problem with the original JS you marked up, i made a js fiddle and when im running JSLint it comes back with errors refering to line 16 (`function addHashAndScroll(id) {`) [link](http://jsfiddle.net/2XjTf/1/) – Richard Hedberg Nov 05 '12 at 19:11
On the top left you have to choose the framework for the fiddle - you selected mootools and not jquery. – doublesharp Nov 05 '12 at 19:18
Oh, forgot to change it, however I still get the error http://jsfiddle.net/2XjTf/3/ Problem at line 16 character 1: Expected ')' and instead saw 'function'. function addHashAndScroll(id) { Problem at line 16 character 9: Missing semicolon. function addHashAndScroll(id) { Problem at line 16 character 30: Missing semicolon. function addHashAndScroll(id) { Problem at line 16 character 31: Expected to see a statement and instead saw a block. function addHashAndScroll(id) { – Richard Hedberg Nov 05 '12 at 19:25
Sorry, the `idStr` line has an error - remove the `(`, see edit. – doublesharp Nov 05 '12 at 19:49
Okay. That solved it, also had to put the addHash function on top for some reason. I updated the code with what i implemented and it is seemingly error free, however it doesnt work. It recognizes it has to load content but does not change the opacity and display options. See it live at http://richardhedberg.com/portfoliony/index.html – Richard Hedberg Nov 05 '12 at 20:22

Appending hash/subpage to URL when loading content in expanding divs

1 Answers1