Blink By CSS

Blink By CSS

<html>
<style>
.blink_a_div a.blink_a_link{
border: 4px solid;
font-size: 20px;
}
.blink_a_div a{
  background-color: #AD906C;
  border: 1px;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 20px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
}

.blink_a_div a{
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}

@-webkit-keyframes glowing {
  0% { background-color: #AD906C; -webkit-box-shadow: 0 0 3px #AD906C; }
  50% { background-color: #D5B07D; -webkit-box-shadow: 0 0 40px #D5B07D; }
  100% { background-color: #AD906C; -webkit-box-shadow: 0 0 3px #AD906C; }
}

@-moz-keyframes glowing {
  0% { background-color: #AD906C; -moz-box-shadow: 0 0 3px #AD906C; }
  50% { background-color: #D5B07D; -moz-box-shadow: 0 0 40px #D5B07D; }
  100% { background-color: #AD906C; -moz-box-shadow: 0 0 3px #AD906C; }
}

@-o-keyframes glowing {
  0% { background-color: #AD906C; box-shadow: 0 0 3px #AD906C; }
  50% { background-color: #D5B07D; box-shadow: 0 0 40px #D5B07D; }
  100% { background-color: #AD906C; box-shadow: 0 0 3px #AD906C; }
}

@keyframes glowing {
  0% { background-color: #AD906C; box-shadow: 0 0 3px #AD906C; }
  50% { background-color: #D5B07D; box-shadow: 0 0 40px #D5B07D; }
  100% { background-color: #AD906C; box-shadow: 0 0 3px #AD906C; }
}


</style>

<body>
<div style="text-align:center">
<div class="blink_a_div">
<a class="blink_a_link" href="http://phpkishan.blogspot.in/" title="Blink By CSS" target="_blank">Blink By CSS</a>
</div>
</div>
</body>

</html>

How to set div height dynamically?

PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language.
PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.
Fast, flexible and pragmatic, PHP powers everything from your blog to the most popular websites in the world.

Documentation

A good place to start is by skimming through the ever-growing list of frequently asked questions (with answers, of course). Then have a look at the rest of the online manual and other resources in the documentation section.

Mailing Lists

There are a number of mailing lists devoted to talking about PHP and related projects. This list describes them all, has links to searchable archives for all of the lists, and explains how to subscribe to the lists.

User Groups

Chances are that there is a User Group in your neighborhood, which are generally a great resource both for beginners and experienced PHP users. Check out the User Group listing on PHP.ug to see if there is one close by.

MySQL is the most popular database system used with PHP.

<!DOCTYPE html>
<html>
    <head>
  <style>
  #header_div,#bodycontent_div,#footer_div{
    border:1px solid #000;
    margin: 5px;
    padding: 10px;
    color: #000 !important;
  }
  #header_div{background-color:#E6FF00; text-align: center; }
  #bodycontent_div{background-color:#00FF6F; }
  #footer_div{background-color:#00D3FF; text-align: center; }
 

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 </head>
 <body>
 <div>
  <div id="header_div">
  <h1>How to set div height dynamically?</h1>
   <p>PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language.</p>
   <p>PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.</p>
   <p>Fast, flexible and pragmatic, PHP powers everything from your blog to the most popular websites in the world.</p>
  </div>
  <div id="bodycontent_div" class="bodycontent_div">
   <h2>Documentation </h2>
   <p>A good place to start is by skimming through the ever-growing list of frequently asked questions (with answers, of course). Then have a look at the rest of the online manual and other resources in the documentation section.</p>

   <h3>Mailing Lists</h3>
   <p>There are a number of mailing lists devoted to talking about PHP and related projects. This list describes them all, has links to searchable archives for all of the lists, and explains how to subscribe to the lists.</p>
 
   <h4>User Groups</h4>
   <p>Chances are that there is a User Group in your neighborhood, which are generally a great resource both for beginners and experienced PHP users. Check out the User Group listing on PHP.ug to see if there is one close by.</p>

  </div>
  <div id="footer_div">
   <div> MySQL is the most popular database system used with PHP.</div>
 
  </div>
 </div>
 </body>
 <script>
 function assign_body_height(){
 //Dynamically assign height (Only for PC)
   var nav_header = $("#header_div").height();
   var nav_bodycontent = $("#bodycontent_div").height();
   var nav_footer = $("#footer_div").height();
   var screen_height =   window.innerHeight|| document.documentElement.clientHeight || document.body.clientHeight;
 
 
   if((nav_header + nav_bodycontent + nav_footer + 95) < screen_height)
   {
    //alert(screen_height);
    var newHeight = screen_height - (nav_header +  nav_footer + 95) + "px";    
    $(".bodycontent_div").css("height", newHeight);
   }
   else{
    //alert("more height");
    var newHeight = "auto";    
    jQuery(".bodycontent_div").css("height", newHeight);    
   
   }
 
 }

 $(document).ready( function()
 {  
  assign_body_height();
 
 });
 </script>
</html>

How to Add New Field in General Settings Page? And how to use this Field's Value in WordPress Admin or Frontend.

1]  Add this below code in active theme's => functions.php file :-

$new_general_setting = new new_general_setting();

class new_general_setting {
    function new_general_setting( ) {
        add_filter( 'admin_init' , array( &$this , 'register_fields' ) );
    }
    function register_fields() {
        register_setting( 'general', 'favorite_color', 'esc_attr' );
        add_settings_field('fav_color', '<label for="favorite_color">'.__('Favorite Color?' , 'favorite_color' ).'</label>' , array(&$this, 'fields_html') , 'general' );
    }
    function fields_html() {
        $value = get_option( 'favorite_color', '' );
        echo '<input type="text" id="favorite_color" name="favorite_color" value="' . $value . '" />';
    }
}

2]  Add this below code where you want to display above Field's Value :-

echo $PriorityPoints = get_option( 'favorite_color' );  // Field Name

Set Equal Height Div Rows

Equal Height
Equal Height

Equal Height
Equal Height
Equal Height
Equal Height
Equal Height
Equal Height
Equal Height
Equal Height

Equal Height
Equal Height
Equal Height

Equal Height
Equal Height
Equal Height
Equal Height
Equal Height

<html>
<head>
<style>
* {
    box-sizing: border-box;
}
body {
    background: -webkit-linear-gradient(top, #eee, rgba(222,112,6,0.2), #de7006),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…N0eWxlPSdmaWxsOiNlMDg3Mjg7ZmlsdGVyOnVybCgjZmlsdGVyMzExNSknIC8+Cjwvc3ZnPg==);
    background: linear-gradient(to bottom, #eee, rgba(222,112,6,0.2), #de7006),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…N0eWxlPSdmaWxsOiNlMDg3Mjg7ZmlsdGVyOnVybCgjZmlsdGVyMzExNSknIC8+Cjwvc3ZnPg==);
    overflow-x: hidden;
}

.blocks {
    float: left;
    width: 100%;
}
.block {
    float: left;
    width: 20%;
    background: #ffa;
    padding: 10px;
    margin: 10px;
text-align:center;
color:#000 !important;

}
</style>
<script type="text/javascript">
function heightsEqualizer(selector) {
    var elements = document.querySelectorAll(selector),
        max_height = 0,
        len = 0,
        i;

    if ( (elements) && (elements.length > 0) ) {
        len = elements.length;

        for (i = 0; i < len; i++) { // get max height
elements[i].style.height = ''; // reset height attr
            if (elements[i].clientHeight > max_height) {
                max_height = elements[i].clientHeight;
            }
        }

        for (i = 0; i < len; i++) { // set max height to all elements
            elements[i].style.height = max_height + 'px';
        }
    }
}

if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', function() {
        heightsEqualizer('.js-equal-height');
    });
window.addEventListener('resize', function(){
heightsEqualizer('.js-equal-height');
});
}

setTimeout(function () { // set 1 second timeout for having all fonts loaded
heightsEqualizer('.js-equal-height');
}, 1000);
</script>
</head>
<body>
<div class="blocks">
<div class="block js-equal-height">
Equal Height<br />
Equal Height<br />
</div>
<div class="block js-equal-height">
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
</div>
<div class="block js-equal-height">
Equal Height<br />
Equal Height<br />
Equal Height<br />
</div>
<div class="block js-equal-height">
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
</div>
</div>
</body>
</html>

Card Flip In HTML

K K

<html> <head> <style> /*Card Flip*/ .card-container {   width: 150px;   height: 150px;   position: relative;   border: 1px solid #ccc;   -webkit-perspective: 800px;   -moz-perspective: 800px;   -o-perspective: 800px;   perspective: 800px;   float: left;   margin: 50px 50px 50px 50px;   cursor: pointer; } .card {   width: 100%;   height: 100%;   position: absolute;   -webkit-transition: -webkit-transform 1s;   -moz-transition: -moz-transform 1s;   -o-transition: -o-transform 1s;   transition: transform 1s;   -webkit-transform-style: preserve-3d;   -moz-transform-style: preserve-3d;   -o-transform-style: preserve-3d;   transform-style: preserve-3d;   -webkit-transform-origin: 50% 50%; } .card div {   display: block;   height: 100%;   width: 100%;   line-height: 150px;   color: white;   text-align: center;   font-weight: bold;   font-size: 140px;   position: absolute;   -webkit-backface-visibility: hidden;   -moz-backface-visibility: hidden;   -o-backface-visibility: hidden;   backface-visibility: hidden; } .card .front {   background: #FFE202; } .card .back {   background: red;   -webkit-transform: rotateY(180deg);   -moz-transform: rotateY(180deg);   -o-transform: rotateY(180deg);   transform: rotateY(180deg); } .flipped {   -webkit-transform: rotateY(180deg);   -moz-transform: rotateY(180deg);   -o-transform: rotateY(180deg);   transform: rotateY(180deg); } .card:hover {   -webkit-transform: rotateY(180deg);   -moz-transform: rotateY(180deg);   -o-transform: rotateY(180deg);   transform: rotateY(180deg); } .flipped:hover {   -webkit-transform: rotateY(-0deg);   -moz-transform: rotateY(-0deg);   -o-transform: rotateY(-0deg);   transform: rotateY(-0deg); } /*Card Flip*/ </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <section class="card-container">   <div class="card" id="card1">     <div class="front">K</div>     <div class="back">R</div>   </div> </section> </body> <script> jQuery(".card").click(function() {   var id = jQuery(this).attr('id');   jQuery('#' + id).toggleClass('flipped'); }); </script> </html>