Every developer have been up all night doing something completely ridiculous: forgetting a semi-colon and screwing your JS compression, writing hot new code for your
acts_as_idiot functionality that unbeknownst to you the RoR team has already implemented and included in the latest version. Once in the C++ days I even forgot a bracket and to deallocate memory. Regardless, there are so many tricks I wish I knew before I was up all night with the sponge.
Let’s take our kimonos off and run around naked. I will show you mine if you show me yours.
Stylin and such…
Everyone at Spongecell knows how much I like styles and pretty colors. Especially pink! Last January I had no idea what a div is. Today I can round my borders with the best of ’em. Regardless of if you are stylin’ pages via a design background or coming into web dev from a hard core comp sci battle star background like most of us at Spongecell, you have been up all night because your rounded corners are too stiff in in Firefox or your padding is too voluptuous for IE. How appropriate that I start with my least favorite aspect of web dev.
1. Displaying hidden elements
Somewhere in your JS (or rjs, yay!) code mine you want to show your object:
OR non-prototype way
// non prototype way: document.getElementById('upAllNite').style.display='';
THIS DOES NOT WORK
<div id="upAllNite" class="badlyHideSomething"> THIS IS ALWAYS HIDDEN</div>
This definitely works:
<div id="upAllNite" style="display:none">THIS CAN BE DISPLAYED IN JS</div>
2. Image resizing
<img id="prettyImage" onload="resizeImage()"/>
<img id="prettyImage" style="width:80px;height:80px;" onload="resizeImage()"/>
Later in JS
prettyImage = $('prettyImage'); // or document.getElementById('prettyImage');
prettyImage.src = ''myPrettyImageSrc";
prettyImage.width = '80px';
prettyImage.height = '';
Note: images height will be proportional to the width. I.E. if the initial image is 160px by 100px the new image is 80px by 50px
So you’ve read this far. Let me know how your stylin’. This is how I do it.