Tag Archives: HTML

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?

CSS Style for search input in WebKit

In Chrome, there are some special style on the input elements. For example, the following is a search textbox in Chrome.
search-textbox-1
 

To restore the standard textbox view, apply the -webkit-appearance on the search textbox.

input[type="search"] {
  -webkit-appearance: none;
}

 

Refresh the page.
search-textbox-2
 

Done =)

Reference:

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

Drupal 7 – Create a taxonomy term selection list of a specific vocabulary @ 2

We talk about how to generate a taxonomy term selection list in the following post.
Drupal 7 – Create a taxonomy term selection list of a specific vocabulary @ 1

So we continue to add the jQuery/Javascript code such that when the term is selected, the browser will open the corresponding term page.

The following piece of jQuery/Javascript is redirect you to the selected term page.
Continue reading

Drupal 7 – Create a taxonomy term selection list of a specific vocabulary @ 1

Next: Drupal 7 – Create a taxonomy term selection list of a specific vocabulary @ 2

I want to create a HTML selection list which contains the taxonomy terms of a vocabulary. When a option is selected, the browser will go to the selected term page. In this post, i would like to share how to generate a selection list by PHP.

I have a vocabulary which has terms in 2-level. The selection list could generated as follow.
Continue reading

Create Google Plus Share hyperlink for specific URL

We have talked about how to create share link on Facebook and Twitter.
Create Facebook Share hyperlink for specific URL
Create Twitter Share hyperlink for specific URL

So this time is the Google Plus share link.


https://plus.google.com/share?url=<url>

 

https://plus.google.com/share?url=http://eureka.ykyuen.info/about
Continue reading