Kurinchi Blogger Scribbles …


Archive for the ‘UI, CSS’ Category

May 13
2009

JSLint – Javascript Code Quality Tool

Last updated: May 13th, 2009

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

Apr 16
2009

CSS: Difference between Block, Inline elements

Last updated: April 15th, 2009

CSS “display” Element takes in the following styles

display: none
display: block
display: inline
(more…)

Apr 08
2009

Box model bug in IE, Firefox

Last updated: April 8th, 2009

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. (more…)

Apr 03
2009

Cufon: Stylish pages through font variation

Last updated: April 6th, 2009

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. (more…)

Apr 01
2009

YUI Compressor to compress css javascript

Last updated: April 13th, 2009

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. (more…)

Mar 19
2009

sIFR: Desired fonts to style your website

Last updated: March 20th, 2009

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!!!

Mar 05
2009

Simple ways to Disable Context Menu in Browser

Last updated: April 13th, 2009

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.

Mar 01
2009

Peek-a-boo Bug in IE6

Last updated: March 1st, 2009

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. (more…)

Feb 09
2009

User interface: Browser modes

Last updated: February 8th, 2009

Different browser modes

To ensure backward compatibility with older browsers, browser creators had different modes for sites that work for different browser specifications

* Standard mode in Browser:
Browser renders a page according to the specifications set

* Quirks mode in Browser:
Browser loosely renders the page and manipulates the box model differently which happens to be in sites built for IE 5.5 (and lesser versions) or Opera 7 browsers

* Almost standard mode in Browser:This is a mode in Firefox/Safari browsers where they handle the tables quite differently from standard mode (more…)


Valid HTML 4.01 Strict  Valid HTML 4.01 Strict