I have a HTML form which has radio inputs range from 1 to 5:
<input type="radio" name="num" value="1" checked>1
<input type="radio" name="num" value="2">2
<input type="radio" name="num" value="3">3
<input type="radio" name="num" value="4">4
<input type="radio" name="num" value="5">5
I want to convert it into a rating widget. I found a very good post with an example to convert radio inputs into a star rating widget.
Code by Stephen Morley – A star rating widget using CSS
But instead of rating by stars, i would like to create a number rating widget. So i modified the example a bit. First, create a image as follow.
Continue reading CSS – Number rating widget
Assume you have the following HTML form:
<input name="weather" type="radio" value="sunny">Sunny
<input name="weather" type="radio" value="cloudy">Cloudy
<input name="weather" type="radio" value="rainy">Rainy
To get the checked value using jQuery:
var result = $("#weather-form input[name=weather]:checked").val();
var result = $("input[name=weather]:checked", "#weather-form").val();
Continue reading jQuery – Determine which radio box is checked
Google Forms is a very common way to collect user data nowadays. After you have created the form, you could insert it to your web site and present it with your own style.
Other than that, we could integrate Google Forms with the backend job since we could submit the form through command line. Let’s take a look on the following example.
1. Create a new form on your Google drive. The edit page url should be in the following format.
Continue reading Submit Google Forms by curl command
Just make a simple POC for my General Assembly FEWD student.
Create the following files within the same folder
Continue reading Sticky nav bar when it reaches the top on scroll down
You could use CSS to resize and crop the image. Assume you have the following HTML.
<img src="http://ykyuen.files.wordpress.com/2013/06/wpid-20130625_132111.jpg" />
Continue reading CSS – Resize and Crop Image
For iPhone users, when you are viewing a website on Safari and switch the screen orientation from portrait to landscape, you will find that the content of the page will be scaled automatically to fit the screen width. This maybe a nice feature but probably not good for responsive design.
To disable the auto scaling, you can add the following meta on your HTML inside the <head> tag.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" />
A drawback is the above meta will disable the user scaling as well. For more information, please refer to the reference link below.
Reference: StackOverflow – How can I disable MobileSafari’s content scalling on orientation change?
We have talked about the jqBarGraph a few days ago.
jqBarGraph – jQuery Bar Chart Plugin
Here are other free libraries where you can create more fancy charts such as pie chart with really cool features.
In Chrome, there are some special style on the input elements. For example, the following is a search textbox in Chrome.
To restore the standard textbox view, apply the -webkit-appearance on the search textbox.
Refresh the page.
A few months ago, i am working on a website project which contains a very wide HTML table. The client wants to keep the top row and the two columns on the left hand side of the table sticky. There is no proper way to do it but and the only solution i could found is using a jQuery library written by Conan Albrecht. The original post could be found in the link below but the source link is no longer valid.
A JQuery Plugin For Freezing Table Rows/Columns
Luckily i have a copy of the lib and you can download here.
Continue reading jQuery – Freeze HTML table header and the left columns
Creating a HTML email which is compatible with Microsoft Outlook is a really big headache. This is because Microsoft Outlook use the Microsoft Word engine to render HTML.
The following are some notes which could help you before you start working on a HTML email template.
Continue reading Coding a Microsoft Outlook compatible HTML Email Newsletter