Looking for an easy April Fool's gag? Look no further.
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-o-transform: rotate(180deg);
Of course, there are probably practical uses for this as well...
I just spent an hour of my life that I'll never get back trying to figure out why my website was displaying at minimum zoom on the iPhone. Here, let me save you some trouble:
<meta name="viewport" content="width = 320" />
The iPhone's default width is 960 pixels. The above meta tag tells it that that's dumb, and please display the page like a normal mobile device.
I hate smart quotes. If you are looking for a way to get rid of all of the special Windows characters in your input that can screw things up, here it is in three lines of PHP:
$pattern = array(chr(128), chr(132), chr(133), chr(145), chr(146), chr(147), chr(148), chr(149), chr(150), chr(151), chr(153), chr(162), chr(166), chr(169), chr(174), chr(194), chr(226));
$replacements = array("", "", "...", "'", "'", '"', '"', "•", '–', '—', "'", "™", "...", "©", "®", "", "");
$input = str_replace($pattern, $replacements, $input);PHP's xml_parse will choke and die if it hits any of the above characters. It won't throw a warning or anything as far as I can tell, it'll just stop processing the input as if it had received an EOF. Sanitize your input from smart quotes!
Want to set up your own custom RSS feeds in PHP? Need to pass a dynamic XML document to another service? It's easier than you think! Disguise your PHP file as XML with the following headers:
header("Pragma: public");
header("Content-Type: application/xml; charset=utf-8");The output of your PHP document should be valid XML. The headers will convince whatever's reading it that it's an XML file.
Your file can still use the .php extension (and will need to, unless you set up some special server-side handling), but you can refer to it as if it were an XML document. It works in RSS readers, etc. just as if it were an XML file, but you can generate the content dynamically and change it depending on the GET parameters and so forth.
Presumably, you can use these headers in a language that isn't PHP to achieve the same effect.
We were discussing drop shadows around the office today. CSS natively supports it, it turns out – as long as you're running Safari or Opera. For the rest of us, we can get around it with a little trickery.
The method I'm using doesn't require Javascript, but Javascript automates the process, meaning you don't have to duplicate everything by hand.
<script type="text/javascript"><!--
$(function() {
$('.shadowed').each(function (index, elem) {
$(elem).append('<div class="drop-shadow" style="opacity: 0.25;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25);position:absolute;top:2px;left:2px;">' + $(elem).text() + '</div>');
$(elem).parent().height($(elem).parent().height() + 4);
$(elem).children('.drop-shadow').css('font', $(elem).css('font'));
$(elem).children('.drop-shadow').css('color', $(elem).css('color'));
$(elem).children('.drop-shadow').width($(elem).width());
$(elem).css('position', 'relative');
});
});
-->
</script>Then, all you have to do is declare an element with the "shadowed" class and let Javascript take care of the rest. The drop shadow will automatically assume the correct position and style.
For simplicity's sake, the CSS for the drop-shadow class is declared in the script. You may want to move it into your CSS file to de-clutter things.
Caveat: If the parent element to your shadowed element is subject to resizing, you will need to update the drop-shadow element's width when the parent width changes. Also, you will want the parent element to have some padding to keep the drop shadow from overrunning it.
Warning: This is a really stupid web design trick. You are almost always better off using an animated GIF instead of relying on the browser to animate your image for you. The only excuse that makes this even marginally acceptable is that you might need the partial alpha transparency PNGs afford.
That said, it's really easy to create animations with Javascript's setInterval command:
<script type="text/javascript"><!--
setInterval(function() {animate('myElement');}, 1000); // change frames every 1000 ms
function animate(id) {
var elem = document.getElementById(id);
var img = elem.style.backgroundImage;
if (img == null) return;
if (img.indexOf('images/image2.png') != -1) {
elem.style.backgroundImage = 'url(images/image1.png)';
} else {
elem.style.backgroundImage = 'url(images/image2.png)';
}
}
--></script>The preceding example will animate the background image of the element with the ID "myElem."
Again, I don't recommend using this without a good reason. So here it is; take it with a grain of salt.
A project I'm working on called for the login fields to display the words "EMAIL ADDRESS" and "PASSWORD" in gray, until the user clicked on them, at which point the fields were to behave normally. Here's the script I used -- this is vanilla Javascript, no jQuery.
function convertField(field, isPassword) {
field.style.color = '#000000';
field.style.backgroundColor = '#FFFFFF';
field.onfocus = null;
field.value = '';
if (isPassword) {
var field2 = field.cloneNode(false);
field2.type = 'password';
field2.onfocus = null;
field.parentNode.replaceChild(field2, field);
setTimeout(function () { field2.focus(); }, 5);
}
}For your HTML, you want something like this:
<input type="text" value="EMAIL ADDRESS" onfocus="convertField(this, false)">
<input type="text" value="PASSWORD" onfocus="convertField(this, true)">
The password field is text-type; that's not a mistake. It will become a password field when focused, but until then, we want the contents to be displayed in plain text.
An example in action (with a little extra styling):