Where to start

xHTML

To begin with let us take a simple layout with content area and sidebar, there is nothing special. We use two examples of boxes, one with a scroll bar, and one - no. Here is the entire markup:

All very generic. We keep our eyes on the code-boxes:

Boxing without illumination

You need only insert jQuery, Chili, and the script in the header and edit source code in these places.

CSS

The stylesheet is also very basic, nothing special in it. The code is marked on what to look out for in this case:

Little helpers

Here are two additional style sheets that can help speed up the process a bit. In the next demonstration, I will often use these two useful tables, but each time a reminder of this I will not. Just do not forget about it.

We have a file reset.css. As the name implies, is designed to drop the default browser styles. I personally like the version of Eric Meyer.

File 960.css - this layout system, which helps in just a minute to give the desired layout style for all current permits.

Downloading, inserting and activating Chili

So, we set up a demo page, and now it's time to put Chili. First, download the latest version. At the time of writing this is version 2.2.

Extract from the archive needed files: jquery.chili-2.2.js, recipes.js and language files (recipes). In our example we are using only JavaScript, and CSS, so we need js.js and css.js. Now, an example file structure is as follows:

Then insert jQuery, Chili Recipes, and the header:

Now activate Chili, setting the attributes of the class in pre tags and code:

In-Class 124 prescribes Chili begin processing an ordered list with the 124-th row. To begin with the first, simply place the In-. Class js says Chili, what language we want to highlight.

That's almost everything. One small caveat: in the end you want to check the numbers in ordered lists, as reset.css removed list-style. To do this, add a small line in main.css:

And there we have it! Highlighted code with a few simple steps and we haven’t written a single line of JavaScript yet. Now to the fun part of this article. :)

As you can see, Chili is working just fine. Seamless integration, instantaneous. But I personally do not like is the selection helper. The whole idea is good, but that's obviously pumped up implementation.

Therefore, we slightly change the code of Chili, that this helper did not show up whenever the user selects a source. Later, we even replace the function of its own.

Helper is regulated in line 504 file jquery.chili-2.2.js: [/ HTML]

To disable it, first return control to the caller:

That's all: Chili helper is disabled, and now we will replace it at their own functions jQuery.

Improving the readability of long strings of code

In our example, the second highlighted box has a horizontal scroll bar, since the width (width) box is not sufficient for the content. We want to make sure that boxing has grown in width when the user moves the mouse cursor on it, and returned to its original size when the user removes the cursor. You can even make this process a little bit of charm, adding a small animation using jQuery.

For a start it is important to make sure that we put the script in the header to Chili. So we will make sure that the script will work with the original DOM. Chili can later modify it.

Problem

How to determine if there is a box horizontal scroll bar or not? Of course, first comes to mind is to use the width () in the block . If the width is greater than

, then it should have a scroll bar. Intuitive argument, but it will not work, because to read the actual width of the block  impossible. Here is an example and its results:





The result shows that the width of the block even smaller than the block - because of the margin-left.




The problem with the width of the horizontal scroll bar


And then do not help either reading innerWidth (), or plug-in Dimensions.


Solution


To determine whether or not the horizontal scroll bar at the block 
, do not need to know the width and height of the blocks and 
 ! Let's try this for this example:



The result:


The output parameters of heigh

Hence we see that the second box, which is a scroll bar, the height of the blocks is different! Additional height unit attaches itself 
 scrollbar. Thus we get the formula: if the height is greater than height 
 , that boxing needs to expand.



Code




Now divide this small script on the elements that are also interesting.



First, save the original width of the boxes that was not static values??. The advantage is that since we can change the page design and width of the box without touching the script.



Now think how much more room to expand the scope of the code right.



Animation we run only if we are still at the starting point of the original width. If we are in the animation, then re-run it is not necessary.


That's it, now expanding boxes when the mouse cursor. A little disappointed that this feature does not work in IE, since the scroll bars do not give extra height. But I think that those who are seriously interested in the source code, not really zhaluyut IE. But even if they use it, they just have to scroll manually, which is unlikely to spoil the impression of the site.




Improved ease of use with the Plain Text




Since we have removed from Chili selection helper, the user has become difficult to select and copy the source code. In some browsers there is no problem, but others have copied and line numbers. The result is a mess, so try to make the function more user-friendly.




We need to make the text area of the source code appear only when needed and changed places with the highlighted box. This is done using the following code:





Again, we divide this piece of code to the interesting part.





Here, we roll all 
 (boxes). Before the unit 
 put a link the user to switch between the box and text area. First next () is boxing, and the second - the text area. If the box is visible, then we will hide and show the text area, and vice versa. Every time we change the link text that the user understand what happens when you click on it.




Naturally, we can and need to set the text area style through CSS:



Now the text area is hidden by default and has the same width, line-height and margin, as well as boxing.



Conclusion



Looks cute, right? A few simple steps and we got comfortable and easy to read box with Chili and modified code jQuery. Do not hesitate to voice their comments, suggestions and questions.