Apr
30th

Tips about using jQuery. LocalScroll plugin with CSS selector «:target».

There are many hyperlinks like < a href=«#idName» > … < /a > on different web pages that do not take you to another page, but rather to a place (target) on the same page. This is common practice for large articles with an index in which every item is a link to the corresponding heading. In the case of a footnote – the superscript is linked to the bottom of the article and the footer itself has a link back to the text. There is a great number of articles written in this fashion in different network encyclopedias and in journals.
Unfortunately most of todays browsers simply jump to the place where the hyperlink points. This is very different from scrolling that happens slowly and takes some notable time in a way that it can give the reader a sense of how much information is being skipped.

Rather unfortunate, isn’t it?

Fortunately there’s a jQuery plugin that let’s one create the effect of text scrolling upon clicking the target link. This scroll simulation looks just like scrolling by hand but happens automatically and much faster – within a second by default. In this way the user gets the sense of the amount of information going by but doesn’t have the time to get bored.

The plugin is called jQuery.Local.Scroll, it requires jQuery and another plugin – jQueryScrollTo which it encapsulates. Once jQuery and both aforementioned plugins are installed a function call that will activate automatic scrolling for all internal hyperlinks this simple:

Continue Reading

Apr
29th

Five ways to improve your CSS.

Anyone can write CSS these days, there’s even software that can do it for you. But how good will this CSS code come out to be? Here are five bits of advice to make your CSS code better.

1. Reset

Reset the settings in one way or the other. You can adopt existing solutions ( Eric Meyer, YUI), or you can create your own. The choice is yours.

The methods include simple removal of all fields and tabulations in all elements:

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

The aforementioned existing solutions are impressive, but in some opinion seem excessive. I can imagine you resetting all the settings of all elements only to set them again later. If you do choose to use on of the existing solutions, don’t copy the complete CSS file. Instead, shape it to best fit your project.

And please, don’t do the following:

Continue Reading

Apr
16th

The Future of CSS

With all the information about future enhancements of CSS, including animation, transformation and alike, it would be nice to have conceptual discussion to shed some light on the subject.

CSS has been around for 12 years. It was conceived and developed as a method of describing the documents’ appearance. A lot of time has passed since then and the technology has seen many changes and augmentations. The current W3C compliant version is Level 2.1, adopted in 2006. Level 3 is in development (draft) and is much anticipated by many developers.

There are many rumors and assumptions around the future of CSS, their number is growing – some of them end up in heated discussions on various forums. Actually, if half of the suggested changes gets implemented – CSS will become a (fully featured?) programming language for the visual component of web documents.

Continue Reading