Supporting each other

Community forums

Welcome, Guest
Username: Password: Remember me
The place for more technical questions for those who want to create new pagetypes or bespoke functionality.
  • Page:
  • 1
  • 2

TOPIC:

Bootstrap template background images 6 years 3 months ago #4861

  • Neil Pollock
  • Neil Pollock's Avatar
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 92
  • Thank you received: 4
The full screen to minimised scroll effect requires some javascript (so please excuse any bad practice as javascript is not strength of mine). Here is what I use:
//find current viewport height and set jumbotron to that size (to make sure splash image always fills entire screen)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
$(".jumbotron").css("height", h);

//if window is resized, adjust the jumbotron height
$(document).ready(function () {
    $(window).resize(function () {
        var viewHeight = $(this).height();
        $(".jumbotron").height(viewHeight);
    }).resize();
});

//this is the main scroll function
$(window).scroll(function () {
    if ($(document).scrollTop() > 20) {
        $(".jumbotron").addClass("shrink");
        $(".titles").addClass("shrinkMenu");
        $("#clickableWrapper").remove();
    } else {
        $(".jumbotron").removeClass("shrink");
        $(".jumbotron").css("height", Math.max(document.documentElement.clientHeight, window.innerHeight || 0));
        $(".titles").removeClass("shrinkMenu");
    }
});

As you can see, there are a bunch of rules for adding an removing CSS classes or setting CSS elements, so it should be a case of playing around with these and changing the setting to suit your requirements. At the very least you will need to add the following class to your global CSS (you can change the settings of this, height, margin etc., as you need):
.shrink {
	height: 175px !important;
	margin-top: 160px;
}

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
  • 2
Moderators: jjs
Time to create page: 0.060 seconds
Copyright © 2024 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search