Undolog.com

To produce truly captivating Tabstrip there is a technique that allows particularly suited to mediate problems between graphics and Javascript code. Let us first of all how to build a template in Photoshop for our Tabstrip:

Built a tab strip similar to that shown in the figure above, we use the tool for the selection of the cutting area to generate the form that will have our HTML table. The use of the table, in this case, is particularly pointed out - as we shall see, as it simplifies both the design and JavaScript code. We cut our Tabstrip thus as follows:

In our Photoshop file we have to consider all combinations of the tabs (tab). We then selected the initial card (cut 3), the intermediate points (cutting and cutting 5 7) and the final card is not selected (cut 9) with - if any - edge finishing (cutting 10 - optional depending on the design). Then just 3 combinations to solve all cases visual. As shown below:

Graphically speaking, you can arrange the cards in overlapping and staggered, as shown below:

A matter of taste and needs ... returning to the image complete with the three stripes for combinations Tabstrip, the last two are used to resolve borderline cases, cut them as shown below:

The cut 17 and 23 solve the two cutting edge cases: the first tab is not selected, selected last. The cut 19 is the opposite of cutting 5 and 7 of the cut, you saw earlier. The complete picture that we get and we can save for future design changes is as follows:

In order not to confuse us when we come to the part of Javascript, the name of the cuts is as follows:

• cut 3 = tabLeftFirstOn
• 4 = cut tabStripeOn
• Cut 5 = tabMiddleOnOff
• Cut 6 = tabStripeOff
• 7 = shear tabMiddleOffOff
• Cut 9 = tabRightLastOff
• 10 = Cutting topBg
• 17 = Cutting tabLeftFirstOff
• 19 = Cutting tabMiddleOffOn
• 23 = Cutting tabRightLastOn

To accomplish this we need now a HTML code, CSS code and Javascript code as a manager clicks on the tab cards. HTML code is trivial but articulated. So I propose a PHP class that can generate it every time we need. In essence it is about creating an HTML table enclosed in a DIV with ID certain details that we need then for the execution of Javascript code and enclose the design using CSS. The generated HTML - just to get an idea - a Tabstrip with four cards is as follows:

The PHP code that generates the HTML is as follows:

To use the class just this snippet:

Let us define the styles:

The JavaScript code is very bland, written at a time when far away prototype.js does not exist. Also in the example below I use a library of effects (not even exist Scriptaculous ) still valid, then the line that uses the transition you can change the Opacity to whatever you want:

In practice the rows from 36 to 46 may be replaced with whatever you want, even a display = "none". The code is outdated, at least compared to the new techniques of unobtrusive JavaScript (today we would write it differently). But the part that remains interesting and relevant and configuration of the HTML table that manages the strip. It allows a high level of graphics performance, unlike some other methods that - essentially - Tab deal the cards as a simple DIV next to each other.
An even better way would be to use the z-index (stacking order) present in the CSS styles, so as to manage the overlay graphics. Unfortunately, to date, is a technique very difficult to implement because of the differences between browsers that make it unstable in fact, except in rare circumstances.
Soon I will make a more modern version ... if you have doubts or questions here!

Continued ...

After fixing the graphics Undolog and have made ​​the final touches to a few titles (see sidebar), I enjoyed the couple to use prototype.js and Scriptaculous , in a non-intrusive (Unobtrusive)! Here's a video (but you can try it for yourself right here ) With the nice feature that I added to the sidebar Undolog, which not only make it more enjoyable I hope makes it even more functional!

The code I used is very simple:

Also note that the first time you load the home page of the panel is automatically closed Undolog Categories - identified by ID tit_category :

The titles on the sidebar are defined, then, in this way:

da rendere dinamici, grazie alla funzione doppio-dollaro ($$) di Prototype.js – di cui abbiamo già parlato… Through the class dropdown titles are identified H2 to make dynamic, thanks to the double-dollar ($ $) of prototype.js - we already talked about ...

Continued ...

Why switch to Apollo to display HTML and dynamic content when a browser already allows it? Why use Joost Net TV to see if a browser already allows it?

Why has not the producer of two simple browser functions within them:

• Windowless windows
• P2P Object

Windowless windows

This simple feature would make the most of the HTTP connection and make it really useful browsers. To open windows (pop-up in practice) with only the title and no border, just in case in transparency, increase the production of widgets to be exploited with the normal browser, like what he does now Apollo . With a careful study on the safety (as I think it is now the only reason for this limit) would open up very interesting scenarios.

P2P Object

As we all know by now all browsers support the object XMLHttpRequest , which has given rise to an endless amount of so-called Ajax applications. This object can be accessed via JavaScript, is able to provide an HTTP channel - parallel - scriptable client for both IINV and receiving data.
Sooner or later, as anticipated in various other blog, Adobe will insert a P2P in Flash. Why not do the same thing in the browser? An object of this type together with Windowless features allow you to create applications like Joost-without installing anything on your machine, ensuring cross-compatibility worthy of the Internet, thereby increasing the efficiency of production (now Joost is developed for each system operational, which is quite heavy - both in money and time - in fact, the beta will follow ...).

RSS FEED short windows with text, audio and video from the place where we want on our desktops, in true W3C standards. Open TCP channels are directly from JavaScript, with endless possibilities of data exchange. Clearly, the will is little and the "crime" is high, hackers, spam and phishing are lurking and moves of this kind terrorize a bit 'all ...

Continued ...

I state that we are talking about WordPress 2.0.6. If you try to set the categories in "combo" - dropdown - eye on the site of the proposed indications WordPress . When you make a HTML form with a SUBMIT button must be careful not to set the name of the input tag just "submit", worth ruining everything just trying to submittare the FORM via Javascript.

On the site of WordPress is proposed the following code:

Note that the submit button has the name attribute set to "submit". If you try to run at a Javascript code like this:

The interpreter gets confused because it does not distinguish the method submit () element "submit", which is a button! The solution is simple: call it what you will but not the button "submit"!

The code I used to display the categories in dropdown mode I is as follows:

I also had to modify the kernel of WordPress (which should not be done ...). In the file "template-functions-category.php" I modified the function dropdown_cats () when preparing the select tag I added:

Here is the piece of code to track:

One thing the function does is set the combo on the chosen category reload the page when I have time ... just look at him better.

As known to all, for the sake of completeness, I note that action was needed with a non-intrusive code (Unobtrusive) instead of entering directly into the construction of the onchange of the combo. In addition, the categories displayed in the combo are not accessible for browsers with Javascript disabled. However this can be solved by using the noscript tag in the sidebar and view the categories as a list of links - default mode of WordPress - adjustments that will soon .

Continued ...

The insertion of objects (especially Flash Objects) in web pages has recently become an often stressful. In other posts we have already addressed the topic of how to detect Flash and insert pages appropriately. As we talked about Unobtrusive techniques, we mark two well-known script can detect (and eventually install) and insert Flash objects on a page, in a very unobtrusive and afficiente: SWFObject and UFO .
Both scripts have essentially the same features and the same operation. The approach is to replace it with a particular tag using Javascript on your browser. As we know, this procedure eliminates the problem of activation of the Flash object imposed by Internet Explorer, however, implies that Javascript is enabled on the target browser.
Both scripts do not use any external libraries such as prototype.js for example. The most important difference between the two is that SWFObject is called when the TAG to be replaced is already loaded on the page, not exactly how Unobtrusive. Here is an excerpt of code that shows the call sequence:

UFOs , however, allows un'approccio much more in line with the classic Unobtrusive script. The replacement of the TAG is in transparent mode without loading abbligare sequences, as shown in the example below:

In the source code of the script of UFOs , in fact, you can immediately use - more appropriate - an event that careful loading the page before you complete the replace operation; approach therefore extremely well suited to most scripts are not intrusive.

Continued ...

Among the various libraries - or set of libraries (real framework), dedicated to Ajax, HTML and Web 2.0 interface extension that I've seen, Ext is definitely worthy of note. The website and documentation are well done and organized, also the demo is not to be missed. The graphical user interface, compatibility with Prototype and Scriptaculous , and Yahoo Utils impletazione of, at least make it an interesting system! Beware though the license! Despite presenting himself as open source and free for personal use, requires a fee to enhance the use and care. The latter, in fact, is never to be underestimated in the framework of some complexity.

For documentation and demo click here .

In particular I mention this system, I'm still analyzing in detail, as it has been used to create Fresh Feed Reader , one of the sample applications provided with the release of Adobe Apollo Alpha (see Adobe Apollo Alpha Release ). Fresh, therefore, is example of a double of Apollo, which demonstrates its ability to leverage HTML and JavaScript at the most. Fresh, in fact, is not a pure Apollo, but uses the framework Ext - and then you need JavaScript and HTML - Apollo in the engine! Great!

Continued ...

Here is a new and interesting tool for the compression and the darkening of Javascript code (see also Reverse Engineering: the compressors of code ).
On the Web site of Dean Edwards , you can download the source code of this compressor JavaScript. Furthermore, the author has made ​​available the server versions for Microsoft. NET Framework version 1.1, Perl, WHS and PHP5.

Online is a working version available to try immediately , less complex - to be honest - one that I had made ​​long ago . Fact allows to compress the code with only two choices: the Base62 encoded, which obscure the code and Shrink variables, the optimizer variables.
Compared to the previous version have been fixed some bugs that, in situations of extreme hacks (and really interesting) as:

did not comply with the generated output. Now both are properly supported conditional comments from Microsoft, is the + / - in conditions such as:

As outlined in page Help , however:

Packed scripts successfully unpack on all browsers Should That support JavaScript. Only basic JavaScript functionality is used to decode the packed script.

Some browsers not may support the packer itself. The web interface Requires DOM supported. Legacy browsers will display disabled interface.

So attention to end-users and the type of browser support as always ... the rest!

Continued ...

In this post I would like to analyze the use of unobtrusive script from the point of view of the Web Designer. Normally, in fact, a script that is not intrusive towards the end of the navigator!
But it can also be used for the Web Designer?

Unobtrusive JavaScript from the perspective of the Web Designer

Putting ourselves in the shoes of a web designer can identify two categories of unobtrusive JavaScript: Unobtrusive Javascript true and pseudo unobtrusive JavaScript.

Both categories, however, are not completely non-intrusive (always from the point of view of the Web Designer). A real and complete unobtrusive JavaScript should not take any action on the Web page, but this is - for now - basically impossible. The minimal operation required during the installation of a script is, however, the inclusion of the inclusion of the script itself! It is, therefore, that this operation permissible - indeed - does not even require the web designer to make regular adjustments to the structure of the page. The simple placement of the inclusion of the script tag inside the head can be therefore considered non-intrusive.

The true unobtrusive JavaScript

The scripts of this type are the only ones that require inclusion of the script and not unobtrusive; claim any operation! Scripts of this type are, for example (the usual and oft-cited), Snap . Once you entered the code include the Web Designers must not engage in any further operation, as the script snap operates on standard tags.

Pseudo unobtrusive JavaScript

These are different from previous tagging as requiring further to run correctly. Examples of this type are Control.Tabs of Ryan Johnson to slide or library Lightbox JS . per identificare i link che devono essere modificati. Lightbox JS , in particolare, richiede addirittura la presenza esplicita sia di Prototype che di Scriptaculous . The latter solution, for example, requires the inclusion in the Tag A the attribute rel to identify the links that need to be modified. Lightbox JS , in particular, requires explicit and even the presence of Prototype that Scriptaculous . As indicated on the website Lightbox JS , the inclusion of the script should look like this:

The links that point to un'immmagine you want to view the system with Lightbox JS should be written like this:

In addition to identify a group of images, to add the ability to scroll forward and backward images, tags A be set as follows:

The need for such constraints is evident, there is no easy way to distinguish a link element (Tag A ) from another. In particular it is not possible to understand which element the designer wants to display in one way or another. Web Designer must necessarily indicate somewhat Tags and their behaviors. Are therefore required - intrusive - totally understandable, not at all diminish the usefulness and potential of these scripts. Only lead to greater detail and a few lines of code in over the Web Designer.

It is interesting, however, the double aspect of 'unobtrusive JavaScript, is analyzed in terms of both end-user point of view, Web Designer.

Continued ...

As we talked about it well in the previous post, it's time to talk about evil (joke), or at least highlight some shortcomings of the technique of unobtrusive JavaScript.
If unobtrusive JavaScript code is executed when the page is completely loaded, it follows that the greater the amount of data (HTML) that makes up our page, and more time to wait before our code is executed.

This can result in implementation delays and resulting in an annoying flicker effect if you are working on the visual elements of the page. Take for example the code used by Ryan Johnson to create objects TabStrip. If you look at the demo you will find that for about one second, when the page loads, you can clearly see a standard layout to be replaced immediately after the TabStrip objects. Reloading the page again, thanks to the browser cache, the problem tends to decrease (try to clean all your browser's cache to see the time).

All this must make us reflect on the limits of this technique. The same snap suffers from exactly the same slowdown, especially in the pages that are often extremely high as that of undolog.com . Loading the home page of this blog is clear that Snap runs a few seconds later, ie when the page is completely loaded.

By definition of 'unobtrusive JavaScript is difficult to resolve this problem in general. However, in developing a site owner can take some steps aimed at eliminating or reducing these defects. A fairly simple way is to create a sort of preload, an element frequently used in Adobe Flash. You can then set the body tag - which contains all the elements of the page - so that it is invisible, leaving the task of Javascript code to make it visible when it has finished - if any - changes to the DOM:

The unobtrusive JavaScript code at the end of its operations:

Solution, however, trivial and not always applicable. Moreover, even if we somehow solved the problem of the first caricameno, navigate in such a manner in the long run could be really annoying for surfers. Do not be intrusive, therefore, has a price to pay. Even operating at the object level, for example by setting only the interesting elements in the hidden mode, the fact that the code starts at the end of loading the entire page with it inevitably leads to the exact same problems.

Continued ...

As promised here are some concrete example of unobtrusive JavaScript, versatile and powerful tool if used properly. On Site / Blog Ryan Johnson you can download two really great example of unobtrusive JavaScript:

• Control.Tabs: Unobtrusive CSS Tabs for Prototype
• Control.Modal: Unobtrusive CSS Modal Windows and Lightboxes for Prototype

Ryan Johnson, in his script, the library uses Prototype , like many of the rest. He has also written some extensions to the relatively Prototype , then introduced - in a different form - in the latest version of the library.
Using Prototype to illustrate the operation of unobtrusive JavaScript code is usually more comfortable - as we shall see later, but here's a crude example that requires no external libraries. We begin by recalling that the concept behind the Unobtrusive JavaScript is to start from any HTML page (standard and not necessarily written by us - more important strong point) and use Javascript to make some changes.

Schematimamente the concept is to perform a function that parses the HTML, then traverses the DOM and in particular points to add or change functionality. Normally two methods are exploited to execute Javascript code to load a page: the first is what you do not enclose the code in any function, and then let the browser execute code immediately uploaded to the point where the call appears:

The same result is obtained by including the code:

However, when it must operate on the DOM of a page that it assumes a fully loaded, that all the TAG of the page is present and available to be tracked. So the best solution becomes the one to be sure that the page is complete. This is possible by engaging the body tag onload event for example, which is released when the page load is complete.

Be avoided, of course, the canonical solution that would be an understatement to call it intrusive:

Another technique, more coarsely and equally intrusive (as would force the end user to place the code in a particular spot), is to put our script at the end of the document before the closing body tag, now obsolete technique and used in rare cases (see Google Analytics!).

Even better is to use the method below:

Even this piece of code is enclosed in a function. It will add an event listener for the load event of the window, calling our function miafunzione() . . Modern browsers, like FireFox for example, will use the function addEventListener() defined in DOM Level 2 specification, while Internet Explorer will use its proprietary function attachEvent() . However we are not at perfection in this way, in fact, replace all - any - onload events created by other scripts, which is not really "non-intrusive."

To quickly resolve the issue, that because of the different behavior of the browser would be least complicated to explain here, it is convenient to use as libreirie Prototype providing un'elengantissimo method to overcome the problem:

The syntax is very obvious and spectacular! The advantage for those who had not understood, is that you can write:

On loading the page will be shown before the alert "Hello 2" and then alert "Hello 1". Basically you load in a FILO (First Last Input Output) a stack, while ensuring the execution of all events attached to the load of the document, exactly what you wanted to get. In this way a page can load - virtually - endless unobtrusive JavaScript that hook to load the document.

But what can be done with this technique? Many interesting things. An example that we can comment (see also Prototype: The use of the double dollar sign ($ $) ) comes from Tobie Langel . With a few lines of code and downloading libraries Prototype and Scriptaculous you can give a nice effect to the classic anchor of our pages. First create an HTML page with the following code:

Include the page:

Thanks to "use Event.observe() function and two-dollar ($ $) you can easily modify the behavior of the classic anchor. In this case a new function is hooked to upload the HTML page. When taking the load event is traced all the links in the DOM (Tag <A>) with href that begins with the pound sign (#, excluding the one with only a pound!). To these elements is a function attached to the click event, similar to what was done with the load of the document. At this point comes into play Scriptaculous effect that produces a scroll to the item from our punat links - changed!

Continued ...