Developer Oracles » JavaScript

DefiThis un-minified Javascript and code explanation

Gary Illyes — Sat, 31 Jan 2009 10:16:34 +0000

We published a while ago a small WordPress plugin which enables the users to look up words in a specific database, by highlighting with the mouse the word they want to look up then following a link to an administrator set online database (like Google Definition service or Dictionary.com) which will do the rest of the job.

Worthless to say that this plugin is based on JavaScript in almost 80%, the rest is a bit of PHP which hooks the Javascript code to the WordPress engine and a bit of CSS to style the plugin.

A few words about our coding style: we almost always minify the code made by us. This means that we run a code through a compressor software which strips the unnecessary white spaces and other characters. This applies to both Javascript and CSS. This is not meant to obfuscate the code, but to preserve the bandwidth.
It’s also good to know that we never use longwinded function names or variables. It’s likely that you will never see in code released by us function or variable names like:
function this_is_a_cool_function_used_for_nothing(){ } /*or variable like*/ var this_is_a_useless_variable = '';

Instead, we use function and variable names like this:
function c_D(){ } /*or variable like*/ var A = '';

The explanation for this habit is that long variable and function names only eats up unnecessary bandwidth, which we don’t like, and javascript understands both forms of declaration.

If you want to understand the functions we use, you may want to know that each function name is an abbreviation. For example the R_D() function is used for Rendering Defithis, the c() function is used for Centering the widget, aph() for fixing Alpha transparency in Internet Explorer, and so on.

So, as requested by Fernando Ramirez, here’s the unminified javascript code from Defithis. Unobfuscated version does not exist since we believe it’s not obfuscated. Follow this link to the script: http://devoracles.com/examples/defithis.js

If you need explanation regarding anything from within the code, feel free to ask. We listen and will answer.

The best method to check for Internet Explorer in Javascript

Gary Illyes — Thu, 08 Jan 2009 10:59:09 +0000

If you will code in Javascript, or if you already familiarized yourself with it, you encounter many times problems related to the fact that Internet Explorer doesn’t understand a lot of functions which the other browsers can. But the browser market-share dictates that we still have to code in the way to make the script work on Internet Explorer, too.

This meant, many invented small, or relatively small functions to detect the user’s browser. Many times the function is a dozen of lines long, and it’s called every time the script needs to know whether the user’s browser is Internet Explorer or other modern browser.

But there’s a way better way. Better said the simplest way possible. Here it is:

var IE = /*@cc_on!@*/false;

I guess that needs a bit of explanation, right?
What we see up there? I declared a new variable, called IE, which has the value a comment block followed by ‘false‘.
The above variable will be understood by IE: var IE = !false, because Internet Explorer uses JScript — a Javascript-like dialect of the standard ECMAScript — instead of Javascript which is used by all the other browsers. JScript can parse the comments, just like Internet Explorer (see conditional HTML comments post). This is a unique feature of IE, none of the other browsers can do it, so Firefox, Chrome, Safari, Opera, all will understand the above declaration as IE = false.

How to use this in your codes? Put the above code in the first line of your script, then when you need to know whether the browser is Internet Explorer or not, use conditions, like this:
if(IE){ //IE specific code goes here }else{ //code for all the other browsers }

Hope this helps you as it helped me many times.

jQuery : Error: $(document).ready is not a function — Sure!

Gary Illyes — Sun, 19 Oct 2008 19:17:20 +0000

This error message appears only if another framework is in conflict with the almighty jQuery. For example You try to use Prototype/Scriptaculous for Lightbox but you also need Thickbox for something else, which requires jQuery.

Since no framework is compatible with another framework, you have to find a workaround to get things working.

And here comes jQuery in your help. The jQuery team was smart enough to realize that there will be conflicts between frameworks, especially the $ will cause massive headaches since it’s the basic of each framework. $ is the shortcut for the word “jQuery”

So, they invented jQuery.noConflict();. This will let you to replace the $ with the word jQuery, in all your code. So, when you need to call this: $(document).ready(function(){ … You simply replace the $ as I said above: jQuery(document).ready(function(){ …, don’t forget to call jQuery.noConflict(); before this.

So, when you use the noConflict() function, your code should look something like this:

World saved again, now you can use 2 frameworks together.

XHTML Strict incompatible with target attribute: FALSE

Gary Illyes — Sun, 21 Sep 2008 10:18:49 +0000

Clients… I had to create a website… XHTML Strict… AND opening all links in a new tab/window.
No probs, there’s the target attribute of the anchor elements! But not in XHTML Strict!
W3 states clearly that target attributes should be forgotten and avoided. Why, I have no idea, but if you want to create XHTML Strict pages, you can forget about the target attribute.

So let’s hack with Javascript this rule! Rules are set to have something to brake, that’s what we’ll do now. This is very simple code, basically a single function which loops through the document and adds to all the anchor elements the “target=’_blank’” attribute. As it’s created with Javascript, the XHTML validators should not observe. I think they won’t observe, so first check it out somewhere.

So, the Javascript code to open links in new window/tab while maintaining the XHTML Strict compliance is:

function open_in_new_tab() {
if (!document.getElementsByTagName){
return;
/*If the browser doesn't support DOM, do nothing*/
}
var anchors = document.getElementsByTagName("a");
/*Select all the 'a' tags, anchors*/
for (var i=0; i
And the word is saved again.

Javascript pop-up windows and parent page refreshing

Gary Illyes — Sat, 20 Sep 2008 16:58:58 +0000

This subject is quite interesting and i was searching for examples for long. Then I managed to do something, true that only by combining many examples i’ve found.

Let’s see the code then I’ll try to explain everything.

function popUp(URL) {
window.open(URL, 'WindowName', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=300,height=400');
}
window.onload = popUp("http://example.com");

The above function will pop-up window which will contain the page you put as value in the popUp function. I’ve put http://example.com, you put whatever you like, but preferably from your own domain if you want to have access to the pop-up’s DOM. You can play with the toolbar,scrollbars,location variables till hurts, basically they define how the popped up window will look and act. I wrote the above script so to pop the window up when the page loads (window.onload) , if you don’t like that and the fact that this even is blocked by most pop-up blockers, you can put a HTML button or link somewhere in the page, like this:






Pop Up the window

As I said before, there’s a slight issue with the stuff if you use the window.onload, specifically that your pop-up much likely will be blocked by pop-up blockers. You don’t want that, and even if it succeeds to pop-up, it’s annoying for the visitor, so just don’t do it, please.

OK, now let’s see the the parent window refreshing. Prent window is the page which pop-up up the small window. The pop-up window is the child. Usually, we use the parent refresh if we want to transfer a variable from the pop-up to the parent. The script which has to be placed in the child, popped up window is the following script:

function Parent() {
  window.opener.location.href = window.opener.location.href;
  if (window.opener.progressWindow){
    window.opener.progressWindow.close()
  }
  window.close();
}

and the button or link which closes and refreshes the parent window is

Click here to close this window and refresh the parent

A working example is situated here. It’s a loop so if your pop-up blocker doesn’t block the first pop-up, most likely you’ll get annoyed in no time.

And I think that was all. You can also transfer variables from one window to other, but that’s for another day… so, the show is over… there’s nothing to see here, pass over please.