Community
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Blinking background color

05-09-2016 5:05 PM
Former Member
752 views 1 comments
0 Likes
SAP Managed Tags
Subscribe

I have a BSP page that is basic HTML, no HTMLB tags or whatsoever. I have several <table>s on my page, and in some instances i want an individual cell to have a blinking red background. I have acheived this with CSS animation, and if i bring the page up from a text file IE, i get my table with a blinking red cell.

My problem is, i brought this into BSP, and now the blinking has stopped working.

below is how i have my styles set up:

@-moz-keyframes blinkred {

   0%   { background-color: red; }

   50% { background-color:  white; }

   100% { background-color: red; }

}

@keyframes blinkred {

   0%   { background-color: red; }

   50% { background-color:  white; }

   100% { background-color: red; }

}

.critical {

   -webkit-animation: blinkred 1s infinite;

   -moz-animation:    blinkred 1s infinite;

   animation:         blinkred 1s infinite;

   vertical-align: center;

}

in my page i set the class id of critical on the TD tag. This works in IE showing a text file, but not through BSP. any thoughts?

0 Likes

Know the answer?

Help others by sharing your knowledge.

Answer

Need more details?

Request clarification before answering.

Show replies
Show replies

Accepted Solutions (0)

Answers (1)

Answers (1)

Former Member
‎2016 May 10 5:17 AM
0 Likes

Just the browser compatibility issue, try it like below with meta tag



  <%@page language="abap"%>
 <%@extension name="htmlb" prefix="htmlb"%>
 <html>
 <head>
 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11"> 
 <style>
 @-moz-keyframes blinkred {
    0%   { background-color: red; }
    50% { background-color:  white; }
    100% { background-color: red; }
 }
 
 @keyframes blinkred {
    0%   { background-color: red; }
    50% { background-color:  white; }
    100% { background-color: red; }
 }
 
 .critical {
    -webkit-animation: blinkred 1s infinite;
    -moz-animation:    blinkred 1s infinite;
    animation:         blinkred 1s infinite;
    vertical-align: center;
 } 
 </style>
 </head>
 <body>
 <input type="text" class="critical" value="TEST"/>
 </body>
 </html>
Show replies
Show replies
Ask a Question