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.
You can wrap the IFRAME into a div and scroll the DIV content using absolute TOP and LEFT CSS properties.
Here’s an example:
width : 400px;
height : 200px;
overflow : hidden;
position : relative;
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.
<iframe src="http://www.example.com" id="my-iframe" scrolling="no"></iframe>
Continue reading Scroll an IFRAME Content to a Predefined Position
$.width() and $.height()
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.
What are jQuery CSS functions?
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.
Continue reading jQuery CSS functions. Part 1 – offset()
Browser reflows and performance issues
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.
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.
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:
background: url(sprite.png) 10px 10px no-repeat;
background: url(sprite.png) 20px 20px no-repeat;
background: url(sprite.png) 30px 30px no-repeat;
Now even with this simple example there is one sprite image but the browser makes three requests for this image, which is really bad!
How about making it the right way with a simple change:
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.