Usually when you use an IFRAME tag to link an external source the page that’s referenced by the SRC attributes is loaded at the top left corner. This is the default behavior, but sometimes you’d like to show to your users not the entire page from the top left corner, but to show only part of the external page instead.

In most of the cases the reference is external and you don’t have control over the external page. Thus you’ve to scroll the IFRAME content to the desired position. This of course is impossible. Yeah, there are some JavaScript hacks, but they’re all a bad solution, because the scrolling occurs only after the page is loaded.

The Solution

You can wrap the IFRAME into a div and scroll the DIV content using absolute TOP and LEFT CSS properties.

Here’s an example:

#my-div
{
    width    : 400px;
    height   : 200px;
    overflow : hidden;
    position : relative;
}

#my-iframe
{
    position : absolute;
    top      : -100px;
    left     : -100px;
    width    : 1280px;
    height   : 1200px;
}

Here you have one DIV with dimensions 400x200px. Now by moving the IFRAME within it you can position it on the right place.

Example with the awesome Yahoo! Homepage:

Related to the previous several posts jQuery comes with two functions that help you dynamically get the width and height of an element.

Have you ever asked about the width of an element in pixels which is 100% wide from the CSS? Well $.width() gives you the answer. Everything else is about experiments.

Well these are function which help you modify different CSS properties with JavaScript. You know you can do that in “pure” evangelistic JS, but normally every library comes with its own bunch of functions that do the job. In fact in jQuery the things are little bit more complicated because the returned value of those CSS modifiers is yet again a object of the element you modify, which is the same object as this you’ve selected with one of the selectors in jQuery.

This is extremely useful when it comes to chains and you chain several functions using the dot operator. Thus you call more and more functions for every selector and perform a modifier every time you call them.

When it comes to the slogan of jQuery which promise us to do the same things as “pure” JavaScript, but with less code, well this chaining is the prove.

One of the main CSS helper selectors is the offset. It can be defined by at least two different ways. Once you may have the offset of an element from the beginning of the page, where this should be point (0, 0), and in other way you may want to have the offset from the containing element of the selected one.

Actually in jQuery you can use the .offset() method that especially for absolute positioned elements gives you the offset from the top left corner of the page.

Where they can be useful?

The offset of an element, which is absolutely positioned is useful when you make some JS based animations or sliders (which in fact is animation) or whatever.

$.offset()

The offset function returns an array with two values “left” and “top”. Normally that gives the offset in pixels.

Some tips and tricks

Because the JavaScript is extremely powerful you get a bonus when referencing the $.offset() method.

Instead of:

var offset = $('#element').offset();
console.log(offset['left']);
console.log(offset['top']);

you can write:

console.log($('#element').offset()['left']);

which is really groovy.

What is a browser reflow? Well actually when you change some property in CSS like change of a color, width, height, font-size, etc. normally the browser redraws the layout just to fit the new requirements after the reflow.

The problem is not in the first render of the page. Than the CSS is just parsed and everything is positioned as the browser reads the CSS. The problem is when you change some CSS property using JavaScript, and in our case using jQuery.

In fact nowadays is very popular to make every kind of animation using JavaScript and most of the “big” libraries, such as jQuery, give you a built in set of functions just to make this task easier for you.

They are designed to be performance tolerant, but what happens if you try to do some CSS change with a simple JavaScript lines of code like these:

document.getElementById('elem').style.width = "100px";
document.getElementById('elem').style.height = "50px";
document.getElementById('elem').style.fontSize = "12px";

Here you force the browser to reflow tree times, which in almost every animation process is multiplied by thousands of times, which is really, really bad. And sad.

When you cannot overcome the CSS reflow?

Yes there is a workaround that improves performance a lot. This is to change not individual properties of CSS, but to switch class names of the elements.

In pseudo code of the task above you can define one class in CSS:

.newsize {
   width : 100px;
   height : 50px;
   font-size : 12px;
}

Thus you can just set the class name of that element:

document.getElementById('elem').className = 'newsize'

In that case there is only one reflow of the browser, which is strongly recommended.

jQuery.css()

Until now I was speaking about general JavaScript and CSS. In the case of jQuery there is a very useful method called css which makes these changes for you.

Yet again if you have defined a class you may use $.addClass() instead of $.css, but however it is not always possible to make so.

Where is not possible to overcome browser reflows?

Well imagine you’ve a square DIV that should go from the left top corner of the page to the bottom right corner. If that should be animated you cannot predefine thousands of class names and than set all these. In that case you should use the $.css function to setup different left and top positions.

There are two ways you can setup a CSS property with jQuery.css().

The first one gives you the possibility to call individual property and its new value just like two normal, string parameters in JavaScript:

$('#elem').css('width', '100px');

Note that here both parameters are strings, and if you’d like to change the background image you can call it just the way you used to in CSS:

$('#elem').css('background-image', "url...");

The second way is to change multiple CSS properties. Than you should call $.css with an object parameter:

$('#elem').css({
   width : '100px',
   height : '50px'
});

Note that here you cannot use background-image as a object key, simply because in JavaScript you cannot name a variable with – inside its name.

So you can simply write something like:

$('#elem').css({ backgroundImage : 'url(...' });

where backgroundImage is the native way to call properties in CSS with dash in its name.

Note also that even you change only one property you can call it with object parameter instead of the first method. The other way is not possible you cannot call:

$('#elem').css(background-image, "url(...");

this will result with an error because yet again JavaScript do not support such names format for the variables.

As you can see $.css() gives you full power and control over the CSS properties change. However you should always thing about performance when it comes to browser reflows. Try to use animation libraries, which are specially designed to do that job, and don’t forget that the new versions of EcmaScript and HTML5 will be better for animations than the current ones.

Although there are so many resources about CSS sprites and where they should be used I still think their usage is misunderstood.

The big problem is that many people use the sprite in a completely wrong way. When used properly the sprite can be really helpful, especially for a large scale site.

The mistake

When you read about sprites and you understand you must use only one image you start doing the big mistake. Let’s assume we’ve one image for the backgrounds of three div elements:

.a {
    background: url(sprite.png) 10px 10px no-repeat;
}
.b {
    background: url(sprite.png) 20px 20px no-repeat;
}
.c {
    background: url(sprite.png) 30px 30px no-repeat;
}

<div class="a"></div>

<div class="b"></div>

<div class="c"></div>

Now even with this simple example there is one sprite image but the browser makes three requests for this image, which is really bad!

The solution

How about making it the right way with a simple change:

.sprite {
    background-image:url(sprite.png);
    background-repeat: no-repeat;
}
.a {
    background-position:0px 0px;
}
.b {
    background-position:10px 10px;
}
.c {
    background-position:20px 20px;
}

and a little bit different markup:

<div class="sprite a"></div>

<div class="sprite b"></div>

<div class="sprite c"></div>

and this is where the sprites are really useful. Now the browser makes only one request and your site is ready for the big world.

By saying CSS units some may guess this is related to the mesurement units. In fact beside the mesurment there is also a color units defined in CSS.

The most used is the #rrggbb, where the three channels red, green and blue are represented with hexadecimals, i.e. #fa03cd, or the short way #rgb. In fact #cc00cc will be the same with #c0c, but #cc02ca is not like #c0c.

Some purple #FA03CD

Actually there are other ways to set a color on an element. Such a way is to set the rgb(255,255,255), which is white. You can easyly transform the hexadecimals to decimals, it’s obvious that xFF is 255 in decimals.

There are five ways to set up a color with CSS

In general there are five ways to set up color with CSS:

#rrggbb ( for red, green and blue as mentioned – #FF00FA )

#rgb ( short way to say #rrggbb – #CC3 )

rgb( x, y, z ) – ( where x, y and z are numbers between 0 and 255 – rgb( 255, 255, 255) )

rgb( x, y, z ) – ( where x, y and z are percents between 0 and 100 – rgb( 100%, 20%, 23%) )

The Windows palette

There is a fift way to set a color on a element with CSS, with predefined colors corresponding to the MS Windows VGA palette, and they are:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow

Check out this: http://dillerdesign.com/experiment/DD_roundies/

I hope that can help many web developers!

Many people would argue about the usage of px, pt and em when it comes to font sizes and line heights. In short they do all have to do with font-sizes and line-heights, however, they’re used in very different ways.

Writing CSS at first look may look easy, but finally estimates as difficult task, and producing a quality, elegant CSS markup is event more difficult.

I don’t know why but a very interesting part in the web forum (space) is which one is more useful?

I would like to know which ones best px, pt, or em?

http://www.webmasterworld.com/forum83/5272.htm

This is not the right question! There is not such a thing like right and wrong here. Speaking for CSS techniques is not the same as giving any value for some of them.There is not good and bad when it comes to CSS megurement units.

One of the hardest parts in the front end development is the size of the DOM elements. Almost every developer has spend hours to resize something in proportion, which should always be independent of the screen resolution and be “perfect for every screen”. The easyest thing is to fix everything with a fixed unit.

Fixed units are both px and pt, which stand for pixels and points. There are differences – but not as much. Pixels are, as anybody knows, the pixels on the screen. And almost everybody sets the width, height in pixels. It’s the easy way. In a standard of 72 dpi (dots per inch), 10 pixels is something which every web developer, respectively web designer knows as 10 pixels. (The forumla to convert pixels to real points over the screen is not difficult but it doesn’t matter). In the case of points – points are used. Both web developers and print designers know what are point.

An simple example of printing media working with points as unit is the printer next to you.

We all know what are 1024×768, 1280×800, 800×600 … etc. Of course working for such a business like the Internet area, which is a complete jungle, you may not expect everybody to be with exact the same resolution and hopefully same browser!

And what happens if some clever user puts several (in the average case 11) toolbars in his browser!? There we go … Don’t explain me more, I just want to put it all in pixels. That’s the most often answer.

When it comes to the mysterious “em”, the things are going even more unclear and not well known. And all that because it comes for proportional sizes.

The % units are used in CSS to describe the size of an element to be relative to the size of the parent element. An example in that case if the body and/or html tags has width of 100%, that means the body with be exactly the white space of the browser. Not the monitor rezolution. It is natural to suppose that the browser is 100% for the body and html tags.

From here the things are going more clearly. If we have a div with 400px of width, an inner div with 100% will be exactly 400px wide. If a 25% width is set so the width of the element in pixels will be 100.

So far so good. Now comes the question, what’s an em? em is an unit which derives from the size of the font of the parent element. If the body font-size is set to 20px, 1em will be 20px. Naturally 2em will be 40px. To be more precise you can set something like 1.203em which will be something above 20px. Note that you can use up to 3 digits after the point, but no more. If you have 20px font-size of the body, but a 15px font-size of a particular div element, every em unit inside the div will be relative to that 15px size.

Of course you can set width / height of a div in em unit, but again it will be calculated relative to the font-size. If you have 10 em width of a div inside the body which is with 20px font-size, the width of the div in pixels will be 200.

It can be really elastic to work in em, but it’s again the more difficult. There are lots of formulas how to calculate ems in pixels.

Bugs and differences between the browsers don’t miss. I’ll be writing more on browser differences with the em unit. Now you can note that Opera has a problem with em size above 20.47, as the famous PPK sais in: http://www.quirksmode.org/bugreports/archives/2005/03/Opera_problem_with_em_values_greater_than_2047em.html

Sometimes called elastic layout you can find interesting article here:

This article will walk you through creating a basic elastic layout; what exactly an “em” is and how to calculate them, how to use ems to create an elastic layer for content with scalable text and images, including basic vertical rhythm.

The w3schools describe more accurately the em unit comparing with the others on:  http://www.w3schools.com/css/css_units.asp:

1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then ‘2em’ is 24 pt. The ’em’ is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses

Finally explained with the amazing em effect article I recommend this one: http://www.w3.org/WAI/GL/css2em.htm