One of the really great things about Open-Realty is how flexibile the design of your site can be. In the v3.1.9 release of Open-Realty we added a new block tag {listings_custom_search_result_block}. You can use this new tag to make some very cool widgets for your site. Today I am going to show you how to use this new tag to build a vertically scrolling featured listing widget. This does not require the use of an add-on, it is simply some simple JS, HTML, and CSS you are going to add to your template..

First, figure out where you want this scrolling widget to appear on your site, and lets start editing. For our exmple, we are going to replace the {featured_listings_vertical} in our search_page_default.html template with our new scrolling widget. If your template does not already have a custom search_page_default.html file, copy the file from the default template folder to your custom template folder before you start editing.

Step 1: Go to line 13 (or thereabouts) of your search_page_default.html template file and locate and then remove the {featured_listings_vertical} tag.

Step 2: Add the following code, where you just removed the {featured_listings_vertical} tag

<script type="text/javascript">
$(function(){
	$('.featured_widget_scrollable').scrollable({vertical: true, circular: true}).autoscroll({
		interval: 6000		
	});
});
</script>
<h3>Featured Listings</h3>
<div class="featured_widget_scrollable"> 
	<div class="items">
		{listings_custom_search_result_block $limit='10' $args='featuredOnly=yes'}
		      <div>
			      <a href="{fulllink_to_listing}" title="" class="title">
				      <img src="{raw_image_thumb_1}" width="100" />
				      <br /><span style="float: left;">{listing_title}</span>
			      </a>  
		      </div>
		{/listings_custom_search_result_block}

	</div>
</div>

Step 3: Add the following to your css file.

.featured_widget_scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	/* vertical scrollables have typically larger height than width but not now */
	height: 360px;
	width: 105px;
	margin-top:20px;
}

/* root element for scrollable items */
.featured_widget_scrollable .items {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}
.featured_widget_scrollable .items > div {
  height:120px;
}

You now have a scrolling featured listing, that will display 3 listings at a time and up to 10 listings in total. You can adjust the total number of featured listings that will be displayed, by changing the "$limit" argument in the {listings_custom_search_result_block $limit='10' $args='featuredOnly=yes'} tag.