Tag Archives: HTML

HTML – Hide the broken icon when the is not yet loaded

Updated @ 2015-10-12: The following snippet could get rid of the broken icon without using CSS and JS.

<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
  <image width="1920" height="500" xlink:href="" ng-href="{{ image.href }}"></image>
</svg>

 

Thanks Wouter De Loose.

 

i have the following <svg> in an AngularJS template and the image source would be assigned by the controller which loaded the image info from a .json file.

<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
  <image width="1920" height="500" xlink:href="{{ image.href }}"></image>
</svg>

 

It works fine on my local machine but when i put it on a webserver. There would be a flash of the broken image before the image is loaded. Continue reading HTML – Hide the broken icon when the is not yet loaded

Advertisement

Offset the anchor link for sticky header

If you have a sticky header (Position fixed header on the top of the html page), your anchor link with CSS ID would not work as you expected. The target section would be covered by the position fixed header.

You can use the following CSS to offset the fixed header height.

/* The target CSS ID with :before pseudo class */
.offset:before { 
  display: block; 
  content: " "; 
  height: 150px;      /* Give height of your fixed element */
  margin-top: -150px; /* Give negative margin of your fixed element */    
  visibility: hidden; 
}

 

Done =)

Reference: Offsetting Anchor Hash Tag Links To Adjust For Fixed Header

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?