CODEWITHSUNDEEP
jquerywordpresswordpress-theming
appostolis
appostolis

Reputation: 2303

Anchor to the footer doesn't work with jQuery in Wordpress in Webkit browsers

I am building a custom theme in Wordpress from scratch. Right now, I have done only the basics, such as creating the necessary .php files like index.php, footer.php etc..In my navigation menu I have a contacts anchor which is supposed to navigate you in the footer with animation. So, it is not working in Chrome and Safari, but works in Firefox. ( IE is not tested yet ). This is my jQuery and js files reference in header.php right after the meta tags:

<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scrolling.js"></script>
<!-- End of Scripts -->

<!-- CSS links -->


<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>

</head>

and this is my js file, pretty simple:

$(document).ready(function()
{

  var v = $('div.nav-bar li a:last').addClass('scrollToBottom');
    v.click(function()
    {
    $('html,body').animate( {scrollTop: $(document).height() }, 1600);
      console.log('hello');
      return false;
    });

});

My navigation bar is dynamically created with a class "nav-bar" in the functions.php. So, I added the console.log just to make sure that JS is working, and it does, the click function fires when you click in the contacts but nothing happens. Sorry I cannot upload any images. Also, it works fine when it is static but I don't want a static nav and it does work in Firefox....Any suggestions would be much appreciated.

Upvotes: 0

Views: 205

Answers (1)

RRikesh
RRikesh

Reputation: 14381

You shouldn't use <?php wp_enqueue_script("jquery"); ?> in your header.php file. wp_enqueue_script() should be added to your functions.php file and hooked accordingly using add_action('wp_enqueue_scripts', 'function_name').

Then you don't need to add <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> either.

WordPress loads jQuery in No Conflict mode. so your jQuery should look like:

jQuery(document).ready(function($)
{
 // your code here
});

Upvotes: 0

Related Questions