jQuery Images in a Select Menu Dropdown

16 January 2010 | Posted by Richard Turner

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

No Comments
 | Category: jQuery | Tags: , , |