Commit 1f4bfb15 authored by Renfred Harper's avatar Renfred Harper

Smooth javascript transitions in info and about views

parent 0dac99d9
......@@ -40,10 +40,6 @@ body {
background-size: cover;
padding-top: 50px;
}
.clip{
overflow: hidden;
}
.title{
text-align: center;
font-size: 50px;
......@@ -209,6 +205,9 @@ ul.ui-autocomplete {
-ms-transition: opacity 356ms ease-in-out, -ms-filter 356ms ease-in-out;
transition: opacity 356ms ease-in-out, "filter" 356ms ease-in-out;
}
.clip-height{
max-height: 60%;
}
/* Custom Responsive Classes */
/* xs */
@media (min-width: 480px) {
......
// Toggles the about page
$(document).ready(function(){
var lastosition;
$('#about-link').click(function(){
$(this).parent().toggleClass('active');
$('#about-body').slideToggle(356);
$('.main-container').toggleClass('grid-blur');
// Prevent body from scolling when about section is active
$('body').toggleClass('clip');
$('#about-link-text, #about-close-nav').toggle();
// Keep track of the users vertical position so it can be scolled back
//to when the window is closed
position = $(window).scrollTop();
console.log(position);
$('#about-body').slideToggle(356);
$('.main-container').toggleClass('grid-blur');
$(this).parent().toggleClass('active');
// Replace "About" link with the close icon
$('#about-link-text, #about-close-nav').toggle();
// Prevent body from scolling when about section is active
$('.main-container').slideToggle(500);
// Scroll back to top
$('html, body').animate({
scrollTop: 0
}, 500);
});
$('#about-close').click(function(){
$('#about-link').parent().removeClass('active');
$('#about-body').slideUp(356);
$('.main-container').removeClass('grid-blur');
$('body').removeClass('clip');
$('#about-link-text').show();
$('#about-close-nav').hide();
$('#about-link').parent().removeClass('active');
$('#about-body').slideUp(356);
$('.main-container').removeClass('grid-blur');
$('body').removeClass('clip');
$('#about-link-text').show();
$('#about-close-nav').hide();
$('.main-container').show();
// Scroll back to saved position
$('html, body').animate({
scrollTop: position
}, 500);
});
});
......@@ -33,6 +33,9 @@ $(document).ready(function() {
// Displays more info about a restaurant on-click
$(document).on('click', '.grid-box', function() {
grid_id = $(this).attr('id');
// Keep track of the users vertical position so it can be scolled back
//to when the window is closed
position = $(window).scrollTop();
// Search though the restaurnts object to find the selected restaurant's info
var restaurant;
$.each(restaurants, function(idx, restaurant_i) {
......@@ -91,13 +94,21 @@ $(document).ready(function() {
$('#info-body').slideDown(300);
lastClicked = grid_id;
}
if ($(window).width() <= 992) {
// On mobile displays, disable scrolling when info body is active
$('body').addClass('clip');
if ($(window).width() < 992) {
// On mobile displays, hide grid to disable scrolling when info body is active
$('.main-container').slideToggle(500);
// Scroll to top of page to prevent body from going out of view
$('html, body').animate({
scrollTop: 0
}, 430);
}
});
$('#info-close').click(function() {
$('#info-body').slideUp(350);
$('body').removeClass('clip');
$('.main-container').show();
$('html, body').animate({
scrollTop: position
}, 350);
});
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment