disjoint thoughts » javascript http://disjointthoughts.com Thu, 29 Dec 2011 04:23:36 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 adding blackbird javascript logging to your rails project http://disjointthoughts.com/2008/10/21/adding-blackbird-javascript-logging-to-your-rails-project/ http://disjointthoughts.com/2008/10/21/adding-blackbird-javascript-logging-to-your-rails-project/#comments Tue, 21 Oct 2008 23:44:19 +0000 Ben http://disjointthoughts.com/?p=295 Blackbird is a nifty JavaScript logger that can be added to any web app. Ever find yourself adding alerts into your JavaScript to get some (foggy) idea of what’s going on? Blackbird makes this kind of debugging much easier.

So how do you get Blackbird working in your Rails app? By following these easy steps:

1. Download the Blackbird zip file.
2. Extract contents of zip file.
3. Copy blackbird.css into public/stylesheets
4. Copy blackbird.js into public/javascripts
5. Copy blackbird_panel.png and blackbird_icon.png to public/images
6. Edit blackbird.css, modify urls to blackbird_panel.png and blackbird_icon.png to contain “/images/” in their path; “url(blackbird_panel.png)” should become “url(/images/blackbird_panel.png)”
7. Include the blackbird Javascript and CSS files in your layout: <%= stylesheet_link_tag 'blackbird' %> and <%= javascript_include_tag 'blackbird' %>
8. Add a button to open the Blackbird console: <input type=”button” onclick=”javascript:log.toggle();” value=”show log”/>
9. ???
10. Profit!
11. Check out the Blackbird website to learn more about using Blackbird.

]]> http://disjointthoughts.com/2008/10/21/adding-blackbird-javascript-logging-to-your-rails-project/feed/ 0 email munging using javascript for wordpress http://disjointthoughts.com/2007/11/08/email-munging-using-javascript-for-wordpress/ http://disjointthoughts.com/2007/11/08/email-munging-using-javascript-for-wordpress/#comments Fri, 09 Nov 2007 00:13:01 +0000 Ben http://disjointthoughts.com/2007/11/08/email-munging-using-javascript-for-wordpress/ Anyone who wants to post their email address on the Internet should be wary of spiders picking up their address and filling their inbox with spam. Here’s a little trick that hopefully keeps your email address hidden from spiders, but allows normal users view it easily.

This will actually work anywhere you can get JavaScript to run. In the case of WordPress, there’s issues getting JavaScript to run directly in a post. So what I did was created a contact page. Within the contact page I put:

If you'd like to contact me about anything at all, feel free to email
me at <span id="foo">test</span> or send me an IM on google talk.

<script language="javascript">
    //<code>

    a = ["mai", "lto", "benjamin", "lee", "smith", "gm", "ail", "com"];//
    b = a[0]+a[1]+":"+a[2]+"."+a[3]+"."+a[4]+"@"+a[5]+a[6]+"."+a[7];//
    c = a[2]+"."+a[3]+"."+a[4]+"@"+a[5]+a[6]+"."+a[7];//
    document.getElementById("foo").innerHTML = "<a href=\""+b+"\">"+c+"";//
    //</code>
</script>

When the page loads, the contents of the span will be replaced with my email address. My email address is pieced together from the contents of an array, which I think obfuscates my email enough such that spiders (unless they’ve started executing JavaScript) won’t be able to understand.

There are also a couple of other hacks going on here to get it to work in WordPress. The code tags only exist to keep wordpress from touching the JavaScript syntax and escaping things like the greater than and less than characters. The code tags themselves are commented out, so that the JavaScript won’t worry about them being inside of the script tags. And at the end of every line of JavaScript there is an empty line comment, to escape anything that WordPress puts at the end of a line. If you’re not dealing with WordPress, these things can be omitted.

]]> http://disjointthoughts.com/2007/11/08/email-munging-using-javascript-for-wordpress/feed/ 0 want to use json.js with prototype.js? http://disjointthoughts.com/2007/08/21/want-to-use-jsonjs-with-prototypejs/ http://disjointthoughts.com/2007/08/21/want-to-use-jsonjs-with-prototypejs/#comments Wed, 22 Aug 2007 00:18:17 +0000 Ben http://disjointthoughts.com/2007/08/21/want-to-use-jsonjs-with-prototypejs/ If you’ve tried this, you’ve realized that trying to include both prototype.js and json.js in the same html will cause things to silently fail. The quick solution to this is to not use json.js and upgrade to prototype 1.5.1 or better. In the latest version of prototype there is a method “string.evalJSON();” which I think handles the case that most people use json.js for.

]]> http://disjointthoughts.com/2007/08/21/want-to-use-jsonjs-with-prototypejs/feed/ 0 getting thickbox, jquery, and prototype to play together nicely http://disjointthoughts.com/2007/08/17/getting-thickbox-jquery-and-prototype-to-play-together-nicely/ http://disjointthoughts.com/2007/08/17/getting-thickbox-jquery-and-prototype-to-play-together-nicely/#comments Fri, 17 Aug 2007 17:39:06 +0000 Ben http://disjointthoughts.com/2007/08/17/getting-thickbox-jquery-and-prototype-to-play-together-nicely/ The latest version of the JumpBox admin interface uses ThickBox for its cool visual effects, and prototype for handling AJAX requests. The problem is that ThickBox depends on jQuery, and jQuery and prototype don’t like working together.

Both jQuery and prototype define “$” as an alias in the global namespace. When you try to use the “$” shortcut and both libraries are included, the browser complains. Lucky jQuery gives you a way to override “$” and let prototype use it thus resolving the conflict:

 <html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict();
   </script>
 </head>
 <body>
 </html>

After calling jQuery.noConflict(), you can still use jQuery “$” functionality, but you have to call it using “jQuery(‘foo’)” instead of “$(‘foo’)”.

Now that jQuery and prototype can coexists peacefully, how does ThickBox work? Well… out of the box it doesn’t. ThickBox uses the “$” syntax, but expects to use jQuery’s implementation of it. So to get ThickBox to work, you need to replace all instances of “$” with “jQuery” in thickbox.js. Now ThickBox should be using jQuery exclusively, jQuery and prototype won’t conflict over “$”, and everything should work fine and dandy. Note: I’ve only tried this using ThickBox 2.1.1, jQuery 1.1.1, and prototype 1.5.0, but it should work on the latest and greatest versions.

]]> http://disjointthoughts.com/2007/08/17/getting-thickbox-jquery-and-prototype-to-play-together-nicely/feed/ 39 awesome javascript lecture videos http://disjointthoughts.com/2007/05/07/awesome-javascript-lecture-videos/ http://disjointthoughts.com/2007/05/07/awesome-javascript-lecture-videos/#comments Tue, 08 May 2007 05:11:38 +0000 Ben http://disjointthoughts.com/?p=157 Douglas Crockford has a great set of JavaScript lectures on Yahoo! Video. I’m working my way through them now…

The JavaScript Programming Language [part 1]
The JavaScript Programming Language [part 2]
The JavaScript Programming Language [part 3]
The JavaScript Programming Language [part 4]

An Inconvenient API: The Theory of the DOM [part 1]
An Inconvenient API: The Theory of the DOM [part 2]
An Inconvenient API: The Theory of the DOM [part 3]

Advanced JavaScript [part 1]
Advanced JavaScript [part 2]
Advanced JavaScript [part 3]

]]> http://disjointthoughts.com/2007/05/07/awesome-javascript-lecture-videos/feed/ 0 thickbox, https, ie6 and os x firefox compatibility issues http://disjointthoughts.com/2007/04/25/thickbox-https-ie6-and-os-x-firefox-compatibility-issues/ http://disjointthoughts.com/2007/04/25/thickbox-https-ie6-and-os-x-firefox-compatibility-issues/#comments Wed, 25 Apr 2007 21:39:49 +0000 Ben http://disjointthoughts.com/?p=154 This might be the most obscure problem ever, but it caused me such a headache that I thought I would blog about it on the off chance that one person might have this same issue.

First off I’m using ThickBox to handle some of the cool visual effects in the JumpBox admin interface. Such as:

jumpbox screenshot 1

Everything was fine and dandy until we decided to start serving the admin interface over https. This worked for all browsers EXCEPT IE6. In IE6 when ThickBox tries to display you get this security warning:

jumpbox screenshot 2

“This page contains both secure and nonsecure items. Do you want to display the nonsecure items?”

After a small amount of searching on the ThickBox forums I found a post that referenced a blog post about iframes, https, and IE. The conclusion is that ThickBox creates an iframe without a “src” attribute, and in IE6 over HTTPS this throws up the warning as seen above. So the solution is to add a src attribute to the iframe and point it at a blank html file on the server.

The fix is achieved by modifying the ThickBox javascript file. Near the beginning of the TB_show function the following line:

$(“body”).append(“<iframe id=’TB_HideSelect’></iframe><div id=’TB_overlay’></div><div id=’TB_window’></div>”);

… should be changed to:

$(“body”).append(“<iframe src=”blank.html” id=’TB_HideSelect’></iframe><div id=’TB_overlay’></div><div id=’TB_window’></div>”);

As advertised this fixes the warning from IE6. However this breaks… something… in Firefox 2 on OS X. I say “something” because I really don’t know what is going on. Everything works fine in Firefox on XP, Safari, IE6 and IE7. Here’s a screen grab:

jumpbox screenshot 3

Apparently this weirdness is caused by the src=’blank.html’ on the iframe. How this is causing problems is beyond me. The solution is to do a little browser detection to determine if we’re dealing with IE, in that case add the src attribute to the iframe, and the rest of the time forget about it:

if(navigator.appName == “Microsoft Internet Explorer”) {
$(“body”).append(“<iframe src=’blank.html’ id=’TB_HideSelect’></iframe><div id=’TB_overlay’></div><div id=’TB_window’></div>”);
} else {
$(“body”).append(“<iframe id=’TB_HideSelect’></iframe><div id=’TB_overlay’></div><div id=’TB_window’></div>”);
}

To anyone still reading, I hoped this helps. Otherwise sorry you had to listen to me rant about another JavaScript issue that is fueling my hatred of supporting multiple browsers.

UPDATE: Mark was kind enough to point out that instead of using a blank html file as the source of the iframe, you can use “javascript:false;” which is compatible with all browsers thus eliminating the need to do browser detection. So instead of that ugly chunk of code seen above, all you need is:

$(“body”).append(“<iframe src=’javascript:false;’ id=’TB_HideSelect’></iframe><div id=’TB_overlay’></div><div id=’TB_window’></div>”);

This is a much simpler and cleaner solution.

]]> http://disjointthoughts.com/2007/04/25/thickbox-https-ie6-and-os-x-firefox-compatibility-issues/feed/ 27