Posted by & filed under Website Development.

For example, if you wish to hide or show a textbox based on if a checkbox is selected:

HTML:

<input id="showTextbox" type="checkbox" />
<textarea id="textbox"></textarea>

JS

if($("#showTextbox").is(':checked'))
    $("#textbox").show();  // checked
else
    $("#textbox").hide();  // unchecked

Posted by & filed under CSS, Website Development.

Ever see an ad that didn’t fill the whole space it was intended for? Then the extra space changes an awful shade of yellow? Finally, the answer to this problem is as easy as adding a line of CSS.

Change the background color of the ins element in CSS to match the background color of your page and Voilà, the yellow has disappeared!

ins { background: #fff; }

Posted by & filed under CSS.

Sometimes when I create a link, the cursor doesn’t change to a hand to help the user understand they can click on element. Thus, its helpful to have the cursor change to a hand on hover. No need for javascript or jquery here, you can easily implement the effect with CSS.

The CSS

.myElement:hover { cursor: pointer; cursor: hand; }

The HTML

<li class="myElement" > Stuff here </li>

Posted by & filed under JSON, PHP.

To convert a JSON array into a PHP array, use the following script:

<?php
$json = file_get_contents('json/yourscript.json'); // Get the JSON data
$phpObj = json_decode($json,true);  // Convert to PHP Object
print_r($phpObj);  // Convert to PHP Array
?>

file_get_contents('json/yourscript.json'); Allows you to get the JSON data easily.

json_decode($json,true); Is a PHP function that converts your JSON data into a PHP Object.

print_r(); Will change the PHP object into a PHP readable array.

Posted by & filed under HTML, Javascript, jQuery, Website Development.

Whenever I want to quickly make a webpage, I don’t want to have to build the whole page everytime. Here is my starter code for an HTML5 page. The key points are :

  • HTML5 Doctype – Ready
  • Viewport and Mobile – Ready
  • Title tags, Character Set, Keyword and Description Meta, Favicon, Stylesheet tags – Ready
  • Google Font – Ready
  • Javascript and jQuery – Ready
  • jQuery CDN for lastest version of jQuery – Ready
  • HTML5 Shiv for IE9 and less – Ready
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HTML Starter Template</title>

<meta name="keywords" content="HTML5,quickstart,template">
<meta name="description" content="HTML5 Quickstart Template">
<meta name="author" content="GetPowers Coding">

<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/quickstyle.css">
<style>

/* Your CSS3 styling here */

</style>

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>

<!--- Observable Content Here --> 

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){

/* Javascript and jQuery here */

});
</script>

</body>
</html>

It’s useful to have some quick CSS, but not something bloated. Here is my CSS template as well. I set the width to 90% so that it will quickly work on mobile or full screen.

/* quickstyle.css */

body {
width:90%;
margin:10px auto;
font-family:'Open Sans',verdana,arial;
font-size:14px;
color:#111;
background-color:#fff;
}

If you want to make your site feel more like a web application. Try adding the following:

<meta name="apple-mobile-web-app-title" content="DriversTestInfo">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="apple-touch-startup-image" href="/startup-image.png">

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> 
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> 
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png"> 
<link rel="icon" sizes="196x196" href="nice-highres.png">
<link rel="icon" sizes="128x128" href="niceicon.png"> 

For Chrome and iOS web application details try the following:
https://developer.chrome.com/multidevice/android/installtohomescreen#comparison-to-ios
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
http://blog.teamtreehouse.com/optimizing-mobile-web-apps-ios
https://gist.github.com/tfausak/2222823

Posted by & filed under Website Development.

I used to try to get substrings of Chinese text and would get partial characters than came out as strange diamonds or squares…. until I found the mb_strcut() function!

When using PHP, avoid using the substr() function, as it will often cut off Chinese and Japanese characters. For example:

$text = '拿小锤锤的那个人好可爱的说,哈哈哈,生活太有爱了,加油加油了';

echo  substr($text, 0, 50); // Outputs: 拿小锤锤的那个人好可爱的说,哈哈��

Rather you should use the mb_strcut() function.

For example:

<?php
$text = '拿小锤锤的那个人好可爱的说,哈哈哈,生活太有爱了,加油加油了';

echo mb_strcut($text, 0, 50,'UTF-8'); // Outputs: 拿小锤锤的那个人好可爱的说,哈哈

echo  mb_strcut($text, 15, 30,'UTF-8'); // Outputs: 那个人好可爱的说,哈
?>

Posted by & filed under PHP.

$_SERVER['HTTP_REFERER'] gives you the URL from where the user came, which is the user’s previous page (whatever page that would appear if the user clicked “Back” in their browser)

But $_SERVER['HTTP_REFERER']  gives you the complete URL, something like this :

driverstest.info/test/quiz.php?quizgroup=7

If you just want get the domain name .i.e. driverstest.info from the full URL, then you can use the following code:

$referer = parse_url($_SERVER['HTTP_REFERER'], PHP_URL_HOST);

Note though that the referer is easy to spoof, so it’s not reliable.

Posted by & filed under PHP.

Here is a lovely bit of code to help you convert months in numbers to proper names!

<?php
 $monthNum = 11;
 $monthName = date("F", mktime(0, 0, 0, $monthNum, 10));
 echo $monthName; // Outputs: November
 ?>

Posted by & filed under CSS, HTML.

Yes it is possible with CSS to have links open in new tabs or new windows. I discovered this issue when testing target="_blank" in IE9/IE10 versus Chrome.

 <a href="[yourlink]" target="_blank" style="target-new: tab;">GetPowers</a> 

Or you could put it in the header as:

<html>
<head>
<style>
a { target-new:tab; }
</style>
</head>
<body> 

There are some options for the target-new style:
target-new: window | tab | none