Next time I do an install I’ll try to document the whole thing, but for now that link is probably one of the better/simpler guides I’ve come across. If you have any problems please leave a comment below and I’ll try to get back to you.
You can also close the modal popup manually by using the following JavaScript:
$('#test_modal').modal('hide')
Adjust Modal Width:
In order to adjust the modal width you have two options, Javascript or CSS. You can use the following JavaScript mentioned on GitHub:
$('#test_modal').modal({
backdrop: true,
keyboard: true,
show: false \remove this if you don't want it to show straight away
}).css({
width: 'auto',
'margin-left': function () {
return -($(this).width() / 2);
}
});
body .modal-admin {
//new custom width
width: 750px;
//must be half of the width, minus scrollbar on the left (30px)
margin: -345px 0 0 -375px;
}
Show modal when the user scrolls past certain div
I’ve received another request on how to show the modal when a user scrolls to a certain div. The following should work, but please let me know if you have any issues.
/* Wait for document to load */
$(document).ready(function(){
$(window).scroll(function(){
//Retrieve scroll distance from top
var top = $(window).scrollTop();
//Retrieve the divs distance from top of page
var div_distance = $('my_div').offset().top;
//Use this if you want a bit of a variable distance, for instance if they scroll 150 pixels past the div
var buffer_distance = 150;
//Check if scrolled past div
if(top >= div_distance && top <= (div_distance + buffer_distance)){
//Show modal - you may want to add checks etc to see if it's already show
$('#test_modal').modal('show');
} else {
//Hide the modal, have scrolled past - you may want to add some checks to see if it's already hidden etc
$('#test_modal').modal('hide');
}
});
});
Just a quick post on how easy it is to implement a popover with twitter bootsrap:
JavaScript:
//Create tooltips for login/signup forms
function create_tooltips(){
//Create vars
var titles = ['test title']
var contents = ['test content'];
var fields = ['#user_email'];
//Loop through each field and assign tooltip
for(var i = 0; i < fields.length; i++){
//Create vars
var field = $(fields[i]);
var title = titles[i];
var content = contents[i];
//Ensure field found
if(field){
//Create popover
$(field).popover(
{
animation: true,
placement: 'right',
selector: false,
trigger: 'hover',
title: title,
content: content,
delay: 0
});
}
}
}
Form:
resource_name, :url => registration_path(resource_name), :class => 'form-vertical') do |f| %>
'btn btn-success' %>
Result: Popover - Twitter Bootstrap
That’s all there is to it, if you haven’t had a chance to check it out yet make sure you head on over to the official site – there are some pretty neat features.
What I Broke - Programming and Web Development 