jQuery Images in a Select Menu Dropdown
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>
