0

I have my site under the latest version of Jquery. There's two problems however:

  1. The main problem is when the site FIRST loads it has the content slider I put in. But if you click any of the links again or go back to the home page, the slider does not load properly
  2. When the links are clicked the green bottom border is supposed to thicken to 5px and become less transparent but it is not doing that.

Here is just a link to my site which i just started: envycosmetics.zxq.net/Website/webpages/index.html

9
  • Point 2 works for me... maybe you just need to clear the cache of your browser? Commented Feb 5, 2012 at 20:12
  • @nico Sorry I mean when you click on a link it STAYS with full opacity and 5px green border. Does that work? Commented Feb 5, 2012 at 20:13
  • There's an error on the about page: Syntax error, unrecognized expression: [href=about.html] envycosmetics.zxq.net/Website/js/jquery-1.7.1.min.js Line 3 Commented Feb 5, 2012 at 20:13
  • Read this stackoverflow.com/q/5818555/1164491 your href= should be in the quotes Commented Feb 5, 2012 at 20:16
  • @Cheery Wow thanks that def solved the second problem. Cheers! now just the main problem Commented Feb 5, 2012 at 20:21

1 Answer 1

1

Ok, I will summarize everything.

One problem to solve is to write $("nav a[href='"+newHash+"']").addClass("current"); in your dynamicpage.js file. Otherwise it creates an error in jQuery library.

The problem with the slider is due to the fact that $('#banner').bjqs is called only once, during the initial load of the page. When you change it content with AJAX requests you remove the original HTML block for the slider with all listeners attached to it. When you load it back you have to reinitialize your slider code by calling that piece of code again

   $('#banner').bjqs({
      'animation' : 'slide',
      'width' : 940,
      'height' : 403
    });

as a new content of the page is loaded.

for example, you could modify your loading part as

  $mainContent.hide().load(newHash + " #guts", function() {
      $('#banner').bjqs({
          'animation' : 'slide',
          'width' : 940,
          'height' : 403
       });          
      $pageWrap.animate({
                height: baseHeight + $mainContent.height() + "px"
       });
      // below is the rest of the function
Sign up to request clarification or add additional context in comments.

3 Comments

How would I make it call it again. It's already in the index.html file. By the way I fixed the other problem check it now. Only thing is that the page does not stretch far enough when each link is clicked. Used to be farther down
@user1165861 You have to call it directly. $(document).ready is not executed when you insert it as a part of the page with the help of AJAX request! Example I'll show you in my answer.
wow....speechless. THANK YOU. I'm really sorry, I'm pretty new but thanks for your patience :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.