Difference between revisions of "Team:DTU-Denmark/sidebar-js"

(Undo revision 108262 by Mikk936a (talk))
Line 1: Line 1:
−
body {
+
// The affix elements javascript
−
    overflow-x: hidden; /*prevent sidescroll on narrow devices*/
+
        window.onload = function (){
−
}
+
            $('#sidebar').affix({
 +
                offset: {
 +
                    // top: determines how far to scroll before applying .affixed class
 +
                    top: function () {
 +
                        var offsetTop = $('#sidebar').offset().top          // How far are we from top in total?
 +
                        //var navOuterHeight = $('.navbar').outerHeight(true) || 0  // If the navbar is fixed account for it
 +
                        //var bodyPaddingTop = parseInt($(document.body).css("padding-top"), 10) || 0  // or use body padding instead
 +
                        return (this.top = offsetTop - 140)
 +
                    }
 +
                    , bottom: function () {
 +
                        var footHight = document.getElementById("footer").offsetHeight;
 +
                        return (this.bottom = footHight + 20) || 0
 +
                    }
 +
                }
 +
            })
 +
        }
  
−
#MYbody {
 
−
    position: fixed;
 
−
    overflow-x: hidden;
 
−
    overflow-y: scroll;
 
−
}
 
  
−
a,
 
−
a:visited {
 
−
    color: #555;
 
−
}
 
  
−
a:hover,
+
        /**
−
a:focus {
+
        * This part handles the highlighting functionality.
−
    color: #990000;
+
        * We use the scroll functionality again, some array creation and
−
}
+
        * manipulation, class adding and class removing, and conditional testing
 +
        */
 +
        var aChildren = $('#sidebar li').children(); // find the a children of the list items
 +
        var aArray = []; // create the empty aArray
 +
        for (var i=0; i < aChildren.length; i++) {  
 +
            var aChild = aChildren[i];
 +
            var ahref = $(aChild).attr('href');
 +
            aArray.push(ahref);
 +
        } // this for loop fills the aArray with attribute href values
  
−
/*Masthead settings*/
+
        $(window).scroll(function(){
−
.masthead { /*control height*/
+
            var windowPos = $(window).scrollTop() + 125; // get the offset of the window from the top of page
−
    height: 300px;
+
            var windowHeight = $(window).height(); // get the height of the window
−
}
+
            var docHeight = $(document).height();
  
−
.masthead .caption { /*control shadowing*/
+
            for (var i=0; i < aArray.length; i++) {
−
    width:100%;
+
                var theID = aArray[i];
−
    height: 300px;
+
−
    bottom: .0rem;
+
−
    position: absolute;
+
−
    background:#000;
+
−
    background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
+
−
    background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
+
−
    background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
+
−
    background: linear-gradient(to right, #000, rgba(0, 0, 0, 0), #000);
+
−
}
+
  
−
.masthead .thumbnail {
+
                var divPos = $(theID).offset().top; // get the offset of the div from the top of page
−
    height: 300px;
+
                var divHeight = $(theID).parent().height(); // get the height of the div in question
−
    width: 100%;
+
                if (windowPos >= divPos) {
−
    background-size: cover;
+
                    $("a[href='" + theID + "']").addClass("nav-active");
−
    background-position: center;
+
                }  
−
    background-repeat: no-repeat;
+
−
    border: 0 none;
+
−
    box-shadow: none;
+
−
    margin:0;
+
−
    padding:0;
+
−
}
+
−
       
+
−
.masthead .caption > div {
+
−
    margin-top: 2em;
+
−
}
+
  
−
.masthead .caption h1 {
+
                if (windowPos > (divPos + divHeight)) {
−
    margin-top: -.0em;
+
                    $("a[href='" + theID + "']").removeClass("nav-active");
−
    padding-top: -.0em;
+
                }
−
}
+
  
−
.masthead .caption h1,
+
                if (windowPos < divPos) {
−
.masthead .caption p {
+
                    $("a[href='" + theID + "']").removeClass("nav-active");
−
    color: #fff;
+
                }
−
}
+
  
−
.masthead .title h1,
+
            }
−
.masthead .title h1 > p{
+
        });
−
    text-transform: uppercase;
+
−
    text-align: justify;
+
−
    float: left;
+
−
}
+
−
 
+
−
.masthead .title h1 > p {
+
−
    border-top: 1px solid;
+
−
    padding-top: .3em;
+
−
}
+
−
 
+
−
.masthead .intro blockquote {
+
−
    position: absolute;
+
−
    margin-top: 30px;
+
−
}
+
−
 
+
−
.masthead .intro blockquote p {
+
−
    text-align: right !important;
+
−
}
+
−
 
+
−
.masthead .intro blockquote small {
+
−
    color: #fff;
+
−
}
+
−
 
+
−
/*Content settings left column*/
+
−
.colLeft blockquote {
+
−
    border-left-color: #990000;
+
−
}
+
−
 
+
−
.colLeft a.anchor:target,
+
−
.colLeft div.anchor:target { /*Ensure that internal links will have the correct setoff, below the fixed header*/
+
−
    display: block;
+
−
    top: -125px;
+
−
    position: relative;
+
−
    visibility: hidden;
+
−
}
+
−
 
+
−
.colLeft .h2 {
+
−
    border-bottom-width: 2px;
+
−
    font-weight: 500;
+
−
}
+
−
 
+
−
.colLeft .h3 {
+
−
    border-bottom-width: 1px;
+
−
    font-weight: 500;
+
−
}
+
−
 
+
−
.colLeft .h2,
+
−
.colLeft .h3 {
+
−
    padding-bottom: 0.2em;
+
−
   
+
−
    border-bottom-style: solid;
+
−
    border-bottom-color: #990000;   
+
−
}
+
−
 
+
−
/*sidebar setting right columns*/
+
−
@media screen and (max-width: 1000px){
+
−
    .colRight {
+
−
    padding-left: 0px !important;
+
−
    }
+
−
}
+
−
 
+
−
#sidebar {
+
−
    margin-top: 20px;
+
−
    padding-top: 18px;
+
−
    padding-bottom: 5px;
+
−
    padding-left: 5px;
+
−
    padding-right: 5px;
+
−
    border-radius: 5px;
+
−
}
+
−
 
+
−
#sidebar {
+
−
    margin-left: 0px;
+
−
}
+
−
 
+
−
 
+
−
#sidebar.nav li a {
+
−
    color: #999;
+
−
    font-size: .9em;
+
−
    padding-top: 0.3em;
+
−
    padding-bottom: .3em;
+
−
    background-color: transparent;
+
−
    text-transform: uppercase;
+
−
    border-left-width: 3px;
+
−
    border-left-style: solid;
+
−
    border-left-color: #fff;
+
−
   
+
−
}
+
−
 
+
−
#sidebar.nav li a:active,
+
−
#sidebar.nav li a:hover,
+
−
#sidebar.nav li a:focus,
+
−
#sidebar.nav li a.nav-active:hover {
+
−
    background-color: transparent;
+
−
    list-style: circle;
+
−
    border-left-width: 3px;
+
−
    border-left-style: solid;
+
−
    border-left-color: #990000;
+
−
}
+
−
 
+
−
#sidebar.nav li a.nav-active {
+
−
    color:black;
+
−
    border-left-width: 3px;
+
−
    border-left-style: solid;
+
−
    border-left-color: #750000;
+
−
}
+
−
 
+
−
/* Undo the affixed behavior in mobile views */
+
−
 
+
−
 
+
−
/* Apply the affixed behavior */
+
−
/* affix-top: The affix-top class should be inline to the page. */
+
−
#sidebar.affix-top {
+
−
    width:200px;
+
−
/* for reference - no additional styling */
+
−
}
+
−
 
+
−
/* affix: The affix class should be fixed to the page. */
+
−
#sidebar.affix {
+
−
    position: fixed;
+
−
    top: 125px;      /* same as body padding or outer navbar height */
+
−
    width: 200px;  /* stop it from growing - anyone know how to fix this? */
+
−
}
+
−
 
+
−
/* affix bottom: The affix-bottom class should be positioned absolute. */
+
−
#sidebar.affix-bottom {
+
−
    position: absolute;
+
−
    width: 200px;
+
−
}
+
−
   
+
−
 
+
−
 
+
−
/*Fixes dissapear reappear of sidebar when scrolling on iPad */
+
−
#sidebar *:not(html) {
+
−
    -webkit-transform: translate3d(0, 0, 0);
+
−
}
+
−
 
+
−
@media screen and (max-width: 900px) {
+
−
 
+
−
 
+
−
    #sidebar {
+
−
        position: fixed;
+
−
        top: 70px !important;
+
−
        width: 200px;  /* stop it from growing - anyone know how to fix this? */
+
−
        z-index: 200;
+
−
        background-color: white;
+
−
        border-color: #790000;
+
−
        border-style: solid;
+
−
        border-width: 3px;
+
−
        float:left;
+
−
    }
+
−
 
+
−
    #sidebar.affix-bottom,
+
−
    #sidebar.affix-top {
+
−
        position: fixed;
+
−
    }
+
−
   
+
−
    #scrollspy {
+
−
        display: none;
+
−
    }
+
−
}
+
−
 
+
−
.sponsor-image {
+
−
width: 100%;
+
−
margin-bottom: 40px;
+
−
}
+

Revision as of 11:43, 7 September 2016

// The affix elements javascript 

       window.onload = function (){
           $('#sidebar').affix({
               offset: {
                   // top: determines how far to scroll before applying .affixed class
                   top: function () {
                       var offsetTop = $('#sidebar').offset().top           // How far are we from top in total?
                       //var navOuterHeight = $('.navbar').outerHeight(true) || 0  // If the navbar is fixed account for it
                       //var bodyPaddingTop = parseInt($(document.body).css("padding-top"), 10) || 0  // or use body padding instead
                       return (this.top = offsetTop - 140)
                   }
                   , bottom: function () {
                       var footHight = document.getElementById("footer").offsetHeight;
                       return (this.bottom = footHight + 20) || 0
                   }
               }
           })
       }



       /**
        * This part handles the highlighting functionality.
        * We use the scroll functionality again, some array creation and 
        * manipulation, class adding and class removing, and conditional testing
        */
       var aChildren = $('#sidebar li').children(); // find the a children of the list items
       var aArray = []; // create the empty aArray
       for (var i=0; i < aChildren.length; i++) {    
           var aChild = aChildren[i];
           var ahref = $(aChild).attr('href');
           aArray.push(ahref);
       } // this for loop fills the aArray with attribute href values

       $(window).scroll(function(){
           var windowPos = $(window).scrollTop() + 125; // get the offset of the window from the top of page
           var windowHeight = $(window).height(); // get the height of the window
           var docHeight = $(document).height();

           for (var i=0; i < aArray.length; i++) {
               var theID = aArray[i];

               var divPos = $(theID).offset().top; // get the offset of the div from the top of page
               var divHeight = $(theID).parent().height(); // get the height of the div in question
               if (windowPos >= divPos) {
                   $("a[href='" + theID + "']").addClass("nav-active");
               } 

               if (windowPos > (divPos + divHeight)) {
                   $("a[href='" + theID + "']").removeClass("nav-active");
               }

               if (windowPos < divPos) {
                   $("a[href='" + theID + "']").removeClass("nav-active");
               }

           }
       });