How do I pick which CSS class is displayed on page load using JQuery?

Question

I have an image version and a text version of my site logo in the following HTML tags. I want to pick which one to show based on where in the page I am vertically and the screen width.

<a class="navbar-brand" id="top-logo" href="#top"><img src="display_board.png" alt="Page Title"></a>
<a class="navbar-brand scroll" id="bottom-logo" href="#top">Page Title</a>

The following script functions correctly for screen resizing and scrolls once the page is loaded. When the site is loaded on mobile, the image logo appears first when viewing on mobile before quickly updating to the text logo, since the script file is loaded at end of the HTML file.

var method_update_nav = function() {
  var buffer = 200;
  var horizontal_switch_point = 1200;
  var vertical_switch_point = $('.carousel-indicators').offset().top - buffer;
  var window_top = Math.round($(window).scrollTop());

  if ($(window).width() <= horizontal_switch_point || window_top >= vertical_switch_point) {
    $('nav').removeClass('top');
    $('nav').addClass('bottom');
    $('#top-logo').hide();
    $('#bottom-logo').show();
  } else {
    $('nav').removeClass('bottom');
    $('nav').addClass('top');
    $('#top-logo').show();
    $('#bottom-logo').hide();
  }
};

var main = function() {
  /* UPDATE NAV */
  method_update_nav();
  $(window).resize(method_update_nav);
  $(window).scroll(method_update_nav);
}

$(document).ready(main);

Loading the script in the HTML <header> causes the script to not function, since the classes the JQuery is referencing haven't been defined in HTML tags yet.

Is there a way to pick the correct class to show as the page loads, but after the classes have been defined in the HTML tags?

Your question is missing some details, please take time to revise it. My solution seems to solve a part of your problem. — Adam Azad
– Adam Azad, Commented Dec 11, 2015 at 23:08
The code you have should work with th edit to use $(document).ready. — Barmar
– Barmar, Commented Dec 11, 2015 at 23:50
It works except for loading on a scroll position or screen width that should use the text logo. The image logo flickers first before the text logo finally appears. I was hoping to get rid of this flicker. — tgreen8091
– tgreen8091, Commented Dec 12, 2015 at 18:08

Mr Lister · Accepted Answer · 2015-12-15 22:22:06Z

1

Loading the script in the HTML <header> causes the script to not function, since the classes the JQuery is referencing haven't been defined in HTML tags yet.

You say it yourself!

So you are using jQuery and I hope you know that you must place the script which references to HTML elements at the bottom of the page in:

$(document).ready(function(){
    //script will now get the values because the HTML in now Loaded
})

I advise you to read some tutorials on the web.

edited Dec 15, 2015 at 22:22

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Dec 11, 2015 at 23:02

Franco

2,3291 gold badge13 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

How do I pick which CSS class is displayed on page load using JQuery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related