coder and technology lover
Posts tagged jquery
jQuery is not a magic… if you think so, you shouldn’t use it!
Apr 28th
I decided to write this post, because I revised a Javascript code realized by a colleague and it was simply terrifying!
It was bad formatted, it had HTML style comments (<!- – - ->) with insignificant or unclear content, missing var declarations and so on.
What I would like to say is that, in order to use jQuery and similar js libraries a mere HTML knowledge is not enough, Javascript is not hard to understand and use as Java, C++ or other object oriented programming languages are, but several things must be clear before to write some code. If you want to use in a clever and productive way such libraries you should at least:
- Understand the difference and behavior of String, Number, Array, Date and so on
- Have a deep understanding of what DOM is and how it works (you should at least know these methods: getElementbyId(), getElementsByTagName(), createElement(), appendChild(), removeChild() and innerHTML property)
- Know what objects and constructors are and how they behave
- Know what a function is and how to create one
- Know events, event listeners and event handlers
- Understand loops
Too much stuff to learn? It’s the minimum to know, there are then prototyping, JSON, closures, XMLHttpRequest and so on…
Javascript is a programming language (not a tool for designers), don’t believe that a call to $.doMagic() will resolve your problems, you have to understand what is behind that doMagic() (at least the foundations) in order to realize concrete stuff… otherwise you will only write “magic spaghetti code”!
Using jQuery to load an XML configuration file
Mar 11th
At work I’m integrating Viamichelin’s map api on a site and I realized a Javascript class which works as a proxy to Viamichelin’s services.
The api provide several methods to customize appearance of map’s controls and ui components (colors, dimensions, opacity and so on) but following the api’s documentation and examples this means to have several “hard coded” settings inside my code, which is an issue I want to avoid, so I thought to use an external XML configuration file and then call the methods using parametric values (which are retrieved by reading the file). Is pretty simple with ajax to load a text file, the only problem is that by default (or better, by nature) ajax is asynchronous and this can be an obstacle but fortunately with jQuery (but even with other libraries and personal XMLHttpRequest implementation) we can make synchronous calls by specifying it.
CSS tip: if you can’t remove the evil, you can imprison it!
Nov 21st
Yesterday a colleague asked me to help her in debugging a crazy behavior of internet explorer 6 (all the others browsers worked fine!), which caused the wrong display of the boxes inside the page. The bug was caused by the rendering of a jQuery powered div, ie one of those things like:
$("#myDivID").doMagic({...});
In somehow the jQuery’s function used, annoyed ie6 due to the CSS styles that it applied to the div. After a couple of minutes of debugging, I realized that we should have needed to spend a full day or more to fix the problem at the root (due to the complexity of the page content). So I decided to isolate the problem by using the CSS positioning technique. Fundamentally put the div (“#myDivID”) into another div with relative position and set the first with an absolute position, in this way:
<div style="position: relative; width: Npx; height: Npx;">
<div id="myDivID" style="position: absolute; top: 0; left: 0;"></div>
</div>
With this expedient “myDivID” is now “trapped” into the parent div and it can’t influence the others page elements.
Handle multiple ajax calls in a fixed incremental order
Nov 10th
In a project which I’m working on, I’ve realized a Javascript object (I’ve called it MediaBrowser), which displays images and flv videos into a box (a dynamic div rendered at runtime). The data used by this object is contained into multiple XML files, which are loaded by ajax (potentially it can loads infinite files passed as array of urls). The problem was: ajax is by definition asynchronous, so each time I load the page with my cool MediaBrowser, the order in which the objects (images and videos) are processed and displayed varies based on the order in which responses to the ajax calls are returned. IE: if I call file_1.xml, file_2.xml and file_3.xml, which contain respectively:
Recent comments