[Resolved] Close icon for top bar widget

Home Forums Support [Resolved] Close icon for top bar widget

Home Forums Support Close icon for top bar widget

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #582125
    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?

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #582261
    Tom
    Lead Developer
    Lead Developer

    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>

    #582537
    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.

    #583151
    Tom
    Lead Developer
    Lead Developer

    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 */
        } );
    } );
    #583324
    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.

    #583417
    David
    Staff
    Customer Support

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

    #583758
    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!

    #583765
    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!

    #583767
    David
    Staff
    Customer Support

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

    #588024
    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!

    #588094
    David
    Staff
    Customer Support

    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!

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.