How to make something empty in jquery

This part of my code

if ( $’#header-IMG’ && ‘.custom-logo’.is(:’hidden’) )

ends up always true so I must be doing something wrong.

My php code for my
custom-header.php works on my live site but not the site preview.

This part

if ( get_header_image_tag() && empty(get_custom_logo()) || is_customize_preview()):

I need the same result for my JQuery script.

Also #header-IMG is wrapped in a div like so.

header.php

custom-header.php

<style type=”text/css”>
<?php
// Has the text been hidden?
if ( ! display_header_text() ) :
?>

.site-title,
.site-description {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);

}

<?php endif; ?>

<?php
// If the user has set a custom color for the text use that.
if ( get_header_image_tag() && empty(get_custom_logo()) || is_customize_preview()):
?>

.site-title a {
color: #<?php echo esc_attr( $header_text_color ); ?>; position: absolute;
top: 2em;
display: block;
z-index: 100;
}

.site-description {
color: #<?php echo esc_attr( $header_text_color ); ?>;
position: absolute;
top: 2em;
display: block;
z-index: 100;

}
.l-r-h-wrap {
margin: 0;

}

<?php elseif ( get_header_image_tag() && get_custom_logo() || is_customize_preview()): ?>

.site-title a {
color: #<?php echo esc_attr( $header_text_color ); ?>;
}

.site-description {
color: #<?php echo esc_attr( $header_text_color ); ?>;
}
.l-r-h-wrap {
margin: 0.5;

}
<?php else: ?>
.site-title a {
color: #<?php echo esc_attr( $header_text_color ); ?>;
}

.site-description {
color: #<?php echo esc_attr( $header_text_color ); ?>;
}

</style>

<?php endif; ?>

customizer.js

( function( $ ) {

// Site title and description.
wp.customize( ‘blogname’, function( value ) {
value.bind( function( to ) {
$( ‘.site-title a’ ).text( to );
} );
} );
wp.customize( ‘blogdescription’, function( value ) {
value.bind( function( to ) {
$( ‘.site-description’ ).text( to );
} );
} );

// Header text color.
wp.customize( ‘header_textcolor’, function( value ) {
value.bind( function( to ) {
if ( ‘blank’ === to ) {
$( ‘.site-title, .site-description’ ).css( {
‘clip’: ‘rect(1px, 1px, 1px, 1px)’,
‘position’: ‘absolute’
} );
}
if ( $’#header-IMG’ && ‘.custom-logo’.is(:’hidden’) ){
$( ‘.site-title’ ).css( {
‘color’: to,
‘position’: ‘absolute’,
‘top’: ‘2em’,
‘display’: ‘block’,
‘z-index’: ‘100’
} );
$( ‘.site-description’ ).css( {
‘color’: to,
‘position’: ‘absolute’,
‘top’: ‘2.5em’,
‘display’: ‘block’,
‘z-index’: ‘100’
} );
else {
$( ‘.site-title’ ).css( {
‘color’: to,
‘position’: ‘relative’
} );
$( ‘site-description’ ).css( {
‘color’: to,
‘position’: ‘relative’
} );
}
}
} );
} );
} )( jQuery );

Read more here:: How to make something empty in jquery

Leave a Reply

Your email address will not be published. Required fields are marked *