Category Archives: HTML/ CSS

Laravel enable foundation validation

If your using Laravel and also using foundation for your front end development there is an easy way to add Foundation’s built in form validation (Abide) to a form. When opening the form tag use the following code,

 

{{ Form::open(array(
         'action'     => 'AController@index', 
         'class'      => 'hello', 
         'data-abide' => true
     ))
}}
Advertisements

Google Recaptcha – Defeating spam got a lot easier

Earlier version of the recaptcha was just a pain in the ass. For developers to implement and also for users who had to squint and type distorted text. Remember this?

2015-04-10 09_07_07-Customizing the Look and Feel of reCAPTCHA - reCAPTCHA — Google Developers

 

Well Google changed that with this new version where the user only had to Tick a check box and some magic happened and it checked if the user is authentic. (Its not clear on their website how exactly they do it, but i think they check for data that has been captured by their analytics tools or cookies or something to make sure that your human)

2015-04-10 09_10_56-reCAPTCHA_ Easy on Humans, Hard on Bots

Here also it falls back to a captcha text if it cant determine if your human so there is a fail safe built in.

Anyway the good news for developers is we can quickly add captcha to our pages without going through a tedious process. So I’m going to give the steps down here that I used to implement recaptcha on my free invoicing tool. (Invoicer)

Step 1.

Go to https://www.google.com/recaptcha/intro/index.html and click the get Recaptcha buton.

2015-04-10 09_14_19-reCAPTCHA_ Easy on Humans, Hard on Bots

Step 2.

Enter the Label and domains that this recaptcha needs to be active on, and click register.

2015-04-10 09_15_43-reCAPTCHA_ Easy on Humans, Hard on Bots

Step 3.

On the next screen you will get the instructions on how to add the recaptcha into your page. But Ill list down the steps here as well.

On client side,

add the script file in the head tag.

 <script src='https://www.google.com/recaptcha/api.js'></script>

Add the following code at the end of the form where you want the captcha widget to appear,

 <div class="g-recaptcha" data-sitekey="6LddIgUTAAAAAEky5noUKqsnA3QPysdXQ05WFsnB"></div> 

On server side,

You need to capture the value generated by client side code and post it to google for verification. This bit can be a bit tricky.

How I did it on Google App Engine is to do a url fetch. Think you will be able to do the same by using curl. Or also ajax.

 <?php

/* recaptcha validation */
<pre>$data = ['secret' => 'YOUR OWN SECRET KEY', 'response' => $_REQUEST['g-recaptcha-response']];
$data = http_build_query($data);
$context = [
    'http' => [
        'method' => 'POST',
        'header' => "custom-header: custom-value\r\n" .
            "custom-header-two: custom-value-2\r\n",
        'content' => $data
    ]
];
$context = stream_context_create($context);
$result = file_get_contents('https://www.google.com/recaptcha/api/siteverify', false, $context);

You will get a json response and if the success attribute it true you can proceed with processing the form values.

<pre>$success_status = json_decode($result)->success;

if($success_status) {

}</pre>

 

More information can be found here regarding verification.

The trickiest part is handling it on server side. If you have any problems with that please post on the comments section and I will try and help. 🙂

Change Place Holder Text Color – CSS

If you have place holder text for input boxes on a html form, and if you want to change the color of that place holder text use following coding,

::-webkit-input-placeholder {
 color: #595959 !important;
}
:-moz-placeholder { /* Firefox 18- */
 color: #595959 !important;
}
::-moz-placeholder { /* Firefox 19+ */
 color: #595959 !important;
}
:-ms-input-placeholder { 
 color: #595959 !important;
}

When embedding YouTube videos, page jumps to the video

Ok. this is a problem I noticed today. Let me explain the situation,

I have embedded a YouTube video on one of my client websites. That video is placed at the end of the page. And when the page is loading the page jumps to that video instead of loading the page from the top. This is happening without me entering any anchor tags in the iframe of the YouTube embed code.

When checking the iframe code I noticed it is loading a # tag called #document within the iframe. This is causing the page to jump.

Solution,

Add following code to prevent #tag in iframe from loading on page load,

 style="display: none;" onload="this.style.display='block';"

Update

If your using WordPress this method is more suitable, Add the following code in the footer section. This will make the page jump back to top.

window.onload=function() {location.href='#';};

HTML Image Map Issue on Internet Explorer – Reference Code

So I ran into this problem where image map was not working properly for Internet explorer. For my project I had the singapore map loaded with it being devided into 4 areas. When someone hovers over each area its supposed to highlight that area. It was working properly on Firefox, Chrome and Safari but there was a problem on IE… turns out I havent set the Width and Height for the initial image. After adding those it worked properly. So if your also having a problem like this you might like to check out that.

<img id="mapImg" src="images/maps/main_map.jpg" alt="map" width="496" height="261" border="0" usemap="#Map"/>
 <map name="Map" id="Map">
 <area class="westmap" shape="rect" coords="13,24,192,231" href="#" >
 <area class="centralmap" shape="rect" coords="192,137,292,252" href="#" >
 <area class="eastmap" shape="rect" coords="293,121,479,242" href="#" >
 <area class="northmap" shape="rect" coords="191,5,291,136" href="#" >
 </map>

Allow only Numbers and Decimals in a text box

To allow only Numbers and Decimals in Text boxes you can use the following JavaScript code,

<SCRIPT language=Javascript>
       <!--
       function isNumberKey(evt)
       {
          var charCode = (evt.which) ? evt.which : event.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
       }
       //-->
    </SCRIPT>

And at the Text box call the function on Key Press event,

onkeypress="return isNumberKey(event)"