JavaScript

Fixing the IE6 Whitespace Bug

Rob Glazebrook post an article on CSSNewbies site in which he shows how to solve the problem with the IE6 whitespace bug. He gave several various solutions of this problem in the article. Here's one of it:

«This is the most arcane of all the solutions, but to be honest, it’s the one I’ve used most often in the past – because I didn’t know about the other solutions! If you remove the white space from your code, this prevents IE from having anything to screw up. Specifically, if you remove the white space between your closing list item and the next opening list item, and your last closing list item and the end of your list, this will fix the problem. So you just need to turn this:

<ul>

<li><a href="#">First Item</a></li>

<li><a href="#">Second Item</a></li>

<li><a href="#">Third One!</a></li>

</ul>

Into this:

<ul>

<li><a href="#">First Item</a></li><li>

<a href="#">Second Item</a></li><li>

<a href="#">Third One!</a></li></ul>

Like I said, this isn’t exactly an elegant solution. But it does work, and it can be useful in places when CSS isn’t entirely reliable (like in HTML emails).»

You can read the full version of this article with over articles on the CSSNewbies site.

Javascript Tutorial - Continuous Pagination

Michael Kuehl post an intresting tutorial about creating continuous pagination on youw web sites. He writes the following:

«Woah there, what's this! A Javascript tutorial!? Yes, I know its been a while since a Javascript tutorial graced the pages of Switch On The Code - but what can I say? I kind of got bored with writing them. And so, after a few month hiatus (and a couple fresh ideas for tutorials), they are back.

So what is on the plate for today? Well, we are going to take a look at how to implement continuous pagination in javascript. What is continuous pagination, you ask? That's a very good question, and it's actually a little bit difficult to describe. Say you have a list with a large number of entries - much more than you would want to load and display at once. The general tactic would be to paginate them - display 10-20 at once, and then have the user click 'next' to see the next 20, and so on and so forth.

ut if for the most part, the user is just quickly scanning through these entries, this can get annoying. The user has to click and wait for the next batch of entries to load every time that they are done with the current set. Continuous pagination gets rid of this problem. As the user approaches the end of the entries currently displayed, the next entries are requested asynchronously and appended to the end of the list displayed to the user. This way, the user never has to do anything directly to get the next entries - they are just always there waiting in the list when they are needed! »

You can read more on the Switch on the Code site.

Processing.js Aftermath

John Resig post one more article about recently released Processing.JS. In this article he collected lot of links on various resources for programmers who are starting using the Processing.JS library. John writes:

«t's been fascinating to watch the outpouring of interest and creativity that's surrounded the recent release of Processing.js.

First things first, the project has been moved over to Github. This will help with the collaboration/patching process going forward.

Source Control: http://github.com/jeresig/processing-js/tree/master

A number of patches have already been provided by active users and have been merged into the main code base (which can be found in the project history).

Some of the changes that were made:

  • Virtually all of the demos now work in Webkit (save for the text rendering ones) in addition to Firefox 3.

  • Chris Davenport provided support for QUADS, QUAD_STRIP, TRIANGLE_FAN, and TRIANGLE_STRIP implementations in beginShape/vertex. Also endShape(CLOSE) support was added.

  • Renato Formato provided a patch for handling curveVertex and curveTightness correctly.

  • A patch from Felipe Gomes includes the addition of the LEFT/CENTER/RIGHT and mouseButton globals. The contextmenu is now prevented, as well, from right clicks. Additionally, a new init.js file was created (which is more robust than what was initially provided).

I've pulled together a quick round-up of the different, interesting, posts, demos, and projects that I've found, relating to Processing.js.»

You can read the full version of this article in John Resig blog.

Making Element Selection and AJAX simple with DOMAssistant

Robert Nyman writes about using the DOMAssistant library in the AJAX project to make the development project more easy. He write:

«The idea behind DOMAssistant is to provide a lightweight JavaScript library, to help you out with your everyday scripting tasks. One of its strongest parts is having the fastest and most consistently accurate CSS selectors out there, which is the common starting ground for almost every scripting task there is in today's modern world of element referencing.

Just like the Safari web browser and its continuous gained success, we believe that there is a great interest for having something perform as fast as possible, and having a small yet rock solid and easy-to-use features. For those needing to extend on that, DOMAssistant has a very powerful yet simple plugin mechanism to add the specific functionality you need.»

Source: DZone

Processings.js

John Resig released a new project Processing.js. He writes in his blog:

«I've ported the Processing visualization language to JavaScript, using the Canvas element.

I've been working on this project, off-and-on now, for the past 7 months - it's been a fun, and quite rewarding, challenge. The full scope of the project can be broken down into two portions:

The first portion of the project was writing a parser to dynamically convert code written in the Processing language, to JavaScript. This involves a lot of gnarly regular expressions chewing up the code, spitting it out in a format that the browser understands.

It works "fairly well" (in that it's able to handle anything that the processing.org web site throws at it) but I'm sure its total scope is limited (until a proper parser is involved). I felt bad about tackling this using regular expressions until I found out that the original Processing code base did it in the same manner (they now use a real parser, naturally).»

You can read more in John Resig blog.

Ultimate JavaScript Scroller and Slider

One more useful scripts from Michael Leigeber. This time Michael created a lightweight content slider which can be useful for creating various news tickers section scroller and image gallerys. You can view the live demo and get the soyurces fom the Michael Leigebers blog.

Qualified Selectors in jQuery

John Resig tells in his blog about using CSS qualified selectors in jQuery. He write the following:

«Shaun Inman wrote a quick post on what he's calling "CSS Qualified Selectors". The syntax that he's proposing looks something like this:

a < img

Which says "Find me all a elements that have an img element inside of them."

To those of you who are familiar with jQuery we've had a similar selector, :has(), for quite some time:

$("a:has(img)")

If you're totally bent on Shaun's syntax (don't care for :has, I would assume) here's the two-line plugin that'll give it to you in jQuery:

jQuery.parse.push(/^\s*(<)(\s*)(.*)$/);

jQuery.expr["<"] = jQuery.expr[":"].has;»

Source: John Resig Blog.

Free Chapter from Douglas Crockford’s “JavaScript: The Good Partsâ€

Tou can download the free chapter from new Douglas Crockford's book about Javascript «Javascript: The Good Parts». Here’s how Douglas opens the discussion of inheritance in JavaScript:

«Inheritance is an important topic in most programming languages.

In the classical languages (such as Java), inheritance (or extends) provides two useful services. First, it is a form of code reuse. If a new class is mostly similar to an existing class, you only have to specify the differences. Patterns of code reuse are extremely important because they have the potential to significantly reduce the cost of software development. The other benefit of classical inheritance is that it includes the specification of a system of types. This mostly frees the programmer from having to write explicit casting operations, which is a very good thing because when casting, the safety benefits of a type system are lost.»

Source: YUI blog.

Pure JavaScript HTML Parser

John Resig write about his new project pure JavaScript HTML Parser. He writes:

«Recently I was having a little bit of fun and decided to go about writing a pure JavaScript HTML parser. Some might remember my one project, env.js, which ported the native browser JavaScript features to the server-side (powered by Rhino). One thing that was lacking from that project was an HTML parser (it parsed strict XML only).

I've been toying with the ability to port env.js to other platforms (Spidermonkey derivatives and the ECMAScript 4 Reference Implementation) and if I were to do so I would need an HTML parser. Because of this fact it became easiest to just write an HTML parser in pure JavaScript.

I did some digging to see what people had previously built, but the landscape was pretty bleak. The only one that I could find was one made by Erik Arvidsson - a simple SAX-style HTML parser. Considering that this contained only the most basic parsing - and none of the actual, complicated, HTML logic there was still a lot of work left to be done.»

You can read more about this project in John Resig blog.

Compression using Canvas and PNG-embedded data

Jacobs Seidelin writes about JavaScript code compression and storing it in PNG images . He writes the following:

«I got this idea to stuff Javascript in a PNG image and then read it out using the getImageData() method on the canvas element. Unfortunately, for now, that means only Firefox, Opera Beta and the recent WebKit nightlies work. And before anyone else points out how gzip is superior, this is in no way meant as a realistic alternative. Earlier today I posted about a compressed 8 KB version of the Super Mario script using this technique. Here are some more details about what is going on.

Now, the image above may look like noise to you but it is actually the 124 kilobyte Prototype library embedded in a 30 kilobyte 8 bit PNG image file. In a lossless image format, you could in theory store any kind of data in the pixel values, for instance Javascript code as we're doing here. And since many image formats offer some form of compression we can take advantage of that to shrink our code to a smaller size, provided that we are able to extract that data again.»

You can read the full version of this article on nihil logic.

JavaScript Color Fading Script

Michael Leigeber has created one more small but useful script. This script intended for creating various color fading effects. Michael writes:

«This lightweight JavaScript allows for easy color transitions. Add fading effects to tables, divs and more. You can target an elements background, border or text color.

Below is the command to call the function…

colorFade('divid','background','ece7b4','f9bcbc',25,30)

The first parameter is the id of the element you are targeting. The second is the property to fade which can be the background, border or text. The third is the hex value of the starting color. The third is the hex value to fade to. The fourth and fifth are both optional. The first is the the number of times to divide the color difference and the last is the transition speed.»

Source: Michael Leigeber blog.

Create an Ajax-based IM client

Nicholas Chase post an intresting tutorial about creating instant meseenger on JavaScript.

During this tutorial , you will learn how to create a Web-based instant messaging client using the Prototype Javascript library and a Jabber server. When it's complete, you will be able to choose among users who are on your buddy list and send and receive messages through the Web page to users on traditional IM clients. You can find the full version on of this tutorial on IBM developerWorks site.

Dynamic Inline JavaScript Form Validation

Michael Leigeber write small but intresting script for dynamic inline form validations. He writes: «This lightweight form alert script allows you to easily add attractive validation messages to your forms. There is no markup to add on your existing page. Just call the inlineMsg() function when you wish to display a message. The position of the form element (or any other element) is dynamically calculated.

Call the function as follows…

inlineMsg('name','You must enter your name.',2);

The first parameter is the id of the element you wish to display the warning in relation to. The second is the string you wish to display in the message box. You can include HTML, just be sure and escape when necessary. The third parameter is the time to display the message in seconds. It is optional and if left empty will default to the MSGHIDE variable in the JavaScript which is initially set to 3.»

Source: Michael Leigeber blog.

Thoughts on querySelectorAll

John Resig post an intresting article about new Selector Api specification.In this article he disscused three following problems:

  • DOMElement.querySelectorAll returning incorrect elements

  • Combinator-rooted Queries

  • Error-handling

Highlight JS.NET 0.7

HighSlide JS.NET 0.7 released with following features:

  • Updated embedded Highslide version to 3.3.17.

  • Improved caption rendering, using inline caption divs. This should result in more semantic markup, pairing your captions with your images.

  • Added HighslideManager property: NumberOfImagesToPreload. This allows you to control how many images are automatically preloaded.

  • Added HighslideManager property: FadeInOut. When true, this fades the enlargement in and out as it’s resizing.

  • Added HighslideManager property: RenderScriptInPlace. This allows you to control where on the page the Highslide JS script is inserted in your page.

  • Updated download to include a sample site, to make it a little easier to get up and running quickly.

Source: HighSlide JS.NET.

Syndicate content