Blogs about code from Pew Pew Laser Blog

Quick And Easy CSS Targeting.

I have been a staunch staunch supporter of conditional comments as the best way to send different CSS to different versions of Internet Explorer. I found that the other options - selector-based CSS rules - were just too hack-y. I was going to have to see a very persuasive technique for me to consider it.

Here it is:

#myelement { color: #999; /* shows in all browsers */ *color: #999; /* notice the * for IE7 and below */ _color: #999; /* notice the _ for IE6 and below */ }

The above code is lifted directly from http://briancray.com/2009/04/16/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/.

These are still hacks, so there's always the possibility that the browser vendor could fix the bug that these hacks exploit, or that a new browser will react oddly to this code. For a short term site or a quick and dirty build, I might be willing to take that chance.

I think I'll stick with conditional comments for my larger endeavors. I'm willing to subject the IE6/7 users to the hit of an extra HTTP request.

Noscript.

The <noscript> element can be used indicate content to be displayed if the desired scripting language (usually JavaScript) is not available in the browser. Here are a couple of finer points about <noscript> that I'd like to remember:

• Even if a browser does have the desired scripting language available, content inside the <noscript> tag is downloaded to the browser, and is available to the DOM. It is simply not rendered. Assets such as Flash files and images are not downloaded by the browser.
• Moving content inside the <noscript> tag can affect SEO. Most search engines do not index <noscript> tag. Even those that do index <noscript> content would not weight it as highly as plain content.

Smooth Animation Using jQuery's slideToggle().

I finally found a solution to a jQuery problem that had been bothering me for nearly six months - the dreaded jumping animation. Here is a simple definition list, where visibility of the definitions is animated using jQuery's slideToggle() function.

Bat Cupcakes

These are a simple chocolate cupcake, with a dusting of powdered sugar for a topping. The bat and ghost shapes were made by placing paper cut-outs over the cupcake before dusting on the powdered sugar.

Jam Cookies

Start with a tube of premade sugar cookie dough. Press a cookie-sized amount into mini-muffin pans and then bake as directed. Dust the cookie cups with powdered sugar. Microwave some jam (raspberry and mint) and spoon it into the cookie cups. Melted some chocolate chips, scoop them into a platic baggie, cut off the corner of the baggie, and drizzle the chocolate on the cookies.

Chocolate Sprinkle Cupcakes

These are chocolate cupcakes, with a cream-cheese frosting, and fall-themed harvest leaf sprinkles.

In the previous version, the elements would jump a bit near the end of the animation as they were closing. With jQuery version 1.2.x, the most popular solution for this was to remove all padding and margin on the animating elements, as it was known that jQuery wouldn't animate them. jQuery v1.3 now animates margin and padding, but simply upgrading to the newest jQuery library did not fix my problem.

I noticed that my animation jumps occured only when the animating elements or any of their parents had a width specified. The final fix came via Fen's comments on "Animation Jump - quick, tip" at jqueryfordesigners.com. I store the height of all dd before they are initially hidden, and the re-apply the height just before slideToggle()'s hiding animation.

To make the script flexible enough to handle new elements added to the definition list, I stored each element's widths in an array, and then retrieved the appropriate width based on the definition's position in the list. Here is my finished code:

$(document).ready(function(){ // Get height of all dds before hide() occurs. Store height in heightArray, indexed based on the dd's position. heightArray = new Array(); $("dl.v_show_hide dd").each(function(i) { theHeight = $(this).height(); heightArray[i] = theHeight; }); // Hide all dds $("dl.v_show_hide dd").hide(); // When a dt is clicked, $("dl.v_show_hide dt").click(function () { // Based on the dt's position in the dl, retrieve a height from heightArray, and re-assign that height to the sibling dd. $(this).next("dd").css({height: heightArray[$("dl.v_show_hide dt").index(this)]}); // Toggle the slideVisibility of the dd directly after the clicked dt $(this).next("dd").slideToggle("slow") // And hide any dds that are siblings of that "just shown" dd. .siblings("dd").slideUp("slow"); }); });

I suspect that what I encountered is a jQuery bug - that when a parent width specification exists, the animating element's height is not calculated correctly when animating to non-visible using slideToggle().

1 comment(s).

jQuery - Vertical Show / Hide.

Here's a definition list. Click on one of the baked goods below to reveal the description:

Bat Cupcakes

These are a simple chocolate cupcake, with a dusting of powdered sugar for a topping. The bat and ghost shapes were made by placing paper cut-outs over the cupcake before dusting on the powdered sugar.

Jam Cookies

Start with a tube of premade sugar cookie dough. Press a cookie-sized amount into mini-muffin pans and then bake as directed. Dust the cookie cups with powdered sugar. Microwave some jam (raspberry and mint) and spoon it into the cookie cups. Melted some chocolate chips, scoop them into a platic baggie, cut off the corner of the baggie, and drizzle the chocolate on the cookies.

Chocolate Sprinkle Cupcakes

These are chocolate cupcakes, with a cream-cheese frosting, and fall harvest leaf sprinkles.

Again, this is pretty dary simple to set up. Here's the jQuery code:

$(document).ready(function(){ // Hide all dds $("dl.v_show_hide dd").hide(); // When a dt is clicked, $("dl.v_show_hide dt").click(function () { // Toggle the slideVisibility of the dd directly after the clicked dt $(this).next("dd").slideToggle("slow") // And hide any dds that are siblings of that "just shown" dd. .siblings("dd").slideUp("slow"); }); });

Webmonkey is Back.

Webmonkey is back. And it's in wiki-form. Webmonkey was the gold standard site for web site makers back in the late 90s and early 00s. A few years laster, Webmonkey was bought, and as the bubble burst, it's content became dusty and decrepit. It had a short rebirth, then died again. But now Wired's got Webmonkey back, and there seems to be a great commitment keep it new, and try to bring it back as a forerunner of web tech news and how-tos. I'm very exited. Welcome back, my old friend.