uijoe – the ui development blog – young koh

Using CSS3 Media Queries to style different screen sizes (mobile, deskptop, tablet, etc.).

@media all and (max-width: 680px) {
    div#wrapper{width:400px;}
    ...
}

@media all and (max-width: 640px) {
    div#wrapper{width:600px;}
    ...
}

Importing entirely different stylesheet

<link rel="stylesheet" type="text/css" href="normal_style.css" />
<link rel="stylesheet" type="text/css"
media="only screen and (max-device-width: 480px)" href="small-screens.css" />

Long continuous text values such as URLs can break the layout when displayed within a page or inside a data table.
This is the jQuery extension that I came up with that adds line breaks at a specified point and places a carriage return icon.

$.fn.linebreak = function(cut) {
     return this.each(function() {
     var parentWidth = cut;
     var cellData = $.trim($(this).html());
     var cellDataLength = cellData.length;
     var breakPoint = Math.round(parentWidth/5.5); // Estimated avg. char width
          if(cellDataLength > breakPoint){
	       //make room for carriage return icon
               breakPoint -= 4;
	       var part1;
	       var part2;
	       var part1textonly;
               // First part of substring
	       part1 = cellData.substring(0,breakPoint);
               // Second part of substring
	       part2 = cellData.substring(breakPoint);
	       part1textonly = part1;

              // Continue until rest of the text are shorter than specified length
	       while (part2.length > part1textonly.length){
	            var subpart2 = part2.substring(0,breakPoint);
		    part2 = part2.substring(breakPoint);
		    part1 += "<span class='return-icon'></span><br />" + subpart2;
	       };

              // Generate new string
	       var newString = part1 + "<span class='return-icon'></span><br />" + part2;
	      $(this).html(newString);
	 }
    });
}

// Call to function
$('.text').linebreak(600); // Specify wrapping point as parameter

The anchor tag below used to be tolerated in a Doctype HTML:

<a href="#" name="xxx" />

But FireFox 4 became more strict. It will not close the anchor tag written that way, instead, always explicitly close anchor tags:

<a name="xxx" href="#"></a>

CSS opacity for IE8:

.someDiv {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}


CSS opacity for older IE:

someDiv {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
}


To cover all browsers (note: declare IE8 filter first):

someDiv {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
filter:alpha(opacity=30);
opacity: .3; -moz-opacity:30%;
}


Passing variables using Flashvars

[ html ]
...
<param name="FlashVars" value="myVar1=somefile.xml&myVar2=mymovie.flv" />
...
<embed ...FlashVars="myVar1=somefile.xml&myVar2=mymovie.flv" ...>
...

[ actionscript ]
// Get Flashvars from HTML
var paramList:Object = this.root.loaderInfo.parameters;
var myData1:String = paramList.myVar1;
var myData2:String = paramList.myVar2;

Passing as querystring

[ html ]
...
<param name="movie" value="video.swf?myVar1=somefile.xml&myVar2=mymovie.flv" />
...
<embed ...src="video.swf?myVar1=somefile.xml&myVar2=mymovie.flv" ...>
...

[ actionscript ]
// Get variables from HTML
var myQueryStrings=this.loaderInfo.parameters;
var myData1: String = myQueryStrings.myVar1;
var myData2: String = myQueryStrings.myVar2;