Latest News

Friday, August 5, 2016

Pokemon Go is now available in this Country including Philippines



GO Pokémon is now available in Brunei, Cambodia, Indonesia, Laos, Malaysia, Philippines, Singapore, Thailand, Vietnam, Taiwan, Papua New Guinea, Fiji, Solomon Islands, Federated States of Micronesia & Palau

# PokémonGo

Official Available here in the Philippines this day of August 06, 2016.

Wednesday, August 3, 2016

Blink Image Using Only Scipt

This trick might help you if you want your image to have a blink effect using javascript, I put this for my reference. I'ts very much simple but works very good on my end, here is the code below on how to blink your image using only script.




<!--Script for Blinking Image-->
<script type='text/javascript'>
var imgId = 'fire';
var imgOnTime = 250;
var imgOffTime = 750;
window.onload = function()
{
  // check for existence of objects we will use
  if (document.getElementById) {
    var ele = document.getElementById(imgId);
    if (ele && ele.style) {
      setTimeout('blinkImg()', imgOffTime);
    }
  }
}
function blinkImg()
{
  var v, t, ele = document.getElementById(imgId);
  if (ele.style.visibility == 'visible') {
    // hide it, then wait for imgOffTime
    v = 'hidden';
    t = imgOffTime;
  }
  else {
    // show it, then wait for imgOnTime
    v = 'visible';
    t = imgOnTime;
  }
  ele.style.visibility = v;
  setTimeout('blinkImg()', t);
}
</script>
<!--End Script for Blinking Image-->

You need to put it before the body tags end on html, or just create a .js file and call it to your main page, and when you have an image that you want to blink just simply put this code inside your img tags(see sample below.

<img src="images/fb-right.png" class="img-fadeIn" alt="" data-pin-nopin="true" id="fire">

id name fire is declared on script code, so you will only put the code inside image tags.

See a sample output on this here

Tuesday, August 2, 2016

Navigation Hover Line Effects Using CSS



If you are looking for a great trick in you navigation menu and wanted to have a hover effect line at the button just like the image above well try this css code trick below.

/**Navigation Bottom Hover effect**/
nav {
    height: 40px;
    border-bottom: 1px solid #EEE; /* Grey divide 1px Horizontale */
    font-family: 'Open Sans', Helvetica, sans-serif;
}
.primary_nav li,
.user_nav li,
.nav-link {
    display: inline-block;
}

.primary_nav li {
    margin-right: 15px;
}

/* Link styles */

    .nav-link { /* Link default style */
        color: #dedede;
        font-size:1em;
        font-weight: 400;
        text-decoration: none;
    }

    .primary_nav .active { /* Add this class for active page */
         @extend .nav-link;

        color: #333;
        border-bottom: 3px solid #FF6D00;
        padding-bottom: 16px;
    }

.nav-link:hover {
    border-bottom: 3px solid #FF6D00;
    padding-bottom: 16px;
}
/**END Navigation Bottom Hover effect**/

Just simply put it in your styles.css files and then from you main page just call the class from css file like this below.

<ul class="primary_nav">

make sure you put it on in your unordered list tags of your navigation, and then next is to put also a class name like this below.
<li><a href="#menu1" class="nav-link active">Ron's Classes</a></li>

              <li><a href="#menu2" class="nav-link">Special Features</a></li>

after that you are good to go, refresh your page and then try hovering your navigation menu, mind looks like this below,



 Please share if it helps.

Recent Post