Detecting HTML5 Features

You may well ask: “How can I start using HTML5 if older browsers don’t support it?” But the question itself is misleading. HTML5 is not one big thing; it is a collection of individual features. So you can’t detect “HTML5 support,” because that doesn’t make any sense. But you can detect support for individual features, like canvas, video, or geolocation.

http://diveintohtml5.org/detect.html 

Amazon books:

Introducing HTML5 (Voices That Matter)

HTML5: Up and Running

HTML5 and CSS3: Develop with Tomorrow's Standards Today (Pragmatic Programmers)

Pro HTML 5 Programming

HTML5 24-Hour Trainer (Wrox Programmer to Programmer)

Introducing HTML5 (2nd Edition) 

HTML5 Canvas 

Useful javascript function: IsValidEmail

function IsValidEmail(email){

    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;

    return filter.test(email);

}

Useful javascript function: Math.round() with precision

Math._round = Math.round;

Math.round = function(number, precision)
{
    precision = Math.abs(parseInt(precision)) || 0;
    var coefficient = Math.pow(10, precision);
    return Math._round(number*coefficient)/coefficient;
}

My Notes With Html5 CSS3 jQuery

http://boxtuffs.com/files/My-Notes/slice-my-notes/

Css3 Code Generator

Css3 Generator

http://www.css3.me/

CSS3 Please

http://css3please.com/ 

CSS3 Gradient Generator

 

http://gradients.glrzad.com/

Css3 Generator

http://css3generator.com/

Css3 Maker

http://www.css3maker.com/

140byt.es

140byt.es is a tweet-sized, fork-to-play, community-curated collection of JavaScript

How to use Zend_Json

Encoding PHP Data Structure

With Zend_Json, encoding PHP data structure into JSON formatted string is really easy. All you have to do is include Zend_Json to your PHP script and call Zend_Json::encode() with the variable you want to encode as parameter:

require_once 'Zend/Json.php';

$result = array('wine'=>3, 'sugar'=>4, 'lemon'=>22);

echo  Zend_Json::encode($result);

Running above script will produce a JSON representation of $result:

{"wine":3,"sugar":4,"lemon":22}

Reverse Operation: Decoding

Besides encoding, Zend_Json can also decode JSON formatted string. Provided a JSON formatted string, Zend_Json:decode() will transform it into native PHP array:

require_once 'Zend/Json.php';

$result = Zend_Json::decode( '{"wine":3,"sugar":4,"lemon":22}');

print_r( $result);

Above code will produce the following output:

Array
(
    [wine] => 3
    [sugar] => 4
    [lemon] => 22
)

As you can see, the result returned by Zend_Json::decode() in this example is an array and it holds the same data as the one in previous example.

Apprise - The attractive alert alternative for jQuery

An alert alternative for jQuery that looks good. Apprise is a very simple, fast, attractive, and unobtrusive way to communicate with your users. Also, this gives you complete control over style, content, position, and functionality. Apprise is, more or less, for the developer who wants an attractive alert or dialog box without having to download a massive UI framework.

Documentation & Download

Jquery Horizontal Accordion

Horizontal Accordion- This plugin provides some simple options to alter the accordion look and behavior.

Documentation & Download

jQuery Flash Plugins

jQuery Flash Plugin- A jQuery plugin for embedding Flash movies.

Documentation & Download

IconDock 'dock effect' jQuery plugin

IconDock- a jQuery JavaScript library plugin that allows you to create a menu on your web like the Mac OS X operating system dock effect one.

Live Demo
Download Code: From Here

20 useful jQuery tips, tricks & solutions

1. Optimize performance of complex selectors

Query a subset of the DOM when using complex selectors drastically improves performance:

var subset = $(""); $("input[value^='']", subset);

2. Set Context and improve the performance

On the core jQuery function, specify the context parameter when. Specifying the context parameter allows jQuery to start from a deeper branch in the DOM, rather than from the DOM root. Given a large enough DOM, specifying the context parameter should translate to performance gains.

$("input:radio", document.forms[0]);

3. Live Event Handlers

Set an event handler for any element that matches a selector, even if it gets added to the DOM after the initial page load:

$('button.someClass').live('click', someFunction);

This allows you to load content via ajax, or add them via javascript and have the event handlers get set up properly for those elements automatically.

Likewise, to stop the live event handling:

$('button.someClass').die('click', someFunction);

These live event handlers have a few limitations compared to regular events, but they work great for the majority of cases. Live event will work starting from jQuery 1.3

4. Checking the Index

jQuery has .index but it is a pain to use as you need the list of elements and pass in the element you want the index of

var index = e.g $('#ul>li').index( liDomObject );

The following is easier:

if you want to know the index of an element within a set, e.g. list items within a unordered list:

$("ul > li").click(function () {     var index = $(this).prevAll().length; });

5. Use jQuery data method

jQuery’s data() method is useful and not well known. It allows you to bind data to DOM elements without modifying the DOM.

6. Fadeout Slideup effect to remove an element

Combine more than one effects in jQuery to animate and remove an element from DOM.

$("#myButton").click(function() {          $("#myDiv").fadeTo("slow", 0.01, function(){ //fade              $(this).slideUp("slow", function() { //slide up                  $(this).remove(); //then remove from the DOM              });          }); });

7. Checking if an element exists

Use following snippet to check whether an element exists or not.

if ($("#someDiv").length) {     //hooray!!! it exists... }

8. Add dynamically created elements into the DOM

Use following code snippet to create a DIV dynamically and add it into the DOM.

Further Reading: Dynamically Add/Remove rows in HTML table using JavaScript

var newDiv = $('<div></div>'); newDiv.attr("id","myNewDiv").appendTo("body");

9. Line breaks and chainability

Instead of doing:

$("a").hide().addClass().fadeIn().hide();

You can increase readability like so:

$("a")   .hide()   .addClass()   .fadeIn()   .hide();

10. Creating custom selectors

$.extend($.expr[':'], {     over100pixels: function(a) {         return $(a).height() > 100;     } }); $('.box:over100pixels').click(function() {     alert('The element you clicked is over 100 pixels high'); });

11. Cloning an object in jQuery

Use .clone() method of jQuery to clone any DOM object in JavaScript.

// Clone the DIV var cloned = $('#somediv').clone();

jQuery’s clone() method does not clone a JavaScript object. To clone JavaScript object, use following code.

// Shallow copy var newObject = jQuery.extend({}, oldObject); // Deep copy var newObject = jQuery.extend(true, {}, oldObject);

12. Test if something is hidden using jQuery

We use .hide(), .show() methods in jquery to change the visibility of an element. Use following code to check the whether an element is visible or not.

if($(element).is(":visible") == "true") {        //The element is Visible }

13. Alternate way of Document Ready

//Instead of $(document).ready(function() {     //document ready }); //Use $(function(){     //document ready });

14. Selecting an element with . (period) in its ID

Use backslash in the selector to select the element having period in its ID.

$("#Address\\.Street").text("Enter this field");

15. Counting immediate child elements

If you want to count all the DIVs present in the element #foo

<div id="foo">   <div id="bar"></div>   <div id="baz">     <div id="biz">   </div>   <span><span> </div> //jQuery code to count child elements $("#foo > div").size();

16. Make an element to “FLASH”

jQuery.fn.flash = function( color, duration ) {     var current = this.css( 'color' );     this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );     this.animate( { color: current }, duration / 2 ); } //Then use the above function as: $( '#importantElement' ).flash( '255,0,0', 1000 );

17. Center an element on the Screen

jQuery.fn.center = function () {     this.css("position","absolute");     this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");     this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");     return this; } //Use the above function as: $(element).center();

18. Getting Parent DIV using closest

If you want to find the wrapping DIV element (regardless of the ID on that DIV) then you’ll want this jQuery selector:

$("#searchBox").closest("div");

19. Disable right-click contextual menu

There’s many Javascript snippets available to disable right-click contextual menu, but JQuery makes things a lot easier:

$(document).ready(function(){     $(document).bind("contextmenu",function(e){         return false;     }); });

20. Get mouse cursor x and y axis

This script will display the x and y value – the coordinate of the mouse pointer.

$().mousemove(function(e){     //display the x and y axis values inside the P element     $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); });

Useful php function: Check whether string begins with given string

Checks whether $string begins with $search

function string_begins_with($string, $search)
{
    return (strncmp($string, $search, strlen($search)) == 0);
}

Simple jquery drag-and-drop tutorials

Dragging and dropping can be a very intuitive way for users to interact with your site or web app. People often use drag-and-drop for things like:

Moving email messages into folders
Reordering lists of items
Moving objects in games around, such as cards and puzzle pieces

Drag-and-drop with JavaScript used to be very hard to do — in fact, getting a decent cross-browser version working was next to impossible. However, with modern browsers and a smattering of jQuery, drag-and-drop is now a piece of cake!

In this tutorial we'll take a look at how to create drag-and-drop interfaces with jQuery.

How to use : http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/

Demo 1 - Making elements draggable
Demo 2 - Adding draggable options
Demo 3 - Using a helper
Demo 4 - Events: Responding to drags
Demo 5 - Styling draggable elements
Demo 6 - Droppables: Accepting draggable elements
Demo 7 - Complete example: A drag-and-drop number cards game

Create Accordion Menu Using CSS3 Transition

Documantation | Demo | Download Source Code

Merge PDF documents with Zend_Pdf

Merging two or more PDF files with Zend_Pdf component of the Zend Framework is really simple. You just need to load the documents into Zend_Pdf instances and then iterate over their pages:

// load PDF documents

$pdf1 = Zend_Pdf::load('first.pdf');

$pdf2 = Zend_Pdf::load('second.pdf');

// we will merge our two PDF files into a new Zend_Pdf object

$pdfMerged = new Zend_Pdf();

// add all pages from the first PDF to our new document

foreach($pdf1->pages as $page){

    $clonedPage = clone $page;

    $pdfMerged->pages[] = $clonedPage;

}

// add all pages from the second PDF to our new document

foreach($pdf2->pages as $page){

    $clonedPage = clone $page;

    $pdfMerged->pages[] = $clonedPage;

}

unset($clonedPage);

// send the merged PDF document to browser

header('Content-type: application/pdf');

echo $pdfMerged->render();

Creating simple pdf documents with Zend Framework

The Zend_Pdf component is a "pure PHP" implementation of the PDF standard, and no external libraries are required to use it. This can come in handy when operating in a shared hosting environment that does not allow individual access to custom extensions. The component supports most common PDF operations, including adding and deleting pages; inserting text and images on pages; drawing and colorizing shapes; and updating document meta-data.

Let's begin with a simple example :

// create PDF
  $pdf = new Zend_Pdf();
  
  // create A4 page
  $page = new Zend_Pdf_Page(Zend_Pdf_Page::SIZE_A4);
  
  // define font resource
  $font = Zend_Pdf_Font::fontWithName(Zend_Pdf_Font::FONT_HELVETICA);
  
  // set font for page
  // write text to page
  $page->setFont($font, 24)
       ->drawText('That which we call a rose,', 72, 720)
       ->drawText('By any other name would smell as sweet.', 72, 620);
  
  // add page to document
  $pdf->pages[] = $page;
  
  // save as file
  $pdf->save('example.pdf');

If you'd like to insert an image into the PDF document, this is easily accomplished with the drawImage() method, which accepts a Zend_Pdf_Image resource and a set of coordinates, and then writes the image to that position in the document. JPEG, PNG and TIFF images are currently supported, and the system will auto-detect the image type based on the file extension. Here's an example of it in use:

// create PDF
  $pdf = new Zend_Pdf();
  
  // create A4 page
  $page = new Zend_Pdf_Page(Zend_Pdf_Page::SIZE_A4);
  
  // define image resource
  $image = Zend_Pdf_Image::imageWithPath('IMG_007.jpg');
  
  // write image to page
  $page->drawImage($image, 50, 50, 400, 400);
  
  // add page to document
  $pdf->pages[] = $page;
  
  // save as file
  $pdf->save('example.pdf'); 

Html select boxes much more user-friendly with Jquery

How to use: http://harvesthq.github.com/chosen/

Pretty checkboxes with jQuery

It’ll show how to turn this…

…into this :

How to use: http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery
Demo: http://aaronweyenberg.com/demos/jqueryform/demo.html

Polaroids with CSS3

How it Works

Through a combination of browser-specific CSS (2 and 3) integration and some basic styling, we've turned regular old images into cool looking polaroid style images—with no additional markup to show the text.

Demo: http://www.zurb.com/playground/css3-polaroids