Today's Question:  What weekend projects have you created?        GIVE A SHOUT

  WRITE ARTICLE

 ALL


  Convert HTML to DOM elements using JavaScript

In some cases, one would want to convert a HTML string to the DOM elements so that JavaScript can handle them easily. This is frequently used when one get some data from third party APIs where the data is in HTML format. In JavaScript, there are a couple of ways one can use to convert HTML to DOM elements. DOMParser document.createElement DOMParser DOMParser can parse XML or HTML source stored in a string into a DOM Document. After the conversion, the normal JavaScript call of h...

821 0 0          JAVASCRIPT HTML DOM DOMPARSER DOCUMENT.CREATEELEMENT


  Remove browse button from input type=file

In Web 2.0 era, many websites will ask the user to upload their avatar when creating their profile. In HTML, the input control we should use is input="file". This is a file control provided by the browser vendor and it should be ran in a sandbox for security consideration. Browsers don't provide ways to choose file from local and upload to the remote server without the input="file" control.  There is one annoying part about the input="file", which is a default button named "Choose File" or...

10,722 1 2          HTML FILE BROWSE REMOVE BROWSE BUTTON


  Write HTML easily with Emmet and Haml

Writing HTML codes is very boring and tedious as it has many tags and it's static. One solution is to use template, filling content based on other's skeleton. One another solution is high speed writing. We can write HTML codes with Emmet and Haml. These two ways have similar functions but with different characteristics. Haml is based on Ruby, so when working on Ruby/Rails projects, we recommend to use Haml, otherwise we recommend to use Emmet. 1. Emmet Emmet is a editor plugin, the official webs...

6,353 1 0          HTML EMMET HAML


  Meta tag in HTML header

In server response, we can use response.setHeader() to set the meta information in header of a HTML page. The usage is response.setHeader(name,context); meta is used to simulate the response header of HTTP protocol in HTML page. It should be put between the <head> and </head> tag. 1. <meta name="Generator" content="" > <!--This is to specify the tool which generates this page such as Microsoft FrontPage 4.0 etc --> 2. <meta name="keywords" content=""> <!-- To tel...

56,522 0 0          HTML HTTP META HEAD


  Display GIF animation while submitting the web form

Internet appears everywhere in our life. Form as a data gathering component is the must have component in a web app. When the page is submitting data to the server, if it takes a relative long time for the backend server to process the data, then the client users will feel lost while waiting for this if he cannot get any indication about what's happening. They may even reclick the button which will cause the data resubmission. This affects the user experience and also the system performance and ...

24,026 3 4          HTML FORM SPIN SUBMIT


  HTML5 Web Worker

Web Worker is a JavaScript multithreading solution provided by HTML5. we can put some compute intensive codes into Web Worker and it will not hang the user interface. 1. How to use Web Worker Web Worker's basic mechanism is to use Worker to load a JavaScript file to create a new thread in JavaScript's main thread. It will not block other thread's execution and will provide a data exchange interface between main thread and new thread : postMessage() and onmessage. Let's look at an example: //work...

6,911 0 0          JAVASCRIPT HTML WEB WORKER


  Ways to make elements in HTML center aligned horizontally

In our daily HTML design,  it is an easy job to horizontally center align an element with known width. <div class="element">I am<a href="http://www.aiubug.com" target="_blank" rel="external" title=""> bug </a>!</div>  .element{width:960px;margin:0 auto;}  The above codes set the width of the div block and horizontally center align it. It's very easy to implement. However, if we have some elements we don;t know their width and we still want to ce...

3,744 0 1          HTML CSS CENTER ALIGN UNKNOWN WIDTH


  Regular expression to get html meta description

When we need to process a HTML page source code, we often need to retrieve the meta description of the page besides the links in the page. This description is usually located in <meta> tag of a HTML page. The meta description is very useful for search engine index. How can we retrieve the meta description? If we use a regular expression, we can easily get the meta description. In JavaScript, the regular expression looks like : var pattern = /<meta.*?name="description".*?content="(.*?)"....

7,642 0 0          JAVASCRIPT HTML REGULAR EXPRESSION META DESCRIPTION