Cannot affect background colour with jQuery

• 

  prradox · Member · Mar 23, 2018 at 4:00 pm

  • Copy link
  • Add topic to favorites

  Hey, I’ll provide as much info and code as I can. I’m making a new site (www.hosthamilton.com) which is using the Nexx theme, which includes WPbakery.

  Everything has been going well, but I am trying to have a jQuery script run so that when the user scrolls, the background colour is changed. I can confirm that the script is loading, and all dependencies are loaded as well etc, but I cannot get the background to change colours.

  Now, presumably this is because the jQuery call isn’t targetting the correct element, perhaps due to the way the theme loads the pages? But, I have tried custom ID and custom class targeting with no success, as well as targeting the generated css=”” class title I found at the top of the page.

  Here’s the actual colourscroll script:

  jQuery(document).ready(function($){
      $(document).ready(function(){
          //** notice we are including jquery and the color plugin at
          //** http://code.jquery.com/color/jquery.color-2.1.0.js
  
          var scroll_pos = 0;
          var animation_begin_pos = 0; //where you want the animation to begin
          var animation_end_pos = 300; //where you want the animation to stop
          var beginning_color = new $.Color( 'rgb(0,0,0)' ); //we can set this here, but it'd probably be better to get it from the CSS; for the example we're setting it here.
          var ending_color = new $.Color( 'rgb(255,100,100)' ); ;//what color we want to use in the end
          $(document).scroll(function() {
              scroll_pos = $(this).scrollTop();
              if(scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos ) {
                  //console.log( 'scrolling and animating' );
                  //we want to calculate the relevant transitional rgb value
                  var percentScrolled = scroll_pos / ( animation_end_pos - animation_begin_pos );
                  var newRed = beginning_color.red() + ( ( ending_color.red() - beginning_color.red() ) * percentScrolled );
                  var newGreen = beginning_color.green() + ( ( ending_color.green() - beginning_color.green() ) * percentScrolled );
                  var newBlue = beginning_color.blue() + ( ( ending_color.blue() - beginning_color.blue() ) * percentScrolled );
                  var newColor = new $.Color( newRed, newGreen, newBlue );
                  //console.log( newColor.red(), newColor.green(), newColor.blue() );
                  $('body').animate({ backgroundColor: newColor }, 0);
              } else if ( scroll_pos > animation_end_pos ) {
                  //console.log('hit animation end');
                   $('body').animate({ backgroundColor: ending_color }, 0);
              } else if ( scroll_pos < animation_begin_pos ) {
                  //console.log('animation begin point');
                   $('body').animate({ backgroundColor: beginning_color }, 0);
              } else { }
          });
      });
  });

  and here’s the raw code from the page in question (www.hosthamilton.com)

  <p>[vc_row full_width="stretch_row_content_no_spaces" full_height="yes" css=".vc_custom_1521819651200{background-color: #000000 ;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" el_id="rowlanding" el_class="bgfixed"][vc_column][vc_row_inner][vc_column_inner width="2/3"][vc_column_text css_animation="fadeInLeft" css=".vc_custom_1521752218070{padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 75px !important;padding-left: 0px !important;}"]</p>
  <h1 style="text-align: center;"><span style="color: #a6ebc9;"><strong><em>Local</em></strong>  hosting</span></h1>
  <h1 style="text-align: center;"><span style="color: #a6ebc9;">for local <strong><em>talent</em></strong></span></h1>
  <p>[/vc_column_text][vc_column_text css_animation="fadeInLeft" css=".vc_custom_1521752342556{margin-top: -30px !important;margin-right: 30% !important;margin-left: 30% !important;padding-bottom: 75px !important;}"]</p>
  <p style="text-align: left;"><span style="color: #a6ebc9;">Take your <strong>business</strong> to the next level with a website designed <strong>JUST for you</strong>.</span></p>
  <p style="text-align: left;"><span style="color: #a6ebc9;">Increase contact rates, use professional services, engage your audience.</span></p>
  <p>[/vc_column_text][/vc_column_inner][vc_column_inner width="1/3"][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]</p>

  Any/all help is appreciated! If you need more from me let me know!

• 

  thesacredpath · Member · Mar 23, 2018 at 7:03 pm

  • Copy link

  Hi @prradox, it looks like you are using WordPress but you are not hosted here at WordPress.com. These forum are for those hosted here at WordPress.com. For self-hosted WordPress sites such as yours, I would suggest asking for help from the theme author directly or ask in the volunteer-based WordPress.org forums.

  The differences between WordPress.com and WordPress.org.