Code Snippets

V2 Listings with Dual Images

This CSS uses the UnitListItemV2DualImages.cshtml listing template


/*-- Unit Listing Dual Images --*/

.unit-list .img2 { display: none; }
.unit-list .favorite-container { left: 12px; right: auto; }

    @media (min-width: 1600px) {
        .unit-list .listMode .unit-media {flex: 0 0 575px;}
        .unit-list .listMode .unit-media img {width: 270px;border-radius: 4px;}
        .unit-list .listMode .img2 { display: inline-block; margin-left: 15px; }
        .unit-list .listMode .unit-pricing {flex: 0 0 280px;padding: 0 0 0 30px;}
    }
  
Dual Image Listings Sample




Reposition the Searchbar on Mobile Devices


// MOVE SEARCHBAR
<script>

    function move_searchbar() {
        if ($(window).width() <= 991) {
            $('#top-search-container').insertAfter($('#main-nav'));
        } else {
            $('#top-search-container').insertAfter($('#rv-types'));
        }
    };
    move_searchbar();

</script>
Mobile Searchbar sample




Pause Jquery Elements

Use these scripts in the Chrome Dev Tools console



PAUSE FEATURED RVS:  $("#slideshowWrap").cycle("pause")

PAUSE DEAL OF THE WEEK TIMER:  $("#defaultCountdown").countdown("pause")





Marquee

Automatically repeating marquee


<div class="marquee"><marquee><span>RV Parts....</span> <span>RV Accessories....</span><span>We carry propane....</span><span>We will ship globally....</span></marquee>
</div>

<script>

	var row = $('marquee span');
	for(var i = 0; i < 10; i++ ) {
	    $('marquee').append(row.clone())
	}

</script>
Sample Marquee



Listing Page V2 Featured Units Corner Ribbon

Using an Image (Beckley's RVs)


.home-featured #slideshowWrap .photoContainer:after,
.unit-list .featured-unit .unit-media-wrapper:after,
.unit-detail-v2.featured-unit .detailMediaPhotoPlayer ul.slides > li:after { content: url(https://assets-cdn-interactrv.netdna-ssl.com/beckleysrvs/images/corner-tab-featured-unit.png); position: absolute; top: 0; left: 0; z-index: 999; }
.unit-list .unit-media-wrapper { position: relative; overflow: hidden; }
.unit-detail-v2.featured-unit .detailMediaPhotoPlayer ul.slides > li { overflow: hidden; }
.unit-list .unit-media-wrapper:after { left: -42px; top: 18px; }
  
Corner Ribbon sample 1


Using only CSS (General RV)


.home-featured #slideshowWrap .photoContainer:after,
.unit-list .featured-unit .unit-media-wrapper:after,
.unit-detail-v2.featured-unit .detailMediaPhotoPlayer ul.slides > li:after { content: 'HOT DEAL'; position: absolute; display: block!important; top: 22px; left: -46px; background: #d7062b; font-family: 'Montserrat', sans-serif; color: #fff; font-weight: 700; font-style: italic; padding: 6px 45px 5px 56px; transform: rotate(-35deg); z-index: 999; }
.unit-list .unit-media-wrapper { position: relative; overflow: hidden; }
.unit-detail-v2.featured-unit .detailMediaPhotoPlayer ul.slides > li { overflow: hidden; }
.unit-list .unit-media-wrapper:after { left: -45px; top: 20px; }
  
Corner Ribbon sample 2




UL List with FontAwesome Checkmarks


ul.list-checks { margin: 0 0 30px 0; list-style: none; padding: 0; }
ul.list-checks li { position: relative; padding-left: 25px; }
ul.list-checks li:after { content: '\F00C'; font-family: 'fontAwesome'; position: absolute; top: 0; left: 0; color: #242817; }
  
FontAwesome checkmarks sample




Featured RV See Details Button


<script>

    $(function(){ 
        $('#home-featured-rvs .unit').each(function(){
        $(this).find('.pricingContainer').append('<span class="btn btn-primary">SEE DETAILS</span>');
        });
	});	

</script>
More Details button sample
;