Tequila Fish

To get the ID of an element using Dojo Framework, you need to use the dojo.attr function.

Given the following HTML:

You can get the IDs of each image in Dojo like so:

If you have debugging on and something like Firebug, the console output would be like so:

If you’ve ever tried to wrap an image in a div, you’ve surely came across the layout issue where an extra couple pixels of blank space are inserted underneath the image. Trying to get rid of this extra space has caused me to pull my hair out many times, but the fix is rather easy. All it takes is a basic understanding of the type of element that images are, and how they interact with the layout around them. First, some sample code:

This will result in something like this:

Notice the 3 pixels of whitespace underneath the image. The reason this happens is because images are by default inline elements. Inline elements of course do not force new lines and act like text flowing along a line. The most well-known inline element is of course plain text — such as this very paragraph that you are reading now. The fonts that make up text have attributes named descenders, which are basically the part of a font that extends below the baseline on characters such as y, g, and j. Even though images aren’t like fonts and don’t have descenders, when your browser is rendering an image it treats it as an inline element and adds some space under the baseline to compensate for descenders. The easiest way to get rid of the space underneath an image is to convert it to a block element so that the browser doesn’t add extra room for descenders like so:

If for some reason you’re unable to convert your image to block mode, another way to fix it is to hard-code the height of the wrapper div to match the height of the image like so:

Either of these methods will tightly and correctly wrap your image without the descender space below it like so:

Thickbox hasn’t been updated in a while, and it is now incompatible with recent versions of jQuery (1.3+). What happens is that when you click the thickboxed element, the screen goes gray and the the loading “barber pole” image loads as expected, but then nothing happens… it just hangs on the loading image. The reason why is because Thickbox uses ‘@’ in jQuery, which is now deprecated.

To fix, simply open up the un-compressed thickbox.js file and go to line 79 and change the following:

… into …

Once you make that change, Thickbox should work as expected!

Reference: http://codylindley.com/thickboxforum/comments.php?DiscussionID=1791&page=1#Item_0

If you’d like to pin an image to the bottom of a DIV, it is a bit tricky. There is an relatively un-known property of an absolutely positioned element — if you wrap it in a relatively positioned element, the absolute positioning of the wrapped element will be positioned relative to the wrapper rather than absolutely in the browser window. Below is an example of how to pin an image (or any other element) to the bottom of a DIV. Note that the height on the imageWrapper is only there to illustrate that the image will attach to the bottom of the taller wrapper and is not required.

HTML:

CSS:

I’ve been customizing a Wordpress install and have been needing to capture the output of the bloginfo() function, which simply echo’s a string. I wanted to capture the echo into a variable without actually echo’ing the string. You can do so by leveraging PHP’s output buffering functions. Here’s how you do it:

$myStr will now contain ‘Hello World’ without actually outputting it to the screen.

Reference:

• ob_start()
• ob_get_contents()
• ob_end_clean()

For some reason, FCKEditor automatically wraps any content entered into the textbox with a <p> tag. This can cause for some problems in your layout when you’re actually displaying the content. Instead of trying to fix this in your layout with CSS, there is a quick and easy way to turn the auto-wrap off in FCKEditor: Change the FCKConfig.EnterMode setting from ‘p’ to ‘br’. There are a few ways to handle this:

• Edit fckconfig.js:
  Change FCKConfig.EnterMode = ‘p’ ; to FCKConfig.EnterMode = ‘br’ ;
• Change the setting programatically when you instantiate the object, like so (in PHP):
  <?php
  include_once(‘fckeditor/fckeditor.php’);
  $oFCKeditor = new FCKeditor(‘description’);
  $oFCKeditor->BasePath = ‘/fckeditor/’;
  $oFCKeditor->Value = ’some text’;
  $oFCKeditor->Config['EnterMode'] = ‘br’; // turn off auto <p> tags wrapping content
  $oFCKeditor->Create();
  ?>

I prefer the latter way because you can do it on a page by page basis, and there’s no messing with FCK’s core JavaScript files.

When attempting to implement Dylan Verheul’s excellent auto-complete jQuery plugin on a project, I ran into problems due to the fact that we are using noConflict mode for jQuery by calling noConflict(); A few quick minutes poking around jquery.autocomplete.js and I had updated it to work in both noConflict and standard modes. For those of you looking to use jquery.autocomplete.js in noConflict mode, I’ve made it available for download here: jquery.autocomplete.js

UPDATE: Dylan has updated jquery.autocomplete.js to be compatible with noConflict mode. It also contains additional bug-fixes and improvements. You can download it at: http://code.google.com/p/jquery-autocomplete/source/browse/trunk/jquery.autocomplete.js

—————-
Now playing: AFX – SteppingFilter 101
via FoxyTunes