Combine Multiple Javascript Files Into One

How come while combining multiple JavaScript files into one I get errors?
SCENARIO
Here's what I am trying to do. I have several Javascript files and I combine them into one via 'cat' command or something (refer to Insert Newlines With Unix 'cat' Command To Combine Multiple Files for how to combine several files into one). Now I run the website and the browser is complaining about the Javascript saying it contains errors! But WHY??

PROBLEM
Don't worry I'll get to the solution soon, but you need to know why this is happening first. The problem is when you combine the js files WITHOUT ending each js file properly you run the risk of violating Javascript syntax! At the end of the js source you have the leniency of not ending it properly but still having it work fine. When it's followed by another Javascript statement however you'll run into errors.

SOLUTION
Simple. Just make sure before you combine the Javascript sources every Javascript source ends with a semicolon (;). I suggest that you add newlines or spaces at the end of the source to make it more readable. Again refer to Insert Newlines With Unix 'cat' Command To Combine Multiple Files for how to combine several files into one!

If you have any questions please let me know and I will do my best to help you!

How come jQuery UI Tab Widget Does Not Work?

I am using JQuery UI Tabs widget library but it doesn't put the content in tabs as it's supposed to. Why????

I had this question when I was trying to get JQuery UI's tab widget to work. When it works it looks like the following:



I included the necessary JQuery libraries which are basically jquery.js and jquery-ui.js, both of which can be accessed from Google Doc's code repository. I verified that those files are accessed correctly, but I kept not seeing my content put in tabs as jQuery UI API claims to do. After some digging I found that the failure can be due to the following causes:

* You need to include the necessary CSS: jquery comes with a default CSS stylesheet for its UI API, so you can either download it or simply reference it at Google Doc as follows:

<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'/>

Note if you download it you'll have to correct the path of each background image URL used in the stylesheet. Those URLs are relative paths, and since you'll be hosting it from a different server they'll be broken. You'll have to prefix it with http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base. You can further theme your tabs in your own CSS definitions. JQuery UI's official API guide has more information at http://docs.jquery.com/UI/Tabs.

* Do NOT use self closing script tag: This is extremely weird, but in my experiment I realized things fall apart when I use self closing script tag as follows:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery-ui.min.js" />

You should instead use the following:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery-ui.min.js"> </script>

Weird huh? I have absolutely no idea why this is the case. If any of you experienced the same thing feel free to enlighten me.

That should solve your problem and jQuery UI's tab widget should start working! Questions? Let me know!

Blogger Problems With Custom Javascript

In Blogger, I put my adsense javascript code somewhere in the HTML template but adsense just does not show? Why?

When you put javascript code in HTML template you have to be careful with comment inside of it. Your adsense code looks something like this:

<script type="text/javascript"><!--
google_ad_client = "pub-3404770245697982";
/* 160x600 ink, created 5/26/10 */
google_ad_slot = "9119188962";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

When you copy it and paste it in your blog's HTML template and save, Blogger would join everything within <!-- and //--> into one single line, making it a Javascript comment. That's why you don't see adsense. To fix it, simply remove <!-- and //-->. An alternative is to insert the adsense code in the individual post because Blogger leaves the formatting as it is, but it might be a hassle to do this for every post

Blogger's Issues With jQuery

If you use Google's Blogger and you are using jQuery to achieve cool image effects, you may run into the following issues. Here are some of them and their proposed solutions

Question: I am using jQuery Cycle plugin. How come when I do the "fade" effect (or any effect at all) there's a long delay between two sequential images? One image is supposed to fade out as the next one starts to fade in, thereby creating a non-stop visual effect.

Answer: The editor you are using in Blogger is probably inserting HTML line breaks for each new line You do NOT want any line breaks in the div block that encloses the images you are fading in and out. It'll break the Cycle plugin where the fading effect is gone. For example the div block may look like the following:

<div id="slideshow">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
</div>

You want to make sure there is no <br/> in this div block. Simple use the following div instead:

<div id="slideshow"><img src="image1.jpg" /><img src="image2.jpg" /><img src="image3.jpg" /></div>

Then you should be good to go.

Another way is to pick the "Use <br/> tags" radio button in  your Post Options located right below the editor. Then you'll have to explicitly put <br/> wherever you want breaklines, which is a bit of a hassle.

If this doesn't solve your problem, monitor the fading action in Firebug and see if the "opacity" attribute of each image is being dynamically incrementally updated from 0 to 1. This issue is caused by the opacity attribute not updated incrementally, and therefore an image either shows up completely or disappears completely.