Fundamental Provocation » CSS

Javascript and CSS Compressor

Ajay Matharu — Mon, 29 Jun 2009 05:46:01 +0000

Lately I’ve been working on performance issues. I could figure out some of the issues using the YSlow plugin of firefox. It looks at various things in your site. It rates your site based on certain parameters one of the parameter that I have been working on was Javascript compressor.

There are various ways you can compress your Javascript. You can have a plugin installed, you can find HTTPHandlers and HTTPModules which will do the work for you.

Just in case you are still not able to compress your Javascript files, here is the site that will do that for you, http://javascriptcompressor.com/ just paste your javascript file and the site will compress that for you.

Similarly, you need to compress your CSS as well to improve your site performance. Here is the link for CSS compressor, http://www.cssoptimiser.com/

Hope this helps

CSS Properties To JavaScript Reference Conversion

Ajay Matharu — Thu, 09 Apr 2009 05:17:34 +0000

Usage:

document.getElementById(div_id).style.JS_property_reference = “new_CSS_property_value”;

CSS Property	JavaScript Reference
background	background
background-attachment	backgroundAttachment
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
border	border
border-bottom	borderBottom
border-bottom-color	borderBottomColor
border-bottom-style	borderBottomStyle
border-bottom-width	borderBottomWidth
border-color	borderColor
border-left	borderLeft
border-left-color	borderLeftColor
border-left-style	borderLeftStyle
border-left-width	borderLeftWidth
border-right	borderRight
border-right-color	borderRightColor
border-right-style	borderRightStyle
border-right-width	borderRightWidth
border-style	borderStyle
border-top	borderTop
border-top-color	borderTopColor
border-top-style	borderTopStyle
border-top-width	borderTopWidth
border-width	borderWidth
clear	clear
clip	clip
color	color
cursor	cursor
display	display
filter	filter
font	font
font-family	fontFamily
font-size	fontSize
font-variant	fontVariant
font-weight	fontWeight
height	height
left	left
letter-spacing	letterSpacing
line-height	lineHeight
list-style	listStyle
list-style-image	listStyleImage
list-style-position	listStylePosition
list-style-type	listStyleType
margin	margin
margin-bottom	marginBottom
margin-left	marginLeft
margin-right	marginRight
margin-top	marginTop
overflow	overflow
padding	padding
padding-bottom	paddingBottom
padding-left	paddingLeft
padding-right	paddingRight
padding-top	paddingTop
page-break-after	pageBreakAfter
page-break-before	pageBreakBefore
position	position
float	styleFloat
text-align	textAlign
text-decoration	textDecoration
text-decoration: blink	textDecorationBlink
text-decoration: line-through	textDecorationLineThrough
text-decoration: none	textDecorationNone
text-decoration: overline	textDecorationOverline
text-decoration: underline	textDecorationUnderline
text-indent	textIndent
text-transform	textTransform
top	top
vertical-align	verticalAlign
visibility	visibility
width	width
z-index	zIndex

Rounded Corner’s using CSS and no Images

Ajay Matharu — Sat, 01 Nov 2008 06:33:03 +0000

Today I was just digging about how to create a rounded corner div without using images.

As this is the need in most of the web application and web pages, and almost everyone does that with images. We can still create the rounded corner div with using images and just by CSS alone.

Here are few links that I digged and are helpful you to attain this,

http://www.fireandknowledge.org/archives/2004/05/22/rounded-corners-without-images-part-1/

http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

http://www.html.it/articoli/nifty/index.html

Enjoy!!!