Cross browser opacity with CSS

Posted on by
Reply
If you thought you couldn’t acheive cross browser opacity with pure CSS then you were wrong. Appart from the fact it doesn’t validate the following snippet works. Just be careful about the order you declare them in. 
.makeTransparent{
opacity: .75; /* standard: ff gt 1.5, opera, safari */
-ms-filter: “alpha(opacity=75)”; /* ie 8 */
filter: alpha(opacity=75); /* ie lt 7 */
-khtml-opacity: .75; /* safari 1.x */
-moz-opacity: .75; /* ff lt 1.5, netscape */
}

jQuery selectors – not first – not:(:first)

Posted on by
Reply

Selectors are the building blocks of all JavaScript libraries. They are super powerful and save a lot of time… when they work.

jQuery uses the sizzle selector engine and has some hardcore shorthand selectors to navigate the DOM, recently I have been having trouble combining ‘not‘ with ‘first‘ to exclude the first element from a group of elements. e.g. table rows.

I found that using the ‘greater than‘ selector made a useful alternative. Essentially all it does is select all elements which are greater than 0… which is the first. This creates a simpler solution, easier to remember and easier for someone else to read.

// the original combined method
$('table tr:not(:first)').css('background','red');

// the new method
$('table tr:gt(0)').css('background','red');

Use JavaScript to round a number to decimal places

Posted on by
Reply

How do I round a number to two decimal places?

Well, you will be glad to know it’s easier than you think. I had no idea but JavaScript comes with a function to do exactly that. Hurrah!

Simply call the inline function and pass it the number of decimal places you want the number to be rounded to. It will automatically work out if it needs to be rounded up or down.

var num = 13.1489;
alert(num.toFixed()) // 13
alert(num.toFixed(1)) // 13.1
alert(num.toFixed(3)) // 13.149
alert(num.toFixed(4)) // 13.1489

// Just remember to cast all strings as a number first!
var num = "15.1568";
alert(Number(num).toFixed(2)) // 15.16

Min-width in Internet Explorer 6 #IE6

Posted on by
Reply

IE6 is still here…

As you probably already know, IE6 does not support the CSS2 property min-width. Thankfully it’s not as widely used as min-height but every so often we are asked to code it.

There are other solutions which use additional mark-up to create a min-width effect but in my opinion the best solution is CSS expressions.

I know, they suck right. Well apart from the performance hit they actually work. Combine them with a IE6 only selector or a conditional comment and you have your solution!

* html #selector{min-width:960px; *width:expression(document.body.clientWidth < 960? "960px": "auto" );}

and if you are wondering... I don't like to use extra mark-up for fixing bugs as I much prefer CSS. Why make everyone suffer for the sake of the minority!

Force the facebook ‘like’ button language

Posted on by
5

Facebook automatically changes the language of the ‘like’ button to the language of the user who’s session is logged in. Although this is a cool feature sometimes you might want to override it.

Thankfully it’s surprisingly easy… all you have to do is add an URL parameter which specifies the country code! So for spanish you insert “&locale=es_ES“, making sure to honour the capitalisation.

English Facebook like button

//standard iframe code

Spanish Facebook like button

//now spanish

Firefox not displaying dynamically embedded flash? Page-speed might be your problem!

Posted on by
1

Flash no show

Today i discovered a worrying bug with Firefox, Firebug and Page-speed.  A good friend of mine, Chris Murray, was demonstrating his new flash photo upload applet. I rudely pointed out that it didn’t work in Firefox only to find out that it did in his. After wasting his time trying to prove SWFOject, Firefox and maybe Flash needed to be updated it turns out that no dynamically embedded flash worked in my version of Firefox. Sorry Chris… What do i mean by embedded flash? Well, to get round the various methods of embedding flash into multiple browsers, javascript is often used to insert the flash into the DOM. Thereby using different techniques per browser. To cut a long story short here is a screenshot of the relevant flash: pageSpeedFlash As you can see, the mark up is correct and present, just strangely disabled. I am using Firefox 3.5.3, Firebug 1.4.3 and Page-speed 1.3. All are the updated and most recent versions.

What can you do?

Nothing really. The issue has been raised with Page-speed guys and there is a support thread too. I expect this to be resolved straight away as the issue has been marked critical. It is probably best to disable Page-speed for the time being. There is always Yslow!

Seperate a number (int) from a string in Javascript

Posted on by
Reply
Seperating a number or integer from a string is a common task in any coding language including javascript. It’s one of those times when you just wish code knew what you were trying to do… Imagine you have a string: 
var myString = "123 Hello World";
I was in the middle of some mootool’in and i was about to go down the usual route of: 
var myNumber = myString.substring(0,myString.indexOf(' '));
when i rushed off to google a better way to do it. Thanks to stackoverflow i found it. Regular expressions! I have no idea how to write them but i can appreciate them. The following expressions get the first integer within a string: 
("123 Hello World 4").replace(/(^\d+)(.+$)/i,'$1'); //=> '123'

//If it's somewhere in the string:

(" Hello 123 World4").replace( /(^.+)(\w\d+\w)(.+$)/i,'$2'); //=> '123'

//And for a number between characters:

("Hello123World 4").replace( /(^.+\D)(\d+)(\D.+$)/i,'$2'); /=> '123''
Good stuff!

Detect Internet Explorer 6 (IE6) and other popular browsers with Mootools

Posted on by
3
One of the top keyword searches on this blog is ‘detect ie6 mootools‘; As popular as this search term is, it’s not actually covered, so this post should fill that gap! Mootools is a great, stable, open source javascript library which is maintained by a limited number of proffesional developers. It does have a browser detection class built in but it doesn’t natively provide a method to detect the version of Internet Explorer. The Mootools developers are code purists; Extending their browser class would be easy but they do not want to do it. They do provide a method to get the browser build and this could be used along with the remaining browser string to work out the version. Essentially, they like to keep their code relevant and streamlined. In a previous post i covered how to detect IE6 with one line of Javascript. This solves the problem where later builds of IE6 can show a browser string similar to IE7. This can be combined with the Mootools browser class to produce browser variables. 
//declare global variables
var WEBKIT = Browser.Engine.webkit;
var GECKO = Browser.Engine.gecko;
var OPERA = Browser.Engine.presto;
var IE = Browser.Engine.trident;
var IE6 = (navigator.userAgent.toLowerCase().indexOf('msie 6') != -1)
&& (navigator.userAgent.toLowerCase().indexOf('msie 7') == -1);

//test variables (delete)
if(WEBKIT) alert("WEBKIT");
if(GECKO) alert("GECKO");
if(OPERA) alert("OPERA");
if(IE) alert("IE");
if(IE6) alert("IE6");
Placing this code at the top of your JavaScript include will give you simple global boolean variables for each browser platform. Creating one variable per browser at the very start means the calls to the browser class are limited to one and the detection script is ran only once. It also means you have very simple and easy to remember variables to use throughout your code.