admin管理员组文章数量:1319010
I'm trying to dynamically change the background color of a post on scroll to colors set in post options via an ACF color picker. I was able to source enough code examples to get it working (I thought) when developing locally, but now that I've moved it to a real server, it doesn't function the same way.
Problem: The color changing works on the first post I look at, but when I go to another post, the background color that should be displayed (or changed to) is the same as the first post. The only way to get it to display the correct color is to do a hard refresh.
Test it by viewing these two pages. You'll notice they both have the same color to start at the top of the page as well as at the very bottom when you scroll (color changes again). But doing a hard refresh will change that. (first link should be peach background, second link blue). / /
Here's how I have it set up so far:
JS for color changing on scroll effect:
jQuery(document).ready(function($) {
$(window).scroll(function() {
var $window = $(window),
$body = $('body'),
$panel = $('.panel');
var scroll = $window.scrollTop() + ($window.height() / 3);
$panel.each(function () {
var $this = $(this);
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
$body.removeClass(function (index, css) {
return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
});
$body.addClass('color-' + $(this).data('color'));
}
});
}).scroll();
});
It's enqueued like this in my functions.php file:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_register_script(
'child-theme-script',
get_stylesheet_directory_uri() . '/js/cdscripts.js',
array('jquery')
);
wp_enqueue_script('child-theme-script');
}
PHP file to generate custom CSS file:
.color-accent {
background-color:<?php the_field('accent-color');?> !important;
}
.color-initial {
background-color:<?php the_field('initial-color');?> !important;
}
Function to convert PHP to CSS and enqueue it:
function generate_options_css() {
ob_start(); // Capture all output into buffer
require_once dirname( __FILE__ ) . '/inc/custom-styles.php';
$css = ob_get_clean(); // Store output in a variable, then flush the buffer
file_put_contents(dirname( __FILE__ ) . '/inc/custom-styles.css', $css, LOCK_EX); // Save it as a css file
wp_enqueue_style( 'custom-styles', get_stylesheet_directory_uri() . '/inc/custom-styles.css' );
}
add_action( 'wp_enqueue_scripts', 'generate_options_css' );
In the post template, the sections I want to change background colors on when they're scrolled to are assigned the "panel" class and data-color="XXXXXXX" value depending on what color from ACF I want to use.
Is there any other way for me to accomplish this that will force the new CSS values to be loaded for every page/post?
I'm trying to dynamically change the background color of a post on scroll to colors set in post options via an ACF color picker. I was able to source enough code examples to get it working (I thought) when developing locally, but now that I've moved it to a real server, it doesn't function the same way.
Problem: The color changing works on the first post I look at, but when I go to another post, the background color that should be displayed (or changed to) is the same as the first post. The only way to get it to display the correct color is to do a hard refresh.
Test it by viewing these two pages. You'll notice they both have the same color to start at the top of the page as well as at the very bottom when you scroll (color changes again). But doing a hard refresh will change that. (first link should be peach background, second link blue). https://www.conrad-design/dev/cd2020/projects/blush-salon-spa-website-design/ https://www.conrad-design/dev/cd2020/projects/pantel-business-systems-website-design/
Here's how I have it set up so far:
JS for color changing on scroll effect:
jQuery(document).ready(function($) {
$(window).scroll(function() {
var $window = $(window),
$body = $('body'),
$panel = $('.panel');
var scroll = $window.scrollTop() + ($window.height() / 3);
$panel.each(function () {
var $this = $(this);
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
$body.removeClass(function (index, css) {
return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
});
$body.addClass('color-' + $(this).data('color'));
}
});
}).scroll();
});
It's enqueued like this in my functions.php file:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_register_script(
'child-theme-script',
get_stylesheet_directory_uri() . '/js/cdscripts.js',
array('jquery')
);
wp_enqueue_script('child-theme-script');
}
PHP file to generate custom CSS file:
.color-accent {
background-color:<?php the_field('accent-color');?> !important;
}
.color-initial {
background-color:<?php the_field('initial-color');?> !important;
}
Function to convert PHP to CSS and enqueue it:
function generate_options_css() {
ob_start(); // Capture all output into buffer
require_once dirname( __FILE__ ) . '/inc/custom-styles.php';
$css = ob_get_clean(); // Store output in a variable, then flush the buffer
file_put_contents(dirname( __FILE__ ) . '/inc/custom-styles.css', $css, LOCK_EX); // Save it as a css file
wp_enqueue_style( 'custom-styles', get_stylesheet_directory_uri() . '/inc/custom-styles.css' );
}
add_action( 'wp_enqueue_scripts', 'generate_options_css' );
In the post template, the sections I want to change background colors on when they're scrolled to are assigned the "panel" class and data-color="XXXXXXX" value depending on what color from ACF I want to use.
Is there any other way for me to accomplish this that will force the new CSS values to be loaded for every page/post?
Share Improve this question asked Oct 17, 2020 at 23:41 rconrad41rconrad41 112 bronze badges 3
本文标签： advanced custom fieldsHow can I force Dynamic CSS via ACF values to update on page load