UI, CSS

jQuery extension Impromptu

This is an easy and elegant way to prompt user messages or to seek user inputs. The author of this tool had cleanly explained its various usage by giving examples which is again easy to follow.

Check out the extension at http://trentrichardson.com/Impromptu/index.php

Share it onShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

CSS FIR Technique explained

FIR stands for Fahrner Image Replacement named after Todd Fahrner.

It is a standard compliant technique in which <h1> and <span> tags are used to have nice headings and highlights.

Key fact in this technique is that the text will get displayed even if the CSS is disabled for some reason, hence presenting the text beneath it.
Continue Reading…

Share it onShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

JSLint – Javascript Code Quality Tool

Javascript Code Quality Tool

JSLint is a web based tool that I found today when surfing the net. The tool comes with various settings that helps you clean your javascript code, sanitize it and beautify it depending on how you would want to organize your javascript coding.

You can find the following link helpful if you are interested in learning more about code conventions used in Javascript Programming language.

Link: http://javascript.crockford.com/code.html

Share it onShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

CSS: Difference between Block, Inline elements

CSS “display” Element takes in the following styles

display: none
display: block
display: inline
Continue Reading…

Share it onShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Box model bug in IE, Firefox

Box model bug in IE, Firefox

Display the below versions of the file in IE, Firefox and check the difference in display. Note the css styling used in Sample A and Sample B HTML coding.

When defining the width of the “div” layer it is essential that you need to consider the padding, margin, border size given to each element. As different browser versions have different ways of interpreting these values we need to cascade the width from the parent element to child layer if we were destined to use width for restricting the boundary of the element. Continue Reading…

Share it onShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Cufon: Stylish pages through font variation

Cufon: Alternative to sIFR

To generate the scripts, you can choose to do that from the cufon site
http://cufon.shoqolate.com/generate/

or, download a copy of the script from github and install it in your local computer
http://github.com/sorccu/cufon/tree/master

If you download the files, then you need to untar the files and create your local site. If fontforge is not installed, you need to install it in your machine before you can proceed with generating the cufon script for the font and make the necessary changes in generate/settings.ini file. Continue Reading…

Share it onShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

YUI Compressor to compress css javascript

Download the YUI (Yahoo User Interface) Compressor which compresses javascript and css files hence making the file size smaller and execution speed faster.

Download location:
http://www.julienlecomte.net/yuicompressor/

It is very simple to use this application to compress the files. All you need to have is a java installation in your machine. Continue Reading…

Share it onShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

sIFR: Desired fonts to style your website

How to have desired fonts shape the content of your web design?

sIFR comes in place to hand you different fonts using Flash and CSS. With CSS3 you could replace titles with any font you want. The text is search engine friendly and users can cut and paste the text as they expect. There are nice tutorials and video blogs that help you get started with ease.

Easy, elegant tutorial on sIFR
http://designintellection.com/2008/this-is-how-you-get-sifr-to-work/

Follow the above tutorial and you can replace the needed font to have content with your desired font.

Video based tutorial
http://css-tricks.com/video-screencasts/39-how-to-use-sifr-3/

To download the sIFR nightlies, visit
http://dev.novemberborn.net/sifr3/nightlies/

All you need to do is create the “swf” flash file or to download it from one of the available websites and then to configure the javascript, css files to make this work.

Happy sIFRing!!!

Share it onShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Simple ways to Disable Context Menu in Browser

How to disable context menu and hence disable Browser Back button?

In programmers life, there comes a situation where he/she had to disable the browser back button functionality or the back button feature on the context menu (the menu that appears when users right click on the browser content).

A simple way to disable Context Menu in browsers will be to use javascript as follows …

<html>
<head><title>How to disable content menu Back button?</title></head>
<body onContextMenu="javascript: return false;" >
<h1>Sample Text</h1>
<span style="font-size: 1.5em;">Check the CSS of this styling in the source file</span>
</body>
</html>

CSS related hint: I have used font size of 1.5em to emphasize on how “em” (the “M” space) can be used to increase the font size of the texts relatively.

Share it onShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Peek-a-boo Bug in IE6

Peek-a-boo Bug in IE6 and the possible solutions

When we design a liquid layout, the more common case of this bug appearing in pages will be when you design a <div> layer next to another <div> layer each set to float. It occurs in IE6 and is taken care of in IE7. Continue Reading…

Share it onShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Kurinchi Calendar
December 2017
M T W T F S S
« Oct    
 123
45678910
11121314151617
18192021222324
25262728293031