Tag Archives: css

Scroll an IFRAME Content to a Predefined Position

css, micro tutorial, web development, , , ,

IFRAME Source

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.

<div id="my-div">
<iframe src="http://www.example.com" id="my-iframe" scrolling="no"></iframe>
</div>

Continue reading Scroll an IFRAME Content to a Predefined Position →

jQuery CSS functions. Part 1 – offset()

css, javascript, micro tutorial, , ,

What are jQuery CSS functions?

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.

Continue reading jQuery CSS functions. Part 1 – offset() →

jQuery CSS selectors. Change one or more CSS properties!

css, javascript, micro tutorial, , , ,

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.

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. Continue reading jQuery CSS selectors. Change one or more CSS properties! →

CSS Sprites – common mistakes

micro tutorial, web development, ,

CSS Sprites

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.