"v4 - News Layout"
Bootstrap 3.3.0 Snippet by explotter

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class='container-fluid'> <div class='row'> <nav class='col-xs-12'> <div class='newsnav'> <div id='recentnews'><i class="fa fa-newspaper-o"></i><span class='hidden-xxs'>RECENT NEWS</span></div> <div class='search'><i class="fa fa-search"></i> ALL</div> <ul class='newslinks'> <a href='#' class='more-links'> <li>MORE LINKS <i class="fa fa-chevron-down"></i></li> </a> <a href='#'> <li>LIVE STEREAM</li> </a> <a href='#'> <li>PROMOTE NEWS</li> </a> <a href='#'> <li>EVENTS</li> </a> <a href='#'> <li>CALENDAR</li> </a> <a href='#'> <li>CONCORDIAN</li> </a> <a href='#'> <li>CONTACT</li> </a> </ul> </div> </nav> <nav class='col-xs-12'> <div class='searchnav'> <ul> <li id='filter-name'><i class="fa fa-filter" aria-label='filter by name'></i> BY NAME</li> <li id='filter-date'><i class="fa fa-filter"></i> BY DATE</li> <li class='search-field'><input id='article-search' placeholder='Search for an article.'></input> </li> <li class='close-search'><i class="fa fa-times"></i></li> </ul> </div> <div class='archive'> <div class='col-lg-3 col-md-3 col-sm-3 col-xs-0 col-xxs-0'> <div id='active-article'> <div class='contain'><img class='b-lazy' src='http://lorempixel.com/450/400/nature/1'></div> <div class='info'> <p>Concordia University Wisconsin will honor more than 1,000 graduates at its spring commencement ceremonies on May 13 and 14, taking place at the University’s main campus in Mequon.</p> </div> </div> </div> <div class='col-lg-9 col-md-9 col-sm-9 col-xs-12 col-xxs-12'> <ul id='archive-list'> <a href='#'> <li> <div id='date' class='new'>NEW</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date' class='new'>NEW</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> <a href='#'> <li> <div id='date'>MAY 13</div> <div id='title'>CUW contributes to safe disposal of drugs</div> </li> </a> </ul> </div> </div> </nav> </div> <div class='row'> <!--STYLE1--> <a href='#' class='col-lg-3 col-md-4 col-sm-6 col-xs-6 col-xxs-12'> <article class='style1'> <div class='date'> NEW </div> <!--must have larger width than height--> <i class="loader fa fa-spinner"></i> <img class='lazy' data-original='https://www.cuw.edu/_files/images/test.JPG'> <div class='content'> <!--32 charecter max--> <div class='title'> CUW contributes to safe disposal of drugs<i class="share fa fa-share-square-o"></i> </div> <div class='info'> <p>Concordia University Wisconsin will honor more than 1,000 graduates at its spring commencement ceremonies on May 13 and 14, taking place at the University’s main campus in Mequon.</p> </div> </div> </article> </a> <a href='#' class='col-lg-3 col-md-4 col-sm-6 col-xs-6 col-xxs-12'> <article class='style1'> <div class='date'> NEW </div> <!--must have larger width than height--> <i class="loader fa fa-spinner"></i> <img class='lazy' data-original='https://www.cuw.edu/_files/images/test2.JPG'> <div class='content'> <!--32 charecter max--> <div class='title'> CUW contributes to safe disposal of drugs<i class="share fa fa-share-square-o"></i> </div> <div class='info'> <p>Concordia University Wisconsin will honor more than 1,000 graduates at its spring commencement ceremonies on May 13 and 14, taking place at the University’s main campus in Mequon.</p> </div> </div> </article> </a> <a href='#' class='col-lg-3 col-md-4 col-sm-6 col-xs-6 col-xxs-12'> <article class='style1'> <div class='date'> NEW </div> <!--must have larger width than height--> <i class="loader fa fa-spinner"></i> <img class='lazy' data-original='https://www.cuw.edu/_files/images/test3.JPG'> <div class='content'> <!--32 charecter max--> <div class='title'> CUW contributes to safe disposal of drugs<i class="share fa fa-share-square-o"></i> </div> <div class='info'> <p>Concordia University Wisconsin will honor more than 1,000 graduates at its spring commencement ceremonies on May 13 and 14, taking place at the University’s main campus in Mequon.</p> </div> </div> </article> </a> <a href='#' class='col-lg-3 col-md-4 col-sm-6 col-xs-6 col-xxs-12'> <article class='style1'> <div class='date'> NEW </div> <!--must have larger width than height--> <i class="loader fa fa-spinner"></i> <img class='lazy' data-original='https://www.cuw.edu/_files/images/test4.JPG'> <div class='content'> <!--32 charecter max--> <div class='title'> CUW contributes to safe disposal of drugs<i class="share fa fa-share-square-o"></i> </div> <div class='info'> <p>Concordia University Wisconsin will honor more than 1,000 graduates at its spring commencement ceremonies on May 13 and 14, taking place at the University’s main campus in Mequon.</p> </div> </div> </article> </a> <!--STYLE2--> <a href='#' class='col-lg-3 col-md-4 col-sm-6 col-xs-6 col-xxs-12'> <article class='style2'> <!--must have larger width than height--> <i class="loader fa fa-spinner"></i> <img class='lazy' data-original='https://www.cuw.edu/_files/images/test5.JPG'> <div class='content'> <div class='share'><i class="fa fa-share-square-o"></i>SHARE</div> <div class='date'> NEW </div> <!--32 charecter max--> <div class='title'> CUW contributes to safe disposal of drugs </div> <div class='info'> <p> Concordia University Wisconsin will honor more than 1,000 graduates at its spring commencement ceremonies on May 13 and 14, taking place at the University’s main campus in Mequon. </p> </div> </div> </article> </a> <a href='#' class='col-lg-3 col-md-4 col-sm-6 col-xs-6 col-xxs-12'> <article class='style2'> <!--must have larger width than height--> <i class="loader fa fa-spinner"></i> <img class='lazy' data-original='https://www.cuw.edu/_files/images/test6.JPG'> <div class='content'> <div class='share'><i class="fa fa-share-square-o"></i>SHARE</div> <div class='date'> NEW </div> <!--32 charecter max--> <div class='title'> CUW contributes to safe disposal of drugs </div> <div class='info'> <p> Concordia University Wisconsin will honor more than 1,000 graduates at its spring commencement ceremonies on May 13 and 14, taking place at the University’s main campus in Mequon. </p> </div> </div> </article> </a> <a href='#' class='col-lg-3 col-md-4 col-sm-6 col-xs-6 col-xxs-12'> <article class='style2'> <!--must have larger width than height--> <i class="loader fa fa-spinner"></i> <img class='lazy' data-original='https://www.cuw.edu/_files/images/test7.JPG'> <div class='content'> <div class='share'><i class="fa fa-share-square-o"></i>SHARE</div> <div class='date'> NEW </div> <!--32 charecter max--> <div class='title'> CUW contributes to safe disposal of drugs </div> <div class='info'> <p> Concordia University Wisconsin will honor more than 1,000 graduates at its spring commencement ceremonies on May 13 and 14, taking place at the University’s main campus in Mequon. </p> </div> </div> </article> </a> <a href='#' class='col-lg-3 col-md-4 col-sm-6 col-xs-6 col-xxs-12'> <article class='style2'> <!--must have larger width than height--> <i class="loader fa fa-spinner"></i> <img class='lazy' data-original='https://www.cuw.edu/_files/images/test8.JPG'> <div class='content'> <div class='share'><i class="fa fa-share-square-o"></i>SHARE</div> <div class='date'> NEW </div> <!--32 charecter max--> <div class='title'> CUW contributes to safe disposal of drugs </div> <div class='info'> <p> Concordia University Wisconsin will honor more than 1,000 graduates at its spring commencement ceremonies on May 13 and 14, taking place at the University’s main campus in Mequon. </p> </div> </div> </article> </a> <a href='#' class='col-lg-3 col-md-4 col-sm-6 col-xs-6 col-xxs-12'> <article class='style2'> <!--must have larger width than height--> <i class="loader fa fa-spinner"></i> <img class='lazy' data-original='https://www.cuw.edu/_files/images/test5.JPG'> <div class='content'> <div class='share'><i class="fa fa-share-square-o"></i>SHARE</div> <div class='date'> NEW </div> <!--32 charecter max--> <div class='title'> CUW contributes to safe disposal of drugs </div> <div class='info'> <p> Concordia University Wisconsin will honor more than 1,000 graduates at its spring commencement ceremonies on May 13 and 14, taking place at the University’s main campus in Mequon. </p> </div> </div> </article> </a> <a href='#' class='col-lg-3 col-md-4 col-sm-6 col-xs-6 col-xxs-12'> <article class='style2'> <!--must have larger width than height--> <i class="loader fa fa-spinner"></i> <img class='lazy' data-original='https://www.cuw.edu/_files/images/test6.JPG'> <div class='content'> <div class='share'><i class="fa fa-share-square-o"></i>SHARE</div> <div class='date'> NEW </div> <!--32 charecter max--> <div class='title'> CUW contributes to safe disposal of drugs </div> <div class='info'> <p> Concordia University Wisconsin will honor more than 1,000 graduates at its spring commencement ceremonies on May 13 and 14, taking place at the University’s main campus in Mequon. </p> </div> </div> </article> </a> <a href='#' class='col-lg-3 col-md-4 col-sm-6 col-xs-6 col-xxs-12'> <article class='style2'> <!--must have larger width than height--> <i class="loader fa fa-spinner"></i> <img class='lazy' data-original='https://www.cuw.edu/_files/images/test7.JPG'> <div class='content'> <div class='share'><i class="fa fa-share-square-o"></i>SHARE</div> <div class='date'> NEW </div> <!--32 charecter max--> <div class='title'> CUW contributes to safe disposal of drugs </div> <div class='info'> <p> Concordia University Wisconsin will honor more than 1,000 graduates at its spring commencement ceremonies on May 13 and 14, taking place at the University’s main campus in Mequon. </p> </div> </div> </article> </a> <a href='#' class='col-lg-3 col-md-4 col-sm-6 col-xs-6 col-xxs-12'> <article class='style2'> <!--must have larger width than height--> <i class="loader fa fa-spinner"></i> <img class='lazy' data-original='https://www.cuw.edu/_files/images/test8.JPG'> <div class='content'> <div class='share'><i class="fa fa-share-square-o"></i>SHARE</div> <div class='date'> NEW </div> <!--32 charecter max--> <div class='title'> CUW contributes to safe disposal of drugs </div> <div class='info'> <p> Concordia University Wisconsin will honor more than 1,000 graduates at its spring commencement ceremonies on May 13 and 14, taking place at the University’s main campus in Mequon. </p> </div> </div> </article> </a> </div> </div> <div class='newsbottom'> <div class='to-top'><i class="fa fa-arrow-up"></i></div> </div>
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700); @import url(https://fonts.googleapis.com/css?family=Abel); body.opened, html.opened{ overflow:hidden; position: relative; height: 100%; } ul { margin: 0; padding: 0; list-style-type: none; } ul.newslinks a { text-decoration: none; } nav .newsnav { height: 35px; background: rgb(0, 85, 150); } nav .newsnav #recentnews { font-family: 'Abel'; font-size: 20px; height: 100%; padding: 0 14px 0 8px; background: #faA634; color: #fff; float: left; } nav .newsnav #recentnews i { margin: 8px; } ul.newslinks { float: right; } .newslinks a { float: left; padding: 6px 10px 0 10px; color: #fff; font-family: 'Abel'; font-size: 16px; height: 35px; position: relative; transition: color .3s ease-in-out; } .newslinks a:hover { color: #faA634; text-decoration: none; } .newslinks a:after { content: ''; position: absolute; left: 0; bottom: 0; display: block; height: 2px; width: 0; background: #faA634; transition: width .3s ease-in-out; } .newslinks a:hover:after { width: 100%; } .newslinks a.more-links { display: none; } .newsnav .search { background: #faA634; padding: 5px 16px; width: 80px; height: 35px; float: right; color: #fff; font-family: 'Abel'; font-size: 18px; cursor: pointer; } .newsnav .search:hover { color: rgb(0, 85, 150); } nav .searchnav { height: 0; overflow: hidden; background: #faA634; transition: height .3s ease-in-out; } nav .searchnav ul { float: right; display: block; } nav .searchnav li { color: #fff; float: left; padding: 7px 8px 0 8px; height: 35px; cursor: pointer; position: relative; transition: color .3s ease-in-out; font-family: 'Abel'; font-size: 16px; } nav .searchnav li:hover { color: rgb(0, 85, 150); } nav .searchnav li:after { content: ''; position: absolute; left: 0; bottom: 0; display: block; height: 2px; width: 0; background: rgb(0, 85, 150); transition: width .3s ease-in-out; } nav .searchnav li:hover:after { width: 100%; } nav .searchnav li.close-search { font-size: 18px; padding: 5px 12px; } nav .searchnav li.close-search:after { display: none; } nav .searchnav li.search-field { font-family: sans-serif; font-size: 12px; color: #000; } nav .searchnav li.search-field:hover {} nav .searchnav li input { height: 80%; border: none; padding: 0 5px 0 5px; width: 400px; } nav .searchnav li.search-field:after { display: none; } nav .searchnav.opened { height: 35px; } .archive { display: block; padding-top: 15px; position: absolute; z-index: 6000; background: #fff; height: 0; overflow: hidden; left: 0; transition: height .4s ease-in-out; width: 100%; } .archive.opened { height: 370px; } .archive #active-article .contain { min-height: 50px; max-height: 250px; overflow: hidden; } .archive #active-article img { width: 100%; } .archive #active-article .info p { margin-top: 6px; } ul#archive-list { font-family: 'Oswald'; font-size: 16px; height: 350px; overflow: scroll; overflow-x: hidden; } #archive-list li { padding: 5px; color: #002743; } #archive-list #date { color: rgb(0, 85, 150); display: inline-block; margin-right: 6px; } #archive-list li:hover #date { color: #fff; } #archive-list #title { display: inline-block; } #archive-list li:hover { background: rgb(0, 85, 150); color: #fff; } #archive-list #date.new { color: #faA634; } #archive-list:hover #date.new { color: #faA634; } article.style1 { position: relative; height: auto; min-height:150px; overflow: hidden; margin-top: 15px; } article img { opacity:0; width:100%; z-index: 2; margin: 0 0 0 0; filter: grayscale(100%); transition: transform .4s ease-in-out, margin .4s ease-in-out, filter .4s ease-in-out; } article img.show{ opacity:1; } article .loader { position: absolute; left: calc(50% - 25px); top: calc(50% - 25px); color: rgb(0, 85, 150); font-size: 50px; z-index: 0; animation: spin 1s linear infinite; } @keyframes spin { 100% { transform: rotate(360deg); } } article.style1:hover img { margin: 0 0 0 0%; transform:scale(1.15); filter: grayscale(0%); } article.style1 .date { position: absolute; z-index: 3; left: 0; width: 50px; height: 30px; background: #faA634; font-family: 'Oswald'; font-style: normal; font-size: 18px; text-transform: uppercase; text-align: center; color: #fff; padding-top: 3px; } article.style1 .date.old { padding-top: 2px; background: rgb(0, 85, 150); } article.style1 .date.old:before { font-size: 14px; } article.style1 .content { position: absolute; height: auto; width: 100%; bottom: 0; left: 0; z-index: 4; } article.style1 .title { bottom: 0; left: 0; width: 100%; height: 30px; background: rgba(0, 85, 150, .75); font-family: 'Oswald'; font-style: normal; font-size: 14px; text-align: left; padding: 5px; color: #fff; transition: background .4s ease-in-out; } article.style1:hover .title { background: rgba(0, 85, 150, 1); } article.style1 i.share { position: absolute; right: 0; font-size: 18px; padding: 2px 8px; transition: all .2s ease-in-out; } article.style1 i.share:hover { color: #faA634; } article.style1 .info { bottom: 0; left: 0; width: 100%; max-height: 0; background: #faA634; text-align: left; overflow: hidden; transition: max-height .3s ease-in-out, color .4s ease-in-out; } article.style1 .info p { padding: 5px; font-family: sans-serif; font-style: normal; font-size: 12px; color: #fff; } article.style1:hover .info { max-height: 75px; color: #fff; } /*Style2*/ article.style2 { position: relative; height: auto; min-height:150px; overflow: hidden; margin-top: 15px; } article.style2:hover img { margin: 0 0 0 0%; transform:scale(1.15); filter: grayscale(0%); } article.style2 .date { position: absolute; z-index: 2; left: 0; width: 50px; height: 30px; background: #faA634; font-family: 'Oswald'; font-style: normal; font-size: 18px; text-transform: uppercase; text-align: center; color: #fff; padding-top: 3px; } article.style2 .date.old { padding-top: 2px; background: rgb(0, 85, 150); } article.style2 .date.old:before { font-size: 14px; } article.style2 .content { position: absolute; height: auto; width: 100%; bottom: 0; left: 0; z-index: 3; } article.style2 .title { bottom: 0; left: 0; margin-left: 50px; width: 100%; height: 30px; background: rgba(0, 85, 150, .75); font-family: 'Oswald'; font-style: normal; font-size: 12px; text-align: left; padding: 6px; color: #fff; transition: background .4s ease-in-out; } article.style2:hover .title { background: rgba(0, 85, 150, 1); } article.style2 .share { font-family: 'Oswald'; position: absolute; right: -70px; top: -28px; padding: 2px; width: 70px; font-size: 14px; transition: all .2s ease-in-out; color: #fff; background: rgba(0, 85, 150, 1); } article.style2 .share i { margin: 5px; font-size: 15px; } article.style2:hover .share { right: 0; } article.style2 .share:hover { color: #faA634; } article.style2 .info { bottom: 0; left: 0; width: 100%; max-height: 0; background: #faA634; text-align: left; overflow: hidden; transition: max-height .3s ease-in-out, color .4s ease-in-out; } article.style2:hover .info { max-height: 75px; color: #fff; } article.style2 .info p { padding: 5px; font-family: sans-serif; font-style: normal; font-size: 12px; color: #fff; } .newsbottom { position: fixed; z-index: 1000; bottom: 0; height: 80px; width: 100%; pointer-events: none; background: rgba(0, 0, 0, 0); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.43) 57%, rgba(0, 0, 0, 0.54) 71%, rgba(0, 0, 0, 0.57) 75%, rgba(0, 0, 0, 0.9) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(57%, rgba(0, 0, 0, 0.43)), color-stop(71%, rgba(0, 0, 0, 0.54)), color-stop(75%, rgba(0, 0, 0, 0.57)), color-stop(100%, rgba(0, 0, 0, 0.9))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.43) 57%, rgba(0, 0, 0, 0.54) 71%, rgba(0, 0, 0, 0.57) 75%, rgba(0, 0, 0, 0.9) 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.43) 57%, rgba(0, 0, 0, 0.54) 71%, rgba(0, 0, 0, 0.57) 75%, rgba(0, 0, 0, 0.9) 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.43) 57%, rgba(0, 0, 0, 0.54) 71%, rgba(0, 0, 0, 0.57) 75%, rgba(0, 0, 0, 0.9) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.43) 57%, rgba(0, 0, 0, 0.54) 71%, rgba(0, 0, 0, 0.57) 75%, rgba(0, 0, 0, 0.9) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0); } .newsbottom .to-top { position: absolute; right: 15px; bottom: 15px; width: 40px; height: 40px; background: rgb(0, 85, 150); pointer-events: all; cursor: pointer; } .newsbottom .to-top i { color: #fff; font-size: 20px; margin: 10px; } @media (max-width: 650px) { .col-xxs-12 { width: 100%; } .hidden-xxs { display: none; } article.style1:hover .info, article.style2:hover .info { max-height: 0px; } article img { filter: grayscale(0%); } article.style1:hover img, article.style2:hover img{ width: 100%; margin: 0 0 0 0; } article.style2 .share { right: 0; } } @media (max-width:768px) { .archive #active-article { display: none; } } @media (max-width: 992px) { ul.newslinks { background: rgb(0, 85, 150); padding: 0 15px; max-height: 35px; overflow: hidden; transition: max-height .3s ease-in-out; position: absolute; right: 90px; z-index: 10000; } .newslinks a { float: none; background: rgb(0, 85, 150); padding: 0 0; color: #fff; font-family: 'Abel'; font-size: 16px; height: 35px; position: relative; transition: color .3s ease-in-out; line-height: 35px; } ul.newslinks:hover { max-height: 250px; } .newslinks a.more-links { display: block; } .newslinks a.more-links:hover { color: #fff; } .newslinks a.more-links:after { display: none; } nav .searchnav.opened { height: 70px; } nav .searchnav ul { float: left; width: 100%; } nav .searchnav li.search-field { width: 100%; } nav .searchnav li.close-search { position: absolute; right: 12px; } nav .searchnav li.search-field input { width: 100%; } } @media (max-width: 1200px) { } @media (max-width: 1600px) { }
$(function() { $('.to-top').click(function() { $('html,body').animate({ 'scrollTop': 0 }, 500); }); $('.newsnav .search').click(function() { $('.searchnav, .archive, body, html').addClass('opened') }); $('.searchnav .close-search').click(function() { $('.searchnav, .archive, body, html').removeClass('opened') }); $('img').load(function(){ $(this).addClass('show') }); }); /*! Lazy Load 1.9.1 - MIT license - Copyright 2010-2013 Mika Tuupola */ ! function(a, b, c, d) { var e = a(b); a.fn.lazyload = function(f) { function g() { var b = 0; i.each(function() { var c = a(this); if (!j.skip_invisible || c.is(":visible")) if (a.abovethetop(this, j) || a.leftofbegin(this, j)); else if (a.belowthefold(this, j) || a.rightoffold(this, j)) { if (++b > j.failure_limit) return !1 } else c.trigger("appear"), b = 0 }) } var h, i = this, j = { threshold: 0, failure_limit: 0, event: "scroll", effect: "show", container: b, data_attribute: "original", skip_invisible: !0, appear: null, load: null, placeholder: "" }; return f && (d !== f.failurelimit && (f.failure_limit = f.failurelimit, delete f.failurelimit), d !== f.effectspeed && (f.effect_speed = f.effectspeed, delete f.effectspeed), a.extend(j, f)), h = j.container === d || j.container === b ? e : a(j.container), 0 === j.event.indexOf("scroll") && h.bind(j.event, function() { return g() }), this.each(function() { var b = this, c = a(b); b.loaded = !1, (c.attr("src") === d || c.attr("src") === !1) && c.is("img") && c.attr("src", j.placeholder), c.one("appear", function() { if (!this.loaded) { if (j.appear) { var d = i.length; j.appear.call(b, d, j) } a("<img />").bind("load", function() { var d = c.attr("data-" + j.data_attribute); c.hide(), c.is("img") ? c.attr("src", d) : c.css("background-image", "url('" + d + "')"), c[j.effect](j.effect_speed), b.loaded = !0; var e = a.grep(i, function(a) { return !a.loaded }); if (i = a(e), j.load) { var f = i.length; j.load.call(b, f, j) } }).attr("src", c.attr("data-" + j.data_attribute)) } }), 0 !== j.event.indexOf("scroll") && c.bind(j.event, function() { b.loaded || c.trigger("appear") }) }), e.bind("resize", function() { g() }), /(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion) && e.bind("pageshow", function(b) { b.originalEvent && b.originalEvent.persisted && i.each(function() { a(this).trigger("appear") }) }), a(c).ready(function() { g() }), this }, a.belowthefold = function(c, f) { var g; return g = f.container === d || f.container === b ? (b.innerHeight ? b.innerHeight : e.height()) + e.scrollTop() : a(f.container).offset().top + a(f.container).height(), g <= a(c).offset().top - f.threshold }, a.rightoffold = function(c, f) { var g; return g = f.container === d || f.container === b ? e.width() + e.scrollLeft() : a(f.container).offset().left + a(f.container).width(), g <= a(c).offset().left - f.threshold }, a.abovethetop = function(c, f) { var g; return g = f.container === d || f.container === b ? e.scrollTop() : a(f.container).offset().top, g >= a(c).offset().top + f.threshold + a(c).height() }, a.leftofbegin = function(c, f) { var g; return g = f.container === d || f.container === b ? e.scrollLeft() : a(f.container).offset().left, g >= a(c).offset().left + f.threshold + a(c).width() }, a.inviewport = function(b, c) { return !(a.rightoffold(b, c) || a.leftofbegin(b, c) || a.belowthefold(b, c) || a.abovethetop(b, c)) }, a.extend(a.expr[":"], { "below-the-fold": function(b) { return a.belowthefold(b, { threshold: 0 }) }, "above-the-top": function(b) { return !a.belowthefold(b, { threshold: 0 }) }, "right-of-screen": function(b) { return a.rightoffold(b, { threshold: 0 }) }, "left-of-screen": function(b) { return !a.rightoffold(b, { threshold: 0 }) }, "in-viewport": function(b) { return a.inviewport(b, { threshold: 0 }) }, "above-the-fold": function(b) { return !a.belowthefold(b, { threshold: 0 }) }, "right-of-fold": function(b) { return a.rightoffold(b, { threshold: 0 }) }, "left-of-fold": function(b) { return !a.rightoffold(b, { threshold: 0 }) } }) }(jQuery, window, document); $(function() { $("img.lazy").lazyload(); });

Related: See More


Questions / Comments: