Carlo Code Sample

app.js

var ready;
ready = function() {

	$('#signup').click(function(){
		$('#myModal').modal('show');
		 return false;
	});

	$('#written_material').click(function(){
		$('#myModal').modal('show');
		 return false;
	});

	$('#login').click(function(){
		$('#myModal').modal('show');
		 return false;
	});

	$('.show_featured').hover(
		function(){
	$('.home-featured-hover').toggle();
	},
    function () {
        $('.home-featured-hover').toggle();           
    });

$("#search-icon").click(function () {
    $(".search-bar").toggle();
    return false;
});

$('#close_search').click(function(){
	$('.search-bar').fadeOut();
});
// DATEPICKER
$('.date_picker').datepicker({
    dateFormat: "yy-mm-dd"
  });
//

//TOOLTIP SOCIAL

$('.tooltip_social').hover(function(){
	$(this).tooltip('toggle');
});



// QUESTION MARK TOOL TIP
$('.question_mark').hover(function(){
	$(this).tooltip('toggle');
});

//

$('.social_box').hover(function(){
	$(this).find('.account-share-box').fadeIn();
},
function(){
	$(this).find('.account-share-box').fadeOut();
});

// DOES NOT STOP CAROUSEL 

$('.carousel').carousel({
    pause: "hover"
});

/// DEVISE REGISTRATION 

$("form#sign_up_user").bind("ajax:success", function(e, data, status, xhr) {
  if (data.success) {
	window.location.replace("/account");
  } else {
	var errors = $.parseJSON(xhr.responseText).errors
	$('#signup_errors').html(errors).show();
  }
});

// END DEVISE REGISTRATION
// TOOLTIP

$('.approved-for-creds').tooltip();

$('.question_mark_brands').hover(function(){
	$(this).tooltip('toggle');
});

$('#add_another_state').click(function(){
	
});	


var timeoutObj;
$('.social').popover({
offset: 10,
trigger: 'manual',
html: true,
placement: 'bottom',
template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide();});"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).mouseenter(function(e) {
$(this).popover('show');
}).mouseleave(function(e) {
var _this = this;
setTimeout(function() {
if (!$(".popover:hover").length) {
  $(_this).popover("hide");
 }
}, 100);
}); 



// DEVISE LOGIN 

$("form#login_user").bind("ajax:success", function(e, data, status, xhr) {
  if (data.success) {
  	location.reload();
   } else {
    $('#login_errors').show();
  }
});




// END DEVISE LOGIN


// ACCOUNT PAGE


$('#free_subscriber').click(function(){
	$('.btn-subscribe').removeClass('active');
	$(this).find('.btn-subscribe').addClass('active');
	$('#hidden_suscription_form').hide();
	$('#hidden_ala_carte_form').hide();
});


// END ACCOUNT PAGE
};

$(document).ready(ready);
$(document).on('page:load', ready);

cle.html.erb

<div class="cle-top">
	<div class="container">
		<div class="col-md-12">
			<div class="row">
				<div class="col-md-4">
					<img src="assets/cle.png" style="max-height:175px">
				</div>
				<div class="col-md-8">
					<h2>Earn CLE Credits Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</h2>
					<div class="btn btn-default">ENROLL - ANNUAL</div>
					<div class="btn btn-default">ENROLL - A LA CARTE</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container cle-container">
	<div class="col-md-12">
		<div class="row">
			<div class="col-md-4">
				<img src="assets/featured_temp_2.png" />
			</div>
			<div class="col-md-8">
				<h2>Value Prop 1</h2>
				<h4>This is a good opportunity to explain reasons why people should use this site</h4>
				
			</div>
		</div>
	</div>
</div>
<div style="background-color:#e3e3e3;">
	<div class="container cle-container">
		<div class="col-md-12" style="background-color:#e3e3e3">
			<div class="row">
				<div class="col-md-8" style="text-align:right">
					<h2>Value Prop 2</h2>
					<h4>This is a good opportunity to explain reasons why people should use this site</h4>
					
				</div>
				<div class="col-md-4">
					<img src="assets/featured_temp_2.png" />
				</div>
			</div>
		</div>
	</div>	
</div>
<div class="container cle-container">
	<div class="col-md-12">
		<div class="row">
			<div class="col-md-4">
				<img src="assets/featured_temp_2.png" />
			</div>
			<div class="col-md-8">
				<h2>Value Prop 3</h2>
				<h4>This is a good opportunity to explain reasons why people should use this site</h4>
			</div>
		</div>
	</div>
</div>
<div style="background-color:#e3e3e3;">
	<div class="container cle-container">
		<div class="col-md-6 col-md-offset-3">
		
			<h2 class="text-center" style="padding-bottom:20px; margin-top:0px">Satisfied Lawyers</h2>

			<div id="cle-carousel" class="carousel slide" data-ride="carousel">

			  <ol class="carousel-indicators">
			    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
			  </ol>

				<!-- Wrapper for slides -->
				<div class="carousel-inner">
				  	<%Testimonial.all.each_with_index do |testimonial,index| %>
					<% if index==0 %>
				    	<div class="item active">	
				    <%else%>
				 		<div class="item">	
				    <%end%>		
						
					<%= image_tag testimonial.image, class: 'testimonial-img'%>
					<h3><em>"<%=testimonial.content%>"</em></h3>	
					<%=testimonial.person%> - <cite title="Source Title"><%=testimonial.company%></cite>
							
			    </div>
			    <%end%>
			  </div>

			  <!-- Controls -->
			  <a class="left carousel-control" href="#cle-carousel" data-slide="prev">
			    <span class="glyphicon glyphicon-chevron-left"></span>
			  </a>
			  <a class="right carousel-control" href="#cle-carousel" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right"></span>
			  </a>
			</div>
		</div>
	</div>
</div>
<div class="container cle-container">
	<div class="col-md-12" style="text-align:center;">
		<h2 style="text-align:center">DOES YOUR LAW FIRM REQUIRE CLE?<h2>
	
		<h4 style="margin-bottom:20px;">Please call or email at XXXXXX for special law firm rates</h4>
		<div class="btn btn-default btn-primary">ENROLL - ANNUAL</div>
		<div class="btn btn-default btn-primary">ENROLL - A LA CARTE</div>
	</div>
</div>