Tutorial Add Data Attribute of User Agent

by in , 0 

var b = document.documentElement;
b.className = b.className.replace('no-js','js');
b.setAttribute("data-useragent",  navigator.userAgent);
b.setAttribute("data-platform", navigator.platform );

Which results in data attributes being added to the html element like:

<html 
	data-useragent="Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)"
	data-platform="Win32">
	...

Which allows you to be able to target very specific browsers on very specific platforms with CSS:

html[data-useragent*="Chrome/13.0"][data-platform="Win32"] {
  ...
}

Reference URL

Tutorial 1024×768 Bookmarklet

by in , 0

The days of 800x600 screens are all but over, but most of us still try to accommodate 1024px wide screens. Hence the popularity of "960" width sites. This bookmarklet will resize the current browser window to that width and height. You know, so us web designers with giant monitors can see what it's like to be slummin' with a 1024 screen. Also, to see "the fold", if such a concept even matters anymore.

javascript:resizeTo(1024,768)

The Bookmarklet

1024x768   < Drag to bookmarks bar

This doesn't seem to work at all anymore (tested in stable version of Chrome and Firefox, April 2013). It used to work only when the window was by itself, not when multiple tabs were open, but now that doesn't work anymore either.

There is some kind of way to do it, since I still regularly see resized popups, so feel free to chime in the comments if you know more.

Tutorial “Go Back” Button

by in , 0

Browsers already have "back" buttons, so you'd better have a darn good reason for needing to put one on your page!

Input button with inline JavaScript

<input type="button" value="Go Back From Whence You Came!"  />

This is totally obtrusive, but you could fix that by only appending this button through JavaScript.

PHP

If JavaScript isn't a possibility, you could use the HTTP_REFERER, sanitize it, and echo it out via PHP.

<?php
  $url = htmlspecialchars($_SERVER['HTTP_REFERER']);
  echo "<a href='$url'>back</a>"; 
?>

Reference URL

Tutorial Zero Padded Numbers

by in , 0 

function getZeroPaddedNumber($value, $padding) {
       return str_pad($value, $padding, "0", STR_PAD_LEFT);
}

Usage

echo getZeroPaddedNumber(123, 4);
// outputs "0123"

Tutorial Variable Variables

by in , 0 

<?php

  $var1 = 'nameOfVariable';

  $nameOfVariable = 'This is the value I want!';

  echo $$var1; 

?>

Reference URL

Tutorial URL Validation

by in , 0 

$url = 'http://example.com';
$validation = filter_var($url, FILTER_VALIDATE_URL, FILTER_FLAG_HOST_REQUIRED);

if ( $validation ) $output = 'proper URL';
else $output = 'wrong URL';

echo $output;

Tutorial Update Values of Entire Table

by in , 0

This code assumes you are connected to a MySQL database which has a table with Names and Emails. The idea is that it will output a table of every single value from that table, as text inputs. You can then alter the values of these inputs and re-submit, updating all the values in the database.

//get data from db
$sql = mysql_query("SELECT * FROM table");
$count=mysql_num_rows($sql);

//start a table
echo '<form name="form1" method="post" action="">
<table width="292" border="0" cellspacing="1" cellpadding="0">';

//start header of table
echo '<tr>
<th>&nbsp;</th>
<th>Name</th>
<th>Email</th>
</tr>';

//loop through all results
while($r=mysql_fetch_object($sql)){

//print out table contents and add id into an array and email into an array
echo '<tr>
<td><input type="hidden" name="id[]" value='.$r->id.' readonly></td>
<td>'.$r->name.'</td>
<td><input name="email[]" type="text" id="price" value="'.$r->email.'"></td>
</tr>';
}

//submit button
echo'<tr>
<td colspan="3" align="center"><input type="submit" name="Submit" value="Submit"></td>
</tr>
</table>
</form>';


// if form has been submitted, process it
if($_POST["Submit"])
{
       // get data from form
       $name = $_POST['name'];
       // loop through all array items
   foreach($_POST['id'] as $value)
       {
       // minus value by 1 since arrays start at 0
               $item = $value-1;
               //update table
       $sql1 = mysql_query("UPDATE table SET email='$email[$item]' WHERE id='$value'") or die(mysql_error());
   }

// redirect user
$_SESSION['success'] = 'Updated';
header("location:index.php");
}

Submitted values are not cleaned in this example, as it is assumed only an admin would have access to this type of powerful entry system.