Dojo: How to get the ID of an element.
To get the ID of an element using Dojo Framework, you need to use the dojo.attr function.
Given the following HTML:
<img src="/path/to/imageA.jpg" id="myImage1" />
<img src="/path/to/imageB.jpg" id="myImage2" />
<img src="/path/to/imageC.jpg" id="myImage3" />
You can get the IDs of each image in Dojo like so:
dojo.query("img").forEach(function(currentNode) {
var theElementId = dojo.attr(currentNode, "id");
console.log("id: ", theElementId); // debug
});
If you have debugging on and something like Firebug, the console output would be like so:
id: myImage1
id: myImage2
id: myImage3
iPhone Wishlist – Form Input
Added to my list of iPhone annoyances that I hope are someday fixed:
When entering text into a form input, the first letter defaults to uppercase. This is fine for textboxes and most other inputs, but it is annoying for username/password inputs because more often than not these fields are case-sensitive. Perhaps the iPhone could be more intelligent with the auto-caps by disabling it when you're on a text input named "username" or "login."
CSS: Removing extra space underneath an image.
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:
<div style="border: 1px solid #000;">
<img src="someimage.jpg" width="270" height="184" alt="yo" />
</div>
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:
<div style="border: 1px solid #000;">
<img src="someimage.jpg" width="270" height="184" alt="yo" style="display: block;" />
</div>
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:
<div style="border: 1px solid #000; height: 184px;">
<img src="someimage.jpg" width="270" height="184" alt="yo" />
</div>
Either of these methods will tightly and correctly wrap your image without the descender space below it like so:
Thickbox 3.1 with jQuery 1.3 – Stuck on loading image.
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:
TB_TempArray = $("a[@rel="+imageGroup+"]").get();
... into ...
TB_TempArray = $("a[rel="+imageGroup+"]").get();
Once you make that change, Thickbox should work as expected!
Reference: http://codylindley.com/thickboxforum/comments.php?DiscussionID=1791&page=1#Item_0
CSS: How to pin an image to the bottom of a DIV
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:
<div id="imageWrapper">
<img src="image.jpg" width="100" height="100" id="bottomImage" alt="Some Image" />
</div>
CSS:
#imageWrapper { position: relative; height: 500px; } /* height is for display purposes only */
#bottomImage { position: absolute; bottom: 0; }
Apache: Address already in use: make_sock: could not bind to address 0.0.0.0:80
Every now and then my Apache webserver becomes un-responsive, and attempting to restart it with apachectl graceful gives me the following error:
Address already in use: make_sock: could not bind to address 0.0.0.0:80
This error means that there is already a process running that is using port 80, so Apache is unable to start up and use it. To solve this problem, we need to figure out what process is currently using the port in question and kill it so that Apache can start. Use lsof to find out what is using our port:
shell> lsof -i :80
COMMAND PID USER FD TYPE DEVICE SIZE NODE NAME
httpd 23506 apache 3u IPv6 1206927465 TCP *:http (LISTEN)
You can see from the output of lsof that an httpd process already exists under PID 23506. This is simple enough to get rid of:
shell> kill -9 23506
shell> lsof -i :80
shell> apachectl start
I run lsof again after issuing the kill command to make sure that whatever was using port 80 is gone.
Using a Seagate FreeAgent XTreme over eSATA with the ASUS P5B Deluxe motherboard.
I just purchased a 500GB Seagate FreeAgent Xtreme, hoping to take advantage of the super-fast eSATA port on the back of my ASUS P5B Deluxe motherboard. Sure I could have easily used the USB2 or Firewire 400 ports on the drive for a quick plug and play, but I wanted the blazing speed of eSATA. I've spent the last couple hours trying to get this thing to work right, so I figured I'd jot down my notes here in case any one else comes across the same problems.
First problem, the JMicron JMB363 SATA controller wasn't enabled in my motherboard's BIOS, so the drive wasn't recognized. Easy enough: just go into the BIOS (hit DEL on bootup) and navigate the menus to Advanced > Onboard Devices Configuration > JMicron SATA/PATA Controller, and set to 'ENABLED'. Set the JMicron Controller Mode to 'IDE'.
With that enabled, Windows should now detect your drive. You should be able to see it under My Computer or in Disk Management as a Healthy Online drive. At this point, everything works fine as a drive, but I ran into a problem with the Seagate Manager software: Under the 'My Drives' tab, I received the error 'No drives detected.' Bummer. I ran Windows Update to make sure all my drivers were current (they were) and checked the ASUS site to see if there were any BIOS updates (there weren't). At this point I was ready to give up on eSATA and just use the Firewire port. But after some detective work on the Seagate site, I found out that the JMicron JMB36X drivers need to be v1.17.46 or higher in order for the drive to work with Seagate Manager. Because this motherboard is a few years old, I was running an older driver. So after a few minutes of searching the JMicron site for updated drivers, I downloaded them, installed, rebooted, and PRESTO, my drive now works with Seagate Manager! Now all I need is a 'Mission Accomplished' banner.
One caveat to updating the JMicron JMB36X drivers: I had to re-activate my Windows install. So buyer beware for those of you running a 'stealth' copy of Windows XP.
Reference: