[Resolved] Close icon for top bar widget

[George]

Hello. I want to be able to have a close(X) icon to close the top bar widget and make it disappear. I don’t mind if it opens up again on another page refresh(that’s what I want actually!) but I would like to be able to close it(preferable with a slide out animation). I know I can use a notification top bar plugin but I would like to be able to use GP’s top bar while it’s there. Is there a way to accomplish that?

[Tom]

Interesting question!

You might be able to do something like this:

CSS:

.top-bar {
    transition: transform 500ms ease;
    position: fixed;
    left: 0;
    right: 0;
}

jQuery (added in wp_footer surrounded by <script></script> tags, or in your JS file:

jQuery( document ).ready( function( $ ) {
    $( '.my-close-element' ).on( 'click', function( e ) {
        e.preventDefault();

        $( '.top-bar' ).css( 'transformY', '-100px' );
    } );
} );

This assumes you have an element within your top bar like this:

<a href="#" class="my-close-element">Close me</a>

[George]

Ok, that seemed to work for me $( '.top-bar' ).css( 'transform', 'translate(0%, -100%)' );. The only thing now is that after adding a z-index: 1; to make the bar visible combined with the position: fixed; property, makes the bar sticky but covers the header. Is there a way to solve that? When this is done, I would also need a solution to the fact that when the elements translates up it needs to move teh page up as well as not to create a gap at the top.

[Tom]

Hmm, I wonder what we can do then.. Usually dismissible notices like this are fixed elements.

You could try this instead:

body {
    transition: transform 500ms ease;
}

jQuery( document ).ready( function( $ ) {
    $( '.my-close-element' ).on( 'click', function( e ) {
        e.preventDefault();

        $( 'body' ).css( 'transformY', '-50px' ); /* height of top bar */
    } );
} );

[George]

That’s great Tom, I am 99% there, it looks beatiful! That worked for me by the way:

$( 'body' ).css( 'transform', 'translate(0%, -32px)' );

One more thing. Is it possible to have a condition to translate the body class to different values depended on weather the admin bar at the top is present or not? Currently I have to set my top bar the same height as the WordPress admin bar to make it 100% pixel perfect and keep the top header margins in tact, if you know what I mean.

[David]

Hi George, you could try an additional rule that targets the body .admin-bar

[George]

Hi David. Ok, good idea, I have added the div#wpadminbar class to both css and the javascript function as a separete command to translate up the same amount as the width of the bar but it doesn’t seem to be taking that into account. I think it needs a javascript conditional in the form of if div#wpadminbar class is present then translate by this amount else translate by that amount. I will have a look, unless Tom saves me a few hours of searching!

[George]

Didn’t take me long!

CSS

/** Top bar **/
.top-bar {
    left: 0;
    right: 0;
    z-index: 1;
}

.top-bar p {
    margin-bottom: 0;
}

.top-close-button {
    float: right; 
    clear:right; 
    margin-top: -20px;
    cursor: pointer;
}

body, div#wpadminbar, .top-bar {
    transition: transform 500ms ease;
}

JS

<script>
jQuery( document ).ready( function( $ ) {
    $( '.top-close-button' ).on( 'click', function( e ) {
        e.preventDefault();
        $( '.top-bar' ).css( 'transform', 'translate(0%, -100%)' );

        if ($('div#wpadminbar')[0]) {
            $( 'body' ).css( 'transform', 'translate(0, -82px)' );
        } else {
          $( 'body' ).css( 'transform', 'translate(0, -52px)' );
        }

    } );
} );
</script>

Values may vary according to height and contents of top bar. Thank you Tom and David!

[David]

Glad to see you got it working. And thanks for sharing!

[George]

Hi, I have just created a tutorial in my blog describing how to recreate this type of functionality:
https://bit.ly/2IXCmni

Hope it proves useful, thanks again!

[David]

Hi George, thank you for sharing your post, i am sure it will come in useful, lots of fun to be had with that one!

[Author]

Posts