Tag Archives: HTML

CSS, jQuery

Font/Text distortion on animate() and opacity in Internet Explorer

Leave a comment

I have a HTML div which will be shown from hidden to visible by changing the opacity with jQuery animate(). It works fine in normal browser like Chrome and Firefox. But from the abnormal browser like Internet Explorer, the font/text is distorted.

Internet Explorer has problem with opacity and font antialiasing in animate(). A workaround is to remove the opacity after the animation is completed.

$("#my-div").animate({opacity: 1},500, function() {
  $(this).css('opacity', '');
});

Continue reading Font/Text distortion on animate() and opacity in Internet Explorer →

CMS

Drupal 7 – Add HTML Markup in Form

Leave a comment

Add the following form element in hook_form_alter() to add your own HTML markup.

$form['html_markup'] = array('#markup' => t('<a href="http://eureka.ykyuen.info">Eureka!</a>'));

 

For Drupal 6, please refer to the following post instead.
Drupal – Add HTML Markup in Form

Done =)

Reference: Drupal 7 Form API Reference

HTML

HTML – Prevent the Skype browser plugin from converting the phone number

Leave a comment

If your browser is bundled with the Skype plugin, it will automatically wrap the phone number with Skype format. This can be avoided by adding a invisible text anywhere in the phone number.

<!-- Orginal -->
<div>852 12345678</div>
<!-- Prevent the Skype plugin to work -->
<div>852 1234<span style="display:none;">_</span>5678</div>

 

Done =)

Reference: 1066internet – Prevent Skype from converting a phone number

CMS

Drupal 7 – Styling checkbox and radio button in Webform

18 Comments

Yesterday we talked about styling the checkbox and radio button as suggested by Ryan Fait.
Styling checkbox and radio button with CSS and Javascript

Here is a simple solution for applying the checkbox and radio button in Drupal 7 webform.

1. Upload the radio.png, checkbox.png and select.png to your subtheme. (Omega subtheme is used in this example.)

checkbox
radio
select

 
Continue reading Drupal 7 – Styling checkbox and radio button in Webform →

CSS, HTML, Javascript

Styling checkbox and radio button with CSS and Javascript

1 Comment

I want to style the form elements such as radio button, checkbox or selection list. Google shows me a very good tutorial written by Ryan Fait.
Las Vegas Web Design – Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements

In the above tutorial, those form elements will be replaced by a span element. It works great. Only 1 minor problem which is those span elements could not align well. So i made some change on the CSS. Here is my example.
Continue reading Styling checkbox and radio button with CSS and Javascript →

HTML, PHP

PHP – Prevent GIF image loaded from browser cache

Leave a comment

I would like to show a GIF image on a website but i found that the animation is not working as the browser caches the GIF image after first load. Here is a PHP workaround by adding the current timestamp to the image src url.

<img src="https://eureka.ykyuen.info/example.gif?v=<?php echo Date("Y.m.d.G.i.s"); ?>" />

 

Done =)

Reference: cache woes, how to force an image to refresh or load fresh

CMS

Drupal 7 – Create Newsletter by Simplenews @ 2

5 Comments

We can use the Simplenews module to deliver newsletter to subscribers.
Drupal 7 – Create Newsletter by Simplenews @ 1

But usually newsletter is colorful HTML with images instead of just plain text. In this post we will continue working with the Simplenews module and try to create a HTML newsletter.

The HTML newsletter requires either the Mime Mail or HTML Mail module. I will use the Mime Mail in this post.
Continue reading Drupal 7 – Create Newsletter by Simplenews @ 2 →