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 ] ( 1640 views )   |  print article

---

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 ] ( 1648 views )   |  print article

---

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 ] ( 1498 views )   |  print article

---

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

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

[ view entry ] ( 1356 views )   |  print article

---

$(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 ] ( 1351 views )   |  print article

---

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 ] ( 2330 views )   |  print article

---

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 ] ( 2008 views )   |  print article

---

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 ] ( 1773 views )   |  print article

---

/*

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 ] ( 2226 views )   |  print article

---

<script type="text/javascript">

x=false || 'test';
alert(x);//outputs 'test';

</script>



[ view entry ] ( 1565 views )   |  print article

---

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

Page Generated in 0.072 seconds | Blog Views: 341351