Forums

noahgelman

The script works great. However, I've run into an issue. I want to use a click function as well on the page unrelated to the dynamic aspect. Unfortunately it doesn't work. I've stripped things to the bone and after many hours, I've discovered the reason. Whenever the page has the hash at the top, the click function no longer works. I've tested this by backspacing the hash and reloading the page without, and then the click function works as good as gold. Has anyone else run into this problem? Or is it a known bug?

doobie

Not sure what you're referring to, noah. Could we get a few links up in here? Would be happy to help out if I knew exactly what you were after.

noahgelman

Unfortunately I can't post a link, but perhaps I didn't explain well, I'm sorry. This is a query about Chris' #85 Screencast about using AJAX to switch out content. He does this by using a hash in the url and using some jquery to recognize the hash change and load the appropriate content. The bug I was referring to is when you use a clicking function somewhere else on the page like the following, the clicking function does not work.

$(function() {
$('a.example').click(function() {
//does something//
return false;
});
});

But when I go to the url, backspace the hash and click enter to load the normal page. The clicking function works. Another example.

http://www.examplewebsite.com/#about.php
The click function doesnt work.

http://www.examplewebsite.com/about.php
The click function works completely fine.

I hope that explains it a bit better.

xao

I have a problem too, with Chris`s dynamic page, I replaced some HTML and css, and now instead of page-warper (or content...whatever) to grow first and then show the text, it does opposite, but the animation is OK.
SO the text shows 1st over the footer and then the animation is happening "the footer goes down depending on content weight. I will upload a link later because i`m not home.

noahgelman

oops. The links I posted were supposed to be made up. I didn't know they were real working links. My bad >.>

Basically, to restate the issue. When using Chris's Dynamic Site script, it conflicts with the jquery .click() function rendering it useless.

xao

so, noah, can you help me ?

10x

chriscoyier

I'm pretty sure this is a bug and one of those things I'll just need to look at fixing when I get some time someday. If anyone has a fix, go ahead and send it to me and I'll be able to update it sooner.

BoringCode

Javascript can only act on elements that exist when it loads, if you want to act on links that are loaded through ajax you will need to put your click events inside of the ajax function:

$("#load_into_here").load(newHash + " #load_this",  function() {

$("a").click (function() {
//do something
});

});

I believe that is the answer to your problem, if not please provide more information so other people or myself can try to help.

chriscoyier

@SpeedGun - That's not the issue at the moment. We could get around that easily using .live() or .delegate()

I'm actually not able to replicate the bug on the live demo:

http://css-tricks.com/examples/DynamicPage/#index.php

Even with the hash link like that, the correct page loads and the main nav links work fine.

noemon

I'd like to use Chris' dynamic page to create a deeper level of navigation so when a navigation button is clicked, load and fade in the new content which will be a second level of navigation which when clicked will load and fade in new content. How can I do this?

xao

so, what about me :P, I have when the text appear before the animation : the footer and main content goes down.

xao

hei dudes, I made it... I made the text to appear after the aniamtion and in this way the text won`t appear over my footer :D this is how, tel me if it`s ok :

if (newHash) {
            $mainContent
                .find("#guts")
                .fadeOut(500, function() {
                    $mainContent.hide().load(newHash + " #guts", function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            }, {duration:"slow", easing: "backout"});
							$mainContent.fadeIn(500);
                        $("nav a").removeClass("current");
                        $("nav a[href="+newHash+"]").addClass("current");
                    });
                });
        };
        
    });
    
    $(window).trigger('hashchange');

});

BoringCode

@chriscoyier:

Hmm, well that was my best guess as I have never seen a bug where the click event is broken...

xao

Hi, I have another question, inside the page-wrap no JS or JQ is working? i`m trying to implement a gallery with js or jq but NOTHING is working...the js is not working, does not activate.

how to meke it work!

treehouse : what would you like to learn today?

Forums

Chris' Dynamic Site bug