Mit Javascript Button ausblenden


To_Bu

Grünschnabel
#1
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

Moderator
Moderator
#2
Hi,

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

Ciao
Quaese
 

To_Bu

Grünschnabel
#3
Hallo Quaese,

vielen Dank, ich bekomme es aber nicht hin.

Nachfolgend der Code der den Button eingeblendet sobald man Scrollt:

Code:
<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.
 

basti1012

Erfahrenes Mitglied
#8
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

Grünschnabel
#9
Danker erst einmal.

Das stimmt:

PHP:
 <?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:
<?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

Erfahrenes Mitglied
#10
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.
 

Sempervivum

Erfahrenes Mitglied
#12
Z. B. hier:
Code:
<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>