Roslin Design

Displaying full screen with an HDMI cable and ATI Graphics cards

Alex Taylor — Tue, 03 Jan 2012 15:26:11 +0000

I recently had two of my monitors die on the same day, and as a replacement I bought a new Samsung Syncmaster S23A350H monitor to gain back some of the desktop real estate that I had lost.

While generally happy with the monitor (cheap and cheerful!), it doesn’t have great connectivity options, being limited to VGA and HDMI. I decided to use the HDMI option since I didn’t want to go back to the bad old days of analogue.

I connected up the monitor to my Raedon HD5700 graphics card using a HDMI cable, and found that the image was not filling the screen. I got a image in the centre surrounded by black pixels.

It turns out that the fix is actually quite easy, though it can be a bit of a pain to find if you don’t know where to look. By default the HDMI output from RAEDON cards is scaled down by 15%, and to get the image showing full screen you need to disable this using the following steps:

Right click on the Desktop and select the Catalyst Control Centre
Select My Digital Flat-Panels from the left hand menu
Select Scaling options (Digital Flat-Panel) from the sub menu
Select the monitor attached to the HDMI cable from the drop down menu
Change the Underscan-Overscan option to the value that will make the image appear full screen – 0% in my case

There you go – you should have now have full screen HDMI output using your ATI graphics card!

The post Displaying full screen with an HDMI cable and ATI Graphics cards appeared first on Roslin Design.

Detecting the :hover css selector style in jQuery/javascript

Alex Taylor — Wed, 04 May 2011 23:30:35 +0000

A while ago I wrote a plugin for jquery that makes links fade between nicely when a user hovers over them (see here), rather than suddenly changing from one colour to the next. Although the plugin allowed you to set the fade colour I wanted to detect the fade colour set using the css :hover pseudo selector and replace the css hover rule with the jquery fade effect.

This turns out to be a lot harder than it seems. Javascript doesn’t support getting or setting the attributes of pseudo selectors, meaning that you cannot get the :hover css style directly. Instead you have to either parse the css stylesheets directly to find the style, or grab the attribute when the rule is triggered by the mouse hovering over the element.

In this post we are going to look at grabbing the css hover style for the element when a mouse triggers the css rule, which is the way the attribute was got for the links hover plugin.

The following jquery code looks like it should put up an alert box giving the css hover colour.

$('a').hover( function() {
	//get the colour of the hovered element while it is being hovered
	hovercolor = $(this).css("color");
	alert(“the hover colour is: ”+ hovercolor );
}, function(){});

It will work on most modern browsers. Unfortunately, try this is Internet Explorer 8 or less and it will not work, returning the default colour rather than the hover colour. Internet Explorer versions less than 9 appear to run the javascript first, meaning that the css rule has not been applied by the time the script asks for the rule.

There is a solution to this however. Adding a slight delay to the detection code by wrapping it in a setTimeout call, will give Internet Explorer enough time to apply the style so that you can detect it.

$('a').hover( function() {

	hoverElem=this;
        //add in a  slight delay to allow Internet explorer to catch up
	setTimeout( function() {
		hovercolor = $(hoverElem).css("color");
		alert("the hover colour is: "+ hovercolor );
	},0);
}, function(){});

This should work on all modern browsers as well as all Internet Explorer versions 6 and up. You can try out the hover attributes on the page here.

Unfortunately if you want to use the hover css style without the user hovering over it, you will not be able to use this technique. At some point in the near future I’ll write a nice jQuery plugin to allow you to use these attributes without a user having to hover over the element.

If you liked this article you might like to read the follow-up article,
Nice link colour fades using jQuery.

The post Detecting the :hover css selector style in jQuery/javascript appeared first on Roslin Design.

Crash Internet Explorer 9 in one line of Javascript!

Alex Taylor — Fri, 08 Apr 2011 23:21:48 +0000

UPDATE: It appears that this bug has been fixed. This no longer crashes Internet Explorer 9.

As I’m sure you are all aware, Internet Explorer 9 was released a couple of weeks ago, and last week I had the pleasure of testing my first website on it. I had very high hopes because all the reviews said it was a great browser: fast, standards compliant and a joy to work with. Maybe Microsoft had at last produced a browser that wouldn’t cause pain to developers worldwide!

I was rather surprised then, when I opened my test site, only to find that IE 9 crashed, and crashed hard. After a bit of research I managed to distil the crash down to a few lines of code.

If you wish to test out the crasher, please click here

NOTE:

DO NOT CLICK IT IF YOU DO NOT WANT TO CRASH INTERNET EXPLORER!

the source code is here:



	
		IE Crasher

		

		
		
	

		
		
CLICKING THIS WILL CRASH INTERNET EXPLORER 9!

As you can see, this is all valid html, and legitimate javascript.

What happens is the page loads an external font using the @font-face command. For ease I am using the google font api instead of supplying my own font-face rule.

This font is then applied to the page body using a css rule – so far, so mundane.
The part that crashes IE 9 is this line of code, activated on clicking the link

document.getElementById('font-style-link').href='fail';

What this line does is removes the link to the stylesheet providing the font, cutting the reference to the loaded font. When this happens in other browsers, they will load the fallback font and style the page using that.

In IE 9 however, it seems to be unable to do this should there be a