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




Tab Menu

Shows/hide content based on which tab is selected. Reference: Stellhorn RV


<div id="t-tabs"><span class="t-tab selected" id="tab-first">First Tab</span><span class="t-tab" id="tab-second">Second Tab</span></div>
<hr /><br />
<div id="first-wrapper" class="tab-wrapper selected">
   <h2>Title One</h2>
   <p>Content goes here.</p>
</div>
<div id="second-wrapper" class="tab-wrapper">
   <h2>Title Two</h2>
   <p>Some more content goes here.</p>
</div>

<script>
    // Add or remove 'selected' class based on which tab is clicked.
    $( document ).ready(function() {
        $('.t-tab').click(function(){
            var id = $(this).attr('id').substr(4);
            $(this).addClass('selected').parents('#t-tabs').find('.t-tab').not($(this)).removeClass('selected');
            $('.tab-wrapper').removeClass('selected');
            $('#' + id + '-wrapper').addClass('selected');
        });
    });
</script>

.t-tab { border: 1px solid #ddd; border-radius: 8px 8px 0 0; padding: 10px 30px; position: relative; border-bottom: 1px; top: 14px; margin-right: 20px; background: #ebebeb; z-index: 9; }
.t-tab.selected { background: #fff; border-bottom: 0; }
.t-tab:hover { cursor: pointer; }
.tab-wrapper { display: none; }
.tab-wrapper.selected { display: block; }
First tab     Second tab




Call Today phone link on listing pages
Call Today phone link on detail pages
;