Question posted in
The full documentation can be found here.

How AddClass to body depending on active slider color class in WP Divi theme

I am trying to customize the Divi theme for WordPress.

In this project: http://dm-wp.com/vins-lelievre/, I’d like to have the logo and the menu color change to white if the active slide background is dark.

I would like to add a class to the body if the new active slide has the class “et_pb_bg_layout_dark”.

Function already exists for adding color class to the slider container.

I think what I am missing is the event that makes the script run again to check the condition.

Can I insert the script in the integration field of the theme or shall I edit theme .js file?

From my investigations, script would look like this.

I guess it’s wrong or not complete:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
   jQuery( document ).ready(function() {
       if ( jQuery('#slide-home').hasClass( "et_pb_bg_layout_dark" ) ) {
           jQuery('body').addClass('yourClassName');
       }
    });
</script>

Thanks for your help

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    This is the slider structure, where 'et_pb_bg_layout_light' is actually changed for 'et_pb_bg_layout_dark' inside 'et_pb_slider ' if 'et_pb_slide' has 'et_pb_bg_layout_dark'. Only CSS classes, I added the ID '#home-slide', but theoritically it shouldn't be necessary.

    			<div id="home-slide" class="et_pb_module et_pb_slider et_slider_auto et_slider_speed_7000 et_slider_auto_ignore_hover  et_pb_fullwidth_slider_0">
				<div class="et_pb_slides">
					<div class="et_pb_slide et_pb_bg_layout_light et_pb_slider_with_text_overlay et_pb_slide_0 et-pb-active-slide" style='background-color:#ffffff;background-image:url(http://dm-wp.com/vins-lelievre/wp-content/uploads/2016/10/léquipe-des-vins-lelievre.jpg);'>
				
				
				<div class="et_pb_container clearfix">
					
					<div class="et_pb_slide_description">
						<h2 class="et_pb_slide_title"><a href="http://dm-wp.com/vins-lelievre/maison-lelievre/">DÉCOUVREZ LA MAISON LELIÈVRE</a></h2>
						<div class="et_pb_slide_content">
<p style="text-align: right;">Une famille, un vignoble, une histoire,<br />
un savoir-faire, des vins&#8230;</p>
</div>
						<a href="http://dm-wp.com/vins-lelievre/maison-lelievre/" class="et_pb_more_button et_pb_button">Découvrir</a>
					</div> <!-- .et_pb_slide_description -->
				</div> <!-- .et_pb_container -->
				
			</div> <!-- .et_pb_slide -->
			<div class="et_pb_slide et_pb_bg_layout_dark et_pb_slider_with_overlay et_pb_slider_with_text_overlay et_pb_slide_1" style='background-color:#ffffff;background-image:url(http://dm-wp.com/vins-lelievre/wp-content/uploads/2016/10/david-lelievre-ca-nous-a-ouvert-des-marches-1433506900.jpg);'>
				
				<div class="et_pb_slide_overlay_container"></div>
				<div class="et_pb_container clearfix">
					
					<div class="et_pb_slide_description">
						<h2 class="et_pb_slide_title"><a href="http://dm-wp.com/vins-lelievre/boutique/">BIENVENUE À LA CAVE</a></h2>
						<div class="et_pb_slide_content">
<p style="text-align: right;">Découvrez nos vins de Lorraine et Côtes de Toul et nos spécialités régionales et internationales.</p>
</div>
						<a href="http://dm-wp.com/vins-lelievre/boutique/" class="et_pb_more_button et_pb_button">Entrer</a>
					</div> <!-- .et_pb_slide_description -->
				</div> <!-- .et_pb_container -->
				
			</div> <!-- .et_pb_slide -->
			<div class="et_pb_slide et_pb_bg_layout_dark et_pb_slider_with_text_overlay et_pb_slide_2" style='background-color:#000000;background-image:url(http://dm-wp.com/vins-lelievre/wp-content/uploads/2016/10/mirabelles-fraiches-1.jpg);'>
				
				
				<div class="et_pb_container clearfix">
					
					<div class="et_pb_slide_description">
						<h2 class="et_pb_slide_title"><a href="http://dm-wp.com/vins-lelievre/categorie-produit/delices-lorrains/mirabelles/mirabelles-fraiches/">ELLES SONT ARRIVÉES!!!</a></h2>
						<div class="et_pb_slide_content">
<p style="text-align: right;">Les mirabelles fraîches 2016 sont là! Venez les chercher ou commandez directement en ligne</p>
</div>
						<a href="http://dm-wp.com/vins-lelievre/categorie-produit/delices-lorrains/mirabelles/mirabelles-fraiches/" class="et_pb_more_button et_pb_button">Acheter</a>
					</div> <!-- .et_pb_slide_description -->
				</div> <!-- .et_pb_container -->
				
			</div> <!-- .et_pb_slide -->
			
				</div> <!-- .et_pb_slides -->
			</div> <!-- .et_pb_slider -->


  2. 0

    You didn’t have <div id="slide-home"></div> in your code.

    When you click on button, if #slide-home has class .et_pb_bg_layout_dark, the background of body will change

    body {
  min-height: 200px;
  border: 1px solid red;
}

body.yourClassName {
  background: red;
}
    <div id="slide-home" class="et_pb_bg_layout_dark"></div>

<button id="btn">check</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
   jQuery( document ).ready(function() {
     
     if ( jQuery('#slide-home').hasClass( "et_pb_bg_layout_dark" ) ) {
           jQuery('body').addClass('yourClassName');
       }
   
     
       
    });
</script>
    Login or Signup to reply.
  3. 0

    Here is a piece of the original visual builder javascript where I think I can find similar functions to the one I want to have. For example “et_slider_auto_rotate()” or the variable “tabs_animation”. Anyone inspired to explain me how it works to get classes checked and added or removed on every slide change?

    	window.et_pb_init_modules = function() {
		$.et_pb_simple_slider = function(el, options) {
			var settings = $.extend( {
				slide         			: '.et-slide',				 	// slide class
				arrows					: '.et-pb-slider-arrows',		// arrows container class
				prev_arrow				: '.et-pb-arrow-prev',			// left arrow class
				next_arrow				: '.et-pb-arrow-next',			// right arrow class
				controls 				: '.et-pb-controllers a',		// control selector
				carousel_controls 		: '.et_pb_carousel_item',		// carousel control selector
				control_active_class	: 'et-pb-active-control',		// active control class name
				previous_text			: et_pb_custom.previous,			// previous arrow text
				next_text				: et_pb_custom.next,				// next arrow text
				fade_speed				: 500,							// fade effect speed
				use_arrows				: true,							// use arrows?
				use_controls			: true,							// use controls?
				manual_arrows			: '',							// html code for custom arrows
				append_controls_to		: '',							// controls are appended to the slider element by default, here you can specify the element it should append to
				controls_below			: false,
				controls_class			: 'et-pb-controllers',				// controls container class name
				slideshow				: false,						// automattic animation?
				slideshow_speed			: 7000,							// automattic animation speed
				show_progress_bar		: false,							// show progress bar if automattic animation is active
				tabs_animation			: false,
				use_carousel			: false
			}, options );

			var $et_slider 			= $(el),
				$et_slide			= $et_slider.closest_descendent( settings.slide ),
				et_slides_number	= $et_slide.length,
				et_fade_speed		= settings.fade_speed,
				et_active_slide		= 0,
				$et_slider_arrows,
				$et_slider_prev,
				$et_slider_next,
				$et_slider_controls,
				$et_slider_carousel_controls,
				et_slider_timer,
				controls_html = '',
				carousel_html = '',
				$progress_bar = null,
				progress_timer_count = 0,
				$et_pb_container = $et_slider.find( '.et_pb_container' ),
				et_pb_container_width = $et_pb_container.width(),
				is_post_slider = $et_slider.hasClass( 'et_pb_post_slider' );

				$et_slider.et_animation_running = false;

				$.data(el, "et_pb_simple_slider", $et_slider);

				$et_slide.eq(0).addClass( 'et-pb-active-slide' );

				if ( ! settings.tabs_animation ) {
					if ( !$et_slider.hasClass('et_pb_bg_layout_dark') && !$et_slider.hasClass('et_pb_bg_layout_light') ) {
						$et_slider.addClass( et_get_bg_layout_color( $et_slide.eq(0) ) );
					}
				}
				


				if ( settings.use_arrows && et_slides_number > 1 ) {
					if ( settings.manual_arrows == '' )
						$et_slider.append( '<div class="et-pb-slider-arrows"><a class="et-pb-arrow-prev" href="#">' + '<span>' +settings.previous_text + '</span>' + '</a><a class="et-pb-arrow-next" href="#">' + '<span>' + settings.next_text + '</span>' + '</a></div>' );
					else
						$et_slider.append( settings.manual_arrows );

					$et_slider_arrows 	= $et_slider.find( settings.arrows );
					$et_slider_prev 	= $et_slider.find( settings.prev_arrow );
					$et_slider_next 	= $et_slider.find( settings.next_arrow );

					$et_slider_next.click( function(){
						if ( $et_slider.et_animation_running )	return false;

						$et_slider.et_slider_move_to( 'next' );

						return false;
					} );

					$et_slider_prev.click( function(){
						if ( $et_slider.et_animation_running )	return false;

						$et_slider.et_slider_move_to( 'previous' );

						return false;
					} );

					// swipe support requires et-jquery-touch-mobile
					$et_slider.find( settings.slide ).on( 'swipeleft', function() {
						$et_slider.et_slider_move_to( 'next' );
					});
					$et_slider.find( settings.slide ).on( 'swiperight', function() {
						$et_slider.et_slider_move_to( 'previous' );
					});
				}

				if ( settings.use_controls && et_slides_number > 1 ) {
					for ( var i = 1; i <= et_slides_number; i++ ) {
						controls_html += '<a href="#"' + ( i == 1 ? ' class="' + settings.control_active_class + '"' : '' ) + '>' + i + '</a>';
					}

					controls_html =
						'<div class="' + settings.controls_class + '">' +
							controls_html +
						'</div>';

					if ( settings.append_controls_to == '' )
						$et_slider.append( controls_html );
					else
						$( settings.append_controls_to ).append( controls_html );

					if ( settings.controls_below )
						$et_slider_controls	= $et_slider.parent().find( settings.controls );
					else
						$et_slider_controls	= $et_slider.find( settings.controls );

					et_maybe_set_controls_color( $et_slide.eq(0) );

					$et_slider_controls.click( function(){
						if ( $et_slider.et_animation_running )	return false;

						$et_slider.et_slider_move_to( $(this).index() );

						return false;
					} );
				}

				if ( settings.use_carousel && et_slides_number > 1 ) {
					for ( var i = 1; i <= et_slides_number; i++ ) {
						slide_id = i - 1;
						image_src = ( $et_slide.eq(slide_id).data('image') !== undefined ) ? 'url(' + $et_slide.eq(slide_id).data('image') + ')' : 'none';
						carousel_html += '<div class="et_pb_carousel_item ' + ( i == 1 ? settings.control_active_class : '' ) + '" data-slide-id="'+ slide_id +'">' +
							'<div class="et_pb_video_overlay" href="#" style="background-image: ' + image_src + ';">' +
								'<div class="et_pb_video_overlay_hover"><a href="#" class="et_pb_video_play"></a></div>' +
							'</div>' +
						'</div>';
					}

					carousel_html =
						'<div class="et_pb_carousel">' +
						'<div class="et_pb_carousel_items">' +
							carousel_html +
						'</div>' +
						'</div>';
					$et_slider.after( carousel_html );

					$et_slider_carousel_controls = $et_slider.siblings('.et_pb_carousel').find( settings.carousel_controls );
					$et_slider_carousel_controls.click( function(){
						if ( $et_slider.et_animation_running )	return false;

						var $this = $(this);
						$et_slider.et_slider_move_to( $this.data('slide-id') );

						return false;
					} );
				}

				if ( settings.slideshow && et_slides_number > 1 ) {
					$et_slider.hover( function() {
						if ( $et_slider.hasClass( 'et_slider_auto_ignore_hover' ) ) {
							return;
						}

						$et_slider.addClass( 'et_slider_hovered' );

						if ( typeof et_slider_timer != 'undefined' ) {
							clearInterval( et_slider_timer );
						}
					}, function() {
						if ( $et_slider.hasClass( 'et_slider_auto_ignore_hover' ) ) {
							return;
						}

						$et_slider.removeClass( 'et_slider_hovered' );

						et_slider_auto_rotate();
					} );
				}

				et_slider_auto_rotate();

				function et_slider_auto_rotate(){
					if ( settings.slideshow && et_slides_number > 1 && ! $et_slider.hasClass( 'et_slider_hovered' ) ) {
						et_slider_timer = setTimeout( function() {
							$et_slider.et_slider_move_to( 'next' );
						}, settings.slideshow_speed );
					}
				}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search