Category Archives: HTML and CSS

Archive

MIME Types – Complete List

MIME Types – Complete List

Posting full list of MIME Type which every developer like me needs very frequently. Posting for reference here. Continue reading

Category: HTML and CSS

How to Use Custom Fonts On Your Website With the help of CSS

How to make Web Font work on website

How To Use Custom Fonts On Your Website With CSS?

Let’s do an example together. Download bttf.ttf (Back to future font) from here. Continue reading

Category: HTML and CSS

Floating Social Icons, Facebook, Twitter, LinkedIn, Digg & Google Plus

floating-social-icons

Posting the html, css & javascript code for floating social icons shown in the attached image below. The code was created using this link but it didn’t work for Facebook. Pasting here for reference and later use. Someone with html, css and javascript knowledge may find it helpful. Continue reading

Easy and smart way to add “required” css class to form field labels

Easy and smart way to add “required” css class to form field labels

Undoubtedly, this is the easiest way to add a red asterisk (*) sign to a required field label in a form.

Here’s HTML part of the form.

<div class="required"><label for="FirstName">First Name</label>
<input name="first_name" maxlength="50" type="text" id="FirstName"></div>

<div class="required"><label for="LastName">Last Name</label>
<input name="last_name" maxlength="50" type="text" id="LastName"></div>

Continue reading

Fix to jQuery ui calendar not appearing from or hiding behind thickbox

If you are facing an issue of jQuery ui calendar not appearing while clicked from a jQuery thickbox or if some part of the calendar hiding behind the thickbox window you need to apply a quick fix to your calendar. Continue reading

Making line-through color to appear different than the text (using CSS)

I am posting a simple trick to make the color of line-through line to appear different than the stricken text. I had to recall this trick actually as we rarely use it and i guess i myself never used it before i guess (may be i had but i don’t know exactly. :) ). Continue reading

How to add HTML tag keyboard and toolbar shortcuts to Notepad++

(skip to implementation) Like most computer users i do prefer to use keyboard shortcuts and while working with web pages in particular, keyboard shortcuts and visual shortcuts in editor toolbars speed up development work considerably. There are HTML editors like Adobe Dreamweaver which do almost everything automatically for you, but you need to purchase a license to permanently use them and also they seem to consume large amount of computer RAM. Continue reading

Form DOM element not recognized (created) in ajax form in IE when placed with end tag missing

Skipping a form end tag </form> costed me almost a day (i had to go to bed abandoning the fixing for some time though;)). I had been using ajaxForm with jQuery to submit ajax form which was placed on a popup dialog box opened through ajax. The form worked well in Mozilla Firefox, Google Chrome, Safari but did not work in Internet Explorer 7 & 8 (IE7 & IE8 ; i didn’t test in other versions of IE but perhaps they would not work either). The IE simply would not create the <form> tag at all so if you try to alert $(“#formID”).length it would return always 0(zero). It started to work fine (in IE) when i placed </form> to mark the end of the form (i know it was a mistake to not to place it there though). Continue reading

Center aligning a table within DIV element

Define the CSS style in css file or header of the HTML page: Continue reading

Setting Style/CSS of select options using jQuery

This is how i set style (color here) of all of the options of a select list using jQuery.

In my case i had select options like this:

<select id=”select_list_id”>
<option value=”#595959″>Grey</option>
<option value=”#000000″>Black</option>
<option value=”#036″>Blue</option>
<option value=”#363″>Green</option>
<option value=”#632423″>Red</option>
<option value=”#403152″>Purple</option>
<option value=”#E36C0A”>Orange</option>
</select>

Follwoing the jQuery code i used to set color of options above:

  $(document).ready(function(){
	$('#select_list_id option', this).each(	
		function ()	{
			$(this).css({'color':$(this).val()});
		}
	)
  });