Angel's Blog

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

Friday, April 10, 2015, 06:32 PM - - Misc. Notes
Posted by Administrator

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

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



<canvas id="myCanvasNotYours"></canvas>

<script>

var myCanvas = document.getElementById('myCanvasNotYours');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.onload = function(){
  //alert(img.width);
  myCanvas.width = img.width
  myCanvas.height = img.height
  ctx.drawImage(img,0,-20); // Or at whatever offset you like
};
img.src = 'data:image/png;base64,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';

</script>

[ view entry ] ( 1514 views ) | print article

JS cookies for everyone!!

Friday, July 11, 2014, 06:50 PM - - Misc. Notes
Posted by Administrator

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);
	}
};

[ view entry ] ( 1473 views ) | print article

Slicing a Javascript array.

Friday, April 4, 2014, 09:47 PM - - Misc. Notes
Posted by Administrator

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)) ? '<a href="' + '1' + '">1</a>' + ((cur_page < (span+3) )? ', ' : ' ... ') : '';
   let last_page = (cur_page < (page_count-span)) ? (cur_page > (page_count-(span+2)) ? ', ' : ' ... ') + '<a href="'+ page_count + '">'+page_count+'</a>' : '';

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

   let pages = [];

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

   if (page_count > 1)
     return '<p class="entpagination">'+ previous_page+first_page+ pages.join(",")+last_page+next_page+'</p>';

   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) ? '<a href="'.sprintf($link, '1').'">1</a>'.($cur_page < ($span+3) ? ', ' : ' ... ') : null;
       $last_page = $cur_page < $page_count-$span ? ($cur_page > $page_count-($span+2) ? ', ' : ' ... ').'<a href="'.sprintf($link, $page_count).'">'.$page_count.'</a>' : null;

       // Previous and next page
       $previous_page = $cur_page > 1 ? '<a href="'.sprintf($link, ($cur_page-1)).'">Previous</a> | ' : null;
       $next_page = $cur_page < $page_count ? ' | <a href="'.sprintf($link, ($cur_page+1)).'">Next</a>' : null;

       // Display pages that are in range
       for ($x=$current_range[0];$x <= $current_range[1]; ++$x)
               $pages[] = '<a href="'.sprintf($link, $x).'">'.($x == $cur_page ? '<strong>'.$x.'</strong>' : $x).'</a>';

       if ($page_count > 1)
               return '<p class="pagination"><strong>Pages:</strong> '.$previous_page.$first_page.implode(', ', $pages).$last_page.$next_page.'</p>';
}
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

[ view entry ] ( 1342 views ) | print article

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

Tuesday, March 4, 2014, 05:55 PM - - Misc. Notes
Posted by Administrator


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

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

[ view entry ] ( 1219 views ) | print article

jQuery: Check if an image succesfully loads

Thursday, November 21, 2013, 09:03 PM - - Misc. Notes
Posted by Administrator


$(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);
	  
  });
  
})

[ view entry ] ( 1210 views ) | print article

JavaScript : Functions For Setting and Reading a Cookie

Tuesday, May 21, 2013, 02:50 PM - - Misc. Notes
Posted by Administrator

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

[ view entry ] ( 2155 views ) | print article

Video Streaming vs Progressive Video Download

Wednesday, May 15, 2013, 04:00 PM - - Misc. Notes
Posted by Administrator

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

[ view entry ] ( 1862 views ) | print article

Relative Path vs Full Path (basics 101)

Tuesday, May 14, 2013, 04:17 PM - - Misc. Notes
Posted by Administrator

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

[ view entry ] ( 1591 views ) | print article

Border-Radius property in CSS (Cascading Style Sheets)

Friday, April 19, 2013, 05:48 PM - - Misc. Notes
Posted by Administrator

/*

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.

*/

<!DOCTYPE html>
<html>
<head>
<style>

div
{
border-style: solid;
border-width: 2px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;

}

</style>
</head>
<body>

<div>The border-radius property allows you to add rounded corners to elements.</div>

</body>
</html>

[ view entry ] ( 2065 views ) | print article

JavaScript OR when assigning value to variable

Thursday, July 12, 2012, 10:29 PM - - Misc. Notes
Posted by Administrator

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |

«	April 2024					»
Sun	Mon	Tue	Wed	Thu	Fri	Sat
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30
05/20/2024