# Mit Javascript Button ausblenden



## To_Bu (26. Mai 2019)

Hallo,

ich habe auf einer Seite im unteren Bereich ein Kontaktformular, um schnell zu diesem zu kommen habe ich seitlich einen "Sticky Side Button" (Class: #bp-contact-button) und das Kontaktformular habe ich mit einer Sprungmarke versehen (id: contact-us).

Wenn man den Button klickt springt man zum Kontaktformular, wie kann man nun mit Javascript den Button dann ausblenden?.


VG Torsten


----------



## Quaese (27. Mai 2019)

Hi,


```
document.querySelector('#bp-contact-button').style.display = "none";
```
sollte den Button mit der ID *bp-contact-button *ausblenden.

Ciao
Quaese


----------



## To_Bu (27. Mai 2019)

Hallo Quaese,

vielen Dank, ich bekomme es aber nicht hin.

Nachfolgend der Code der den Button eingeblendet sobald man Scrollt:


```
<script type="text/javascript">
var myPosY;
  jQuery(window).bind( 'scroll', function() {
    myPosY = jQuery(window).scrollTop();
    
      if ( myPosY >= 250) {
      jQuery('#bp-contact-button').fadeIn();
    } else {
      jQuery('#bp-contact-button').fadeOut();
    }
  });
</script>
```

Beim Kontaktformular habe ich eine Sprungmarke gesetzt  (id: contact-us) und nur von da an soll der Button wieder ausgeblendet werden.


----------



## Sempervivum (27. Mai 2019)

Dann sollte es so gehen:

```
jQuery('#bp-contact-button').on("click", function() {
   $(this).fadeOut();
});
```


----------



## To_Bu (28. Mai 2019)

bekomme es nicht zum laufen ... wie schaut denn denn das komplette Script aus?


----------



## basti1012 (28. Mai 2019)

hast du überhaupt jquery eingebunden ?


----------



## To_Bu (28. Mai 2019)

Jquery ist eingebunden ... alle anderen Scripts laufen


----------



## basti1012 (28. Mai 2019)

dann solltest du vieleicht mal den code der ganzen Seite zeigen.Wie man ein button ausblendet wurde hier ja schon gepostet. Da wird wahrscheinlich irgendwas an der id oder class namen falsch sein oder vieleicht auch andere Scripte die stören können.
Deshalb wäre ein Link zur Seite oder der vollständige Code der Seite zum vorteil


----------



## To_Bu (28. Mai 2019)

Danker erst einmal.

Das stimmt:


```
<?php
/**
 * Detail page.
 */

get_header();

$theme_property_detail_variation = get_option( 'theme_property_detail_variation' );

// Banner Image.
$banner_image_path = '';
$banner_image_id   = get_post_meta( $post->ID, 'PAGE_page_banner_image', true );
if ( $banner_image_id ) {
    $banner_image_path = wp_get_attachment_url( $banner_image_id );
} else {
    $banner_image_path = get_default_banner();
}
?>
<script type="text/javascript">
var myPosY;
  jQuery(window).bind( 'scroll', function() {
    myPosY = jQuery(window).scrollTop();
    
      if ( myPosY >= 250) {
      jQuery('#bp-contact-button').fadeIn();
    } else {
      jQuery('#bp-contact-button').fadeOut();
    }
  });
</script>
<div class="page-head" style="background-repeat: no-repeat;background-position: center top;background-image: url('<?php echo esc_url( $banner_image_path ); ?>'); background-size: cover;">
    <div id="bp-contact-button"><a style="color:white;"href="#contact-us"><?php _e( 'Please contact us', 'framework' );?></a></div>
    <?php if ( ! ( 'true' == get_option( 'theme_banner_titles' ) ) ) : ?>
        <div class="container">
            <div class="wrap clearfix">
                <h1 class="page-title"><span><?php the_title(); ?></span></h1>
                <?php
                $display_property_breadcrumbs = get_option( 'theme_display_property_breadcrumbs' );
                if ( 'true' == $display_property_breadcrumbs ) {
                 get_template_part( 'common/partials/breadcrumbs' );
                }
                ?>
            </div>
        </div>
    <?php endif; ?>
</div><!-- End Page Head -->

<!-- Content -->
<div class="container contents detail">
    <div class="row">
        <div class="span9 main-wrap">

            <!-- Main Content -->
            <div class="main">
            
                <div id="overview">
                    <?php
                    if ( have_posts() ) :
                        while ( have_posts() ) :
                            the_post();

                            if ( ! post_password_required() ) {

                                /**
                                 * Images Slider
                                 */
                                ?>
                                <div class="slider-main-wrapper">
                                    <?php
                                    $gallery_slider_type = get_post_meta( $post->ID, 'PAGE_gallery_slider_type', true );

                                    /*
                                     * For demo purpose only.
                                     */
                                    if ( isset( $_GET['slider-type'] ) ) {
                                        $gallery_slider_type = $_GET['slider-type'];
                                    }

                                    if ( 'thumb-on-bottom' == $gallery_slider_type ) {
                                        /*
                                         * Slider with thumbs on bottom.
                                         */
                                        get_template_part( 'assets/classic/partials/property/single/slider-two' );
                                    } else {
                                        /*
                                         * Slider with thumbs on right.
                                         */
                                        get_template_part( 'assets/classic/partials/property/single/slider' );
                                    }
                                    ?>
                                    <div class="slider-socket <?php echo $gallery_slider_type; ?>">
                                        <?php
                                        /*
                                         * Add to favorites.
                                         */
                                        get_template_part( 'assets/classic/partials/property/single/add-to-favorites' );
                                        ?>
                                        <!-- Print link -->
                                        <span class="printer-icon"><a href="javascript:window.print()"><i class="fa fa-print"></i></a></span>
                                    </div>
                                </div>
                                <?php

                                /**
                                 * Information Bar, Icons Bar, Text Contents and Features
                                 */
                                get_template_part( 'assets/classic/partials/property/single/contents' );

                                /**
                                 * Video
                                 */
                                get_template_part( 'assets/classic/partials/property/single/video' );



                                /**
                                 * RVR - calendar
                                 */
                                if( inspiry_is_rvr_enabled() ) {
                                    get_template_part( 'assets/classic/partials/property/single/rvr/availability-calendar' );
                                }

                                /**
                                 * Child Properties
                                 */
                                get_template_part( 'assets/classic/partials/property/single/children' );

                                /**
                                 * Agent
                                 */
                                // For demo purpose only.
                                if ( isset( $_GET['variation'] ) ) {
                                    $theme_property_detail_variation = $_GET['variation'];
                                }

                                if ( 'agent-in-sidebar' !== $theme_property_detail_variation ) {
                                    get_template_part( 'assets/classic/partials/property/single/agent' );
                                }

                            } else {
                                echo get_the_password_form();
                            }

                        endwhile;
                    endif;
                    ?>
                </div>

            </div><!-- End Main Content -->

            <?php
            /**
             * Similar Properties
             */
            get_template_part( 'assets/classic/partials/property/single/similar-properties' );

            /*
             * 9. Comments
             * If comments are open or we have at least one comment, load up the comment template.
             */
            if ( comments_open() || get_comments_number() ) {
                ?>
                <div class="property-comments">
                    <?php comments_template(); ?>
                </div>
                <?php
            }
            ?>

        </div> <!-- End span9 -->

        <?php
        if ( 'agent-in-sidebar' == $theme_property_detail_variation ) {
            ?>
            <div class="span3 sidebar-wrap">
                <!-- Sidebar -->
                <aside class="sidebar property-sidebar">
                    <?php
                    get_template_part( 'assets/classic/partials/property/single/sidebar-agent' );

                    if ( ! dynamic_sidebar( 'property-sidebar' ) ) :
                    endif;
                    ?>
                </aside>
                <!-- End Sidebar -->
            </div>
            <?php
        } else {
            get_sidebar( 'property' );
        }
        ?>

    </div><!-- End contents row -->
</div><!-- End Content -->

<?php get_footer(); ?>
```

Und das Kontaktformular:


```
<?php
/**
 * Contact
 */
global $post;
/**
 * A function that works as re-usable template
 *
 * @param array $args
 */
function display_agent_box( $args ) {
    global $post;   // property
    ?>
    <div class="agent-detail clearfix">

        <div class="left-box">
            <?php
            if ( isset( $args['agent_title_text'] ) && ! empty( $args['agent_title_text'] ) ) {
                ?><h3 id="contact-us"><?php echo esc_html( $args['agent_title_text'] ); ?></h3><?php
            }

            if ( isset( $args['display_author'] ) && ( $args['display_author'] ) ) {
                if ( isset( $args['profile_image_id'] ) && ( 0 < $args['profile_image_id'] ) ) {
                    ?>
                    <figure><?php echo wp_get_attachment_image( $args['profile_image_id'], 'agent-image' ); ?></figure>
                    <?php
                } elseif ( isset( $args['agent_email'] ) ) {
                    ?>
                    <figure><?php echo get_avatar( $args['agent_email'], '210' ); ?></figure>
                    <?php
                }
            } else {
                if ( isset( $args['agent_id'] ) && has_post_thumbnail( $args['agent_id'] ) ) {
                    ?>
                    <figure>
                            <?php echo get_the_post_thumbnail( $args['agent_id'], 'image' ); ?>
                    </figure>
                    <?php
                }
            }
            ?>
            <p><?php
                echo $args['agent_description'];
                ?>
                <br/>
                <?php
                if ( isset( $args['display_author'] ) && ( $args['display_author'] ) ) {
                ?>
                <a class="real-btn" href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><?php echo esc_html( $button_label ); ?></a><?php
                } else {
                    /*?>
                    <a class="real-btn" href="<?php echo get_permalink( $args['agent_id'] ); ?>"><?php echo esc_html( $button_label ); ?></a><?php*/
                }
            ?></p>
        </div>

        <?php
        if ( isset( $args['agent_email'] ) && ! empty( $args['agent_email'] ) ) {

            $agent_form_id = 'agent-form-id';
            if ( isset( $args['agent_id'] ) ) {
                $agent_form_id .= $args['agent_id'];
            }

            ?>
            <div class="contact-form">
                <id="contact-us">
                <h3><?php _e( 'contact us', 'framework' ); ?></h3>
                <form id="<?php echo esc_attr( $agent_form_id ); ?>" class="agent-form contact-form-small" method="post" action="<?php echo admin_url( 'admin-ajax.php' ); ?>">
                    <?php _e('Name *', 'framework'); ?><input type="text" name="name" placeholder="<?php _e( '', 'framework' ); ?>" class="required" title="<?php _e( '* Please provide your name', 'framework' ); ?>">
                    <?php _e('Email *', 'framework'); ?><input type="text" name="email" placeholder="<?php _e( '', 'framework' ); ?>" class="email required" title="<?php _e( '* Please provide valid email address', 'framework' ); ?>">
                    <?php _e('Phone Number', 'framework'); ?><input type="text" name="phone" placeholder="<?php _e( '', 'framework' ); ?>">
                    <?php _e('Message *', 'framework'); ?><textarea name="message" class="required" placeholder="<?php _e( '', 'framework' ); ?>" title="<?php _e( '* Please provide your message', 'framework' ); ?>"></textarea>
                    <?php

                        $is_gdpr_enabled = inspiry_is_gdpr_enabled();

                        if ( $is_gdpr_enabled ) {

                            $gdpr_agreement_text = inspiry_gdpr_agreement_content();

                            if ( ! empty( $gdpr_agreement_text ) ) {
                                ?>
                                <p class="gdpr-agreement clearfix">
                                    <?php

                                        $gdpr_agreement_label   = inspiry_gdpr_agreement_content( 'label' );
                                        $gdpr_agreement_val_msg = inspiry_gdpr_agreement_content( 'validation-message' );

                                        if ( ! empty( $gdpr_agreement_label ) ) {
                                            ?>
                                            <span class="gdpr-checkbox-label"><?php echo esc_html( $gdpr_agreement_label ); ?>
                                                <span class="required-label">*</span></span>
                                            <?php
                                        }

                                    ?>
                                    <input type="checkbox" id="inspiry-gdpr-<?php echo esc_attr( $agent_form_id ); ?>" class="required" name="gdpr" title="<?php echo esc_attr( $gdpr_agreement_val_msg ); ?>" value="<?php echo strip_tags( $gdpr_agreement_text ); ?>">
                                    <label for="inspiry-gdpr-<?php echo esc_attr( $agent_form_id ); ?>"><?php echo $gdpr_agreement_text; ?></label>
                                </p>
                                <p><?php _e( '* Commen fields', 'framework' ); ?></p>
                                <?php
                            }
                        }

                        get_template_part( 'common/google-reCAPTCHA/google-reCAPTCHA' );
                    ?>
                    <input type="hidden" name="nonce" value="<?php echo wp_create_nonce( 'agent_message_nonce' ); ?>"/>
                    <input type="hidden" name="target" value="<?php echo antispambot( $args['agent_email'] ); ?>">
                    <input type="hidden" name="action" value="send_message_to_agent"/>
                    <input type="hidden" name="property_id" value="<?php echo esc_attr(get_the_ID()) ?>">   
                    <input type="hidden" name="property_title" value="<?php echo esc_attr( get_the_title( $post->ID ) ); ?>"/>
                    <input type="hidden" name="property_permalink" value="<?php echo esc_url_raw( get_permalink( $post->ID ) ); ?>"/>
                    <input type="submit" value="<?php _e( 'Send Message', 'framework' ); ?>" name="submit" class="submit-button real-btn">
                    <div class="clearfix form-separator"></div>
                    <div class="error-container"></div>
                    <div class="message-container"></div>
                </form>
            </div>
            <script type="text/javascript">
                (function( $ ) {
                    "use strict";

                    if( jQuery().validate && jQuery().ajaxSubmit ) {

                        var agentForm = $( '#<?php echo esc_attr( $agent_form_id ); ?>' );
                        var submitButton = agentForm.find( '.submit-button' ),
                            ajaxLoader = agentForm.find( '.ajax-loader' ),
                            messageContainer = agentForm.find( '.message-container' ),
                            errorContainer = agentForm.find( ".error-container" );

                        // Property detail page form
                        agentForm.validate( {
                            errorLabelContainer : errorContainer, submitHandler : function( form ) {
                                $( form ).ajaxSubmit( {
                                    beforeSubmit : function() {
                                        submitButton.attr( 'disabled', 'disabled' );
                                        ajaxLoader.fadeIn( 'fast' );
                                        messageContainer.fadeOut( 'fast' );
                                        errorContainer.fadeOut( 'fast' );
                                    }, success : function( ajax_response, statusText, xhr, $form ) {
                                        var response = $.parseJSON( ajax_response );
                                        ajaxLoader.fadeOut( 'fast' );
                                        submitButton.removeAttr( 'disabled' );
                                        if( response.success ) {
                                            $form.resetForm();
                                            messageContainer.html( response.message ).fadeIn( 'fast' );

                                            // call reset function if it exists
                                            if( typeof inspiryResetReCAPTCHA == 'function' ) {
                                                inspiryResetReCAPTCHA();
                                            }

                                        } else {
                                            errorContainer.html( response.message ).fadeIn( 'fast' );
                                        }
                                    }
                                } );
                            }
                        } );

                    }

                })( jQuery );
            </script>
            <?php
        }
        ?>
    </div>
    <?php
}


/**
 * Logic behind displaying agents / author information
 */
$display_agent_info = get_option( 'theme_display_agent_info' );
$agent_display_option = get_post_meta( $post->ID, 'PAGE_agent_display_option', true );

if ( ( $display_agent_info == 'true' ) && ( $agent_display_option != "none" ) ) {

    if ( $agent_display_option == "my_profile_info" ) {

        $profile_args = array();
        $profile_args['display_author'] = true;
        $profile_args['agent_title_text'] = __( 'Submitted by', 'framework' ) . " " . get_the_author_meta( 'display_name' );
        $profile_args['profile_image_id'] = intval( get_the_author_meta( 'profile_image_id' ) );
        $profile_args['agents_count'] = 1;
        $profile_args['agent_mobile'] = get_the_author_meta( 'mobile_number' );
        $profile_args['agent_whatsapp'] = get_the_author_meta( 'whatsapp_number' );
        $profile_args['agent_office_phone'] = get_the_author_meta( 'office_number' );
        $profile_args['agent_office_fax'] = get_the_author_meta( 'fax_number' );
        $profile_args['agent_email'] = get_the_author_meta( 'user_email' );
        $profile_args['agent_description'] = get_framework_custom_excerpt( get_the_author_meta( 'description' ), 50 );
        display_agent_box( $profile_args );

    } else {

        $property_agents = get_post_meta( $post->ID, 'PAGE_agents' );
        // remove invalid ids
        $property_agents = array_filter( $property_agents, function( $v ) {
            return ( $v > 0 );
        } );
        // remove duplicated ids
        $property_agents = array_unique( $property_agents );
        if ( ! empty( $property_agents ) ) {
            $agents_count = count( $property_agents );
            foreach ( $property_agents as $agent ) {
                if ( 0 < intval( $agent ) ) {
                    $agent_args = array();
                    $agent_args['agent_id'] = intval( $agent );
                    $agent_args['agents_count'] = $agents_count;
                    $agent_args['agent_title_text'] = __( '', 'framework' ) . " " . get_the_title( $agent_args['agent_id'] );
                    $agent_args['agent_mobile'] = get_post_meta( $agent_args['agent_id'], 'PAGE_mobile_number', true );
                    $agent_args['agent_office_phone'] = get_post_meta( $agent_args['agent_id'], 'PAGE_office_number', true );
                    $agent_args['agent_whatsapp'] = get_post_meta( $agent_args['agent_id'], 'PAGE_whatsapp_number', true );   
                    $agent_args['agent_office_fax'] = get_post_meta( $agent_args['agent_id'], 'PAGE_fax_number', true );
                    $agent_args['agent_email'] = get_post_meta( $agent_args['agent_id'], 'PAGE_agent_email', true );

                    /*
                     * Excerpt for agent is bit tricky as we have to get excerpt if available otherwise post contents
                     */
                    $temp_agent_excerpt = get_post_field( 'post_excerpt', $agent_args['agent_id'] );
                    if ( empty( $temp_agent_excerpt ) || is_wp_error( $temp_agent_excerpt ) ) {
                        $agent_args['agent_excerpt'] = get_post_field( 'post_content', $agent_args['agent_id'] );
                    } else {
                        $agent_args['agent_excerpt'] = $temp_agent_excerpt;
                    }

                    $agent_args['agent_description'] = get_framework_custom_excerpt( $agent_args['agent_excerpt'], 205 );
                    display_agent_box( $agent_args );
                }
            }
        }

    }

}
```


----------



## Sempervivum (28. Mai 2019)

Da der Fehler sich ja nicht auf PHP-Seite abspielt, wäre es sinnvoller, wenn Du das generierte HTML aus der Quelltextansicht des Browser posten würdest sowie das CSS und das JS.


----------



## To_Bu (28. Mai 2019)

Sempervivum hat gesagt.:


> Dann sollte es so gehen:
> 
> ```
> jQuery('#bp-contact-button').on("click", function() {
> ...



Ich habe dieses wohl nicht richtig eingebaut. Nun meine Frage: wo muss das hin?


----------



## Sempervivum (28. Mai 2019)

Z. B. hier:

```
<script type="text/javascript">
var myPosY;
  jQuery(window).bind( 'scroll', function() {
    myPosY = jQuery(window).scrollTop();
    
      if ( myPosY >= 250) {
      jQuery('#bp-contact-button').fadeIn();
    } else {
      jQuery('#bp-contact-button').fadeOut();
    }
  });
  jQuery('#bp-contact-button').on("click", function() {
     $(this).fadeOut();
  });
</script>
```


----------

