Javascript breaks nav links

  • Resolved Konstabel

    (@konstabel)


    10 years, 5 months ago

    Hi All,

    I have a fixed menu at the top of the screen that appears when scrolling down the page. The navbar uses javascript.

    Everything works fine, except that the links in the menu do not work.

    This is my javascript code placed in the head:

    <script type="text/javascript">
$(document).ready(function(){
  $('#navigation a, #fixedheader a').on('click', function(e) {
    e.preventDefault();
  });

  $(window).on('scroll',function() {
    var scrolltop = $(this).scrollTop();

    if(scrolltop >= 65) {
      $('#fixedheader').fadeIn(500);
    }

    else if(scrolltop <= 60) {
      $('#fixedheader').fadeOut(50);
    }
  });
});
</script>

    And here is my code in the body:

    <div id="fixedheader" class="header">
		<div id="fixedwrap" class="wrap">

			<!---start-top-nav---->
			<div id="fixedtop" class="top-nav">
				<nav id="fixednav" class="main-navigation" role="navigation">
				<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'stofpadavonture' ); ?></button>
				<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
				</nav><!-- #site-navigation -->
			</div>
			<div class="clear"> </div>
			<!---End-top-nav---->
		</div>
	</div>
	<!---End-fixed-header---->

    Can anybody please help me to get the links working?

    Thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • neotechnomad

    (@neotechnomad)

    10 years, 5 months ago

    The links do not work because you have prevented their default function, which is linking to somewhere, by using this e.preventDefault();

    And using jQuery No Conflict would be better for not creating problems with plugins, etc.

    <script>
jQuery.noConflict()
(function($){

//jQuery with '$' goes in here

})(jQuery);
</script>
    Thread Starter Konstabel

    (@konstabel)

    10 years, 5 months ago

    Hi Neo,

    Thanks for your reply.

    I got it working by removing the e.preventDefault();.

    I tried implementing your suggestion, but I must be doing something wrong.

    This is what I did:

    <script>
jquery.noConflict()
(function($){
  $('#navigation a, #fixedheader a').on('click', function(e) {
  });

  $(window).on('scroll',function() {
    var scrolltop = $(this).scrollTop();

    if(scrolltop >= 65) {
      $('#fixedheader').fadeIn(500);
    }

    else if(scrolltop <= 60) {
      $('#fixedheader').fadeOut(50);
    }
  });
})(jquery);
</script>

    What am I not understanding?

    Thread Starter Konstabel

    (@konstabel)

    10 years, 5 months ago

    I found the problem. 'jQuery' is case sensitive. I used 'jquery'.

    Why is the jQuery option better?

    neotechnomad

    (@neotechnomad)

    10 years, 5 months ago

    No… your script was in error…

    This…

    <script>
jquery.noConflict()
(function($){
  $('#navigation a, #fixedheader a').on('click', function(e) {
  });

  $(window).on('scroll',function() {
    var scrolltop = $(this).scrollTop();

    if(scrolltop >= 65) {
      $('#fixedheader').fadeIn(500);
    }

    else if(scrolltop <= 60) {
      $('#fixedheader').fadeOut(50);
    }
  });
})(jquery);
</script>

    Should be this…

    <script>
jQuery.noConflict()
(function($){

	$('#navigation a, #fixedheader a').on('click', function(e) {

		$(window).on('scroll',function() {
			var scrolltop = $(this).scrollTop();

			if(scrolltop >= 65) {
				$('#fixedheader').fadeIn(500);
			}

			else if(scrolltop <= 60) {
				$('#fixedheader').fadeOut(50);
			}
		});

	});

})(jQuery);
</script>

    jQuery is JavaScript, so it’s not really one or the other, but there are distinct advantages of using jQuery over writing raw JavaScript, such as:
    The amount of code you need to write is alot smaller
    It handles cross browser differences for you
    Easy DOM manipulation
    It presents a single events API
    Effects such as fading, sliding and more
    It makes Ajax much, much simpler
    and much more…

    Thread Starter Konstabel

    (@konstabel)

    10 years, 5 months ago

    Thanks for your help!!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Javascript breaks nav links’ is closed to new replies.