incorporating template's work
parent
908655871a
commit
1543764ae6
@ -0,0 +1,22 @@
|
||||
.fixedsticky {
|
||||
position: -webkit-sticky;
|
||||
position: -moz-sticky;
|
||||
position: -ms-sticky;
|
||||
position: -o-sticky;
|
||||
position: sticky;
|
||||
}
|
||||
/* When position: sticky is supported but native behavior is ignored */
|
||||
.fixedsticky-withoutfixedfixed .fixedsticky-off,
|
||||
.fixed-supported .fixedsticky-off {
|
||||
position: static;
|
||||
}
|
||||
.fixedsticky-withoutfixedfixed .fixedsticky-on,
|
||||
.fixed-supported .fixedsticky-on {
|
||||
position: fixed;
|
||||
}
|
||||
.fixedsticky-dummy {
|
||||
display: none;
|
||||
}
|
||||
.fixedsticky-on + .fixedsticky-dummy {
|
||||
display: block;
|
||||
}
|
||||
@ -0,0 +1,191 @@
|
||||
html, body{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-overflow-scrolling : touch;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
h2 {
|
||||
line-height: 22px;
|
||||
font-size: 16px;
|
||||
font-family: "inconsolata", monospace;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.zwartArea{
|
||||
background-color: black;
|
||||
width: 80%;
|
||||
float: right;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.zwartAreaText{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.zwartAreaFull{
|
||||
margin:0;
|
||||
margin-left: 10%;
|
||||
margin-bottom: 10%;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
width: 80%;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.zwartAreaFull p, h1{
|
||||
padding: 15px;
|
||||
font-weight: normal;
|
||||
font-size: 32px;
|
||||
line-height: 1.3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.colophon, .highlight{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sidebarBorder {
|
||||
border-right: 3px solid white;
|
||||
}
|
||||
|
||||
#sideBarDescInfo{
|
||||
border-bottom: 3px solid white;
|
||||
/*height: 60px;*/
|
||||
}
|
||||
|
||||
#sideBarDescInner p:first-of-type{
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#sideBarDescInner p{
|
||||
border-bottom: 3px double white;
|
||||
}
|
||||
|
||||
#sidebarInner{
|
||||
display: block;
|
||||
}
|
||||
|
||||
#sidebarInner *{
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
#sidebar {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.sidebarBorderLeft {
|
||||
border-left: 3px solid white;
|
||||
}
|
||||
|
||||
#sideBarDescInner a,
|
||||
#sideBarDescInner a:hover,
|
||||
#sideBarDescInner a:active,
|
||||
#sideBarDescInner a:visited{
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebarMobile {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#filter{
|
||||
border-bottom: 3px solid white;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#filter a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.project {
|
||||
width: 60%;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.project p {
|
||||
line-height: 1.3;
|
||||
font-size: 25px;
|
||||
padding: 10px;
|
||||
font-family: 'texgyreheroscnbold';
|
||||
}
|
||||
|
||||
.project p a {
|
||||
color: white;
|
||||
border-bottom: 3px double white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.project img {
|
||||
padding: 10px;
|
||||
max-width: 600px;
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width:1600px){
|
||||
|
||||
.project {
|
||||
width: 70%;
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
.project p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#sideBarDescInner p, #sideBarDescInner h2 {
|
||||
margin-bottom: 5px;
|
||||
padding-bottom: 5px;
|
||||
line-height: 21px;
|
||||
font-size: 15px;
|
||||
font-family: "inconsolata", monospace;
|
||||
border-bottom: 3px double white;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:1280px){
|
||||
|
||||
.project {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px){
|
||||
|
||||
#sideBarDescInner p {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
#sideBarDescInner p:first-of-type {
|
||||
border-bottom: 3px double white;
|
||||
}
|
||||
|
||||
#sideBarDescInner {
|
||||
border-bottom: 3px solid white;
|
||||
}
|
||||
|
||||
.project {
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.sidebarBorderLeft {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.sidebarMobile{
|
||||
-webkit-box-shadow: inset 0px -3px 0px 0px white;
|
||||
-moz-box-shadow: inset 0px -3px 0px 0px white;
|
||||
box-shadow: inset 0px -3px 0px 0px white;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
@font-face {
|
||||
font-family: 'texgyreheroscnbold';
|
||||
src: url('texgyreheroscn-bold-webfont.eot');
|
||||
src: url('texgyreheroscn-bold-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('texgyreheroscn-bold-webfont.woff') format('woff'),
|
||||
url('texgyreheroscn-bold-webfont.ttf') format('truetype'),
|
||||
url('texgyreheroscn-bold-webfont.svg#texgyreheroscnbold') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'texgyreheroscnregular';
|
||||
src: url('texgyreheroscn-regular-webfont.eot');
|
||||
src: url('texgyreheroscn-regular-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('texgyreheroscn-regular-webfont.woff') format('woff'),
|
||||
url('texgyreheroscn-regular-webfont.ttf') format('truetype'),
|
||||
url('texgyreheroscn-regular-webfont.svg#texgyreheroscnregular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,32 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
width="58.438751"
|
||||
height="54.271461"
|
||||
id="svg3014">
|
||||
<defs
|
||||
id="defs3016" />
|
||||
<metadata
|
||||
id="metadata3019">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<path
|
||||
d="m 34.6875,23.541 c -4.68625,0 -15.9375,0 -15.9375,0 l 0,-12.291 c 0,0 11.875,0 15.9375,0 4.0625,0 5.93875,3.54 5.93875,6.145 0,2.605 -1.88875,6.146 -5.93875,6.146 z M 42.605,0 C 38.43875,0 0,0 0,0 l 0,54.271463 18.75,0 0,-20.269088 c 0,0 16.0425,0 23.855,0 6.45875,0 15.83375,-4.915 15.83375,-17.023875 C 58.43875,3.54 49.68875,0 42.605,0"
|
||||
id="path16"
|
||||
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
@ -0,0 +1,66 @@
|
||||
/*! Fixedfixed: a CSS position:fixed qualifier. (c)2012 @scottjehl, Filament Group, Inc. Dual license: MIT and/or GPLv2 */
|
||||
(function( w, undefined ){
|
||||
|
||||
var htmlclass = "fixed-supported",
|
||||
el = w.document.createElement( "div" ),
|
||||
ua = w.navigator.userAgent,
|
||||
docEl = w.document.documentElement;
|
||||
|
||||
// fix the test element
|
||||
el.style.position = "fixed";
|
||||
el.style.top = 0;
|
||||
|
||||
// support test
|
||||
function checkFixed(){
|
||||
|
||||
var scroll = "scrollTop" in w.document.body ? w.document.body.scrollTop : docEl.scrollTop;
|
||||
|
||||
// only run test if there's a scroll we can compare
|
||||
if( scroll !== undefined && scroll > 0 && w.document.body ){
|
||||
|
||||
w.document.body.insertBefore( el, w.document.body.firstChild );
|
||||
|
||||
if( !el.getBoundingClientRect || el.getBoundingClientRect().top !== 0 ){
|
||||
// Fixed is not working or can't be tested
|
||||
docEl.className = docEl.className.replace( htmlclass, "" );
|
||||
}
|
||||
|
||||
// remove the test element
|
||||
w.document.body.removeChild( el );
|
||||
|
||||
// unbind the handlers
|
||||
if( w.removeEventListener ){
|
||||
w.removeEventListener( "scroll", checkFixed, false );
|
||||
}
|
||||
else{
|
||||
w.detachEvent( "onscroll", checkFixed );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// if a particular UA is known to return false results with this feature test, try and avoid that UA here.
|
||||
if(
|
||||
// Android 2.1, 2.2, 2.5, and 2.6 Webkit
|
||||
!( ua.match( /Android 2\.[1256]/ ) && ua.indexOf( "AppleWebKit") > -1 ) ||
|
||||
// Opera Mobile less than version 11.0 (7458)
|
||||
!( ua.match( /Opera Mobi\/([0-9]+)/ ) && RegExp.$1 < 7458 ) ||
|
||||
// Opera Mini
|
||||
!( w.operamini && ({}).toString.call( w.operamini ) === "[object OperaMini]" ) ||
|
||||
// Firefox Mobile less than version 6
|
||||
!( ua.match( /Fennec\/([0-9]+)/ ) && RegExp.$1 < 6 )
|
||||
// If necessary, add the other untestable browsers here...
|
||||
){
|
||||
//add the HTML class for now.
|
||||
docEl.className += " " + htmlclass;
|
||||
|
||||
// bind to scroll event so we can test and potentially degrade
|
||||
if( w.addEventListener ){
|
||||
w.addEventListener( "scroll", checkFixed, false );
|
||||
}
|
||||
else{
|
||||
w.attachEvent( "onscroll", checkFixed );
|
||||
}
|
||||
}
|
||||
|
||||
w.FixedFixed = checkFixed;
|
||||
}( this ));
|
||||
@ -0,0 +1,200 @@
|
||||
;(function( win, $ ) {
|
||||
|
||||
function featureTest( property, value, noPrefixes ) {
|
||||
// Thanks Modernizr! https://github.com/phistuck/Modernizr/commit/3fb7217f5f8274e2f11fe6cfeda7cfaf9948a1f5
|
||||
var prop = property + ':',
|
||||
el = document.createElement( 'test' ),
|
||||
mStyle = el.style;
|
||||
|
||||
if( !noPrefixes ) {
|
||||
mStyle.cssText = prop + [ '-webkit-', '-moz-', '-ms-', '-o-', '' ].join( value + ';' + prop ) + value + ';';
|
||||
} else {
|
||||
mStyle.cssText = prop + value;
|
||||
}
|
||||
return mStyle[ property ].indexOf( value ) !== -1;
|
||||
}
|
||||
|
||||
function getPx( unit ) {
|
||||
return parseInt( unit, 10 ) || 0;
|
||||
}
|
||||
|
||||
var uniqueIdCounter = 0;
|
||||
|
||||
var S = {
|
||||
classes: {
|
||||
plugin: 'fixedsticky',
|
||||
active: 'fixedsticky-on',
|
||||
inactive: 'fixedsticky-off',
|
||||
clone: 'fixedsticky-dummy',
|
||||
withoutFixedFixed: 'fixedsticky-withoutfixedfixed'
|
||||
},
|
||||
keys: {
|
||||
offset: 'fixedStickyOffset',
|
||||
position: 'fixedStickyPosition',
|
||||
id: 'fixedStickyId'
|
||||
},
|
||||
tests: {
|
||||
sticky: featureTest( 'position', 'sticky' ),
|
||||
fixed: featureTest( 'position', 'fixed', true )
|
||||
},
|
||||
// Thanks jQuery!
|
||||
getScrollTop: function() {
|
||||
var prop = 'pageYOffset',
|
||||
method = 'scrollTop';
|
||||
return win ? (prop in win) ? win[ prop ] :
|
||||
win.document.documentElement[ method ] :
|
||||
win.document.body[ method ];
|
||||
},
|
||||
bypass: function() {
|
||||
// Check native sticky, check fixed and if fixed-fixed is also included on the page and is supported
|
||||
return ( S.tests.sticky && !S.optOut ) ||
|
||||
!S.tests.fixed ||
|
||||
win.FixedFixed && !$( win.document.documentElement ).hasClass( 'fixed-supported' );
|
||||
},
|
||||
update: function( el ) {
|
||||
if( !el.offsetWidth ) { return; }
|
||||
|
||||
|
||||
|
||||
var $el = $( el ),
|
||||
height = $el.outerHeight(),
|
||||
initialOffset = $el.data( S.keys.offset ),
|
||||
scroll = S.getScrollTop(),
|
||||
isAlreadyOn = $el.is( '.' + S.classes.active ),
|
||||
toggle = function( turnOn ) {
|
||||
$el[ turnOn ? 'addClass' : 'removeClass' ]( S.classes.active )
|
||||
[ !turnOn ? 'addClass' : 'removeClass' ]( S.classes.inactive );
|
||||
},
|
||||
viewportHeight = $( window ).height(),
|
||||
position = $el.data( S.keys.position ),
|
||||
skipSettingToFixed,
|
||||
elTop,
|
||||
elBottom,
|
||||
$parent = $el.parent(),
|
||||
parentOffset = $parent.offset().top,
|
||||
parentHeight = $parent.outerHeight();
|
||||
|
||||
if( initialOffset === undefined ) {
|
||||
|
||||
initialOffset = $el.offset().top;
|
||||
$el.data( S.keys.offset, initialOffset );
|
||||
$el.after( $( '<div>' ).addClass( S.classes.clone ).height( height ) );
|
||||
}
|
||||
|
||||
if( !position ) {
|
||||
// Some browsers require fixed/absolute to report accurate top/left values.
|
||||
skipSettingToFixed = $el.css( 'top' ) !== 'auto' || $el.css( 'bottom' ) !== 'auto';
|
||||
|
||||
if( !skipSettingToFixed ) {
|
||||
$el.css( 'position', 'fixed' );
|
||||
}
|
||||
|
||||
position = {
|
||||
top: $el.css( 'top' ) !== 'auto',
|
||||
bottom: $el.css( 'bottom' ) !== 'auto'
|
||||
};
|
||||
|
||||
if( !skipSettingToFixed ) {
|
||||
$el.css( 'position', '' );
|
||||
}
|
||||
|
||||
$el.data( S.keys.position, position );
|
||||
}
|
||||
|
||||
function isFixedToTop() {
|
||||
var offsetTop = scroll + elTop;
|
||||
|
||||
// Initial Offset Top
|
||||
return initialOffset < offsetTop &&
|
||||
// Container Bottom
|
||||
offsetTop + height <= parentOffset + parentHeight;
|
||||
}
|
||||
|
||||
function isFixedToBottom() {
|
||||
// Initial Offset Top + Height
|
||||
return initialOffset + ( height || 0 ) > scroll + viewportHeight - elBottom &&
|
||||
// Container Top
|
||||
scroll + viewportHeight - elBottom >= parentOffset + ( height || 0 );
|
||||
}
|
||||
|
||||
elTop = getPx( $el.css( 'top' ) );
|
||||
elBottom = getPx( $el.css( 'bottom' ) );
|
||||
|
||||
if( position.top && isFixedToTop() || position.bottom && isFixedToBottom() ) {
|
||||
if( !isAlreadyOn ) {
|
||||
toggle( true );
|
||||
sidebarOn();
|
||||
}
|
||||
} else {
|
||||
if( isAlreadyOn ) {
|
||||
toggle( false );
|
||||
sidebarOff();
|
||||
}
|
||||
}
|
||||
},
|
||||
destroy: function( el ) {
|
||||
var $el = $( el );
|
||||
if (S.bypass()) {
|
||||
return $el;
|
||||
}
|
||||
|
||||
return $el.each(function() {
|
||||
var $this = $( this );
|
||||
var id = $this.data( S.keys.id );
|
||||
$( win ).unbind( '.fixedsticky' + id );
|
||||
|
||||
$this
|
||||
.removeData( [ S.keys.offset, S.keys.position, S.keys.id ] )
|
||||
.removeClass( S.classes.active )
|
||||
.removeClass( S.classes.inactive )
|
||||
.next( '.' + S.classes.clone ).remove();
|
||||
});
|
||||
},
|
||||
init: function( el ) {
|
||||
var $el = $( el );
|
||||
|
||||
if( S.bypass() ) {
|
||||
return $el;
|
||||
}
|
||||
|
||||
return $el.each(function() {
|
||||
var _this = this;
|
||||
var id = uniqueIdCounter++;
|
||||
$( this ).data( S.keys.id, id );
|
||||
|
||||
$( win ).bind( 'scroll.fixedsticky' + id, function() {
|
||||
S.update( _this );
|
||||
}).trigger( 'scroll.fixedsticky' + id );
|
||||
|
||||
$( win ).bind( 'resize.fixedsticky' + id , function() {
|
||||
if( $el.is( '.' + S.classes.active ) ) {
|
||||
S.update( _this );
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
win.FixedSticky = S;
|
||||
|
||||
// Plugin
|
||||
$.fn.fixedsticky = function( method ) {
|
||||
if ( typeof S[ method ] === 'function') {
|
||||
return S[ method ].call( S, this);
|
||||
|
||||
} else if ( typeof method === 'object' || ! method ) {
|
||||
return S.init.call( S, this );
|
||||
|
||||
} else {
|
||||
throw new Error( 'Method `' + method + '` does not exist on jQuery.fixedsticky' );
|
||||
}
|
||||
};
|
||||
|
||||
// Add fallback when fixed-fixed is not available.
|
||||
if( !win.FixedFixed ) {
|
||||
$( win.document.documentElement ).addClass( S.classes.withoutFixedFixed );
|
||||
}
|
||||
|
||||
})( window, jQuery );
|
||||
|
||||
// FixedSticky.tests.sticky = false;
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,236 @@
|
||||
|
||||
|
||||
var hashOptions;
|
||||
hashOptions = window.location.hash.replace('#filters', '')
|
||||
var is_chrome = /chrome/i.test( navigator.userAgent );
|
||||
var slideLock = false;
|
||||
|
||||
|
||||
var isMobile = {
|
||||
Android: function() {
|
||||
return navigator.userAgent.match(/Android/i);
|
||||
},
|
||||
BlackBerry: function() {
|
||||
return navigator.userAgent.match(/BlackBerry/i);
|
||||
},
|
||||
iOS: function() {
|
||||
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
|
||||
},
|
||||
Opera: function() {
|
||||
return navigator.userAgent.match(/Opera Mini/i);
|
||||
},
|
||||
Windows: function() {
|
||||
return navigator.userAgent.match(/IEMobile/i);
|
||||
},
|
||||
any: function() {
|
||||
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
|
||||
}
|
||||
};
|
||||
|
||||
function windowHeightDivs(){
|
||||
|
||||
if(!isMobile.any()){
|
||||
$("#logoWrap").css({"margin-top":$(window).height()-$("#logoWrap").outerHeight()-10+"px"})
|
||||
}
|
||||
$(".zwartArea").css({
|
||||
"min-height": $(window).height()+"px"
|
||||
})
|
||||
|
||||
$(".isotope").css({
|
||||
"min-height": $(window).height()+200+"px"
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function stickyElements(){
|
||||
$('#filter').fixedsticky();
|
||||
}
|
||||
|
||||
|
||||
function initIsotope(){
|
||||
var $container = $('.isotope').isotope({
|
||||
masonry: {
|
||||
columnWidth: '.grid-sizer'
|
||||
},
|
||||
transitionDuration: '0.2s',
|
||||
filter: hashOptions,
|
||||
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// function sidebarOn(){
|
||||
// if($(window).width()>768){
|
||||
// // $("#sidebarInner").slideDown(400)
|
||||
// // $("#sidebar").addClass("sidebarBorder");
|
||||
// // alert('slideDown')
|
||||
// // $('#filter').fixedsticky();
|
||||
// }
|
||||
// }
|
||||
|
||||
function sidebarOff(){
|
||||
if($(window).width()>768){
|
||||
$(".closeSidebar").css('display','none')
|
||||
// if($(document).scrollTop()>$('#zwartIntro').height()-1 && $(document).scrollTop()<$("#section03").offset().top){
|
||||
$("#sidebarInner").slideDown(0)
|
||||
// }
|
||||
} else {
|
||||
$(".closeSidebar").css('display','block')
|
||||
}
|
||||
}
|
||||
|
||||
function ifSticky(){
|
||||
if (!$("#filter").hasClass('fixedsticky-on')){
|
||||
|
||||
if($(document).scrollTop()>$('#zwartIntro').height()-1 && $(document).scrollTop()<$("#section03").offset().top){
|
||||
|
||||
if(is_chrome){$('#filter').css({'position':'fixed'})}
|
||||
if($(window).width()<768){
|
||||
$(".closeSidebar").css('display','block')
|
||||
if(slideLock == false){
|
||||
$("#sidebarInner").slideDown(0)
|
||||
}
|
||||
}else{
|
||||
$("#sidebarInner").slideDown(200)
|
||||
}
|
||||
|
||||
|
||||
} else{
|
||||
if(is_chrome){$('#filter').css({'position':''})}
|
||||
if($(window).width()<768){
|
||||
$(".closeSidebar").css('display','none')
|
||||
|
||||
if(slideLock == false){
|
||||
$("#sidebarInner").slideUp(0)
|
||||
}
|
||||
|
||||
}else{
|
||||
$("#sidebarInner").slideUp(200)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$(".closeSidebar").click(function(){
|
||||
$("#sidebarInner").slideToggle()
|
||||
|
||||
if(slideLock == false){
|
||||
slideLock = true
|
||||
$(".closeSidebar").html('<img src="./arrowUpW.svg"/>')
|
||||
}else{
|
||||
slideLock = false
|
||||
$(".closeSidebar").html('<img src="./arrowDownW.svg"/>')
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
function toggleDescInner(){
|
||||
$("#sideBarDescInnerToggle").on('click', function(){
|
||||
$("#sideBarDescInner").slideToggle()
|
||||
})
|
||||
}
|
||||
|
||||
function initUnderlineFilters(){
|
||||
startfilter = window.location.hash.replace('#filters', '')
|
||||
startfilterArray = startfilter.split(".")
|
||||
startfilterArray.shift()
|
||||
|
||||
startfilterArray.forEach(function(afilter) {
|
||||
$('input.'+afilter+'').next("p").toggleClass("underlineFilter")
|
||||
moveToSide = $('input.'+afilter+'').next("p").outerWidth()
|
||||
$('input.'+afilter+'').parent().next('label').css({"margin-left":moveToSide+"px"})
|
||||
$('input.'+afilter+'').prop('checked', $(this).is(':checked'));
|
||||
$('input.'+afilter+'').prop( "checked", true )
|
||||
|
||||
$("#sideBarDesc").find($("."+afilter)).prependTo("#sideBarDescInner").slideDown(50)
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
function filterByInput(){
|
||||
var $checkboxes = $('.themes input');
|
||||
|
||||
$checkboxes.change( function() {
|
||||
$(document).scrollTop($('#section02').offset().top);
|
||||
$("#sidebarInner").slideDown(400)
|
||||
// $('#pageWrap').scrollTop($("#filter").outerHeight()+$('#pageWrap').scrollTop()+$('#section02').offset().top);
|
||||
// $(document).scrollTop($(document).scrollTop()+$('#section02').offset().top);
|
||||
// setTimeout(function(){
|
||||
// if($("#filter:visible").hasClass('fixedBar')){
|
||||
// $("#sideBarDesc").slideDown(400)
|
||||
// }
|
||||
// }, 300);
|
||||
$('body').css({"opacity":'0'})
|
||||
|
||||
var thisSaved = $(this)
|
||||
function layoutComplete(par01){
|
||||
$('input.'+par01.attr("class")+'').next("p").toggleClass("underlineFilter")
|
||||
$('input.'+par01.attr("class")+'').prop('checked', par01.is(':checked'));
|
||||
|
||||
if ($('input.'+par01.attr("class")+'').next("p").hasClass("underlineFilter")){
|
||||
moveToSide = $('input.'+par01.attr("class")+'').next("p").outerWidth()
|
||||
foundClass=par01.attr("class")
|
||||
$("#sideBarDesc").find($("."+foundClass)).prependTo("#sideBarDescInner").slideDown(50)
|
||||
|
||||
}else{
|
||||
moveToSide = 0
|
||||
foundClass=par01.attr("class")
|
||||
$("#sideBarDesc").find($("."+foundClass)).slideUp(50)
|
||||
}
|
||||
$('input.'+par01.attr("class")+'').parent().next('label').css({"margin-left":moveToSide+"px"})
|
||||
|
||||
|
||||
$('body').css({"opacity":'1'})
|
||||
}
|
||||
|
||||
// $('input.'+$(this).attr("class")+'').next("p").toggleClass("underlineFilter")
|
||||
// $('input.'+$(this).attr("class")+'').prop('checked', $(this).is(':checked'));
|
||||
|
||||
|
||||
var checkboxesCheck = $('.themes input:checked');
|
||||
var exclusives = [];
|
||||
$checkboxes.each( function( i, elem ) {
|
||||
if ( elem.checked ) {
|
||||
exclusives.push( elem.value );
|
||||
}
|
||||
});
|
||||
exclusives = exclusives.join('');
|
||||
|
||||
var filterValue;
|
||||
filterValue = exclusives;
|
||||
location.hash = '#filters'+filterValue
|
||||
hashOptions = window.location.hash.replace('#filters', '')
|
||||
|
||||
$container = $('.isotope').isotope({
|
||||
filter: hashOptions
|
||||
})
|
||||
|
||||
$container.on('layoutComplete', layoutComplete(thisSaved))
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// RUN THE FUNCTIONS
|
||||
|
||||
windowHeightDivs()
|
||||
initIsotope()
|
||||
stickyElements()
|
||||
// initUnderlineFilters()
|
||||
// filterByInput()
|
||||
toggleDescInner()
|
||||
sidebarOff()
|
||||
|
||||
document.onscroll = function() {
|
||||
ifSticky()
|
||||
};
|
||||
|
||||
$( window ).resize(function() {
|
||||
windowHeightDivs()
|
||||
sidebarOff()
|
||||
})
|
||||
@ -1,22 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{title}</title> <!-- Work title will go to here -->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="header">
|
||||
<div id="title"><h1>{title}</h1></div>
|
||||
<div id="creator"><h2>{creator}</h2></div>
|
||||
<div id="date">{date}</div>
|
||||
<div id="website"><a href="{website}">{website}</a></div>
|
||||
<div id="thumbnail"><img src="{thumbnail}" class="" alt="" /></div>
|
||||
<div id="bio">{bio}</div>
|
||||
</div>
|
||||
<div id="body">
|
||||
<div id="description">{description}</div>
|
||||
<div id="extra">{extra}</div>
|
||||
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
|
||||
|
||||
<title>{title}</title>
|
||||
<link href="./css/style.css" rel="stylesheet">
|
||||
<link href="./css/style_projectpage.css" rel="stylesheet">
|
||||
<link href="./fonts/fontstylesheet01.css" rel="stylesheet">
|
||||
<link href="./css/fixedsticky.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="pageWrap">
|
||||
<div id="sidebar">
|
||||
<div id="sidebarInner">
|
||||
<div id="sideBarDesc">
|
||||
<div id="sideBarDescInfo">
|
||||
<p>Tempted by Tomorrow</p>
|
||||
</div>
|
||||
|
||||
<div id="sideBarDescInner">
|
||||
|
||||
<!-- we used h2's and p's instead of divs here, moved {date} and deleted {thumbnail} -->
|
||||
|
||||
<h2 id="creator">{creator}</h2>
|
||||
|
||||
<p id="title">{title} {date}</p>
|
||||
|
||||
<!-- moved up {description} -->
|
||||
|
||||
<div id="description">{description}</div>
|
||||
|
||||
<div id="bio">{bio}</div>
|
||||
|
||||
<p class="hightlightSidebar"><a href="{website}" target="_blank">{website}</a></p>
|
||||
|
||||
<!-- // -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="logoWrap"><img id="logo" src="./img/black_PZI_logo_p.svg"></div>
|
||||
</div>
|
||||
|
||||
<div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
|
||||
<div class="fixedsticky" id="filter" style="top:0;">
|
||||
<div class="themes" id="sortArea">
|
||||
<p>{title}</p>
|
||||
<!--p>PZI: Master Media Design & Communication </p--> <a class="closeSidebar"><img src="./arrowUpW.svg"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- extra -->
|
||||
|
||||
<div id="extra" class="project">
|
||||
<img id="thumnail" src={thumbnail} />
|
||||
{extra}
|
||||
</div>
|
||||
|
||||
<!---->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script src='./js/jquery-2.1.3.min.js'></script>
|
||||
<script src='./js/fixedfixed.js'></script>
|
||||
<script src='./js/fixedsticky.js'></script>
|
||||
<script src='./js/isotope.pkgd.min.js'></script>
|
||||
<script src='./js/imagesloaded.pkgd.min.js'></script>
|
||||
<script src='./js/mainScripts.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue