Jquery functions not running properly

Question

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

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
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

Point 2 works for me... maybe you just need to clear the cache of your browser? — nico
– nico, 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? — user1165861
– user1165861, 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 — nachito
– nachito, Commented Feb 5, 2012 at 20:13
Read this stackoverflow.com/q/5818555/1164491 your href= should be in the quotes — Cheery
– Cheery, Commented Feb 5, 2012 at 20:16
@Cheery Wow thanks that def solved the second problem. Cheers! now just the main problem — user1165861
– user1165861, Commented Feb 5, 2012 at 20:21

Cheery · Accepted Answer · 2012-02-05 20:57:14Z

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

edited Feb 5, 2012 at 20:57

answered Feb 5, 2012 at 20:50

Cheery

16.3k45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1165861 Over a year ago

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

Cheery Over a year ago

@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.

user1165861 Over a year ago

wow....speechless. THANK YOU. I'm really sorry, I'm pretty new but thanks for your patience :)

Collectives™ on Stack Overflow

Jquery functions not running properly

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related