How to center a div inside a div

If you want to center a div inside another width and the content of the inner div is dynamic (so you don't know the exact width), you can do something like this:

Put an image on the Canvas

To draw an image on a canvas, we use the drawImage(image,x,y) method

HTML5 Canvas for beginners

The canvas element is used to draw graphics, on the fly, on a web page. It is only a container for graphics. We must use a script to actually draw the graphics.

***Internet Explorer 8 and earlier versions do not support the canvas element.

How can we create the canvas element

In order to create a canvas element, use the following markup:


As you can see above, I used an id attribute in order to referrence it later using javascript.If you want to style your canvas you can use the style attribute.

 
How can we draw onto the canvas using javascript 

As I mentioned earlier, after we create the canvas, we use javascript in order to draw something onto it. For example if we want to draw a red rectangle we use following markup, inside a script javascript tag.

I will briefly explain the code. First we find the canvas element with the id attribute, and then we call its getContext() method, passing the string "2d" as an arguement.

***The getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, and more. 

At last we set the red color and draw the rectangle.

Read more examples

*** For more examples visit http://www.w3schools.com/html5/html5_canvas.asp

HTML5 new features

My first question, when started learning HTML5, was "What are the new features of this new version of HTML"? What new things can I do with HTML5, or how easier can I do some things I used to, while using HTML?

So, in this quick post, we will see the new interresting features in HTML5.

• The canvas element for 2D drawing
• New content-specific elements, like article, section, header, footer
• The video and audio elements for media playback
• Support for local storage
• New form controls, like calendar, date, time, email, url, search

In the following posts, I will explain each feature seperately in more detail. 

Print a div with javascript which opens in a new window using Javascript

Today I had to put a print button into a web application, which when clicked, should open a new window and print the contents of a certain div.

I found this very useful link http://sarwarhossain.com/2010/10/05/print-a-div-open-new-window-print-and-close-using-javascirpt/. I used the code and everything worked great in Firefox, but I noticed that it doesn’t work well with Chrome, launches straight to blank Print screen and doesn’t load content in new window first. Same in Safary (I didn't try IE, I was sure that it wouldn't work as well).

Here is the code I found from the above link and right after I will post 2 solutions for this problem.


Javascript Function

HTML


1st solution 

The first thing I thought was to remove following lines
in order to let Chrome and Safari open the new window with print button in the contents, but this relies on user to manually push print. I found this thought in the comments area too.

Everything worked great, but I wanted to open the new window and after that automatically invoke the print dialog window. So I did the following.


2nd solution

I just put onLoad=”self.print()” inside body element and everything worked like a charm:-) See the new code of the printContent function below. Hope it helps!