Inject some CSS containing PHP on JQuery
104
I am trying to get some CSS containing PHP on jQuery. I basically need this CSS:
background: #3c653c url( <?php echo $cta_background_image_url; ?> ) no-repeat fixed;
Applied to:
wp.customize( 'cta_background_image', function( value ) {
var styles = {
backgroundPosition : "center top",
backgroundBlendMode: "hard-light",
position: "relative",
height: "440px",
backgroundRepeat: "no-repeat",
backgroundAttachment: "fixed",
backgroundSize: "cover",
lineHeight: "200%",
color: "#fff",
overflow: "hidden",
paddingTop: "0",
marginBottom: "0"
};
value.bind( function( to ) {
$( '.cta-parallax-section ' ).css( 'background', 'url( ' + to + ')' );
$( '.cta-parallax-section ' ).css( styles );
} );
});
I need too inject the code where it says css( 'background', 'url( ' + to + ')' );
This code will be applied to a WordPress Customizer to make it render changes made by the user in real time within the preview window.
How can I achieve this? I can't find information online on this kind of maneuver.
Thanks in advance!
Answer
Solution:
To get the value from the variable
$cta_background_image_url;you can simply set a timeout and retrieve the value from the element, which you can use for whatever you want.For example:
The variable
datawould outputurl( [ value from $cta_background_image_url ] ).To inject it, simply use the variable
data:Answer
Solution:
You can put some vars in head with this code:
add_action('wp_head', function(){ ?> <script type='text/javascript'> var bg_img = '<?php echo $bg_img; ?>'; </script> <?php });And use bg_img var in your js code. But better way is using wp_localize_script function.