cPanel Question posted in
The official documentation can be seen here.

cPanel Css Alert

How to I create a auto dismissible css alert top of the page such as cPanel alert green,blue,red.

Tags:

2

Answers


  1. 0

    Using media query for mobile, you can hide the content of the loader on mobile devices.

    Also you need to group your text content inside the loader, so that it will become easier to hide it

    @media(max-width:421px) {
  #text-group {
    display: none;
  }
}

    The code above, checks if the width of the screen is less than 500px(u can use any value), and then it hides the content of the loader.

    This answer will give u a starting point

    Open the snippet in full screen mode and reduce the screen size

    /*For desktop no need to add media query*/
/*Put ur styles here*/
/*For desktop it take above styles */

/*For mobile */
/*u need to hide the text group*/

@media(max-width:421px) {
  #text-group {
    display: none;
  }
}
    <div id="loading">
  <div id="dst"> Gif here </div>
  <div id="text-group">
    <h4 id="h4">Please Wait!</h4>
    <p id="ntf">Please wait... it will take a second!</p>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Here’s my take on a solution. I’ll only make comments where I feel what I’ve done and what you’ve shown are different in some way.

    First, my sample is using Bootstrap and Jquery, hence the following lines are at the top.

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js">
</script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

    You still need both media queries.

    /*FOR MOBILE*/
@media only screen and (max-width:420px)
{
    #dst{display:none;}
    #loading{
        width: 175px;
        height: 150px;
    }
}

    When the screen gets smaller than 420px:

    1. You want to hide #dst (the wording [h4/p])
    2. Resize #loading so the image fits on the screen.

    z

    /*FOR DESKTOP*/
@media only screen and(min-width:421px)
{
#dst{display:initial;}
}

    When the screen goes above 421 pixels, you want to reset the #dst.

    I’ve added a tag to hold some jquery calls. OR… use a js file (preferred)

    <script type="text/javascript">
    $(function()
    {
        $("#btnSignin").on("click", function()
        {
            spinner();
        });
    });

    function spinner()
    {
        $('#overlay').toggle();
    }
</script>

    The first call is the generic document “onready” function so when the page has fully loaded it will assign the button an onclick event.
    The “spinner” function gets called when you press the “Sign In” button and it toggles the visibility of #overlay dynamically.

    In the tag, or better yet in outside css file, add the two previously mentioned @media calls and the following CSS.

    #overlay
{
    display: none;
    position: fixed;
    top: 0;
    left: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: wait;
}

    The #overlay is the container for the “loading” section and for the blocking of controls using the tinted background.

    1. I only changed the left position so my button example would not be covered by the the #overlay
    2. Removed -webkit-transform: translate3d(0,0,0); Not really needed.
    3. Added cursor: wait;

    z

    #loading
{
    border:1px solid #f5ba1a;
    padding: 0px;
    margin: auto;
    width: 410px;
    height: 150px;
    background: rgb( 255, 255, 255) url('https://image.ibb.co/dCLkxo/IMG_20180607_072610_027.jpg') 0px 50% no-repeat;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
    1. Changed the padding to 0px
    2. Added maring: auto; so as the screen adjusts, the margins will equally adjust.
    3. Extended your width from 300 to 410(to show the full spinner)
    4. Extended your height from 100 to 150 (to show the full spinner)
    5. Changed the position from fixed to absolute. This also will allow the loading to adjust based on screen movement.
    6. Removed display: none; This is not needed since this contains your spinner image
    7. Changed z-index from 3000 to 3. No need to go crazy with large numbers

    z

    #ntf, #h4
{
    color: #d80;
}
    1. Moved padding: 0 0 0 75px; to container that is actually holding the content (#dst).

    z

    #dst
{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    z-index: 4;
    padding-left: 160px;
    padding-right: 5px;
}

    1. Removed border: 1px solid #f5ba1a; Not really needed but you can add it back if you want.

    2. Removed background. The background should only be associated with one container and that reusable container is #loading.

    3. Removed position. It’s all self contained so this is not needed.

    4. Removed display. It’s all self contained so this is not needed.

    5. Changed z-index. Same reason I mentioned above.

    6. Added padding-left and padding-right

    z

      <button class="button" id="btnSignin">Sign In</button>

    <div class="container">
        <div id="overlay">
            <div id="loading">
                <div id="dst">
                    <h4 id="h4">Please Wait!</h4>
                    <p id="ntf">Please wait... it will take a second!</p>
                </div>
            </div>
        </div>
    </div>
    1. You didn’t nest your elements correctly. Compare what I have verus what you have.
    2. You can ignore the … stuff … . I just used to working in bootstrap.

    Also notice that with this setup, the “loading” section is both vertically and horizontally centered as the screens resize.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search