jQuery Forum

So I'm trying to use .each to iterate through an unordered list where each element has a tag. If the element has "tag1", then the element is shown on screen, if not then the element is hidden.

So to understand the problem I'm having, do the following steps in the latest versions of one of (or all of if you really want to I guess) Chrome, Opera, Safari, and Explorer at this link:
http://isaaclean.com/test/test2

1. Click on "Blog" and it will Ajax load a list of links in the column next to it.
2. Click on "Lorem Ipsum" and it will Ajax load an entire page of lorem ipsum into the #content div next to the list of links.
3. Click on "dolor sit amet" and it will Ajax load a new page that says "Y U NO WORK PROPERLY?! D:" into the #content div.

So that's what supposed to happen. Now if you open the latest version of Firefox (6.0.1) and you go through the same steps, when you click on "dolor sit amet" instead of Ajax loading in #content it will directly follow the link to ajaxifyit.html.

Now I think this happens because when a link in #content loads the new page into itself, Firefox cancels the current script running on it. In fact, you can actually see the script running properly for a brief moment because you will see the "Loading" message appear on top. Also, you can hit back and you will see the "Loading" message is still there. You can view the JavaScript running for this page at: http://isaaclean.com/test/test2/scripts/contentlink.js

The reason why there's an if statement is because if the link in #content is not linking to somewhere within the isaaclean.com domain, it won't Ajax load the page but instead directly link to it. You can see this part of the script works when you click on "laoreet semper nibh ac" since it will load Google properly.

I'm not really sure how to fix this at the moment, so that's where I need help. :/

Here's a demo of the work I have at the moment:
http://isaaclean.com/test/test2

Basically if you click on "Blog" in the main navigation column, a second column next to it will Ajax loads "blog.html" that contains a list of "posts." If you click on one of the posts in the second column, a third column will load in with the content of the post.

While that's working fine, if you click "Blog" again, this is where the script goes haywire. Firebug shows over 20 GET requests on the second column. And then when you click on a link in the second column after that, an equal amount of GET requests is sent. You can even see the animations going crazy. I have no idea why this is happening.

It started to occur when I added the following lines to mainnav.js:

1. if($('#listnav').children().size() == 1) {
           $('#listnav nav li').stop().hide("slide", {direction: "left"}, loadContent);
       } else {
           $('#listnav').load(toLoad, '', showNewContent);
       }
   

The reason why I added this was because I wanted to show the full slide out animation before the script Ajax loads another blog.html when "Blog" is clicked for the second time. Before I implemented the code above and loadContent function, the problem was that the slide out animation was cut off by the loading of the page. To prevent this, I thought using a callback function would work since callbacks occur after the animation is completed.

The only issue with this is that if you first load the page #listnav has no child elements. Therefore if you try using the following code:

1. $('#listnav nav li').stop().hide("slide", {direction: "left"}, loadContent);

...the callback function is never executed since there are no nav li elements until you click "Blog." That's why I tried to implement an if statement which checks if there are elements within #listnav, and it works fine on the first click, but any clicks after the script just bugs out.

So can anyone help me find a solution to this issue?

So at the moment I'm working on an Ajax powered navigation that's animated with a horizontal slide and fade. So far I've imported the Effects Core and Effect "Slide" from the jQuery UI to get the horizontal slide effect in.

Here's the documentation on the specific slide technique I'm using from the jQuery UI:
http://docs.jquery.com/UI/Effects/Slide

You can see the work I've done so far:
http://isaaclean.com/test

As you can see, the Ajax and horizontal slide features are working properly. However, one thing I can't get to work is the horizontal and fade effect to occur at the same time. I mistakenly tried to chain the show/hide functions with the fade function, but of course it happened sequentially instead of simultaneously.

I looked up for solutions online and most point to the animation function as the solution. In this case, I can't figure out a way to work with it because the animation function seems to manipulate the CSS to get the desired effects. While I could have animate change the width of the content area along with its opacity, the width resize would squeeze the text as the content area shrinks which is undesirable for my case. This is why I'm using the Effect "Slide" in the first place, to prevent the text getting squeezed as the content area slides.

So is there anyway I can get a simultaneous fade working at the same time with the Effect "Slide", or do I have to look for other methods of horizontal sliding to get it to work with fades?

I'm currently following this tutorial on loading pages with Ajax:
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

So I was following a tutorial on loading pages with Ajax. The tutorial can be found here.
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

There's one particular line I don't fully understand:
var toLoad = $(this).attr('href') + ' #content';

Can anyone tell me what exactly this line means? I'm mainly confused as to why there is a space before #content as removing the space seems to change the way the page loads in my test code. Maybe I coded something wrong and it's not supposed to behave differently without the space?