Example below:

This is a list of all approved vendors in an organization (for those of you with more than one market, that’s all vendors in all markets).

Now, this is much more technical tip, so if you don’t understand, and don’t have a web person who understands, we can do this for you, for a small one-time fee of $75.

Basically, you’re creating a JSON feed that pulls from your “approved vendor” list.

Contact us for the link for the JSON feed:

Here is the script that you can use for rendering:

var arrVendors;
function ox(arr) {
arrVendors = arr;
var html = ”;
for (var i = 0; i < arrVendors.length; i++) {
var v = arrVendors[i];
html += '

‘;
html += ‘

‘;
}
$(‘#dOX’).html(html);
$(‘.vendor a’).toggle(function(e) {
var idx = $(this).attr(‘index’);
var vendor = arrVendors[idx];
var html = ”;
html += ”;
html += ”;
html += ‘

‘; html += ‘‘ + vendor.company + ‘ ‘ + vendor.city + ‘, ‘ + vendor.state + ‘ ‘; html += vendor.phone1; if (vendor.website) html += ‘ ‘ + vendor.website + ‘‘; html += ‘ ‘; html += ‘‘ + vendor.description + ‘

‘; if (vendor.photo) { html += ‘‘; } else { html += ”; } html += ‘

‘;
$(‘#sub’ + idx).html(html).show();
}, function(e) {
var idx = $(this).attr(‘index’);
$(‘#sub’ + idx).hide();
});
}

Here is the code for the head:

body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
}
#dOX
{
width: 470px;
margin: 0 auto;
overflow: auto;
}
.vendor
{
clear: both;
/*background-color: #FAFBF2;*/
border-top: 1px dotted #C8D172;
padding-top: 6px;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 12px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
}
.vendor a
{
display: block;
color: #663300;
text-decoration: none;
}
.vendor a:hover
{
background-color: #EDECCC;
}
.vendorinfo
{
display: none;
clear: both;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
padding: 6px;
}
.avail
{
width: 50px;
background-color: #C8D172;
}
.noavail
{
width: 50px;
background-color: #F7F8E9;
}