Update index.html to add show/hide mechanism
This commit is contained in:
Jason Williams
parent
098edcceb5
commit
768bed6769
179
www/index.html
179
www/index.html
@ -7,51 +7,17 @@
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/css/bootstrap.min.css" integrity="sha512-CpIKUSyh9QX2+zSdfGP+eWLx23C8Dj9/XmHjZY2uDtfkdLGo0uY12jgcnkX9vXOgYajEKb/jiw67EYm+kBf+6g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<style type="text/css">
|
||||
html, body { height: 100%; }
|
||||
.col {min-height: 50vh;}
|
||||
.container-fluid { width: 100vw; overflow: hidden; }
|
||||
.col { height: 0; min-height: 50vh; }
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.col {min-height: 100vh;}
|
||||
@media ( min-width: 992px ) {
|
||||
.row { width: 200vw; position: relative; left: -50vw; }
|
||||
.col { min-height: 100vh; }
|
||||
}
|
||||
/* * {margin: 0; border: 0; padding: 0; font-family: 'Source Sans Pro', sans-serif; font-weight: 300;}
|
||||
html, body {height: 100%; min-height: 100%;}
|
||||
body {background-color: #333333;}
|
||||
#view {width: 100%; height: 100%; overflow-x: hidden;}
|
||||
|
||||
#container {width: 100%; height: 100%; position: relative; left: -50%;}
|
||||
#container.openjason {left: 0;}
|
||||
#container.openflo {left: -100%;}
|
||||
|
||||
.frame {position: absolute; width: 50%; height: 100%; text-align: center;}
|
||||
|
||||
.info {position: absolute; width: 50%; font-size: 24px; height: 100%; min-height: 100%; overflow: hidden;}
|
||||
.info.open {height: auto;}
|
||||
|
||||
#infojason {left: 0; text-align: right; background-color: #162840; color: #8699B1;}
|
||||
#framejason {left: 50%; background-color: #DAE5E1;}
|
||||
#frameflo {left: 100%; background-color: #601F22;}
|
||||
#infoflo {left: 150%; text-align: left; background-color: #CCCCCC; color: #555555;}
|
||||
|
||||
.info p {margin: 30px;}
|
||||
.info ul {margin: 30px; list-style-type: none;}
|
||||
.info ul li {line-height: 40px;}
|
||||
|
||||
.frame .profile {position: absolute; top: 75px; bottom: 0; left: 0; right: 0; margin: auto; height: 200px; width: 100%;}
|
||||
.frame.open img {width: 80%; max-width: 150px;}
|
||||
|
||||
.frame div.closelink {display: none; position: absolute; top: 20px; left: 0; right: 0; font-size: 24px;}
|
||||
.frame.open div.closelink {display: block;}
|
||||
|
||||
#framejason a {text-decoration: none; color: #000000;}
|
||||
#frameflo a {text-decoration: none; color: #FFFFFF;}
|
||||
|
||||
#infojason a {color: #929FB1;}
|
||||
#infoflo a {color: #333333;}
|
||||
|
||||
#container {
|
||||
-webkit-transition: all 0.3s ease;
|
||||
-moz-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
} */
|
||||
#info-jason { background-color: #FF0000; }
|
||||
#info-flo { background-color: #00FF00; }
|
||||
#back { position: fixed; top: 0; right: 0; }
|
||||
</style>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/js/bootstrap.min.js" integrity="sha512-5BqtYqlWfJemW5+v+TZUs22uigI8tXeVah5S/1Z6qBLVO7gakAOtkOzUtgq6dsIo5c0NJdmGPs0H9I+2OHUHVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
@ -59,65 +25,90 @@
|
||||
<script type="text/javascript">
|
||||
$(() => {
|
||||
console.log('Hello, world!')
|
||||
|
||||
// Handle clicks to open a profile
|
||||
$('a.openlink').click(function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// If the viewport width is at least "large"
|
||||
if ($(window).width() >= 992) {
|
||||
$('#row').animate({
|
||||
left: $(this).attr('data-pos')
|
||||
}, {
|
||||
duration: 300,
|
||||
queue: false
|
||||
})
|
||||
|
||||
$('.info').css('min-height', 0)
|
||||
$('#info-' + $(this).attr('data-person')).css('min-height', '100vh')
|
||||
}
|
||||
|
||||
// If the viewport width is smaller
|
||||
else {
|
||||
$('#row').css('left', $(this).attr('data-pos'))
|
||||
$('.info').animate({
|
||||
minHeight: '0'
|
||||
}, {
|
||||
duration: 300,
|
||||
queue: false
|
||||
})
|
||||
$('#info-' + $(this).attr('data-person')).animate({
|
||||
minHeight: '100vh'
|
||||
}, {
|
||||
duration: 300,
|
||||
queue: false
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// Handle clicks to close a profile
|
||||
$('a.closelink').click(function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// If the viewport width is at least "large"
|
||||
if ($(window).width() >= 992) {
|
||||
$('#row').animate({
|
||||
left: $(this).attr('data-pos')
|
||||
}, {
|
||||
duration: 300,
|
||||
queue: false
|
||||
})
|
||||
|
||||
$('.info').css('min-height', '100vh')
|
||||
}
|
||||
|
||||
// If the viewport width is smaller
|
||||
else {
|
||||
$('#row').css('left', $(this).attr('data-pos'))
|
||||
$('.info').animate({
|
||||
minHeight: '50vh'
|
||||
}, {
|
||||
duration: 300,
|
||||
queue: false
|
||||
})
|
||||
}
|
||||
})
|
||||
});
|
||||
// $(document).ready(function() {
|
||||
// $('a.openlink, a.closelink').click(function(e) {
|
||||
// e.preventDefault();
|
||||
// });
|
||||
//
|
||||
// $('div.frame').click(function() {
|
||||
// if ($('#container').hasClass('open') == false) {
|
||||
// p = $(this).attr('data-person');
|
||||
// $('.frame.' + p + ', .info.' + p).addClass('open');
|
||||
// $('#container').addClass('open open' + p);
|
||||
// if (window.location.hostname == 'www.jnf.me') ga('send', 'pageview', {'page': '/' + p });
|
||||
// } else {
|
||||
// $('.frame, .info, #container').removeClass('open');
|
||||
// $('#container').removeClass('openjason openflo');
|
||||
// }
|
||||
// });
|
||||
//
|
||||
// $('a.outbound').click(function(e) {
|
||||
// if (window.location.hostname == 'www.jnf.me') {
|
||||
// e.preventDefault();
|
||||
// trURL = $(this).attr('data-track');
|
||||
// nvURL = $(this).attr('href');
|
||||
//
|
||||
// ga('send', 'event', {
|
||||
// 'eventCategory': 'extlink',
|
||||
// 'eventAction': trURL.split('/')[1],
|
||||
// 'eventLabel': trURL.split('/')[2],
|
||||
// 'nonInteraction': 1,
|
||||
// 'hitCallback': function() {
|
||||
// $('.frame, .info').removeClass('open');
|
||||
// $('#container').removeClass('openjason openflo');
|
||||
// location.href = nvURL;
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
//
|
||||
// if (window.location.hostname == 'www.jnf.me') {
|
||||
// (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
// (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
// m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
// })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
//
|
||||
// ga('create', 'UA-52787536-2', 'auto');
|
||||
// ga('send', 'pageview');
|
||||
// }
|
||||
// });
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div id="infojason" class="col col-12 col-lg-6">
|
||||
Jason
|
||||
<div id="row" class="row">
|
||||
<div id="bigimage-jason" class="col col-lg-3 d-none d-lg-block">
|
||||
Jason Image
|
||||
</div>
|
||||
<div id="infoflo" class="col col-12 col-lg-6">
|
||||
Flo
|
||||
<div id="info-jason" class="col col-12 col-lg-3 info">
|
||||
<a href="/jason" class="openlink" data-person="jason" data-pos="0vw">Jason Info</a>
|
||||
</div>
|
||||
<div id="info-flo" class="col col-12 col-lg-3 info">
|
||||
<a href="/flo" class="openlink" data-person="flo" data-pos="-100vw">Flo Info</a>
|
||||
</div>
|
||||
<div id="bigimage-flo" class="col col-lg-3 d-none d-lg-block">
|
||||
Flo Image
|
||||
</div>
|
||||
</div>
|
||||
<div id="back">
|
||||
<a href="/" class="closelink" data-pos="-50vw">BACK</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div id="view">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user