Angel's Blog

HTML 5: Drawing an image from a data URL to a canvas

Angel — Fri, 10 Apr 2015 18:32:05 GMT

http://jsfiddle.net/m4msmtdk/9/

if it's not fun why do it ? -ben & jerry ice cream

JS cookies for everyone!!

Angel — Fri, 11 Jul 2014 18:50:18 GMT

Javascript functions for cookies 2.0


var cookie = {
	put: function(name, value, expire) {
		var expires = "";

		if (expire) {
			var date = new Date();
			date.setTime(date.getTime() + (expire * 24 * 60 * 60 * 1000));
			expires = "; expires=" + date.toGMTString();
		}

		document.cookie = name +"="+ value + expires + "; path=/";
	},

	get: function(name) {
		var nameEQ = name + "=";
		var ca = document.cookie.split(';');

		for(var j=0; j < ca.length; j++) {
			var c = ca[j];

			while (c.charAt(0) == ' ')
				c = c.substring(1,c.length);

			if (c.indexOf(nameEQ) == 0)
				return c.substring(nameEQ.length,c.length);
		}

		return null;
	},

	delete: function(name) {
		this.put(name, '', -1);
	}
};

Slicing a Javascript array.

Angel — Fri, 04 Apr 2014 21:47:25 GMT

array=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r'];
console.log(array.slice(0,3));
console.log(array.slice(3,6));
console.log(array.slice(6,9));
console.log(array.slice(9,12));

The above outputs:

["a", "b", "c"]
["d", "e", "f"]
["g", "h", "i"]
["j", "k", "l"]

Same output with PHP:

$input = array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r');
print_r(array_slice($input,0,3));
print_r(array_slice($input,3,3));
print_r(array_slice($input,6,3));
print_r(array_slice($input,9,3));

//output

Array
(
    [0] => a
    [1] => b
    [2] => c
)
Array
(
    [0] => d
    [1] => e
    [2] => f
)
Array
(
    [0] => g
    [1] => h
    [2] => i
)
Array
(
    [0] => j
    [1] => k
    [2] => l
)

Misc stuff,

js:

array=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r'];

var Page=1;//page to display
var itemsPage=3;//items per page

var totalItems=array.length;
var totalPages=Math.ceil(totalItems/itemsPage);
var a=(Page-1)*itemsPage;
var b=a+itemsPage;
console.log(array.slice(a,b));//items

js:printing links. TESTED OK!

function coolpaging(item_count, limit, curpage, span)
{
   let cur_page = Number(curpage);
   let page_count = Math.ceil(item_count/limit);
   let current_range = [((cur_page-span) < 1 ? 1 : cur_page-span), ((cur_page+span) > page_count ? page_count : cur_page+span)];

   // First and Last pages
   let first_page = (cur_page > (span+1)) ? '1' + ((cur_page < (span+3) )? ', ' : ' ... ') : '';
   let last_page = (cur_page < (page_count-span)) ? (cur_page > (page_count-(span+2)) ? ', ' : ' ... ') + ''+page_count+'' : '';

   // Previous and next page
   let previous_page = (cur_page > 1) ? 'Previous | ' : '';
   let next_page = (cur_page < page_count) ? ' | Next' : '';

   let pages = [];

   // Display pages that are in range
   for (let x=current_range[0];x <= current_range[1]; ++x)
     pages.push(''+((x == cur_page) ? ''+x+'' : x)+'');

   if (page_count > 1)
     return ''+ previous_page+first_page+ pages.join(",")+last_page+next_page+'
';

   return '';
}

php:

$array=array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s');

$Page=2;//page to display
$itemsPage=3;//items per page

$totalItems=sizeof($array);
$totalPages=ceil($totalItems/$itemsPage);
$a=($Page-1)*$itemsPage;
var_dump(array_slice($array,$a,$itemsPage));//items

//printing links
function paginationLinks($item_count, $limit, $cur_page, $link,$span)
{
       $page_count = ceil($item_count/$limit);
       $current_range = array(($cur_page-$span < 1 ? 1 : $cur_page-$span), ($cur_page+$span > $page_count ? $page_count : $cur_page+$span));

       // First and Last pages
       $first_page = $cur_page > ($span+1) ? '1'.($cur_page < ($span+3) ? ', ' : ' ... ') : null;
       $last_page = $cur_page < $page_count-$span ? ($cur_page > $page_count-($span+2) ? ', ' : ' ... ').''.$page_count.'' : null;

       // Previous and next page
       $previous_page = $cur_page > 1 ? 'Previous | ' : null;
       $next_page = $cur_page < $page_count ? ' | Next' : null;

       // Display pages that are in range
       for ($x=$current_range[0];$x <= $current_range[1]; ++$x)
               $pages[] = ''.($x == $cur_page ? ''.$x.'' : $x).'';

       if ($page_count > 1)
               return 'Pages: '.$previous_page.$first_page.implode(', ', $pages).$last_page.$next_page.'
';
}
echo paginationLinks(
   400,//total amount of item/rows/whatever,
   10,//limit of items per page
   $_GET['p'],//current page number
   '?p=%d',//url
   5//items on each side of current page

);

//links function:
//http://css-tricks.com/snippets/php/pagination-function/

paginationLinks function sample output:

Pages: Previous | 1 ... 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40 | Next

jQuery - Append a Value to an INPUT, keeping it a Comma Delimited list

Angel — Tue, 04 Mar 2014 17:55:03 GMT


$('#attachment-uuids').val(function(i,val) { 
     return val + (!val ? '' : ', ') + '66666';
});

as of 3/4/2014 :)
http://stackoverflow.com/questions/4339 ... mited-list

jQuery: Check if an image succesfully loads

Angel — Thu, 21 Nov 2013 21:03:28 GMT


$(function(){
  
  //prevent image cache
  $('#a_img').attr('src',$('#a_img').attr('src')+'?rand='+Math.floor(Math.random()*10000));
  
  //check for loading errors
  $('#a_img').load().error(function(){
		  
	/* Legacy support kicking in */
	var LegacyImg='http://www.example.com/dbimages/tag/h1/img_name.jpeg';
	$('#a_img').attr('src',LegacyImg);
	  
  });
  
})

JavaScript : Functions For Setting and Reading a Cookie

Angel — Tue, 21 May 2013 14:50:52 GMT

In JavaScript is not as easy to set and read a cookie, as it is in PHP; the functions below ease my day when performing these tasks in JS. Alternatively jQuery can be used.

//JS cookie format
document.cookie = "name=value; expires=date; path=path;domain=domain; secure";

//date format
Based on testing and further reading into this, a date in a UTC/GMT format is required by cookies e.g. Sun, 15 Jul 2012 00:00:01 GMT

Therefore any dates in other formats such as 15 Jul 2012, or 15/Jul/2012, or 07/15/2012, have to be passed as a new Date object and then through the toUTCString() or the toGMTString() function.

/*Tested by me: OK*****************************************************************/
/*
name - name of the cookie
value - value of the cookie
[expires] - expiration date of the cookie
(defaults to end of current session)
[path] - path for which the cookie is valid
(defaults to path of calling document)
[domain] - domain for which the cookie is valid
(defaults to domain of calling document)
[secure] - Boolean value indicating if the cookie transmission requires
a secure transmission
* an argument defaults when it is assigned null as a placeholder
* a null placeholder is not required for trailing omitted arguments
*/

function setCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
document.cookie = curCookie;
}

//SET COOKIE
var days=90;
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
setCookie("SignedUp","true",date,"/");

/*Tested by me: OK*****************************************************************/
/*
name - name of the desired cookie
return string containing value of specified cookie or null
if cookie does not exist
*/

function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1)
end = dc.length;
return unescape(dc.substring(begin + prefix.length, end));
}

/*****************************************************************/
/*
name - name of the cookie
[path] - path of the cookie (must be same as path used to create cookie)
[domain] - domain of the cookie (must be same as domain used to
create cookie)
path and domain default if assigned null or omitted if no explicit
argument proceeds
*/

function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}

/*****************************************************************/
// date - any instance of the Date object
// * hand all instances of the Date object to this function for "repairs"

function fixDate(date) {
var base = new Date(0);
var skew = base.getTime();
if (skew > 0)
date.setTime(date.getTime() - skew);
}

See:
http://www.webreference.com/js/column8/functions.html
http://www.elated.com/articles/javascript-and-cookies/
http://stackoverflow.com/questions/1113 ... ing-a-cook

Video Streaming vs Progressive Video Download

Angel — Wed, 15 May 2013 16:00:47 GMT

Streaming is a video delivery method that plays the video file without saving any of the video clip on the viewers machine. This is the most secure delivery method. If you are concerned about your intellectual property, this is the delivery method for you. The downside to streaming is this format is extremely particular about bandwidth. If a user is on a slower connection they may encounter buffering/choppiness issues.

Progressive downloading allows the viewer to play the video while the file downloads to their computer. This is how YouTube works. Using this method also allows the user to download the video file to their own machine. This delivery method allows users to pause the video while the video loads; this may be useful if you have viewers on slower connections.

http://ksutube.kent.edu/delivery.php

Relative Path vs Full Path (basics 101)

Angel — Tue, 14 May 2013 16:17:43 GMT

Absolute path contains full name of file including the source, for instance, c:\Windows\Temp\log.txt. Relative path contains only the path relativaly to a certain folder, for instance, relative path of log.txt relativaly to the folder Windows is Temp\log.txt.

This also applies to URLs:

Full path:
dev.ourbiz.net/full/path/to/file.html

Relative path:
relative/path/to/file.html

Border-Radius property in CSS (Cascading Style Sheets)

Angel — Fri, 19 Apr 2013 17:48:44 GMT

/*

One of the most keenly-anticipated CSS3 properties is border-radius. Web designers will no longer have to resort to complex table structures using custom-made corner graphics or including arcane JavaScript files in order to produce designs with rounded corners. The border-radius CSS property allows Web authors to define how rounded border corners are. Check browser support.

*/

The border-radius property allows you to add rounded corners to elements.

JavaScript OR when assigning value to variable

Angel — Thu, 12 Jul 2012 22:29:34 GMT