A Virtual Insight - Richard Turner » FireFox http://www.richardturner.com Fri, 23 Jul 2010 18:36:57 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 jQuery Images in a Select Menu Dropdown http://www.richardturner.com/2010/01/jquery-images-in-a-select-menu-dropdown/ http://www.richardturner.com/2010/01/jquery-images-in-a-select-menu-dropdown/#comments Sat, 16 Jan 2010 17:02:47 +0000 Richard Turner http://www.richardturner.com/?p=122 A client had a dropdown that listed fonts, they wanted each option to be an image preview of the font in the select menu, now since some of these were not web-safe font’s I could not use CSS ‘font-family’. I originally wrote about 3 lines of code append an img tag to the option tag which worked great in FireFox but no others.

I then scratched my head for a while and browsed the web for an example, I found one, ajaxload.info, so i extracted their JavaScript, rewrote it into jQuery, customised it to suit my needs. All done, Firefox – check, Chrome – check, IE – no. What a surprise, okay ajaxload.info in IE – load. Hmm theres doesn’t work either.

So about 6 hours after starting this seemingly easy task, i finally came up with a working version for FireFox, Chrome, IE, Safari etc. And here it is to save someone else the headache should they ever need it.

< !DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<style type="text/css">
	select {
		z-index: 1;
	}

	.mask {
		width: 150px;
		z-index: 100;
		background: url(transparentGif.gif);
		position: absolute;
		padding: 2px;
	}

	div.typelist {
		background: #FFFFFF;
		border: 1px solid #868686;
		overflow-x: hidden;
		overflow-y: auto;
		display: none;
		position: absolute;
		width: 148px;
		height: 150px;
	}

		div.typelist a {
			display: block;
			padding: 10px 20px;
			width: 100%;
			border: 0px;
			outline: 0px;
		}

		div.typelist a img {
			border: 0px;
		}
	</style>
	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.js"></script>
	<script type="text/javascript">
	var img_dir = ''; //with trailing slash

	function RT_ShowImageMenu(id) {
		$('div.typelist').css('display', 'none'); //close all

		$('#typelist-' + id).css('display', 'block');
		document.onclick = function() {
			document.onclick = function() {
				$('#typelist-' + id).css('display', 'none');
				document.onclick = null;
			}
		}
	}

	function RT_MakeImageMenu() {
		$('select.image-select').each(function(){
			var mask_id = 'mask-' + $(this).attr('id');
			var mask = $('<div id="' + mask_id + '" class="mask" onclick="RT_ShowImageMenu(\'' + $(this).attr('id') + '\'); "></div>');
			$(mask).insertBefore($(this));

			$('#' + mask_id).css( { height: $(this).height(), width: $(this).width() } );

			typelist_id = 'typelist-' + $(this).attr('id');
			typelist = $('<div id="' + typelist_id + '" class="typelist"></div>');
			$(typelist).insertAfter($(this));

			$(this).find('option').each(function(){
				$('#' + typelist_id).append('<a href="javascript:RT_SelectOption(\'' + $(this).parent().attr('id') + '\', \'' + $(this).val() + '\')" title="' + $(this).html() + '"><img src="' + img_dir + $(this).val() + '.png" alt="' + $(this).html() + '" /></a>');
			});
		});
	}

	function RT_SelectOption(element, id) {
		$('#' + element).val(id);
		$('#typelist-' + element).css('display', 'none');
	}

	$(document).ready(function() {
		RT_MakeImageMenu();
	});
	</script>
</head>

<body>
      <select id="font" name="font" class="image-select">
        <option value="1">Arial</option>
        <option value="2">Verdana</option>
        <option value="3">Courier</option>
        <option value="4">Tahoma</option>
      </select>

      <br /><br />

      <select id="font2" name="font2" class="image-select">
        <option value="1">Arial</option>
        <option value="2">Verdana</option>
        <option value="3">Courier</option>
        <option value="4">Tahoma</option>
      </select>
</body>
</html>

View Example

]]> http://www.richardturner.com/2010/01/jquery-images-in-a-select-menu-dropdown/feed/ 0 The Poisoned Apple http://www.richardturner.com/2008/10/the-poisoned-apple/ http://www.richardturner.com/2008/10/the-poisoned-apple/#comments Tue, 21 Oct 2008 22:40:11 +0000 Richard Turner http://www.richardturner.com/?p=90 Apple

Apple

PC or Mac? FireFox or IE? Both are common questions in the IT world, well I’m FireFox on a PC both in the office and at home. However i do own an Apple iPhone and Apple TV. I have yet to experience any problems with Apple TV, but here are some of my thoughts on the iPhone.

Apples are apparently better than PCs, what with windows updates, blue screens etc. that you get with Microsoft Windows, however what they don’t tell you is Apple are equally as bad they just take a different approach, instead of blue screens or error messages, you just get a “pretty” colour wheel whilst things are loading / restarting to try and distract you from the fact that it’s taking just as long to load than a PC would. Give me a Quad Core Xenon with Vista and i assure you it would be just as fast if not faster than a Mac.

When Apple released their iPhone 3G on 2.0 firmware, there was a huge amount of problems and very shortly after they announced 2.1 firmware which was meant to fix crashing of applications, general lag and other issues. However whilst running 2.1 you will not find applications crashing or lag because instead of locking up your iPhone they just close for no reason at all! This is really frustrating when you are trying to use an application on your IPhone, especially the ones Apple make you pay for! Either fix the problem or leave it broke, don’t claim to have fixed something that you clearly haven’t – you just changed how it handles the error!

On the day of release of the new Mac-Book Air, Apple announced numerous updates to fix known issues with software. Why release something that isn’t ready? If you want to make a claim to something at least have evidence to support it, this is just from what i know, I’m sure with a little digging i could find a lot more wrong with Apple’s methods and claims.

A friend recently had a similar experience with an Apple Time Capsule.

]]> http://www.richardturner.com/2008/10/the-poisoned-apple/feed/ 5