Prototype and jQuery conflict resolution. Prototype JavaScript Library interferes with jQuery.

I experienced this conflict quite recently when I was working on WordPress Featured Articles Plugin. Normally jQuery.noConflict() comes to the rescue but not in my case. And the reason being - prototype was already interacting and was included at the top, so it was already using the $ variable.

This conflict causes the creation of the jQuery object to fail.

 

All the following errors are related to this conflict and you might get one or all of the following while using Prototype (Scriptaculous) and jQuery -

jQuery is not defined

$ is not a function

$ is not defined $(document).ready(function(){

Component returned failure code: 0×80040111 JavaScript error

uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMViewCSS.getComputedStyle]” nsresult: “0×80004005 (NS_ERROR_FAILURE)”

What can we do to fix this?

You can try moving the jQuery.js to top and than use jQuery.noConflict().

If that is not an option you can do the following -

IMPORTANT - Do not use [REPLACE ALL]

• Edit prototype.js - find where it defines function $() and change the name to function $$$()
• Still in prototype.js, carefully replace each occurrence of $(…) with $$$(…), but don’t touch anything which says $$(…)
• Edit each of the other *.js files (e.g. effects.js) and carefully replace each occurrence of $(…) with $$$(…), but don’t touch anything which says $$(…).
• That is it.

And just in case you have trouble doing the above, Following links point to already edited prototype.js and effects.js. Please remember all the references to these files must start with $$$ instead of $.

Download - Prototype.js

Download - Effects.js

Hopefully this article will help some of our fellow coders and save them some time and frustration. Happy Coding guys :)

PhoneGap - open source framework for mobile development with JavaScript.

The creators of PhoneGap think it’s nonsense that developers have to write the same app in several different programming languages to reach the widest swath of mobile phone customers, so they developed an open source, cross-platorm framework that bridges the gaps among them.

“PhoneGap is an open source development tool for building fast, easy mobile apps with JavaScript. If you’re a web developer who wants to build mobile applications in HTML and JavaScript while still taking advantage of the core features in the iPhone, Android and Blackberry SDKs, PhoneGap is for you,” reads the Web site.

To get an idea of the types of mobile phone features PhoneGap supports currently (more are on the way), take a look at this quick reference chart the creators put together:

PhoneGap is the Adobe AIR of the IPhone, Blackberry, Android, Symbian and Windows Mobile. Just like Adobe AIR enables web developers to build Windows and OS X applications using the HTML and CSS skills that they know and love, PhoneGap allows web developers to build applications for the mobile devices with web technologies while taking advantage of the native mobile phone API’s.

Using PhoneGap, a developer need not write any Objective-C code and yet they can still have a proper app installed that is essentially a slightly customized PhoneGap application that sports a custom icon and a certain URL where application lives online (very much like AIR). When a user starts PhoneGap it essentially creates a browser on the mobile device and navigates to the specified URL where the author of the web page can access that particulars phone’s API through JavaScript like this:

getLocation();

//GAP will invoke this function once it has the location
function gotLocation(lat,lon){
    $(’lat’).innerHTML = “latitude: ” + lat;
    $(’lon’).innerHTML = “longitude: ” + lon;
}

Or access the accelerometer data like this:


function updateAccel(){
    $('accel').innerHTML = "accel:"+accelX + " "+accelY+" "+accelZ;
    setTimeout(updateAccel,100);
}


Seems like RIM needs some applications built on this API. And then all those RIM users might be able to run all the cool iPhone apps on there blackberries.

For a quick introduction to PhoneGap, watch this three-minute video:

Will JavaScript decide the future and ultimately the winner of modern browser wars?

The Internet is fast growing from a Web made of static pages into a Web that also includes applications that perform computational tasks and that people interact with. In other words, browsers of future have to process data as well as load pages at a much faster speed and in a more efficient manner.

Microsoft’s dominant browser share - 67 percent according to Net Applications figures reflects the current usage of IE but will Microsoft be able to maintain this market share in the future? That is the million dollar question and will depend on a number of different events that will unfold in future. Lets discuss some of the possibilities here -

Is performance the key area?

All the major browser players consider JavaScript performance as a major part of their competitive attack, even to the point of naming their JavaScript engines built into their browsers: Chrome’s V8, Firefox’s TraceMonkey, Opera’s Futhark and upcoming Carakan, and Safari’s newly branded Nitro, which is Apple’s version of WebKit’s Squirrelfish.

Though IE lags all these rivals in JavaScript performance, Microsoft does care about performance overall and JavaScript performance specifically. Even as Microsoft launched a brand-new browser version, Internet Explorer 8, on Thursday, however, it’s also clear the company has a big difference of opinion about the matter.

“We’re going to keep making the script engines faster (but) right now it’s not clear how many people are gated by script performance,” said IE general manager Dean Hachamovitch in an interview. “JavaScript comprises a small portion of how fast a Web page will render. It is a piece, but by no means the holy grail.”

Because it’s easy to measure, JavaScript performance has “become shorthand for browser performance,” Hachamovitch added. Microsoft has begun touting its new test of page-loading speeds in which IE 8 fared better overall than Firefox 3.0.5 and Chrome 1.0. A supporting slow-motion video (click “Case Study Videos, then Performance Testing) shows page-loading speeds down to the hundredth of a second.

Likely not coincidentally, though, Google offered its own propaganda the day before the IE 8 launch. Google launched its Chrome Experiments site to tout what can be done with high-performance JavaScript and to promote its browser. While Chrome generally runs sites’ applications with aplomb, that isn’t the case for IE.

“The faster we make JavaScript, the more interesting and interactive the Web becomes,” said Mike Beltzner, Mozilla’s director of Firefox.

“JavaScript in Chrome almost reaches the speed of Flash,” said programmer Mr. Doob, who wrote Chrome Experiments called Ball Pool and Google Gravity, in a blog post about them this week.

What about the cross browser issues?

In an interview, Mr. Doob - a Flash programmer who learned JavaScript just for the Chrome Experiments and declined to give his real name said JavaScript is about three quarters Flash’s speed. There are weaknesses, though. For one thing, he found JavaScript developer tools to be primitive. For another, JavaScript varies from one browser to the next.

“The main benefit of ActionScript is that it will look exactly the same in any browser and in any version of the browser, even on IE6! With JavaScript it depends on which features the browser supports so you would spend more time making sure the project looks good in all the browsers than actually developing the project,” he said. To make his Chrome experiments work on other browsers, “I’ll have to introduce some hacks which will slow down performance and will dramatically affect the user experience.”

For now, performance is the top priority. At least until JavaScript gets fast enough that other problems move to the fore.

“All it took was a little competition to get other companies focusing on this problem,” said Darin Fisher, a Chrome engineer at Google. At some point, “Suddenly this problem won’t be a problem anymore and we can move on to the next issue.”

So what happens in future is a thing to wait and watch I guess.

Fantastic new Javascript debugging tool with IE 8 and its list of features hard to live without

I have heard web developers complaining about earlier versions of IE for being non compliant and also how hard it is to debug CSS and JavaScript in IE. Well the good news is Microsoft has listened and with Internet Explorer 8 Microsoft has launched Developer Tools (Developer Tools are available for a while now) and that sets a new era in JavaScript and CSS debugging.

Download IE 8 Beta Version here

You can open the Developer Tools by pressing F12 or by clicking the Developer Tools option in the Tools menu on the Windows Internet Explorer toolbar.

IE8 is a standard compliant browser and that means that some of the sites you may have developed prior to IE 8 may have to be reworked to be standards compliant. Don’t worry though … IE 8 has a much needed “Emulate IE7″ button that you will turn on for most of your browsing. And this button renders the site as if its rendering in IE7. Well, the real magic comes in when you launch the IE 8 Developer Tools and realize just how much power there is in using them on a site.

 

Here is a list of some of the awesome features of Developer Tools in IE8 -

JavaScript Debugging

The Script mode allows you to debug scripts on your Web page by allowing you to step through the code, insert breakpoints, and inspect variables. By providing a built-in lightweight debugger that lets you set breakpoints and step through client-side script, the Developer Tools enables you to debug your scripts without leaving Windows Internet Explorer. All the standard debugging features you expect in server side technologies but actually debugging client side JavaScript. This will end up being a life saver if you use JavaScript often.
Path : Open Developer Tools -> Click Script Tab -> Set Breakpoints and Refresh the associated web page

Color picker

It allows you to click the color picker then select any point on the web page and be told it’s Hex value. This is a tiny utility but is very powerful wehn it comes to web development and CSS designing.
Path : Open Developer Tools -> Click Tools -> Show Color Picker (Ctrl + K)

CSS Sandbox 

Every change you make to the HTML or CSS is immediately reflected in the browser. This makes it easy to take a page and edit the CSS or HTML on the fly. Once your happy with the changes you can just click to save the files.

JavaScript Code Profiling

You can view all of the JavaScript functions and the order they were run in during the profiling session. It details how long each function took, the line number of the code that was executed and if you click on it, it takes you to the source code that was being executed. You can use this mode to investigate your Web site’s execution time using information gathered by Profiler as the Windows Internet Explorer renders your Web site. This information is helpful to target optimizations if a piece of code is causing excessively long execution time, or a bottleneck.
Path : Open Developer Tools -> Click Profiler Tab

Layout View (Worth a million)

If you are not able to figure out the layout of a particular object. Click on the html code or select the element by clicking on it and then switch to Layout View to be given a graphical representation of the Layout.Layout provides info on margin, padding, spacing and border for the selected object.
Path : Open Developer Tools -> Click HTML Tab -> Select the HTML element -> Click on Layout button on the right hand side icon bar at top

Test web page on different browser resolutions with one click

Resize the browser window to either: 800×600, 1024×768, 1280×768, 1280×1024 or set up a custom size. This enables you to test web pages in different screen resolutions quickly and easily.
Path : Open Developer Tools -> Click Tools -> Resize

View Image related info

Click on Image > Show Image Sizes for all the image sizes to be shown onscreen, so you can easily see if any are larger than they need to be. Bug Alert: You will not be bale to see the size though if image area is lesser then the text display for size. There are other great options if you click on Images on tool bar like - View Alt text, File locations, Dimensions etc. 
Path : Open Developer Tools -> Click Images -> Show Image File Sizes

Page Element Highlighting (This feature kicks ass)

You can make IE Visually outline Tables, Divs, Table Cells ,Images or any element on the page.
Path : Open Developer Tools -> Click Outline

And remember Developer tools is a part of the browser and not an add-in. I am not going to compare Developer Tools with Firebug. But I must say that one thing about Firefox. It forces Microsoft to try to do better stuff, even if it means copying features and interface design in some way. Without Firefox, I bet notepad would still be the source viewer of IE.

I am a long-time user of Firefox and Firebug and can not imagine developing without it, but the fact is that I usually have to support IE and Developer Tools seems similar to Firebug in its capabilities and is a welcome addition to the IE offering. Plus, You should embrace all user agents as much as possible.

We as developers do welcome this fantastic upgrade by Microsoft.

Right Flyout for Nice menus (Drupal) not showing for IE6

There seems to be a bug with Zen 3 column layout for Drupal and using it with Nice Menus created by jakeg.

I am using a Zen 3 column layout for one of my clients. While the layout was working okay, I was experiencing problem with Nice Menu not appearing on hovering over parent nodes in IE6. Nice Menus were working as expected both for IE7 and FF though.

Nice Menus does provide a JavaScript file to make the menus work with IE6. Though the JavaScript file was working okay, I was still not able to get the hover menu.

After wrestling with CSS that came along with Nice Menus and by stripping the page off with all the unnecessary DOM, I concluded that there is nothing wrong with Nice manus but the page layout itself might have a CSS bug.

That is after I started debugging layout.css that I found the real culprit. I am pasting the solution here just in case any of our developer friends is having the same problem.

In layout.css file comment position:relative; attribute as follows -

#sidebar-left
{
   float:left;
   float:right;
   width:170px;
   /*position:relative;*/
   right:15px;
   padding: 0;
}

And that will do the trick. Please leave comments about other issues with Drupal and what you did to get rid of them, or email me if you need any help and I will try my best. Happy Coding.

Next Page »