المشاركات

عرض الرسائل ذات التصنيف HTML5

Inline Editing using PHP MySQL and jQuery AJAX

صورة
Hi! Today we will see about ajax inline editing using php and mysql . Inline editing allows users to rapidly modify web page contents in place without the requirement of forms. Popular sites like Facebook, Twitter, etc. employ this technique so that users can change their profile information without having to navigate through separate forms. Using HTML5's 'contenteditable' on page elements will take care of inline editing. For example, you can convert a plain html table into an editable table by setting 'contenteditable = true'. If you are new to inline editing, take a look at html5 editable table tutorial . PHP MySQL Inline Editing using jQuery AJAX: The 'contenteditable' attribute can be used on almost all html elements, but the data edited by user is only temporary. It will be lost when the page is refreshed. Therefore, you must use ajax to send the data back to the server and store it in database for future use. Here, let's see a demo wit...

HTML5 Video Player with Custom Controls using JavaScript

صورة
Hi! Today let's see how to build html5 video player with custom controls using javascript . The only way to embed videos on webpages before the introduction of html5 is through the use of add-ons such as flash. But thanks to html5, you can insert video contents using native html markup alone. The <video> </video> element in html5 offers a standard way to include video files on web pages. It is supported by all html5 compatible browsers. Currently, HTML5 supports three types of video formats and they are MP4, WebM, and Ogg. Among the three, MP4 is compatible with all major browsers. Creating Video Player in HTML5: To embed video in an html page, use the <video> element like this, <video width="640" height="360" controls> <source src="videos/flying-seagull.mp4" type="video/mp4"> <source src="videos/flying-seagull.ogg" type="video/ogg"> Your browser does not support ...

Create Editable Table in HTML5, Bootstrap and jQuery

صورة
Hi! Today we are going to see an interesting tutorial which is about creating editable table in html5, bootstrap and jquery. Usually, any form of organized data will be presented in as table or lists on web pages. But those tables cannot be edited by users. We can say HTML Tables are non-editable and you need the help of complex jquery plug-ins to make them editable. But thanks to HTML5, you can now easily create editable tables on the fly, without any complex coding or add-ons. HTML5 is just enough to create an editable table, but to make this demo interesting, I'm going to use bootstrap and jquery along with it. Come, let's see how to apply inline editable option to html table element. HTML5 Editable Table: HTML5 has an attribute called 'contenteditable' . Setting this attribute to 'true' , will make the table cell editable. You simply have to add the attribute to <td> like this, <table> <tr> <td contenteditable=...