Tag Archives: HTML

CSS – Number rating widget

I have a HTML form which has radio inputs range from 1 to 5:

<form>
  <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
</form>

 

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.
icon_number_widget.png
icon_number_widget
Continue reading CSS – Number rating widget

jQuery – Determine which radio box is checked

Assume you have the following HTML form:

<form id="weather-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
</form>

 

To get the checked value using jQuery:

var result = $("#weather-form input[name=weather]:checked").val();
// OR
var result = $("input[name=weather]:checked", "#weather-form").val();

Continue reading jQuery – Determine which radio box is checked

Submit Google Forms by curl command

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.

  • https://docs.google.com/forms/d/<form-id>/edit

Continue reading Submit Google Forms by curl command

HTML – Disable auto scaling on iPhone Safari when switching from portrait to landscape

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.

Done =)

Reference: StackOverflow – How can I disable MobileSafari’s content scalling on orientation change?

jQuery – Freeze HTML table header and the left columns

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