0

I've created an open/closed function for a website that I'm working on and I'm trying to add the final touch but I've got stuck.

How can I add a span show it shows a green dot with a css pulse animation for open and a red one with a pulse affect with closed. I've added an example. https://www.clicky.co.uk/

Shortcode:

[linestatus] [linestatus open_time="08:00:00" closed_time="17:00:00" open_text="open" closed_text="closed"]

PHP Function

add_shortcode( 'linestatus', 'line_status_handler' );
function line_status_handler( $atts ) { 
    extract( shortcode_atts( array( 
        'open_time' => '09:00:00', 
        'closed_time' => '17:00:00', 
        'open_text' => 'our lines are open', 
        'closed_text' => 'our lines are closed', 
    ), $atts ) ); 

    if ( time() >= strtotime( $open_time ) && time() <= strtotime( $closed_time ) ) { 
        $output = $open_text; 
    } else { 
        $output = $closed_text; 
    } 
    return $output; 
}

closed as off-topic by Michael, Nathan Johnson, Jacob Peattie, EAMann Feb 15 '18 at 15:46

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • The easiest solution is to use a css psuedo to do your animation. Secondly, you should try to create the code then ask on stackoverflow as this is a css issue not a wordpress issue. – Cam Feb 5 '18 at 21:10
0

I've sourced the CSS from

https://codepen.io/vram1980/pen/Kyaie

all credit above. Putting it with your function, you can do something like this:

add_shortcode( 'linestatus', 'line_status_handler' );
function line_status_handler( $atts ) { 
    extract( shortcode_atts( array( 
        'open_time' => '09:00:00', 
        'closed_time' => '17:00:00', 
        'open_text' => 'our lines are open', 
        'closed_text' => 'our lines are closed', 
    ), $atts ) ); 

    $opened = (time() >= strtotime( $open_time )) ? true : false;
    $notClosed = (time() <= strtotime( $closed_time )) ? true : false;;

    $status = ($opened &&  $notClosed) ? 'open' : 'closed';

    add_action('wp_footer',function(){
        ?>
        <style>
        .ring-container {
            position: relative;
            height: 50px;
        }

        .circle {
            width: 15px;
            height: 15px;
            background-color: #62bd19;
            border-radius: 50%;
            position: absolute;
            top: 23px;
            left: 23px;
        }
        .ringring {
            border: 3px solid #62bd19;
            -webkit-border-radius: 30px;
            height: 25px;
            width: 25px;
            position: absolute;
            left: 15px;
            top: 15px;
            -webkit-animation: pulsate 1s ease-out;
            -webkit-animation-iteration-count: infinite; 
            opacity: 0.0
        }

        .ring-container--closed .circle {
            background-color: red;
        }
        .ring-container--closed .ringring {
            border: 3px solid #ff7777;
        }

        @-webkit-keyframes pulsate {
            0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
            50% {opacity: 1.0;}
            100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
        }
        </style>
        <?php
    });

    return '
    <div class="ring-container ring-container--'.$status.'">
        <div class="ringring"></div>
        <div class="circle"></div>
    </div>'; 

}

You'll probably want to throw that CSS in a stylesheet of your theme. I've wrapped it in an anonymous function with the footer hook so it lands at the bottom of the screen instead of wherever the shortcode is.

  • Thanks David. I was more looking at how to get the classes to apply to the open and closed times? – Jordan Kellett Feb 5 '18 at 16:44
  • @JordanKellett I've updated my post – David Sword Feb 5 '18 at 16:48
  • For some reason the function.php doesn't allow me to save the php function in there. It's returning the following: //i.imgur.com/7tviuJh.png – Jordan Kellett Feb 5 '18 at 16:55
  • in that screen shot, you have started the return with a double quote. In your and my code, we both did return then single quote. – David Sword Feb 5 '18 at 16:58
  • I tried with a singular also but the same message appeared. It doesn't have to be in the footer if that would make any difference? – Jordan Kellett Feb 5 '18 at 17:00

Not the answer you're looking for? Browse other questions tagged or ask your own question.