Today's Question:  What does your personal desk look like?        GIVE A SHOUT

 ALL

  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 "Browser" will always appear when this control is created. Sometimes, to keep consistent and provide ...

46,889 3       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. EmmetEmmet is a editor plugin, the official website provides multiple editor support. We can use it as vim plugin. First we can follow the vim plugin m...

9,845 1       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 tell the search engine what keywords your page contains -->3.<meta name="description" content="">...

58,306 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 stability.The solution to the above issue is we usually will disable the submit button or hide the s...

33,367 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 WorkerWeb 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://worker.jsonmessage =function (evt){ var d = evt.data;//Get sent data with evt.data postMessage( d );//Send...

9,303 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 center align them. What should we do? The above code is not useful if we don't know the width before we center...

5,255 0       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="(.*?)".*?>|<meta.*?content="(.*?)".*?name="description".*?>/i;since the description is the content i...

16,117 0       JAVASCRIPT HTML REGULAR EXPRESSION META DESCRIPTION


  HTML Page Slide Without a Framework

The HTML5 Microzone is presented by DZone and Microsoft to bring you the most interesting and relevant content on emerging web standards.  Experience all that the HTML5 Microzone has to offer on our homepage and check out the cutting edge web development tutorials on Script Junkie, Build My Pinned Site, and the HTML5 DevCenter. I'm working on a little demo mobile application for an upcoming project, and I wanted to add sliding transitions between pages. Pretty simple, right? You just use jQuery, jQuery Mobile, zepto, or one of a bunch of other frameworks, an...

3,617 0       JAVASCRIPT HTML SLIDE SHOW NO FRAMEWORK